@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,gBAAgB;QAC5B,aAAa,EAAE,mBAAmB;QAClC,gBAAgB,EAAE,eAAe;QACjC,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,IAAI;KACnB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACqB,CAAC;AAEzB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;;;;;;;;;GASpC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,wBAAwB;KAClC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;;;;;;;;;;;;;;GAcpC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZModal\",\n  component: \"z-modal\",\n  args: {\n    modalid: \"my-modal\",\n    modaltitle: \"My modal title\",\n    modalsubtitle: \"My modal subtitle\",\n    closeButtonLabel: \"chiudi modale\",\n    alertdialog: false,\n    closable: true,\n    scrollInside: true,\n  },\n  decorators: [\n    (Story) => html`\n      <script>\n        function openZModal() {\n          document.querySelector(\"z-modal\").open();\n        }\n        function closeZModal() {\n          document.querySelector(\"z-modal\").close();\n        }\n      </script>\n      ${Story()}\n    `,\n  ],\n} satisfies Meta<ZModal>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n  args: {\n    modalid: \"my-modal-short\",\n  },\n  render: (args) => html`\n    <z-modal\n      modalid=${args.modalid}\n      modaltitle=${args.modaltitle}\n      modalsubtitle=${args.modalsubtitle}\n      close-button-label=${args.closeButtonLabel}\n      alertdialog=${args.alertdialog}\n      closable=${args.closable}\n      scroll-inside=${args.scrollInside}\n    >\n      <div slot=\"modalContent\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        <br />\n        <z-button onclick=\"closeZModal()\">close</z-button>\n      </div>\n    </z-modal>\n    <z-button onclick=\"openZModal()\">apri modale</z-button>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  args: {\n    modalid: \"my-modal-long\",\n  },\n  render: (args) => html`\n    <z-modal\n      modalid=${args.modalid}\n      modaltitle=${args.modaltitle}\n      modalsubtitle=${args.modalsubtitle}\n      close-button-label=${args.closeButtonLabel}\n      alertdialog=${args.alertdialog}\n      closable=${args.closable}\n      scroll-inside=${args.scrollInside}\n    >\n      <div slot=\"modalContent\">\n        <z-date-picker\n          date-picker-id=\"cicciaCulo\"\n          ariaLabel=\"stringaQualsiasi\"\n          label=\"ancheLi\"\n        ></z-date-picker>\n        Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n        Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne\n        ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n        orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n        volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n        Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n        honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n        enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n        inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n        superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n        sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n        quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n        animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n        ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n        inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n        enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n        ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n        dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n        summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n        torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec\n        vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n        inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n        dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n        aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n        inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n        sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n        tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n        anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n        falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n        adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n        Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n        differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n        sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n        <z-select\n          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}]'\n          label=\"this is the label\"\n          aria-label=\"\"\n          placeholder=\"select placeholder\"\n          name=\"\"\n          status=\"-\"\n          message=\"helper text\"\n          autocomplete=\"false\"\n          noresultslabel=\"Nessun risultato\"\n          disabled=\"false\"\n          readonly=\"false\"\n          htmlid=\"\"\n          htmltitle=\"\"\n          reset-item=\"\"\n          isfixed=\"false\"\n          size=\"big\"\n        ></z-select>\n      </div>\n    </z-modal>\n    <z-button onclick=\"openZModal()\">apri modale</z-button>\n  `,\n} satisfies Story;\n\nexport const SlottedCloseButton = {\n  args: {\n    modalid: \"my-modal-slotted-close\",\n  },\n  render: (args) => html`\n    <z-modal\n      modalid=${args.modalid}\n      modaltitle=${args.modaltitle}\n      modalsubtitle=${args.modalsubtitle}\n      close-button-label=${args.closeButtonLabel}\n      alertdialog=${args.alertdialog}\n      closable=${args.closable}\n      scroll-inside=${args.scrollInside}\n    >\n      <div slot=\"modalContent\">\n        <div>Contenuto dello <b>slot</b></div>\n      </div>\n      <button\n        slot=\"modalCloseButton\"\n        aria-label=\"close\"\n        onclick=\"closeZModal()\"\n      >\n        X\n      </button>\n    </z-modal>\n    <z-button onclick=\"openZModal()\">apri modale</z-button>\n  `,\n} satisfies Story;\n"]}

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

