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

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
 /**
  * Navigation tabs component.
@@ -10,16 +10,27 @@ import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabs
 export class ZNavigationTabs {
     constructor() {
         /**
-         * Index of the last tab that held focus.
+         * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
          */
-        this.focusedTab = undefined;
         this.ariaLabel = "";
+        /**
+         * Navigation tabs orientation.
+         */
         this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        /**
+         * Navigation tabs size.
+         */
         this.size = NavigationTabsSize.BIG;
+        /**
+         * Index of the selected tab.
+         * Useful to programmatically select a tab.
+         * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
+         */
         this.selectedTab = undefined;
-        this.canNavigate = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
+        /**
+         * Index of the last tab that held focus.
+         */
+        this.focusedTab = undefined;
     }
     /**
      * Getter for the direction to check based on current orientation.
@@ -221,10 +232,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'c676fe99b0eb18fceb58ffa7412e4e1659acc89e', class: {
+        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'e353cd0e1e22d6e4422f547a318819b3f2736479', 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: '9d7e5126d77fbebf48423f0b34103bd1eb59dc3a', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '854e67c8c662c21926c71fab0725113632f6f14e', 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: 'a4fdefd6a4419c97b4bfab349c88285abe37f14f' })), h("button", { key: 'bf0247eaef092c9b0dd068fe0d4876e3aaecad4e', 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: '02018a4474db67cf853941a2d6daa002303419c7', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', 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: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', 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: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', 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: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {
@@ -253,8 +264,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "orientation": {
@@ -267,7 +280,8 @@ export class ZNavigationTabs {
                         "NavigationTabsOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
+                            "id": "src/beans/index.tsx::NavigationTabsOrientation",
+                            "referenceLocation": "NavigationTabsOrientation"
                         }
                     }
                 },
@@ -277,8 +291,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs orientation."
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "orientation",
                 "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
             },
             "size": {
@@ -291,7 +307,8 @@ export class ZNavigationTabs {
                         "NavigationTabsSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NavigationTabsSize"
+                            "id": "src/beans/index.tsx::NavigationTabsSize",
+                            "referenceLocation": "NavigationTabsSize"
                         }
                     }
                 },
@@ -301,8 +318,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Navigation tabs size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "NavigationTabsSize.BIG"
             },
             "selectedTab": {
@@ -319,8 +338,10 @@ export class ZNavigationTabs {
                     "tags": [],
                     "text": "Index of the selected tab.\nUseful to programmatically select a tab.\nThe tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab."
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected-tab",
                 "defaultValue": "undefined"
             }
         };
@@ -388,4 +409,3 @@ export class ZNavigationTabs {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -188,4 +188,3 @@ export const Tabpanels = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -3,6 +3,7 @@ import { Host, h } from "@stencil/core";
  * Notification bar component.
  * @slot - The text of the notification.
  * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ * @cssprop --z-notification--content-max-width - The max width of the notification content.
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -14,18 +15,23 @@ export class ZNotification {
         this.notificationClose.emit();
     }
     constructor() {
-        this.contenticonname = undefined;
-        this.actiontext = undefined;
-        this.type = undefined;
+        /** Enable close icon */
         this.showclose = false;
+        /**
+         * Enable shadow.
+         * @deprecated shadow is available only for the `sticky` version of the notification.
+         */
         this.showshadow = false;
+        /** Enable sticky notification bar. */
         this.sticky = false;
