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

package/dist/collection/components/z-menu-section/index.js

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '4dce34f277ab3c8c41171a15a02fd174c45742cd', open: this.open }, h("button", { key: 'b6c535e87dbb5af8808d7a19556ad116cbcca72b', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'fbbba483ca5fe6d45440c01a89f061565ce641aa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'b4c67b7cada94580b4f5853aaa8cbb9818bece74', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '711c085b5d74affb2c23ebd1acdd774b5903e7e5', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '4fbaa9a39d87fd247d605d32e81f37293671d95b', open: this.open }, h("button", { key: '25b5f34bb741671781fddabe18694a92d19c06c9', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '9ed5d1309acb2f8a17a583e7a96eddc8741da7c2', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '1677b363b4894c04bee3cae53a604baad136236a', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '74f37c1f2850cca5bf7fe756107c6984f3a7dd13', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '8382266ea2f2a3c04beab0d6304a459a5f56a48b', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'eebc09ed6ac159c725b0614bd7ca030699b05b9f', class: {
+        return (h("dialog", { key: 'ff8e8cf9ce5684a8ca081ab2aec3ef1c8824b6ae', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'a422d0d13979d51cd4b48f30077962b7b1cf91d3', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '94c33c53083aafc4607fcb4b9c099c7d02c035b4', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'f605cdc8fd3af1f94fca27de5d4eb088769d592c', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '77d079642e8797ecd131f42dde419964b315858e' }, this.modaltitle && h("h1", { key: '1cf2c6917e03b6a9198ed86e03414191f01ae760', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'dd6b44a5c67c1cb3a76252aa172d12a639d63153', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '8d91575e38810d7b93cb75807d985ffc5689ea67', class: {
+            }, id: this.modalid }, h("header", { key: '0e17ec7ccaa1376b9cdabde14355fc6dcbec4f26', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '09a5a59ca386289939c61e29f79d201454d41165' }, this.modaltitle && h("h1", { key: '0cf7deea5e044b358882ae0e7bfe4502de1318f5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '2fde62ccc507d999ccd4fd83aa369128e97b9b0c', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'e778555f2d7d88a965e454ee1231004da8d293e7', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '3ff48549ece0ec01d7ff6714dbae41998cd64bc2', name: "modalContent" }))), h("div", { key: '08004938884c7984cbf535653e82ce775c559d48', class: {
+            }, id: "modal-content" }, h("slot", { key: 'acee4bb3444264df0b26a465c52f2ee282ccca76', name: "modalContent" }))), h("div", { key: '9abb8e64380030960d5669bec37a7f2f64d78693', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-navigation-tabs/index.js

@@ -221,10 +221,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '5216c71c53d3263870b4d64749554c36dadfdb8c', class: {
+        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'b59fcef70ff51453d679678caabae7f69a3a91d9', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '2f2a9f0630c6f7c340132bfde3c90c2392ea3f07', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'f8e06aaadd56dfd9e1ab068a4a0d5633083b2ca9', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8f1062acbb5616c395cac371d8737660f69c5326' })), h("button", { key: '28342d0ad1c43119862b148b550c57c352d6a07c', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'e975d966cdc0f0f52345bca3cb842cd0672783b8', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '1476969ad9cd71af738c1032fa1b426a31faef9f' }, this.contenticonname && (h("z-icon", { key: '449b25859ae4f501b42d4c4cd0c26cd9dcb1935e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '5b8feced4f05c6e14e6ac7e9a06096db6fd93997', class: "content-container" }, h("div", { key: 'ec6a27aebcc0d60efdb5fd3cb29cc7fddc441331', class: "content-text" }, h("slot", { key: 'd66a3fbf761e5460f0d52c5111b07166c59fa7f4' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '73f5c71a14294c230342ef7382f9ae3fa2b330ce', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'a0be489166ad16faa182adac379ce08ca06317ed', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '254d0f36a6ee1a356506db703658053959020070', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,7 @@ export class ZOffcanvas {
         this.open = false;
         this.transitiondirection = TransitionDirection.LEFT;
         this.skipLoadAnimation = false;
+        this.showBackdrop = true;
         this.skipAnimation = false;
     }
     /**
@@ -66,7 +67,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '0c9caef91e7fc366aeb0bceb20902f220b153dca', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'f3fd979c181a32a8c647f3f6eac1603658696629', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '80493b2714dcfc795c8820c4a6d5e865f0bbb715', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '2512d43345e106c728c782f91e93973a5f55bfe7', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '939b5ea940e96fbcec87ff7e48b6ba578ff0848e', class: "canvas-background", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '52ce71415709ffe342802b789448fe168eef9d3d', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '93173c6176acd24a8f02541b5becd3dfd7f98ac3', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '82b36a24cbf7856d8f8ee17952e0cf733529f7ae', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: 'e5281598686c2d0de459045ceaa81c1c31dbcd22', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'b912144f9bf525114394cd03f84f38f810c8cb29', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -168,6 +170,24 @@ export class ZOffcanvas {
                 "attribute": "skip-load-animation",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the backdrop when the offcanvas is open. Default: true"
+                },
+                "attribute": "show-backdrop",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/z-offcanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (!this.open) {\n      // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    } else {\n      this.handlePageOverflow();\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content z-scrollbar\"\n            role=\"presentation\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (\n          <div\n            class=\"canvas-background\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** Whether to show the backdrop when the offcanvas is open. Default: true */\n  @Prop()\n  showBackdrop = true;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (!this.open) {\n      // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    } else {\n      this.handlePageOverflow();\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content z-scrollbar\"\n            role=\"presentation\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&\n          this.showBackdrop && (\n            <div\n              class=\"backdrop\"\n              onClick={() => (this.open = false)}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-offcanvas/index.stories.js

@@ -27,9 +27,18 @@ const StoryMeta = {
             },
             options: Object.values(TransitionDirection),
         },
+        showBackdrop: {
+            control: {
+                if: {
+                    arg: "variant",
+                    eq: OffCanvasVariant.OVERLAY,
+                },
+            },
+        },
     },
     args: {
         "open": true,
+        "showBackdrop": true,
         "--z-offcanvas--top-space": "0px",
         "--z-offcanvas--container-width": "375px",
     },
@@ -42,6 +51,7 @@ export const OverlayTransitionDirectionRight = {
         .variant=${OffCanvasVariant.OVERLAY}
         .open=${args.open}
         .transitiondirection=${TransitionDirection.RIGHT}
+        .showBackdrop=${args.showBackdrop}
         style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
@@ -64,6 +74,7 @@ export const OverlayTransitionDirectionLeft = {
         .variant=${OffCanvasVariant.OVERLAY}
         .open=${args.open}
         .transitiondirection=${TransitionDirection.LEFT}
+        .showBackdrop=${args.showBackdrop}
         style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
@@ -91,6 +102,7 @@ export const TransitionDirectionUp = {
         .open=${args.open}
         .variant=${OffCanvasVariant.OVERLAY}
         .transitiondirection=${TransitionDirection.UP}
+        .showBackdrop=${args.showBackdrop}
         style="--z-offcanvas--container-height: ${args["--z-offcanvas--container-height"]}"
       >
         <div slot="canvasContent">

package/dist/collection/components/z-offcanvas/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n  CSSVarsArguments<\"z-offcanvas--top-space\" | \"--z-offcanvas--container-width\" | \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n  title: \"ZOffcanvas\",\n  component: \"z-offcanvas\",\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      story: {\n        inline: false,\n        iframeHeight: \"600px\",\n      },\n    },\n  },\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(OffCanvasVariant),\n    },\n    transitiondirection: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(TransitionDirection),\n    },\n  },\n  args: {\n    \"open\": true,\n    \"--z-offcanvas--top-space\": \"0px\",\n    \"--z-offcanvas--container-width\": \"375px\",\n  },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n  \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.RIGHT}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.LEFT}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n    </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n    },\n  },\n  args: {\n    \"--z-offcanvas--container-height\": \"90%\",\n  },\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.OVERLAY}\n        .transitiondirection=${TransitionDirection.UP}\n        style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n    },\n  },\n  args: {\n    transitiondirection: TransitionDirection.RIGHT,\n  },\n  render: (args) =>\n    html`<div\n      class=\"pushcontent-story ${args.transitiondirection}\"\n      id=\"offcanvas-story-container\"\n    >\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.PUSHCONTENT}\n        .transitiondirection=${args.transitiondirection}\n        style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>Offcanvas content</p>\n        </div>\n      </z-offcanvas>\n\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n  CSSVarsArguments<\"z-offcanvas--top-space\" | \"--z-offcanvas--container-width\" | \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n  title: \"ZOffcanvas\",\n  component: \"z-offcanvas\",\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      story: {\n        inline: false,\n        iframeHeight: \"600px\",\n      },\n    },\n  },\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(OffCanvasVariant),\n    },\n    transitiondirection: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(TransitionDirection),\n    },\n    showBackdrop: {\n      control: {\n        if: {\n          arg: \"variant\",\n          eq: OffCanvasVariant.OVERLAY,\n        },\n      },\n    },\n  },\n  args: {\n    \"open\": true,\n    \"showBackdrop\": true,\n    \"--z-offcanvas--top-space\": \"0px\",\n    \"--z-offcanvas--container-width\": \"375px\",\n  },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n  \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.RIGHT}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.LEFT}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n    </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n    },\n  },\n  args: {\n    \"--z-offcanvas--container-height\": \"90%\",\n  },\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.OVERLAY}\n        .transitiondirection=${TransitionDirection.UP}\n        .showBackdrop=${args.showBackdrop}\n        style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n    },\n  },\n  args: {\n    transitiondirection: TransitionDirection.RIGHT,\n  },\n  render: (args) =>\n    html`<div\n      class=\"pushcontent-story ${args.transitiondirection}\"\n      id=\"offcanvas-story-container\"\n    >\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.PUSHCONTENT}\n        .transitiondirection=${args.transitiondirection}\n        style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <p>Offcanvas content</p>\n        </div>\n      </z-offcanvas>\n\n      <div class=\"offcanvas-story-content\">\n        <div class=\"heading-2-sb\">Page content</div>\n        ${DEMO_TEXT}\n      </div>\n    </div>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-offcanvas/styles.css

@@ -17,6 +17,7 @@
   min-width: 100%;
   height: 100%;
   background: var(--color-surface01);
+  transform: translateX(0);
   transition: transform 0.4s ease-out;
 }
 
@@ -73,7 +74,7 @@
   transition: none;
 }
 
-.canvas-background {
+.backdrop {
   z-index: 1000;
   width: 100%;
   height: 100%;
@@ -83,7 +84,7 @@
   transition: opacity 0.4s ease-out;
 }
 
-:host([open]) > .canvas-background {
+:host([open]) > .backdrop {
   opacity: 0.7;
   pointer-events: unset;
 }
@@ -102,8 +103,8 @@
   }
 
   .canvas-container {
-    width: max(var(--z-offcanvas--container-width, 375px), 375px);
-    min-width: 375px;
+    width: var(--z-offcanvas--container-width, 375px);
+    min-width: var(--z-offcanvas--container-width, 375px);
   }
 
   :host([transitiondirection="up"]) > .canvas-container {

package/dist/collection/components/z-panel-elem/index.js

@@ -16,12 +16,12 @@ export class ZPanelElem {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '90afba46bcde1bd3bd27b35c6e5db38ce9071aee', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'd9493560e96ad743ae3ee52be6c9205b6014b8da', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5bd7c14c0083b9fed6e320a4ef4652018abf2762', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '4cbebd354b6b3b56304970aedb0e94e084d49a9f', class: "panel-elem-link" }, h("a", { key: '195ec2e77eac163c65cf746faa114f39618d2abc', class: {
+        return (h("div", { key: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'c11c35e5bff66d382b309fece4bec295abb1a0d4', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '319374f4955314400344ce558486c6afa36ca4f2', class: "panel-elem-desc" }, h("slot", { key: '7e7dcf38991bc7f67ab164e4bac9d20026fa29d9', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -424,7 +424,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '2a5248b521455e8682038aaf42ca9020b6ffb68d', "current-position": this.currentPosition }, h("slot", { key: '4993c751c45e1ff683dc341f9445a30ff2647d44' })));
+        return (h(Host, { key: 'aeb6c7ccabc279af16d9a957e732ad611612589f', "current-position": this.currentPosition }, h("slot", { key: '77fecb1bbfa49e1a8f97c078e7cef01a03420d9c' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/{result-card/z-result-card → z-result-card}/index.js

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import defaultFallbackCover from "../../../assets/images/png/placeholder-cover.png";
 /**
  * @slot tags - slot containing the descriptors for the opera variant
  * @slot volumes - slot containing the volume count to be displayed in the opera variant
@@ -12,24 +11,17 @@ export class ZResultCard {
             this.setTooltipTitle(this.subtitleRef);
         };
         this.renderTitle = () => {
-            const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
-            return (h("div", { class: { "card-title": true, "info-card-title": this.isInfoCard }, ref: (el) => (this.titleRef = el), innerHTML: title }));
+            const TitleTag = this.titleHtmlTag || "div";
+            return (h(TitleTag, { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle));
         };
         this.renderSubtitle = () => {
-            return (h("span", { class: { "card-subtitle": true, "info-card-subtitle": this.isInfoCard }, ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
+            return (h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
         };
         this.renderOperaCard = () => {
-            return (h(Host, { tabIndex: 0 }, h("div", { class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", null, h("div", { class: "z-cover-shadow z-shadow-2" }), h("div", { class: "z-cover-shadow z-shadow-1" }))), h("div", { class: "z-cover-img" }, h("img", { src: this.cover || this.fallbackCover || defaultFallbackCover, alt: "", onError: () => {
-                    if (this.fallbackCover) {
-                        this.cover = this.fallbackCover;
-                    }
-                    else {
-                        this.cover = defaultFallbackCover;
-                    }
-                } })))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
+            return (h(Host, null, h("z-book-cover", { cover: this.cover, fallbackCover: this.fallbackCover, multiple: this.hasMultipleCovers, bordered: true }), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
         };
         this.renderInfoCard = () => {
-            return (h(Host, { tabIndex: 0, class: "info-card" }, h("div", { class: "info-icon-column" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link", width: 18, height: 18 }))), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
+            return (h(Host, { class: "info-card" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link" })), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
         };
         this.cardTitle = undefined;
         this.cardSubtitle = undefined;
@@ -157,7 +149,7 @@ export class ZResultCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The URL of the cover image.\nThis is used to display the cover image of the opera."
+                    "text": "The URL of the cover image of the opera."
                 },
                 "attribute": "cover",
                 "reflect": false
@@ -174,7 +166,7 @@ export class ZResultCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Fallback cover URL"
+                    "text": "[optional] Fallback cover URL."
                 },
                 "attribute": "fallback-cover",
                 "reflect": false
@@ -191,7 +183,7 @@ export class ZResultCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether the card has multiple covers.\nThis is used to apply specific styles when there are multiple covers."
+                    "text": "Whether to show a stack of covers to represent multiple books."
                 },
                 "attribute": "has-multiple-covers",
                 "reflect": false,
@@ -209,7 +201,7 @@ export class ZResultCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether the card is an info page.\nThis can be used to apply specific styles or behaviors for info pages."
+                    "text": "Enables the \"info\" variant of the card."
                 },
                 "attribute": "is-info-card",
                 "reflect": false,
@@ -227,7 +219,7 @@ export class ZResultCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "[optional]\nUse for insert heading when needed."
+                    "text": "[optional] Set a specific heading level as html tag for the title."
                 },
                 "attribute": "title-html-tag",
                 "reflect": false

package/dist/collection/components/z-result-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-result-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /** The title of the card. */\n  @Prop()\n  cardTitle: string;\n\n  /** The subtitle of the card. */\n  @Prop()\n  cardSubtitle: string;\n\n  /** The authors of the opera. */\n  @Prop()\n  authors?: string;\n\n  /** The URL of the cover image of the opera. */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL. */\n  @Prop()\n  fallbackCover?: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /** Enables the \"info\" variant of the card. */\n  @Prop()\n  isInfoCard = false;\n\n  /** [optional] Set a specific heading level as html tag for the title. */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLElement => {\n    const TitleTag = this.titleHtmlTag || \"div\";\n\n    return (\n      <TitleTag\n        class=\"card-title\"\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n      >\n        {this.cardTitle}\n      </TitleTag>\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class=\"card-subtitle\"\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host>\n        <z-book-cover\n          cover={this.cover}\n          fallbackCover={this.fallbackCover}\n          multiple={this.hasMultipleCovers}\n          bordered={true}\n        ></z-book-cover>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host class=\"info-card\">\n        <div class=\"info-icon-container\">\n          <z-icon\n            class=\"info-icon\"\n            name=\"link\"\n          />\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"]}