@zanichelli/albe-web-components 19.2.4 → 19.2.6-RC1

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: '69bc5562051734e576c1dbb2af850ef01a70a693', 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: '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 }))));
+            }, 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,7 +3,8 @@ 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.
+ * @cssprop --z-notification--content-max-width - The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.
+ * @cssprop --z-notification--inline-padding - The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).
  */
 export class ZNotification {
     handleActionButtonClick(e) {
@@ -15,19 +16,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: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
+        return (h(Host, { key: '204757ce872d00bd8dcf801273b36cee6c390989' }, h("div", { key: 'adb00f9caa9e7a87e7320dfadbe642b3535f66c4', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '4deffc225f500b8dc00d0d55ca28733a389d6e5c', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '41cf207e05035652e789b35e73109657210162dd', class: "content-container" }, h("div", { key: 'f5e54591302a860fb45b07b8e0cbde78d1b9deec', class: "content-text" }, h("slot", { key: '48e5555977f88affbb06af454b51a94bee2c0c58' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '977fb094093c645f26f1cd014914f7ea824f80f9', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'f505fca722c4c720173faee9c37ce110ba2382e4', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '27305ec012eb8c30396fcf5fee87ece5a57c4a10', name: "multiply-circle", width: 16, height: 16 }))))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +62,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",
@@ -74,8 +81,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Action button text"
                 },
-                "attribute": "actiontext",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "actiontext"
             },
             "type": {
                 "type": "string",
@@ -87,7 +96,8 @@ export class ZNotification {
                         "NotificationType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::NotificationType"
+                            "id": "src/beans/index.tsx::NotificationType",
+                            "referenceLocation": "NotificationType"
                         }
                     }
                 },
@@ -97,8 +107,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Alert variant type"
                 },
-                "attribute": "type",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
             },
             "showclose": {
                 "type": "boolean",
@@ -114,8 +126,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable close icon"
                 },
-                "attribute": "showclose",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "showclose",
                 "defaultValue": "false"
             },
             "showshadow": {
@@ -135,8 +149,10 @@ export class ZNotification {
                         }],
                     "text": "Enable shadow."
                 },
-                "attribute": "showshadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "showshadow",
                 "defaultValue": "false"
             },
             "sticky": {
@@ -153,8 +169,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Enable sticky notification bar."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             },
             "borderposition": {
@@ -171,8 +189,10 @@ export class ZNotification {
                     "tags": [],
                     "text": "Border position"
                 },
-                "attribute": "borderposition",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "borderposition",
                 "defaultValue": "\"bottom\""
             }
         };
@@ -211,4 +231,3 @@ export class ZNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,6 +2,7 @@ import { html } from "lit";
 import { NotificationType } from "../../beans";
 import "./index";
 import "./index.stories.css";
+const DEMO_LONG_TEXT = "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, justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget. Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna, pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod, tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget. Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est, non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor, elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.";
 const StoryMeta = {
     title: "ZNotification",
     component: "z-notification",
@@ -12,10 +13,17 @@ const StoryMeta = {
             },
             options: Object.values(NotificationType),
         },
