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

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

@@ -1,201 +0,0 @@
-import { html } from "lit";
-import "../date-picker/z-date-picker/index";
-import "../z-button/index";
-import "../z-select/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZModal",
-    component: "z-modal",
-    args: {
-        "modalid": "my-modal",
-        "modaltitle": "My modal title",
-        "modalsubtitle": "My modal subtitle",
-        "closeButtonLabel": "chiudi modale",
-        "alertdialog": false,
-        "closable": true,
-        "scrollInside": true,
-        "lockPageScroll": true,
-        "--z-modal-content-padding": "calc(var(--space-unit) * 2)",
-    },
-    decorators: [
-        (Story) => html `
-      <script>
-        function openZModal() {
-          document.querySelector("z-modal").open();
-        }
-        function closeZModal() {
-          document.querySelector("z-modal").close();
-        }
-      </script>
-      ${Story()}
-    `,
-    ],
-};
-export default StoryMeta;
-export const ShortText = {
-    args: {
-        modalid: "my-modal-short",
-    },
-    render: (args) => html `
-    <z-modal
-      modalid=${args.modalid}
-      modaltitle=${args.modaltitle}
-      modalsubtitle=${args.modalsubtitle}
-      close-button-label=${args.closeButtonLabel}
-      alertdialog=${args.alertdialog}
-      closable=${args.closable}
-      scroll-inside=${args.scrollInside}
-      lock-page-scroll=${args.lockPageScroll}
-      style="--z-modal-content-padding: ${args["--z-modal-content-padding"]}"
-    >
-      <div slot="modalContent">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <br />
-        <z-button onclick="closeZModal()">close</z-button>
-      </div>
-    </z-modal>
-    <z-button onclick="openZModal()">apri modale</z-button>
-  `,
-};
-export const LongText = {
-    args: {
-        modalid: "my-modal-long",
-    },
-    render: (args) => html `
-    <z-modal
-      modalid=${args.modalid}
-      modaltitle=${args.modaltitle}
-      modalsubtitle=${args.modalsubtitle}
-      close-button-label=${args.closeButtonLabel}
-      alertdialog=${args.alertdialog}
-      closable=${args.closable}
-      scroll-inside=${args.scrollInside}
-      lock-page-scroll=${args.lockPageScroll}
-      style="--z-modal-content-padding: ${args["--z-modal-content-padding"]}"
-    >
-      <div slot="modalContent">
-        <z-date-picker
-          date-picker-id="date-picker-1"
-          ariaLabel="stringaQualsiasi"
-          label="label"
-        ></z-date-picker>
-        Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
-        Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne
-        ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,
-        orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae
-        volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.
-        Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec
-        honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te
-        enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset
-        inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae
-        superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare
-        sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio
-        quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad
-        animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis
-        ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,
-        inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil
-        enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem
-        ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui
-        dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
-        summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
-        torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec
-        vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,
-        inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae
-        dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem
-        aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,
-        inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori
-        sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent
-        tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum
-        anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,
-        falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et
-        adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit
-        Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc
-        differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor
-        sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.
-        <z-select
-          items='[{"id":"item_1","name":"first item","selected":false},{"id":"item_2","name":"second item","selected":true},{"id":"item_3","name":"disabled item","selected":false,"disabled":true},{"id":"item_4","name":"fourth item","selected":false}]'
-          label="this is the label"
-          aria-label=""
-          placeholder="select placeholder"
-          name=""
-          status="-"
-          message="helper text"
-          autocomplete="false"
-          noresultslabel="Nessun risultato"
-          disabled="false"
-          readonly="false"
-          htmlid=""
-          htmltitle=""
-          reset-item=""
-          isfixed="false"
-          size="big"
-        ></z-select>
-      </div>
-    </z-modal>
-    <z-button onclick="openZModal()">apri modale</z-button>
-  `,
-};

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