@@ -0,0 +1,374 @@
+import { Host, h } from "@stencil/core";
+import { NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
+/**
+ * Navigation tabs component.
+ * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
+ * @slot - Main slot. Use `<button>` or `<a>` tags as children.
+ * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
+ * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
+ */
+export class ZNavigationTabs {
+    constructor() {
+        /**
+         * Index of the last tab that held focus.
+         */
+        this.focusedTab = undefined;
+        this.ariaLabel = "";
+        this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        this.size = NavigationTabsSize.BIG;
+        this.selectedTab = undefined;
+        this.canNavigate = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
+    }
+    /**
+     * Getter for the direction to check based on current orientation.
+     */
+    get direction() {
+        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
+    }
+    /**
+     * Getter for the dimension to check based on current orientation.
+     */
+    get dimension() {
+        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
+    }
+    get tabs() {
+        return Array.from(this.nav.children);
+    }
+    /**
+     * Scroll into view to center the tab.
+     */
+    scrollToTab(tabElement) {
+        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+            ? { block: "nearest", inline: "center" }
+            : { block: "center", inline: "nearest" });
+        tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+    }
+    /**
+     * Scroll the navigation bar half of its size backward.
+     */
+    navigateBackwards() {
+        this.nav.scrollBy({
+            [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Scroll the navigation bar half of its size forward.
+     */
+    navigateForward() {
+        this.nav.scrollBy({
+            [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Check if a keyboard event was triggered by an arrow key.
+     */
+    isArrowNavigation(e) {
+        return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
+    }
+    /**
+     * Check if the navigation buttons are needed.
+     */
+    checkScrollVisible() {
+        if (!this.nav) {
+            return;
+        }
+        this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
+    }
+    /**
+     * Check if navigation buttons can be enabled for each direction.
+     */
+    checkScrollEnabled() {
+        if (!this.nav) {
+            return;
+        }
+        this.canNavigateNext =
+            this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
+        this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
+    }
+    /**
+     * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
+     */
+    onTabSelected() {
+        this.tabs.forEach((tab, i) => {
+            const zicon = tab.querySelector("z-icon");
+            const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.getAttribute("name").replace("-filled", "");
+            if (i !== this.selectedTab) {
+                tab.setAttribute("aria-selected", "false");
+                tab.tabIndex = -1;
+                zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", strokeIcon);
+                return;
+            }
+            zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", `${strokeIcon}-filled`);
+            tab.setAttribute("aria-selected", "true");
+        });
+        this.selected.emit(this.selectedTab);
+        if (this.selectedTab !== undefined) {
+            this.scrollToTab(this.tabs[this.selectedTab]);
+        }
+    }
+    /**
+     * Handle click on the tabs.
+     * @param event `click` event triggered by a child tab
+     */
+    handleTabClick(event) {
+        const clickedTab = event.target.closest("[role='tab']");
+        if (!this.tabs.some((child) => child.contains(clickedTab))) {
+            return;
+        }
+        this.selectedTab = this.tabs.indexOf(clickedTab);
+    }
+    /**
+     * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.
+     */
+    onTabFocusIn(event) {
+        const focused = this.tabs.findIndex((tab) => tab.contains(event.target));
+        if (focused === -1) {
+            return;
+        }
+        if (this.selectedTab !== undefined) {
+            this.tabs[this.selectedTab].tabIndex = -1;
+        }
+        this.focusedTab = focused;
+        this.tabs[this.focusedTab].tabIndex = -1;
+        this.scrollToTab(this.tabs[this.focusedTab]);
+    }
+    /**
+     * Handle keyboard navigation through tabs with arrow keys.
+     */
+    navigateThroughTabs(event) {
+        if (!this.tabs.some((tab) => tab.contains(event.target)) || !this.isArrowNavigation(event)) {
+            return true;
+        }
+        event.preventDefault();
+        if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+            (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+            // Move forward
+            this.focusedTab++;
+            if (this.focusedTab >= this.tabs.length) {
+                this.focusedTab = 0;
+            }
+        }
+        else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+            (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+            // Move backward
+            this.focusedTab--;
+            if (this.focusedTab < 0) {
+                this.focusedTab = this.tabs.length - 1;
+            }
+        }
+        // Ignore disabled tabs
+        if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
+            this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
+            return this.navigateThroughTabs(event);
+        }
+        this.tabs[this.focusedTab].focus();
+        this.scrollToTab(this.tabs[this.focusedTab]);
+    }
+    /**
+     * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.
+     */
+    onTabFocusOut(event) {
+        var _a;
+        if (!this.tabs.some((tab) => tab.contains(event.relatedTarget))) {
+            this.tabs[(_a = this.selectedTab) !== null && _a !== void 0 ? _a : 0].tabIndex = 0;
+            this.focusedTab = undefined;
+        }
+    }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());
+    }
+    componentDidLoad() {
+        var _a;
+        // Set role and tabindex to each slotted tab
+        this.tabs.forEach((tab) => {
+            tab.setAttribute("role", "tab");
+            tab.tabIndex = -1;
+        });
+        const preselectedTab = (_a = this.selectedTab) !== null && _a !== void 0 ? _a : this.tabs.findIndex((tab) => tab.ariaSelected === "true");
+        if (preselectedTab !== -1) {
+            this.selectedTab = preselectedTab;
+            this.tabs[preselectedTab].tabIndex = 0;
+            this.onTabSelected();
+        }
+        else {
+            this.tabs[0].tabIndex = 0;
+        }
+        this.resizeObserver.observe(this.nav);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: '0dfbe739542add5d05e82462f9ca115734f75ab7', class: {
+                "interactive-2": this.size === NavigationTabsSize.SMALL,
+                "interactive-1": this.size !== NavigationTabsSize.SMALL,
+            }, scrollable: this.canNavigate }, h("button", { key: 'a679c4104ef79c5245a205e634872992ad6b7702', 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: '13b64410e78d66d28b9a2a870535a393b5361f06', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ae01aa47ea6620209017d612b3b6e1b0664efcba', 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: 'bd1f92fef8fde67a415964efd61b89d9895192a7' })), h("button", { key: '0b7a9b4ecf5773f576f25468a8f64118b57c4480', 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: '91686040ca32ff9136c6a96ce70ed3ca20a6b753', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+    }
+    static get is() { return "z-navigation-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationTabsOrientation",
+                    "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+                    "references": {
+                        "NavigationTabsOrientation": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::NavigationTabsOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation tabs orientation."
+                },
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationTabsSize",
+                    "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+                    "references": {
+                        "NavigationTabsSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::NavigationTabsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation tabs size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "NavigationTabsSize.BIG"
+            },
+            "selectedTab": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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",
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "canNavigate": {},
+            "canNavigatePrev": {},
+            "canNavigateNext": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected tab changes.\nContains the index of the new selected tab in the `detail` of the event."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "canNavigate",
+                "methodName": "checkScrollEnabled"
+            }, {
+                "propName": "selectedTab",
+                "methodName": "onTabSelected"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleTabClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onTabFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "navigateThroughTabs",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onTabFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        zicon?.setAttribute(\"name\", strokeIcon);\n\n        return;\n      }\n\n      zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,191 @@
+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>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map