+        borderposition: {
+            control: {
+                type: "inline-radio",
+            },
+            options: ["top", "bottom"],
+        },
     },
     args: {
         "--z-notification--content-max-width": "100%",
         "contenticonname": "checkmark-circle-filled",
+        "borderposition": "bottom",
         "actiontext": "Annulla",
         "showclose": false,
         "sticky": false,
@@ -37,27 +45,6 @@ export const Default = {
     </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>
-  `,
-};
 export const LongText = {
     render: (args) => html `
     <z-notification
@@ -68,19 +55,18 @@ export const LongText = {
       .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,
-      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue
-      turpis, eu consectetur purus consectetur vitae.
+      <div>
+        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,
+        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
+        augue turpis, eu consectetur purus consectetur vitae.
+      </div>
     </z-notification>
   `,
 };
-/**
- * To use the banner variant set the `sticky` property to `true`.
- */
-export const BannerVariant = {
+export const StickyBanner = {
     args: {
-        notificationText: "Questo è il testo della notifica",
+        "--z-notification--top-offset": "0",
     },
     parameters: {
         controls: {
@@ -94,55 +80,48 @@ export const BannerVariant = {
         .actiontext=${args.actiontext}
         .type=${args.type}
         .showclose=${args.showclose}
-        sticky="true"
-        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+        .sticky="true"
+        style="--z-notification--top-offset: ${args["--z-notification--top-offset"]}; --z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
-        ${args.notificationText}
+        Questo è il testo della notifica
       </z-notification>
-      <h2 class="heading-1-sb">Titolo della pagina</h2>
-      <div class="body-1">
+      <div class="heading-1-sb">Titolo della pagina</div>
+      <div class="body-1">${DEMO_LONG_TEXT}</div>
+    </div>
+  `,
+};
+export const CenteredContent = {
+    args: {
+        "--z-notification--content-max-width": "768px",
+    },
+    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>
         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,
-        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
-        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.
-        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed
-        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus
-        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante
-        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,
-        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,
-        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a
-        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper
-        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus
-        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius
-        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet
-        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem
-        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus
-        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.
-        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu
-        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque
-        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet
-        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,
-        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,
-        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent
-        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis
-        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec
-        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in
-        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et
-        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est
-        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus
-        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at
-        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.
+        Curabitur volutpat mi purus, in maximus nisl volutpat quis.
       </div>
+    </z-notification>
+    <div
+      class="z-notification-demo-page"
+      style="max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div class="heading-1">Titolo della pagina</div>
+      <div class="body-1">${DEMO_LONG_TEXT}</div>
     </div>
   `,
 };
 /**
- * To use the inline variant set the `sticky` property to `false`.
+ * To have an inline notification keep the `sticky` property set to `false`.
  */
-export const InlineVariant = {
-    args: {
-        notificationText: "Questo è il testo della notifica",
-    },
+export const Inline = {
     parameters: {
         controls: {
             exclude: ["sticky"],
@@ -151,17 +130,17 @@ export const InlineVariant = {
     render: (args) => html `
     <div class="inline-notification-demo">
       <z-notification
-        contenticonname=${args.contenticonname}
-        actiontext=${args.actiontext}
-        type=${args.type}
-        showclose=${args.showclose}
-        sticky="false"
+        .contenticonname=${args.contenticonname}
+        .actiontext=${args.actiontext}
+        .type=${args.type}
+        .showclose=${args.showclose}
+        .sticky="false"
         style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
-        ${args.notificationText}
+        Questo è il testo della notifica
       </z-notification>
       <div class="content">
-        <h2 class="heading-1">Titolo della scheda</h2>
+        <div class="heading-1">Titolo della scheda</div>
         <div class="body-1">
           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.
@@ -170,4 +149,26 @@ export const InlineVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map
+/**
+ * The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
+ */
+export const BorderPosition = {
+    args: {
+        borderposition: "top",
+    },
+    render: (args) => html `
+    <div class="z-notification-border-position-demo">
+      <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>
+    </div>
+  `,
+};

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

@@ -1,6 +1,7 @@
 :host {
   --z-notification--top-offset: 0;
   --z-notification--content-max-width: 100%;
+  --z-notification--inline-padding: ;
 
   display: block;
   width: 100%;
@@ -10,7 +11,7 @@
   display: flex;
   max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
-  padding: calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));
   margin: 0 auto;
   background-color: transparent;
   font-family: var(--font-family-sans);
@@ -90,11 +91,12 @@ button {
 }
 
 .content-text {
+  width: 100%;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
-  line-height: 20px;
+  line-height: 1.4;
 }
 
 .action-button {
@@ -102,12 +104,12 @@ button {
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   letter-spacing: 0.32px;
-  line-height: 16px;
+  line-height: 1.333;
+  outline: none;
 }
 
-.action-button:focus {
+.action-button:focus-visible {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .content-container + .close-button {
@@ -119,7 +121,7 @@ button {
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .content-container {
     flex-wrap: nowrap;
   }