@@ -1,190 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans/index";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-icon/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZNavigationTabs",
-    component: "z-navigation-tabs",
-    argTypes: {
-        "orientation": {
-            options: Object.values(NavigationTabsOrientation),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        "--z-navigation-tabs-nav-buttons-bg": getColorTokenArgConfig(),
-        "--z-navigation-tabs-nav-buttons-fg": getColorTokenArgConfig(),
-    },
-    args: {
-        "--z-navigation-tabs-nav-buttons-bg": undefined,
-        "--z-navigation-tabs-nav-buttons-fg": undefined,
-    },
-};
-export default StoryMeta;
-document.addEventListener("DOMContentLoaded", () => {
-    const tabs = document.querySelector("z-navigation-tabs");
-    tabs === null || tabs === void 0 ? void 0 : tabs.addEventListener("selected", ({ detail: selectedTab }) => {
-        var _a, _b;
-        const controlledPanel = (_b = (_a = tabs.querySelectorAll('[role="tab"]')) === null || _a === void 0 ? void 0 : _a[selectedTab]) === null || _b === void 0 ? void 0 : _b.getAttribute("aria-controls");
-        const panels = Array.from(document.querySelectorAll('[role="tabpanel"]'));
-        panels.forEach((panel) => (panel.hidden = true));
-        const panelToActivate = panels.find((panel) => panel.id === controlledPanel);
-        if (panelToActivate) {
-            panelToActivate.hidden = false;
-        }
-    });
-});
-const tabsTemplate = () => html `<button>
-      <z-icon name="house"></z-icon>
-      <span>Home</span>
-    </button>
-    <button>
-      <z-icon name="map"></z-icon>
-      <span>Maps</span>
-    </button>
-    <button disabled>
-      <z-icon name="download"></z-icon>
-      <span>Download</span>
-    </button>
-    <button>
-      <z-icon name="user-avatar"></z-icon>
-      <span>Users</span>
-    </button>
-    <button>
-      <z-icon name="artist"></z-icon>
-      <span>Artisti</span>
-    </button>
-    <a
-      href="https://www.google.com"
-      target="_blank"
-      title="Vai a Google"
-    >
-      <z-icon name="arrow-quad-north-east"></z-icon>
-      <span>Link esterno</span>
-    </a>`;
-export const Horizontal = {
-    argTypes: {
-        size: {
-            options: Object.values(NavigationTabsSize),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        orientation: NavigationTabsOrientation.HORIZONTAL,
-        size: NavigationTabsSize.BIG,
-        ariaLabel: "",
-    },
-    parameters: {
-        controls: {
-            exclude: ["orientation"],
-        },
-    },
-    render: (args) => html `
-    <z-navigation-tabs
-      orientation=${args.orientation}
-      size=${args.size}
-      .ariaLabel=${args.ariaLabel}
-      style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-    >
-      ${tabsTemplate()}
-    </z-navigation-tabs>
-  `,
-};
-/**
- * When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.
- * Be sure to put an icon inside the tab to have something visible and don't forget to put an `aria-label` to provide a description for screen readers.
- */
-export const Vertical = {
-    args: {
-        orientation: NavigationTabsOrientation.VERTICAL,
-        ariaLabel: "",
-    },
-    parameters: {
-        controls: {
-            exclude: ["orientation"],
-        },
-    },
-    render: (args) => html `
-    <z-navigation-tabs
-      orientation=${args.orientation}
-      .ariaLabel=${args.ariaLabel}
-      style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-    >
-      ${tabsTemplate()}
-    </z-navigation-tabs>
-  `,
-};
-/**
- * This story provides an example of how to handle a `ZNavigationTabs` with switchable `tabpanel`s, which is the most common use for the navigation tabs.
- * Each panel must have the `tabpanel` role and the `aria-labelledby` attribute, referencing the tab that controls it (unless a different label is provided using `aria-label`).
- * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.
- *
- * For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\_role
- */
-export const Tabpanels = {
-    args: {
-        ariaLabel: "",
-        orientation: NavigationTabsOrientation.HORIZONTAL,
-    },
-    render: (args) => html `
-    <div class="panels-story-wrapper ${args.orientation}">
-      <z-navigation-tabs
-        orientation=${args.orientation}
-        size=${NavigationTabsSize.BIG}
-        .ariaLabel=${args.ariaLabel}
-        .selectedTab=${0}
-        style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-      >
-        <button
-          aria-controls="panel-1"
-          aria-label="home"
-          id="tab-1"
-        >
-          <z-icon name="house" />
-          <span>Home</span>
-        </button>
-        <button
-          aria-controls="panel-2"
-          aria-label="info"
-          id="tab-2"
-        >
-          <z-icon name="info" />
-          <span>Info</span>
-        </button>
-      </z-navigation-tabs>
-      <div
-        class="panel"
-        id="panel-1"
-        role="tabpanel"
-        aria-labelledby="tab-1"
-      >
-        <span>Pannello 1</span>
-        <span><z-icon name="house-filled" /></span>
-      </div>
-      <div
-        class="panel"
-        id="panel-2"
-        role="tabpanel"
-        aria-labelledby="tab-2"
-        hidden
-      >
-        <span>Pannello 2</span>
-        <span><z-icon name="info-filled" /></span>
-      </div>
-    </div>
-  `,
-};

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

@@ -1,172 +0,0 @@
-import { html } from "lit";
-import { NotificationType } from "../../beans";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZNotification",
-    component: "z-notification",
-    argTypes: {
-        type: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(NotificationType),
-        },
-    },
-    args: {
-        "--z-notification--content-max-width": "100%",
-        "contenticonname": "checkmark-circle-filled",
-        "actiontext": "Annulla",
-        "showclose": false,
-        "sticky": false,
-        "type": NotificationType.SUCCESS,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-notification
-      .contenticonname=${args.contenticonname}
-      .actiontext=${args.actiontext}
-      .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>
-  `,
-};
-export const LongText = {
-    render: (args) => html `
-    <z-notification
-      .contenticonname=${args.contenticonname}
-      .actiontext=${args.actiontext}
-      .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,
-      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue
-      turpis, eu consectetur purus consectetur vitae.
-    </z-notification>
-  `,
-};
-/**
- * To use the banner variant set the `sticky` property to `true`.
- */
-export const BannerVariant = {
-    args: {
-        notificationText: "Questo è il testo della notifica",
-    },
-    parameters: {
-        controls: {
-            exclude: ["sticky"],
-        },
-    },
-    render: (args) => html `
-    <div class="banner-notification-demo">
-      <z-notification
-        .contenticonname=${args.contenticonname}
-        .actiontext=${args.actiontext}
-        .type=${args.type}
-        .showclose=${args.showclose}
-        sticky="true"
-        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-      >
-        ${args.notificationText}
-      </z-notification>
-      <h2 class="heading-1-sb">Titolo della pagina</h2>
-      <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. 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.
-      </div>
-    </div>
-  `,
-};
-/**
- * To use the inline variant set the `sticky` property to `false`.
- */
-export const InlineVariant = {
-    args: {
-        notificationText: "Questo è il testo della notifica",
-    },
-    parameters: {
-        controls: {
-            exclude: ["sticky"],
-        },
-    },
-    render: (args) => html `
-    <div class="inline-notification-demo">
-      <z-notification
-        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}
-      </z-notification>
-      <div class="content">
-        <h2 class="heading-1">Titolo della scheda</h2>
-        <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.
-        </div>
-      </div>
-    </div>
-  `,
-};