+        /** Border position */
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: '5bc1e8046c14e46f02f9667939709a267cb1265a' }, this.contenticonname && (h("z-icon", { key: '7a944afae100f5fea48ca8499b6a0a035a6d289e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '038391eb846f043bc83c236e6e18998797bcb7a3', class: "content-container" }, h("div", { key: '330233ee7524fb271ffa5231a86b6cd906b2994d', class: "content-text" }, h("slot", { key: '290343fa633f1969d4f1059047797b16c3da9860' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '096b5cfdb55bac40adc9b2f56b9a4dc739ad4cc1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '80d985cbcd6501f9640dc2e16ac978de731a0d24', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'd7fe5573c93ac7ab36ccbecc01972b8d3cccc8bd', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '40da9cc297666e279f89631cede4c24d16abbc79' }, h("div", { key: '1591d69902fe6ed78424da9363b5aa6ca56b21fe', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '585a4bc748ce664b6a3cb6e13879f98f48eed38d', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'f3a415e24907ade9cff0c966cbc905a2ee2b0982', class: "content-container" }, h("div", { key: 'adc775c0294adc136e2138cc32b8b86b32c765ef', class: "content-text" }, h("slot", { key: 'e467e4ea81b76bf092650d2a52cb249bc70bed78' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '6253c14815223122888d3b71b7e5a08fa9ab72c1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '0baeb981e72a49fec6055b16c37ef7395204861f', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '229f88bd8ef914cb361f84f3435d207b433862c1', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -55,8 +61,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Name of the icon on the left of the content"
                 },
-                "attribute": "contenticonname",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "contenticonname"
             },
             "actiontext": {
                 "type": "string",
@@ -72,8 +80,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Action button text"
                 },
-                "attribute": "actiontext",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actiontext"
             },
             "type": {
                 "type": "string",
@@ -85,7 +95,8 @@ export class ZNotification {
                         "NotificationType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NotificationType"
+                            "id": "src/beans/index.tsx::NotificationType",
+                            "referenceLocation": "NotificationType"
                         }
                     }
                 },
@@ -95,8 +106,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Alert variant type"
                 },
-                "attribute": "type",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
             },
             "showclose": {
                 "type": "boolean",
@@ -112,8 +125,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable close icon"
                 },
-                "attribute": "showclose",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "showclose",
                 "defaultValue": "false"
             },
             "showshadow": {
@@ -133,8 +148,10 @@ export class ZNotification {
                         }],
                     "text": "Enable shadow."
                 },
-                "attribute": "showshadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "showshadow",
                 "defaultValue": "false"
             },
             "sticky": {
@@ -151,9 +168,31 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable sticky notification bar."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
+            },
+            "borderposition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "borderposition",
+                "defaultValue": "\"bottom\""
             }
         };
     }
@@ -191,4 +230,3 @@ export class ZNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -14,11 +14,12 @@ const StoryMeta = {
         },
     },
     args: {
-        contenticonname: "checkmark-circle-filled",
-        actiontext: "Annulla",
-        showclose: false,
-        sticky: false,
-        type: NotificationType.SUCCESS,
+        "--z-notification--content-max-width": "100%",
+        "contenticonname": "checkmark-circle-filled",
+        "actiontext": "Annulla",
+        "showclose": false,
+        "sticky": false,
+        "type": NotificationType.SUCCESS,
     },
 };
 export default StoryMeta;
