@maggioli-design-system/magma 1.10.1 → 1.10.3

package/dist/collection/components/mds-chip/mds-chip.js

@@ -102,10 +102,15 @@ export class MdsChip {
         }
     }
     onClickLabelHandler(event) {
-        this.clickLabelEvent.emit({ event, element: this.host });
         if (this.selectable) {
             this.selected = !this.selected;
+            if (this.selected === false) {
+                this.selected = undefined;
+            }
+            this.selectEvent.emit({ event, element: this.host, selected: this.selected });
+            return;
         }
+        this.clickLabelEvent.emit({ event, element: this.host });
     }
     onDeleteHandler(event) {
         this.deleteEvent.emit({ event, element: this.host });
@@ -128,10 +133,10 @@ export class MdsChip {
         this.km.detachClickBehavior('delete');
     }
     render() {
-        return (h(Host, { key: '1fd68fe6768324adc1fdc94a83e21b540c02e3aa', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            h("div", { key: '970432deda3880f256adc1724d6c7e16b23f0ca9', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '62937d3e14206cca3b66eeb24cc0bb995c933318', class: "icon", name: this.icon })), this.clickable
+        return (h(Host, { key: '17468677d828388fa41e38f7b74be27e1e35553a', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            h("div", { key: 'b86852c1e15e990fadc462cb371467bb70d42907', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '8281aebce5646136442ca70d2c7d12a1746b1edc', class: "icon", name: this.icon })), this.clickable
             ? h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '0fcf99ae3e741190c8138154c33e06b2f27a6a1f', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: 'af570ba680b51ae21a3a517e22cda03ef06f0203', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     static get is() { return "mds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -384,6 +389,27 @@ export class MdsChip {
                         }
                     }
                 }
+            }, {
+                "method": "selectEvent",
+                "name": "mdsChipSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the component's label is clicked and when `selectable` attribute is set to `true`"
+                },
+                "complexType": {
+                    "original": "MdsChipEvent",
+                    "resolved": "MdsChipEvent",
+                    "references": {
+                        "MdsChipEvent": {
+                            "location": "import",
+                            "path": "./meta/interface",
+                            "id": "src/components/mds-chip/meta/interface.ts::MdsChipEvent"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/mds-chip/test/mds-chip.stories.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { iconsDictionary } from "../../../dictionary/icon";
-import { themeVariantChipDictionary, toneMinimalVariantDictionary } from "../../../dictionary/variant";
+import { themeVariantChipDictionary, toneMinimalVariantDictionary, } from "../../../dictionary/variant";
+import { useEffect } from "react";
 export default {
     title: 'UI / Chip',
     argTypes: {
@@ -48,39 +49,67 @@ export default {
         },
     },
 };
-const Template = args => h("mds-chip", Object.assign({}, args, { onDelete: () => { console.info('onDelete'); } }));
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Bovaro del Bernese',
-    icon: 'mi/baseline/pets',
+const Template = args => {
+    useEffect(() => {
+        const chipEl = document.querySelector('mds-chip');
+        chipEl.addEventListener('mdsChipClickLabel', (e) => {
+            console.info('mdsChipClickLabel', e.detail);
+        });
+        chipEl.addEventListener('mdsChipDelete', (e) => {
+            console.info('mdsChipDelete', e.detail);
+        });
+        chipEl.addEventListener('mdsChipSelect', (e) => {
+            console.info('mdsChipSelect', e.detail);
+        });
+    });
+    return (h("mds-chip", Object.assign({}, args, { onDelete: () => {
+            console.info('onDelete');
+        } })));
 };
-export const Selected = Template.bind({});
-Selected.args = {
-    label: 'Bovaro del Bernese',
-    icon: 'mi/baseline/pets',
-    selected: true,
+export const Default = {
+    render: Template,
+    args: {
+        label: 'Bovaro del Bernese',
+        icon: 'mi/baseline/pets',
+    },
 };
-export const Icon = Template.bind({});
-Icon.args = {
-    label: 'Bovaro del Bernese',
-    icon: 'mi/baseline/eco',
+export const Selected = {
+    render: Template,
+    args: {
+        label: 'Bovaro del Bernese',
+        icon: 'mi/baseline/pets',
+        selected: true,
+    },
 };
-export const Deletable = Template.bind({});
-Deletable.args = {
-    deletable: true,
-    label: 'Bovaro del Bernese',
+export const Icon = {
+    render: Template,
+    args: {
+        label: 'Bovaro del Bernese',
+        icon: 'mi/baseline/eco',
+    },
 };
-export const Clickable = Template.bind({});
-Clickable.args = {
-    clickable: true,
-    selectable: true,
-    icon: 'mi/baseline/eco',
-    label: 'Hover me to interact',
+export const Deletable = {
+    render: Template,
+    args: {
+        deletable: true,
+        label: 'Bovaro del Bernese',
+    },
 };
-export const FullyInteractive = Template.bind({});
-FullyInteractive.args = {
-    clickable: true,
-    deletable: true,
-    icon: 'mi/baseline/downhill-skiing',
-    label: 'Downhill skiing',
+export const Clickable = {
+    render: Template,
+    args: {
+        clickable: true,
+        selectable: true,
+        icon: 'mi/baseline/eco',
+        label: 'Hover me to interact',
+    },
+};
+export const FullyInteractive = {
+    render: Template,
+    args: {
+        clickable: true,
+        deletable: true,
+        icon: 'mi/baseline/downhill-skiing',
+        label: 'Downhill skiing',
+    },
 };

package/dist/collection/components/mds-details/test/mds-details.stories.js

@@ -8,9 +8,13 @@ export default {
         },
     },
 };
-const Template = args => h("mds-details", Object.assign({}, args), h("mds-icon", { slot: "icon", name: "mi/baseline/check-circle" }), h("mds-text", { typography: "h6", slot: "title" }, "Vision"), h("mds-text", { typography: "detail" }, "Perch\u00E9 esisti, quali sono i tuoi valori e come questi aiuteranno a guidare il futuro del tuo prodotto."), h("mds-button", { slot: "action", size: "sm" }, "Vai al contenuto"));
-export const Default = Template.bind({});
-export const Opened = Template.bind({});
-Opened.args = {
-    opened: true,
+const Template = args => (h("mds-details", Object.assign({}, args), h("mds-icon", { slot: "icon", name: "mi/baseline/check-circle" }), h("mds-text", { typography: "h6", slot: "title" }, "Vision"), h("mds-text", { typography: "detail" }, "Perch\u00E9 esisti, quali sono i tuoi valori e come questi aiuteranno a guidare il futuro del tuo prodotto."), h("mds-button", { slot: "action", size: "sm" }, "Vai al contenuto")));
+export const Default = {
+    render: Template,
+};
+export const Opened = {
+    render: Template,
+    args: {
+        opened: true,
+    },
 };

package/dist/collection/components/mds-dropdown/test/mds-dropdown.stories.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { floatingUIPlacementDictionary, floatingUIStrategyDictionary, } from "../../../dictionary/floating-ui";
 import { dropdownInteractionDictionary } from "../meta/dictionary";
 import { h } from "@stencil/core";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 export default {
     title: 'UI / Dropdown',
     argTypes: {
@@ -79,138 +79,178 @@ export default {
 };
 const Template = (_a) => {
     var { layout } = _a, args = __rest(_a, ["layout"]);
-    return h("div", { class: layout }, h("mds-button", { id: "my-dropdown" }, "Show Fred"), h("mds-dropdown", Object.assign({ target: "#my-dropdown" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-2000 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")));
+    return (h("div", { class: layout }, h("mds-button", { id: "my-dropdown" }, "Show Fred"), h("mds-dropdown", Object.assign({ target: "#my-dropdown" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-2000 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit"))));
 };
 const TemplatePlacement = (_a) => {
     var args = __rest(_a, []);
-    return h("div", { class: "min-h-dvh flex items-center justify-center" }, h("mds-button", { id: "my-dropdown" }, "Show Fred"), h("mds-dropdown", Object.assign({ target: "#my-dropdown" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-2000 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")));
+    return (h("div", { class: "min-h-dvh flex items-center justify-center" }, h("mds-button", { id: "my-dropdown" }, "Show Fred"), h("mds-dropdown", Object.assign({ target: "#my-dropdown" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-2000 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit"))));
 };
-export const NoTarget = () => h("div", null, h("mds-button", { id: "dropdown-trigger" }, "Trigger"), h("mds-dropdown", { target: '' }, h("mds-text", null, "Ciao")));
+export const NoTarget = () => (h("div", null, h("mds-button", { id: "dropdown-trigger" }, "Trigger"), h("mds-dropdown", { target: "" }, h("mds-text", null, "Ciao"))));
 const TemplateNested = (_a) => {
     var args = __rest(_a, []);
-    return h("div", { class: "min-h-[200vh]" }, h("mds-header", null, h("mds-header-bar", null, h("div", { class: "flex gap-2 items-center" }, h("mds-img", { class: "w-1000", src: "./logo-gruppo-maggioli.svg" }), h("div", { class: "mb-1" }, h("mds-text", { typography: "h6" }, "Gruppo Maggioli"), h("mds-text", { class: "text-tone-neutral-04", typography: "option" }, "Header by RD Team"))), h("mds-button", { slot: "nav", id: "my-dropdown" }, "Show Fred"))), h("mds-dropdown", Object.assign({ target: "#my-dropdown", class: "max-w-[350px]" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")));
+    return (h("div", { class: "min-h-[200vh]" }, h("mds-header", null, h("mds-header-bar", null, h("div", { class: "flex gap-2 items-center" }, h("mds-img", { class: "w-1000", src: "./logo-gruppo-maggioli.svg" }), h("div", { class: "mb-1" }, h("mds-text", { typography: "h6" }, "Gruppo Maggioli"), h("mds-text", { class: "text-tone-neutral-04", typography: "option" }, "Header by RD Team"))), h("mds-button", { slot: "nav", id: "my-dropdown" }, "Show Fred"))), h("mds-dropdown", Object.assign({ target: "#my-dropdown", class: "max-w-[350px]" }, args), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit"))));
 };
 const TemplatePerformance = (_a) => {
     var args = __rest(_a, []);
-    return h("div", { class: "grid" }, Array(400).fill(null).map((_value, index) => (h("div", { key: index, class: "h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07" }, h("p", { id: 'button-' + index, class: "px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07" }, "Pseudo-button ", index), h("mds-dropdown", Object.assign({ target: '#button-' + index }, args), h("p", null, " Testo del dropdown per il bottone ", index))))));
+    return (h("div", { class: "grid" }, Array(400)
+        .fill(null)
+        .map((_value, index) => (h("div", { key: index, class: "h-[100px] flex items-start justify-center text-center border-0 border-t border-solid border-t-tone-neutral-07" }, h("p", { id: 'button-' + index, class: "px-200 py-100 rounded-b-lg bg-tone-neutral-10 border-t-0 border border-solid border-tone-neutral-07" }, "Pseudo-button ", index), h("mds-dropdown", Object.assign({ target: '#button-' + index }, args), h("p", null, " Testo del dropdown per il bottone ", index)))))));
 };
 const TemplateModalNested = () => {
-    const [isModalOpened, setModalOpen] = useState(false);
-    return h("div", { class: "grid" }, h("div", null, h("mds-button", { id: "open-modal", onClick: () => setModalOpen(true) }, "Open modal")), h("mds-modal", { position: 'right', opened: isModalOpened, onMdsModalClose: () => { setModalOpen(false); } }, h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800 max-w-[400px] flex flex-col gap-400" }, h("mds-button", { variant: "primary", id: "open-dropdown" }, "Show dropdown"), h("mds-dropdown", { target: "#open-dropdown", backdrop: false, strategy: 'fixed' }, h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action"), h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action"), h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action")), h("mds-button", { variant: "light", class: "justify-start" }, "Other action"), h("mds-button", { variant: "light", class: "justify-start" }, "Other action"), h("mds-button", { variant: "light", class: "justify-start" }, "Other action"))));
+    const [isModalOpened, setModalOpen] = useState(true);
+    useEffect(() => {
+        var _a;
+        (_a = document.querySelector('mds-modal')) === null || _a === void 0 ? void 0 : _a.addEventListener('mdsModalClose', () => {
+            setModalOpen(false);
+        });
+    });
+    return (h("div", { class: "grid" }, h("div", null, h("mds-button", { id: "open-modal", onClick: () => setModalOpen(true) }, "Open modal")), h("mds-modal", { position: "right", opened: isModalOpened }, h("header", { slot: "top", class: "p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]" }, h("mds-img", { class: "w-1600", src: "./logo-gruppo-maggioli-512w.webp" }), h("div", { class: "text-tone-neutral-02" }, h("mds-text", { typography: "h5", class: "truncate min-w-0" }, "Maggioli Editore"), h("mds-text", { typography: "detail", class: "truncate min-w-0" }, "Menu di servizio"))), h("div", { class: "p-800 max-w-[400px] flex flex-col gap-400" }, h("mds-button", { variant: "primary", id: "open-dropdown" }, "Show dropdown"), h("mds-dropdown", { target: "#open-dropdown", backdrop: false, strategy: "fixed" }, h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action"), h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action"), h("mds-button", { variant: "light", class: "justify-start" }, "Dropdown action")), h("mds-button", { variant: "light", class: "justify-start" }, "Other action"), h("mds-button", { variant: "light", class: "justify-start" }, "Other action"), h("mds-button", { variant: "light", class: "justify-start" }, "Other action")))));
 };
 const TemplateStrategy = (_a) => {
     var args = __rest(_a, []);
-    return h("div", { class: "min-h-[200vh]" }, h("mds-header", null, h("mds-header-bar", null, h("div", { class: "flex gap-2 items-center" }, h("mds-img", { class: "w-1000", src: "./logo-gruppo-maggioli.svg" }), h("div", { class: "mb-1" }, h("mds-text", { typography: "h6" }, "Gruppo Maggioli"), h("mds-text", { class: "text-tone-neutral-04", typography: "option" }, "Header by RD Team"))), h("mds-button", { slot: "nav", id: "my-dropdown" }, "Strategy fixed"), h("mds-dropdown", Object.assign({ target: "#my-dropdown", class: "max-w-[350px]" }, args, { strategy: 'fixed' }), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")))), h("div", { class: "flex justify-end flex-col min-h-3200" }, h("mds-button", { id: "dropdown-absolute" }, "Strategy absolute"), h("mds-dropdown", Object.assign({ target: "#dropdown-absolute", class: "max-w-[350px]" }, args, { strategy: 'absolute', "z-index": 10, shift: true, shiftPadding: 50 }), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit"))));
+    return (h("div", { class: "min-h-[200vh]" }, h("mds-header", null, h("mds-header-bar", null, h("div", { class: "flex gap-2 items-center" }, h("mds-img", { class: "w-1000", src: "./logo-gruppo-maggioli.svg" }), h("div", { class: "mb-1" }, h("mds-text", { typography: "h6" }, "Gruppo Maggioli"), h("mds-text", { class: "text-tone-neutral-04", typography: "option" }, "Header by RD Team"))), h("mds-button", { slot: "nav", id: "my-dropdown" }, "Strategy fixed"), h("mds-dropdown", Object.assign({ target: "#my-dropdown", class: "max-w-[350px]" }, args, { strategy: "fixed" }), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")))), h("div", { class: "flex justify-end flex-col min-h-3200" }, h("mds-button", { id: "dropdown-absolute" }, "Strategy absolute"), h("mds-dropdown", Object.assign({ target: "#dropdown-absolute", class: "max-w-[350px]" }, args, { strategy: "absolute", "z-index": 10, shift: true, shiftPadding: 50 }), h("mds-author", { class: "text-tone-neutral-04" }, h("mds-avatar", { "aria-describedby": "A protrait of Frederick Phillips Brooks Jr.", initials: "fb", src: "./fred-brooks-zoom.webp", slot: "avatar", class: "w-20 bg-brand-maggioli-06" }), h("mds-text", { typography: "h6", class: "text-tone-neutral-02" }, "Fred Brooks"), h("mds-text", { typography: "caption" }, "Software engineer"), h("mds-text", { typography: "caption" }, "IT")), h("mds-text", { typography: "detail", class: "text-tone-neutral-04" }, "Frederick Phillips \"Fred\" Brooks Jr. (born April 19, 1931) is an American computer architect, software engineer, and computer scientist."), h("mds-hr", { class: "h-[2px] bg-tone-neutral-08" }), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/info", variant: "dark", tone: "quiet" }, "User infos"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/settings", variant: "dark", tone: "quiet" }, "Account"), h("mds-button", { class: "justify-start px-0", icon: "mi/baseline/logout", variant: "dark", tone: "quiet" }, "Exit")))));
 };
 const TemplateTarget = args => {
-    return h("div", { class: "grid gap-400 p-600 rounded-xl bg-tone-neutral-09" }, h("mds-entity", { icon: 'mi/baseline/info', id: 'opendropdown' }, h("mds-text", null, "click to open dropdown"), h("mds-button", { slot: "action", icon: "mi/baseline/warning", variant: "warning", tone: "weak", onClick: () => console.info('') })), h("mds-dropdown", Object.assign({ target: '#opendropdown' }, args), "Dropdown"), h("mds-text", { typography: 'paragraph' }, "Do not use other click actions inside a element designed as dropdown target because its never been executed"));
+    return (h("div", { class: "grid gap-400 p-600 rounded-xl bg-tone-neutral-09" }, h("mds-entity", { icon: "mi/baseline/info", id: "opendropdown" }, h("mds-text", null, "click to open dropdown"), h("mds-button", { slot: "action", icon: "mi/baseline/warning", variant: "warning", tone: "weak", onClick: () => console.info('') })), h("mds-dropdown", Object.assign({ target: "#opendropdown" }, args), "Dropdown"), h("mds-text", { typography: "paragraph" }, "Do not use other click actions inside a element designed as dropdown target because its never been executed")));
 };
-export const Default = Template.bind({});
-Default.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-center',
+export const Default = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-center',
+    },
 };
-export const Arrow = Template.bind({});
-Arrow.args = {
-    class: 'max-w-[350px] w-full',
-    arrow: true,
-    backdrop: true,
-    'shift-padding': 32,
-    layout: 'flex justify-start',
-    visible: false,
-};
-export const ArrowPadding = Template.bind({});
-ArrowPadding.args = {
-    class: 'max-w-[350px] w-full',
-    arrow: true,
-    backdrop: true,
-    'arrow-padding': 50,
-    'shift-padding': 32,
-    layout: 'flex justify-start',
-    visible: false,
-};
-export const AutoPlacement = Template.bind({});
-AutoPlacement.args = {
-    class: 'max-w-[350px] w-full',
-    'auto-placement': true,
-    layout: 'flex justify-end',
-    visible: false,
-};
-export const Backdrop = Template.bind({});
-Backdrop.args = {
-    class: 'max-w-[350px] w-full',
-    backdrop: true,
-    layout: 'flex justify-center',
-    visible: false,
-};
-export const Flip = Template.bind({});
-Flip.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex h-[150vh] justify-center items-center',
-    flip: true,
-    visible: false,
-};
-export const Interaction = Template.bind({});
-Interaction.args = {
-    class: 'max-w-[350px] w-full',
-    backdrop: true,
-    interaction: 'mouseover',
-    layout: 'flex justify-center',
-    visible: false,
-};
-export const Offset = Template.bind({});
-Offset.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-center items-center',
-    offset: 50,
-    backdrop: true,
-    visible: false,
+export const Arrow = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        arrow: true,
+        backdrop: true,
+        'shift-padding': 32,
+        layout: 'flex justify-start',
+        visible: false,
+    },
 };
-export const Placement = TemplatePlacement.bind({});
-Placement.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-center items-center',
-    placement: 'right-start',
-    backdrop: true,
-    visible: false,
-};
-export const Shift = Template.bind({});
-Shift.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-end',
-    shift: true,
-    visible: false,
-};
-export const ShiftPadding = Template.bind({});
-ShiftPadding.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-end',
-    shift: true,
-    'shift-padding': 50,
-    visible: false,
-};
-export const Smooth = Template.bind({});
-Smooth.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-start h-[100vh] mt-[25vh]',
-    smooth: true,
-    visible: false,
-};
-export const Strategy = TemplateStrategy.bind({});
-Strategy.args = {
-    class: 'max-w-[350px] w-full',
-    layout: 'flex justify-start',
-    visible: false,
-};
-export const NestedBestPractice = TemplateNested.bind({});
-NestedBestPractice.args = {
-    backdrop: true,
-    strategy: 'fixed',
+export const ArrowPadding = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        arrow: true,
+        backdrop: true,
+        'arrow-padding': 50,
+        'shift-padding': 32,
+        layout: 'flex justify-start',
+        visible: false,
+    },
+};
+export const AutoPlacement = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        'auto-placement': true,
+        layout: 'flex justify-end',
+        visible: false,
+    },
+};
+export const Backdrop = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        backdrop: true,
+        layout: 'flex justify-center',
+        visible: false,
+    },
+};
+export const Flip = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex h-[150vh] justify-center items-center',
+        flip: true,
+        visible: false,
+    },
+};
+export const Interaction = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        backdrop: true,
+        interaction: 'mouseover',
+        layout: 'flex justify-center',
+        visible: false,
+    },
+};
+export const Offset = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-center items-center',
+        offset: 50,
+        backdrop: true,
+        visible: false,
+    },
+};
+export const Placement = {
+    render: TemplatePlacement,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-center items-center',
+        placement: 'right-start',
+        backdrop: true,
+        visible: false,
+    },
+};
+export const Shift = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-end',
+        shift: true,
+        visible: false,
+    },
+};
+export const ShiftPadding = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-end',
+        shift: true,
+        'shift-padding': 50,
+        visible: false,
+    },
+};
+export const Smooth = {
+    render: Template,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-start h-[100vh] mt-[25vh]',
+        smooth: true,
+        visible: false,
+    },
+};
+export const Strategy = {
+    render: TemplateStrategy,
+    args: {
+        class: 'max-w-[350px] w-full',
+        layout: 'flex justify-start',
+        visible: false,
+    },
+};
+export const NestedBestPractice = {
+    render: TemplateNested,
+    args: {
+        backdrop: true,
+        strategy: 'fixed',
+    },
 };
 export const Performance = TemplatePerformance.bind({
     backdrop: true,
 });
-export const ModalNested = TemplateModalNested.bind({});
-ModalNested.args = {};
-export const Target = TemplateTarget.bind({});
-Target.args = {};
+export const ModalNested = {
+    render: TemplateModalNested,
+    args: {},
+};
+export const Target = {
+    render: TemplateTarget,
+    args: {},
+};

package/dist/collection/components/mds-emoji/test/mds-emoji.stories.js

@@ -69,7 +69,7 @@ const Template = () => {
             }
         });
     }, []);
-    return h("div", { class: "grid grid-cols-[300px_auto] gap-600 -m-600 min-h-dvh bg-tone-neutral-10" }, h("div", { class: "grid gap-200 auto-rows-min p-600" }, h("mds-input-switch", { id: "follow-mouse", size: 'sm', checked: followMouse || undefined }, "Follow mouse"), h("mds-input-switch", { id: "eye-blinking", size: 'sm', checked: eyeBlinking || undefined }, "Eye blinking"), h("mds-input-range", { id: "size", min: 24, max: 320, step: 8, value: svgSize }), h("mds-input-switch", { id: "think", size: 'sm', checked: thinking || undefined }, "Think"), h("mds-button", { id: "agree", variant: "success", tone: "weak" }, "Agree"), h("mds-button", { id: "disagree", variant: "error", tone: "weak" }, "Disgree")), h("div", { class: "flex items-center justify-center bg-tone-neutral rounded-2xl shadow-md m-600 ml-0" }, h("mds-emoji", { style: { width: `${svgSize}px`, height: `${svgSize}px` }, name: "hexabot" })));
+    return (h("div", { class: "grid grid-cols-[300px_auto] gap-600 -m-600 min-h-dvh bg-tone-neutral-10" }, h("div", { class: "grid gap-200 auto-rows-min p-600" }, h("mds-input-switch", { id: "follow-mouse", size: "sm", checked: followMouse || undefined }, "Follow mouse"), h("mds-input-switch", { id: "eye-blinking", size: "sm", checked: eyeBlinking || undefined }, "Eye blinking"), h("mds-input-range", { id: "size", min: 24, max: 320, step: 8, value: svgSize }), h("mds-input-switch", { id: "think", size: "sm", checked: thinking || undefined }, "Think"), h("mds-button", { id: "agree", variant: "success", tone: "weak" }, "Agree"), h("mds-button", { id: "disagree", variant: "error", tone: "weak" }, "Disgree")), h("div", { class: "flex items-center justify-center bg-tone-neutral rounded-2xl shadow-md m-600 ml-0" }, h("mds-emoji", { style: { width: `${svgSize}px`, height: `${svgSize}px` }, name: "hexabot" }))));
 };
 const TemplateHeader = () => {
     const [modalOpened, setModalOpen] = useState(false);
@@ -138,8 +138,15 @@ const TemplateHeader = () => {
         emojiResults.stopFollowMouse();
         emojiResults.stopBlinking();
     };
-    return (h(Fragment, null, h("mds-tooltip", { target: '#emoji', style: { '--mds-tooltip-delay': '0s' } }, "Chiedimi qualcosa!"), h("mds-header", { nav: "all", menu: "none" }, h("mds-header-bar", null, h("mds-img", { class: "w-1000", src: "./logo-mindy-small.svg" }), h("mds-emoji", { id: "emoji", name: "hexabot", class: "w-1000 h-1000 cursor-pointer", slot: "nav", onClick: openModal }), h("mds-button-dropdown", { variant: "dark", tone: "weak", slot: "nav", label: 'Account' }, h("mds-button", { variant: 'light', size: 'sm' }, "Settings"), h("mds-button", { variant: 'light', size: 'sm' }, "Options"), h("mds-button", { variant: 'light', size: 'sm' }, "Logout")))), h("mds-modal", { id: "modal", opened: modalOpened === true ? true : undefined, onMdsModalClose: () => closeModal(), position: "top" }, h("div", { slot: "window", class: "max-w-[600px] w-full overflow-hidden grid rounded-xl shadow-lg bg-tone-neutral" }, h("div", { class: "flex gap-400 p-600" }, h("mds-input", { id: "input", class: "flex-grow", variant: "ai", placeholder: 'Hi, feel free to ask me something...', mic: true }), h("mds-button", { icon: "mi/baseline/chevron-right", class: "shrink-0", variant: "ai", tone: "weak", size: "lg", onClick: () => { openModalResults(); } })), h("mds-hr", { class: "bg-tone-neutral-09 rounded-none h-50" }), h("div", { class: "grid gap-200 p-600 bg-tone-neutral-10" }, h("mds-text", { typography: "label" }, "Esempi di uilizzo"), h("mds-button", { icon: "mi/baseline/search", class: "justify-start", variant: "light", tone: "weak" }, "Trovami documenti che parlano di infrazioni stradali di massimo 6 mesi fa"), h("mds-button", { icon: "mi/baseline/search", class: "justify-start", variant: "light", tone: "weak" }, "Cerca volumi sui fallimenti aziendali solo per aziende di grandi dimensioni")))), h("mds-modal", { id: "modal-results", opened: modalResultsOpened === true ? true : undefined, position: "right" }, h("div", { class: "p-600 grid gap-600 auto-rows-min" }, h("div", { class: "grid gap-600" }, h("div", { class: "p-600 bg-tone-neutral-10 rounded-lg rounded-br-none shadow-sm-sharp" }, h("mds-text", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit?")), h("mds-tooltip", { target: '#emoji-results', style: { '--mds-tooltip-delay': '0s' } }, showResults ? 'Ecco la risposta! Ricorda che posso commettere errori, pertanto verifica sempre le fonti se non ti sento sicuro!' : 'ci sono quasi...'), h("mds-emoji", { id: "emoji-results", name: "hexabot", class: clsx(showResults ? 'w-1800 h-1800' : 'w-2400 h-2400', 'm-auto transition-cosmetic hydrated duration-700 ease-in-out-quart') }), showResults ? h("div", { class: "grid gap-400" }, h("mds-text", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sed quaerat alias optio praesentium minus provident tempore laboriosam sequi minima? Quaerat laborum suscipit velit atque consectetur expedita error laboriosam maxime?"), h("mds-list", null, h("mds-list-item", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit"), h("mds-list-item", null, "Quo sed quaerat alias optio praesentium minus provident tempore laboriosam sequi minima"), h("mds-list-item", null, "Quaerat laborum suscipit velit atque consectetur expedita error laboriosam maxime")), h("div", { class: "flex items-center justify-end gap-200" }, h("mds-button-group", null, h("mds-button", { icon: "mi/outline/thumb-up", variant: "dark", tone: "quiet", size: "sm" }), h("mds-button", { icon: "mi/outline/thumb-down", variant: "dark", tone: "quiet", size: "sm" }), h("mds-button", { icon: "mi/outline/ios-share", variant: "dark", tone: "quiet", size: "sm" })))) :
-        h("mds-text", { class: "text-center" }, "Sto pensando...")), h("mds-input", { id: "input-results", class: "flex-grow", variant: "ai", placeholder: 'Hi, feel free to ask me something...', mic: true })))));
+    return (h(Fragment, null, h("mds-tooltip", { target: "#emoji", style: { '--mds-tooltip-delay': '0s' } }, "Chiedimi qualcosa!"), h("mds-header", { nav: "all", menu: "none" }, h("mds-header-bar", null, h("mds-img", { class: "w-1000", src: "./logo-mindy-small.svg" }), h("mds-emoji", { id: "emoji", name: "hexabot", class: "w-1000 h-1000 cursor-pointer", slot: "nav", onClick: openModal }), h("mds-button-dropdown", { variant: "dark", tone: "weak", slot: "nav", label: "Account" }, h("mds-button", { variant: "light", size: "sm" }, "Settings"), h("mds-button", { variant: "light", size: "sm" }, "Options"), h("mds-button", { variant: "light", size: "sm" }, "Logout")))), h("mds-modal", { id: "modal", opened: modalOpened === true ? true : undefined, onMdsModalClose: () => closeModal(), position: "top" }, h("div", { slot: "window", class: "max-w-[600px] w-full overflow-hidden grid rounded-xl shadow-lg bg-tone-neutral" }, h("div", { class: "flex gap-400 p-600" }, h("mds-input", { id: "input", class: "flex-grow", variant: "ai", placeholder: "Hi, feel free to ask me something...", mic: true }), h("mds-button", { icon: "mi/baseline/chevron-right", class: "shrink-0", variant: "ai", tone: "weak", size: "lg", onClick: () => {
+            openModalResults();
+        } })), h("mds-hr", { class: "bg-tone-neutral-09 rounded-none h-50" }), h("div", { class: "grid gap-200 p-600 bg-tone-neutral-10" }, h("mds-text", { typography: "label" }, "Esempi di uilizzo"), h("mds-button", { icon: "mi/baseline/search", class: "justify-start", variant: "light", tone: "weak" }, "Trovami documenti che parlano di infrazioni stradali di massimo 6 mesi fa"), h("mds-button", { icon: "mi/baseline/search", class: "justify-start", variant: "light", tone: "weak" }, "Cerca volumi sui fallimenti aziendali solo per aziende di grandi dimensioni")))), h("mds-modal", { id: "modal-results", opened: modalResultsOpened === true ? true : undefined, position: "right" }, h("div", { class: "p-600 grid gap-600 auto-rows-min" }, h("div", { class: "grid gap-600" }, h("div", { class: "p-600 bg-tone-neutral-10 rounded-lg rounded-br-none shadow-sm-sharp" }, h("mds-text", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit?")), h("mds-tooltip", { target: "#emoji-results", style: { '--mds-tooltip-delay': '0s' } }, showResults
+        ? 'Ecco la risposta! Ricorda che posso commettere errori, pertanto verifica sempre le fonti se non ti sento sicuro!'
+        : 'ci sono quasi...'), h("mds-emoji", { id: "emoji-results", name: "hexabot", class: clsx(showResults ? 'w-1800 h-1800' : 'w-2400 h-2400', 'm-auto transition-cosmetic hydrated duration-700 ease-in-out-quart') }), showResults ? (h("div", { class: "grid gap-400" }, h("mds-text", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sed quaerat alias optio praesentium minus provident tempore laboriosam sequi minima? Quaerat laborum suscipit velit atque consectetur expedita error laboriosam maxime?"), h("mds-list", null, h("mds-list-item", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit"), h("mds-list-item", null, "Quo sed quaerat alias optio praesentium minus provident tempore laboriosam sequi minima"), h("mds-list-item", null, "Quaerat laborum suscipit velit atque consectetur expedita error laboriosam maxime")), h("div", { class: "flex items-center justify-end gap-200" }, h("mds-button-group", null, h("mds-button", { icon: "mi/outline/thumb-up", variant: "dark", tone: "quiet", size: "sm" }), h("mds-button", { icon: "mi/outline/thumb-down", variant: "dark", tone: "quiet", size: "sm" }), h("mds-button", { icon: "mi/outline/ios-share", variant: "dark", tone: "quiet", size: "sm" }))))) : (h("mds-text", { class: "text-center" }, "Sto pensando..."))), h("mds-input", { id: "input-results", class: "flex-grow", variant: "ai", placeholder: "Hi, feel free to ask me something...", mic: true })))));
+};
+export const Default = {
+    render: Template,
+};
+export const HeaderExample = {
+    render: TemplateHeader,
 };
-export const Default = Template.bind({});
-export const HeaderExample = TemplateHeader.bind({});