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

package/dist/collection/components/z-input/styles-general.css

@@ -0,0 +1,166 @@
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+/* GENERAL */
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input,
+textarea {
+  background: var(--color-form-background);
+  fill: var(--color-form-default-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+input,
+.textarea-wrapper {
+  border: var(--border-size-small) solid var(--color-form-surface04);
+  border-radius: var(--border-radius-small);
+  color: var(--color-form-default-text);
+}
+
+:host([size="small"]) input,
+:host([size="small"]) textarea,
+:host([size="x-small"]) input,
+:host([size="x-small"]) textarea {
+  font-size: var(--font-size-2);
+}
+
+:host.cursor-select input {
+  cursor: pointer;
+}
+
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:not(.readonly):hover {
+  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline-offset: -2px;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+:host:not([readonly="true"]) .textarea-wrapper:focus-within {
+  border-color: var(--color-form-active-primary);
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible:hover,
+.textarea-wrapper:not(.readonly):focus-within:hover {
+  outline-color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible + .icons-wrapper {
+  fill: var(--color-form-active-primary);
+}
+
+:host.active-select input {
+  border: var(--border-size-small) solid var(--color-form-active-primary);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  border-color: var(--color-form-surface03);
+  box-shadow: none;
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-form-success01);
+  background: var(--color-form-inverse-success);
+}
+
+.input-success:focus:focus-visible + .icons-wrapper,
+.input-success + .icons-wrapper {
+  fill: var(--color-form-success01);
+}
+
+.input-error {
+  border-color: var(--color-form-hover-error);
+  background: var(--color-form-inverse-error);
+}
+
+.input-error:focus:focus-visible + .icons-wrapper,
+.input-error + .icons-wrapper {
+  fill: var(--color-form-hover-error);
+}
+
+.input-warning {
+  border-color: var(--color-form-hover-warning);
+  background: var(--color-form-inverse-warning);
+}
+
+.input-warning:focus:focus-visible + .icons-wrapper,
+.input-warning + .icons-wrapper {
+  fill: var(--color-form-hover-warning);
+}
+
+:is(.input-success, .input-error, .input-warning):focus:focus-visible {
+  color: var(--color-form-default-text);
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.textarea-wrapper.readonly {
+  border-color: var(--color-form-surface03);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+/* DISABLED */
+:host([disabled]:not([disabled="false"])) input,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
+:host([disabled]:not([disabled="false"])) z-icon {
+  border-color: var(--color-form-disabled03);
+  box-shadow: none;
+  color: var(--color-form-disabled-text);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:host([disabled]:not([disabled="false"])) label.z-label {
+  color: var(--color-disabled03);
+}

package/dist/collection/components/z-input/styles-text.css

@@ -0,0 +1,87 @@
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--color-form-default-icon);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > .input-icon + .input-icon {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.reset-icon,
+.text-wrapper .icons-wrapper > button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > .input-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > .input-icon.small,
+.text-wrapper .icons-wrapper > .input-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.text-wrapper .icons-wrapper > button.input-icon:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}

package/dist/collection/components/z-input/styles-textarea.css

@@ -0,0 +1,19 @@
+.textarea-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--space-unit) * 1.5);
+}
+
+.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
+  background-color: var(--color-form-background);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  color: currentcolor;
+  resize: none;
+}

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) {
@@ -31,7 +32,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        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 }))))));
+        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"; }

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,3 +149,26 @@ export const InlineVariant = {
     </div>
   `,
 };
+/**
+ * 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;
   }

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

@@ -178,10 +178,10 @@ export class ZPagination {
         ];
     }
     renderBackButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla pagina precedente", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
     }
     renderForwardButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla prossima pagina", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
     }
     renderMobile() {
         const pagesChunks = this.getPagesChunks();