@@ -30,6 +31,28 @@ export const Default = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
+    </z-notification>
+  `,
+};
+/**
+ * To use the border top variant set the `borderposition` property to `top`.
+ */
+export const BorderTop = {
+    args: {
+        borderposition: "top",
+    },
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+      .borderposition=${args.borderposition}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
     </z-notification>
@@ -43,6 +66,7 @@ export const LongText = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
       Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
@@ -71,6 +95,7 @@ export const BannerVariant = {
         .type=${args.type}
         .showclose=${args.showclose}
         sticky="true"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>
@@ -131,6 +156,7 @@ export const InlineVariant = {
         type=${args.type}
         showclose=${args.showclose}
         sticky="false"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>
@@ -144,4 +170,3 @@ export const InlineVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -1,14 +1,19 @@
 :host {
   --z-notification--top-offset: 0;
+  --z-notification--content-max-width: 100%;
 
-  display: flex;
+  display: block;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.main-container {
+  display: flex;
+  max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
   padding: calc(var(--space-unit) * 2);
-  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  margin: 0 auto;
+  background-color: transparent;
   font-family: var(--font-family-sans);
-  outline: none;
 }
 
 :host([sticky]) {
@@ -54,8 +59,15 @@
   fill: var(--color-default-error);
 }
 
-:host > button,
-.content-container > button {
+:host([borderposition="bottom"]) {
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+:host([borderposition="top"]) {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+button {
   padding: 0;
   border: none;
   margin: 0;
@@ -78,7 +90,6 @@
 }
 
 .content-text {
-  max-width: 800px;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);

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

@@ -8,14 +8,33 @@ import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans
  */
 export class ZOffcanvas {
     constructor() {
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
+        /**
+         * Offcanvas variant.
+         * - `overlay`: The offcanvas covers the page content putting an overlay.
+         * - `pushcontent`: The offcanvas isn't absolutely positioned and "pushes" the page content.
+         * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.
+         * Also, the `pushcontent` variant doesn't have the open/close transition.
+         */
         this.variant = OffCanvasVariant.PUSHCONTENT;
+        /** Whether the offcanvas is open. Default: false */
         this.open = false;
+        /**
+         * Open the content transitioning to a specified direction.
+         * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.
+         */
         this.transitiondirection = TransitionDirection.LEFT;
+        /**
+         * Skip the opening transition when the offcanvas is already open at the first render.
+         * @deprecated This prop is not needed anymore, the component will automatically skip the transition
+         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+         */
         this.skipLoadAnimation = false;
+        /** Whether to show the backdrop when the offcanvas is open. Default: true */
         this.showBackdrop = true;
+        /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
     }
     /**
      * Returns all focusable elements inside the offcanvas content.
@@ -140,8 +159,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '8d7045110c92bf5ef1ef2f8d60ddaf1af55ace92', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ef823ffd39a7f63aae8ef95333da611ec4485292', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '7a6586d273275f1686fe0b1406d71e782d5d71c3', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '5930bb55687c9dd286828dc262c1f2cb18ebdd75', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'a65de1a8b0e92e0520d410a88c98edfe5bb56100', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '4a7d050590730574ccb25ecd1f93032fac113549', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4507bf74ea9c8b097173ed048cd52af0704b8fb6', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '79c69732bcdf90d5dc25713bdec66034b595f75d', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: 'f133b7048d147138f4db154f2591070b5c74bd8a', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '885eeed8b2ebd31467366f208c5f66eace44ad0c', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -167,7 +186,8 @@ export class ZOffcanvas {
                         "OffCanvasVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::OffCanvasVariant"
+                            "id": "src/beans/index.tsx::OffCanvasVariant",
+                            "referenceLocation": "OffCanvasVariant"
                         }
                     }
                 },
@@ -177,8 +197,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "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.\nAlso, the `pushcontent` variant doesn't have the open/close transition."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "OffCanvasVariant.PUSHCONTENT"
             },
             "open": {
@@ -195,8 +217,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether the offcanvas is open. Default: false"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "transitiondirection": {
@@ -209,7 +233,8 @@ export class ZOffcanvas {
                         "TransitionDirection": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::TransitionDirection"
+                            "id": "src/beans/index.tsx::TransitionDirection",
+                            "referenceLocation": "TransitionDirection"
                         }
                     }
                 },
@@ -219,8 +244,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Open the content transitioning to a specified direction.\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`."
                 },
-                "attribute": "transitiondirection",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "transitiondirection",
                 "defaultValue": "TransitionDirection.LEFT"
             },
             "skipLoadAnimation": {
@@ -240,8 +267,10 @@ export class ZOffcanvas {
                         }],
                     "text": "Skip the opening transition when the offcanvas is already open at the first render."
                 },
-                "attribute": "skip-load-animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "skip-load-animation",
                 "defaultValue": "false"
             },
             "showBackdrop": {
@@ -258,8 +287,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether to show the backdrop when the offcanvas is open. Default: true"
                 },
-                "attribute": "show-backdrop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-backdrop",
                 "defaultValue": "true"
             }
         };
@@ -318,4 +349,3 @@ export class ZOffcanvas {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -141,4 +141,3 @@ export const PushContent = {
       </div>
     </div>`,
 };
-//# sourceMappingURL=index.stories.js.map