@amiceli/papierjs 0.3.0 → 0.4.0

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import feather from "feather-icons";
+/**
+ * @slot - accordion content
+ */
+export class PAccordion {
+    constructor() {
+        this.open = false;
+    }
+    render() {
+        const icon = feather.icons['chevron-down'].toSvg();
+        const openIcon = feather.icons['chevron-up'].toSvg();
+        return (h(Host, { key: 'b0deb772470e3a26deea430be79bd8b3d245205b' }, h("div", { key: '9b14d7df7498285ae1587ec50e6b40ffa9081973', class: "papier" }, h("div", { key: '7ca86fce3c6150d8e42440cb834b34af013c11b0', class: "p-accordion is--block border" }, h("div", { key: 'b04c66e4c63b6216ffb6ab1277d7cc68e056c8b1', class: "p-accordion__summary", onClick: () => {
+                this.open = !this.open;
+            } }, h("span", { key: '79cc5ae2232d7613471d23d3d962d695bfa5eaec' }, this.title), h("span", { key: '8bae09ef9a9a075d4a13c0ecfb2f7f1695694801' }, h("span", { key: 'a6d1920927eb8360c19b93fe2a854e052b8733f5', class: "for--icon", innerHTML: this.open ? openIcon : icon }))), h("div", { key: '84ac942abb97d143725b7f6fa8494a47721ee2a1', class: {
+                'p-accordion__content': true,
+                'is--open': this.open,
+            } }, h("slot", { key: '4e3123ec9d77d1c45870be854e4263c4807b6221' }))))));
+    }
+    static get is() { return "p-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=accordion.js.map

package/dist/collection/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC;;GAEG;AAMH,MAAM,OAAO,UAAU;IALvB;QASI,SAAI,GAAY,KAAK,CAAA;KAqCxB;IAnCG,MAAM;QACF,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;QAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAA;QAEpD,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,QAAQ;gBACf,4DAAK,KAAK,EAAC,8BAA8B;oBACrC,4DACI,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE;4BACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;wBAC1B,CAAC;wBAED,+DAAO,IAAI,CAAC,KAAK,CAAQ;wBACzB;4BACI,6DACI,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GACxC,CACC,CACL;oBACN,4DACI,KAAK,EAAE;4BACH,sBAAsB,EAAE,IAAI;4BAC5B,UAAU,EAAE,IAAI,CAAC,IAAI;yBACxB;wBAED,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core'\nimport feather from 'feather-icons'\n\n/**\n * @slot - accordion content\n */\n@Component({\n    tag: 'p-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true,\n})\nexport class PAccordion {\n    @Prop()\n    title: string\n    @Prop({ mutable: true })\n    open: boolean = false\n\n    render() {\n        const icon = feather.icons['chevron-down'].toSvg()\n        const openIcon = feather.icons['chevron-up'].toSvg()\n\n        return (\n            <Host>\n                <div class=\"papier\">\n                    <div class=\"p-accordion is--block border\">\n                        <div\n                            class=\"p-accordion__summary\"\n                            onClick={() => {\n                                this.open = !this.open\n                            }}\n                        >\n                            <span>{this.title}</span>\n                            <span>\n                                <span\n                                    class=\"for--icon\"\n                                    innerHTML={this.open ? openIcon : icon}\n                                />\n                            </span>\n                        </div>\n                        <div\n                            class={{\n                                'p-accordion__content': true,\n                                'is--open': this.open,\n                            }}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/alert/alert.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 export class Alert {
     constructor() {
         this.type = 'primary';
+        /** Show close icon */
         this.closable = false;
         this.dark = false;
     }
@@ -30,7 +31,7 @@ export class Alert {
         this.close.emit(null);
     }
     render() {
-        return (h("div", { key: '47023968aab603c5f3cc8c4c104531fccfda18c5', class: this.getParentClass() }, h("div", { key: '9493fbb5effde0c373150a46f92e080a043641c0', class: this.getClass() }, h("slot", { key: '5cca2a145a4b287d6c3947afdcab64c0439b2e36' }), this.closable && (h("span", { key: '7682a194126fd1672f4243a897eecb43926aceee', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
+        return (h("div", { key: '8bd3d21315cff40886e9e45ba82251dcc932ea67', class: this.getParentClass() }, h("div", { key: '3d3124b7082f07bf450693a68ef7856ab3568981', class: this.getClass() }, h("slot", { key: 'aa07a9c9a12603de6136867e6c52f1610f4393c8' }), this.closable && (h("span", { key: 'cae998e950faac1bd144a8395feb3af09038ddf5', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
     }
     static get is() { return "p-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -83,7 +84,7 @@ export class Alert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Show close icon"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAS5E,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAqDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,gBAAgB,CAAA;QAC1C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,UAAU,IAAI,CAAC,IAAI,EAAE,CAAA;QAC/C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,cAAc,CAAA;QACxC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACvB,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,QAG7B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Prop, h } from '@stencil/core'\n\ntype AlertColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: AlertColor = 'primary'\n    @Prop()\n    closable?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({ eventName: 'close' })\n    public close: EventEmitter\n\n    public getClass(): string {\n        const types = ['primary', 'secondary', 'success', 'warning', 'danger']\n        let cssClass = 'alert'\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} alert-primary`\n        } else {\n            cssClass = `${cssClass} alert-${this.type}`\n        }\n\n        if (this.closable) {\n            cssClass = `${cssClass} dismissible`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public closeAlert() {\n        this.close.emit(null)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class={this.getClass()}>\n                    <slot />\n                    {this.closable && (\n                        <span\n                            class=\"btn-close\"\n                            onClick={() => this.closeAlert()}\n                        >\n                            X\n                        </span>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAS5E,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAC7B,sBAAsB;QACd,aAAQ,GAAa,KAAK,CAAA;QAElC,SAAI,GAAa,KAAK,CAAA;KAqDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,gBAAgB,CAAA;QAC1C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,UAAU,IAAI,CAAC,IAAI,EAAE,CAAA;QAC/C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,cAAc,CAAA;QACxC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACvB,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,QAG7B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Prop, h } from '@stencil/core'\n\ntype AlertColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: AlertColor = 'primary'\n    /** Show close icon */\n    @Prop() closable?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({ eventName: 'close' })\n    public close: EventEmitter\n\n    public getClass(): string {\n        const types = ['primary', 'secondary', 'success', 'warning', 'danger']\n        let cssClass = 'alert'\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} alert-primary`\n        } else {\n            cssClass = `${cssClass} alert-${this.type}`\n        }\n\n        if (this.closable) {\n            cssClass = `${cssClass} dismissible`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public closeAlert() {\n        this.close.emit(null)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class={this.getClass()}>\n                    <slot />\n                    {this.closable && (\n                        <span\n                            class=\"btn-close\"\n                            onClick={() => this.closeAlert()}\n                        >\n                            X\n                        </span>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/alert/stories/alert.stories.js

@@ -0,0 +1,46 @@
+export default {
+    title: 'Components/Alert/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'warning', 'danger', 'noted'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+        closable: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <p-alert
+            type="${args.type}"
+            ${args.darkMode ? 'dark' : ''}
+            ${args.closable ? 'closable' : ''}
+        >
+            ${args.contenr}
+        </p-alert>`
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Alert',
+    type: 'primary',
+    closable: false,
+    darkMode: false,
+}

package/dist/collection/components/badge/badge.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class Badge {
     constructor() {
         this.type = undefined;
         this.dark = false;
@@ -15,7 +15,7 @@ export class Alert {
         return `badge ${this.type || ''}`;
     }
     render() {
-        return (h("span", { key: '8947da087996ec478bcc59b0c878c203cbe4ff10', class: this.getParentClass() }, h("span", { key: 'fc50c11ce3ed7c7ffe89c386f13f8a5613ead19f', class: this.getClass() }, h("slot", { key: '3b4f74d27a93595c92acec9522e963f5fbd9af01' }))));
+        return (h("span", { key: '52a7bbad09e315c5d62a0db2d126bf0eccbf4853', class: this.getParentClass() }, h("span", { key: '677be8262e1712ff8f9f9b030b427168976d785b', class: this.getClass() }, h("slot", { key: '94dfa4f2f13463c15352139445e84757a8d38229' }))));
     }
     static get is() { return "p-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,SAAI,GAAa,KAAK,CAAA;KAyBzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,6DAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,8DAAQ,CACL,CACJ,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype BadgeColor = 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: BadgeColor = undefined\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        let cssClass = `papier`\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public getClass() {\n        return `badge ${this.type || ''}`\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                <span class={this.getClass()}>\n                    <slot />\n                </span>\n            </span>\n        )\n    }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,SAAI,GAAa,KAAK,CAAA;KAyBzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,6DAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,8DAAQ,CACL,CACJ,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype BadgeColor = 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    @Prop()\n    type?: BadgeColor = undefined\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        let cssClass = `papier`\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public getClass() {\n        return `badge ${this.type || ''}`\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                <span class={this.getClass()}>\n                    <slot />\n                </span>\n            </span>\n        )\n    }\n}\n"]}

package/dist/collection/components/badge/stories/badge.stories.js

@@ -0,0 +1,45 @@
+export default {
+    title: 'Components/Badge/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['success', 'secondary', 'warning', 'danger'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <h3 
+            style="font-size : 40px; color: ${args.darkMode ? 'white' : 'black'}"
+        >
+            PapierJS : <p-badge
+                type="${args.type}"
+                ${args.darkMode ? 'dark' : ''}
+            >
+                ${args.contenr}
+            </p-badge>
+        </h3>
+    `
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Alert',
+    type: 'success',
+    darkMode: false,
+}

package/dist/collection/components/breadcrumb/{breadcrumb.js → breadcrumb/breadcrumb.js}

@@ -21,7 +21,7 @@ export class Alert {
         (_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.setAttribute('first', 'true');
     }
     render() {
-        return (h("div", { key: 'af2eebdd03d8ef458f5d0f22d3110c13bcf8d727', class: this.getParentClass() }, h("div", { key: '0176c685a86512b9ca4fc1db688e762c3a9c0a23', class: "border" }, h("slot", { key: '8496e8639f445bb57f0a695de9f73072341265ae' }))));
+        return (h("div", { key: '096184248650d57d4844d845c43943e1ec0a3b33', class: this.getParentClass() }, h("div", { key: 'fc2cf5bf0262d2577811f216650bdb042153268c', class: "border" }, h("slot", { key: '07d4dfb59b90664e25de9f0a885f6e251f403567' }))));
     }
     static get is() { return "p-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO3D,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAa,KAAK,CAAA;KAqCzB;IAjCU,cAAc;QACjB,IAAI,QAAQ,GAAG,6BAA6B,CAAA;QAE5C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,gBAAgB;;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACpB,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CACpD,CAAA;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YACrC,CAAC;QACL,CAAC;QAED,MAAA,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,0CAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAC,QAAQ;gBACf,8DAAQ,CACN,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    dark?: boolean = false\n    @Element()\n    public el: HTMLElement\n\n    public getParentClass() {\n        let cssClass = 'papier is--block breadcrumb'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public componentDidLoad() {\n        const items = Array.from(\n            this.el.getElementsByTagName('p-breadcrumb-item'),\n        )\n\n        if (this.dark) {\n            for (const item of items) {\n                item.setAttribute('dark', 'true')\n            }\n        }\n\n        items.at(0)?.setAttribute('first', 'true')\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class=\"border\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/{breadcrumb-item → breadcrumb/breadcrumb-item}/breadcrumb-item.js

@@ -15,7 +15,7 @@ export class Alert {
         return cssClass;
     }
     render() {
-        return (h("span", { key: '42d46bd89135edd09f7b42a1cda15739e87b95df', class: this.getParentClass() }, this.link ? (h("a", { href: this.link }, h("slot", null))) : (h("slot", null))));
+        return (h("span", { key: 'd162c8b69820f75105c5965e50083cff20ccdcf5', class: this.getParentClass() }, this.link ? (h("a", { href: this.link }, h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "p-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO3D,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAa,KAAK,CAAA;QAEtB,UAAK,GAAa,KAAK,CAAA;KAgC1B;IA1BU,cAAc;QACjB,IAAI,QAAQ,GAAG,wBAAwB,CAAA;QAEvC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI;YACd,eAAQ,CACR,CACP,CAAC,CAAC,CAAC,CACA,eAAQ,CACX,CACE,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core'\n\n@Component({\n    tag: 'p-breadcrumb-item',\n    styleUrl: '../breadcrumb/breadcrumb.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    dark?: boolean = false\n    @Prop()\n    first?: boolean = false\n    @Prop()\n    link?: string\n    @Element()\n    public el: HTMLElement\n\n    public getParentClass() {\n        let cssClass = 'papier breadcrumb-item'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n        if (this.first) {\n            cssClass = `${cssClass} is--first`\n        }\n\n        return cssClass\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                {this.link ? (\n                    <a href={this.link}>\n                        <slot />\n                    </a>\n                ) : (\n                    <slot />\n                )}\n            </span>\n        )\n    }\n}\n"]}

package/dist/collection/components/button/button.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @slot - button content
+ */
 export class Button {
     constructor() {
         this.type = 'primary';
@@ -38,7 +41,7 @@ export class Button {
         return cssClass;
     }
     render() {
-        return (h("div", { key: '1c618ca8e283cc22ad0fff8395c262dd891b89e0', class: this.getParentClass() }, h("button", { key: '717a834ccb80db04f6ee66c8f210e0208b316eaa', disabled: this.disabled, type: "button", class: this.getClass() }, h("slot", { key: 'fb587d8a9c051a2212e38806dabeca4bac4e503b' }))));
+        return (h("div", { key: '3c3bab1320da3fc542da339efd5f5f662e4dead7', class: this.getParentClass() }, h("button", { key: '2470e0d23f3eeddcb5904e3ed8893485476953b4', disabled: this.disabled, type: "button", class: this.getClass() }, h("slot", { key: 'c14fa1c98e0e09c7a746d8167ce0332366753283' }))));
     }
     static get is() { return "p-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,MAAM;IALnB;QAOI,SAAI,GAAiB,SAAS,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAkDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,aAAa,CAAA;QAC5B,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;QACjC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,UAAU,CAAA;QACzB,CAAC;QAED,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QAEzD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IACD,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,+DACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBAEtB,8DAAQ,CACH,CACP,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype ButtonColor = 'success' | 'secondary' | 'primary' | 'danger' | 'warning'\n\n@Component({\n    tag: 'p-button',\n    styleUrl: 'button.scss',\n    shadow: true,\n})\nexport class Button {\n    @Prop()\n    type?: ButtonColor = 'primary'\n    @Prop()\n    outline?: boolean = false\n    @Prop()\n    large?: boolean = false\n    @Prop()\n    small?: boolean = false\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    disabled?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    public getClass(): string {\n        const types = ['success', 'secondary', 'primary', 'danger', 'warning']\n        let cssClass = ''\n\n        if (!types.includes(this.type)) {\n            cssClass = 'btn-primary'\n        } else {\n            cssClass = `btn-${this.type}`\n        }\n\n        if (this.disabled) {\n            cssClass = 'disabled'\n        }\n\n        cssClass = `${cssClass}${this.outline ? '-outline' : ''}`\n        cssClass = `${cssClass}${this.large ? ' btn-large' : ''}`\n        cssClass = `${cssClass}${this.small ? ' btn-small' : ''}`\n        cssClass = `${cssClass}${this.block ? ' btn-block' : ''}`\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier'\n\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <button\n                    disabled={this.disabled}\n                    type=\"button\"\n                    class={this.getClass()}\n                >\n                    <slot />\n                </button>\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAIlD;;GAEG;AAMH,MAAM,OAAO,MAAM;IALnB;QAOI,SAAI,GAAiB,SAAS,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAkDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,aAAa,CAAA;QAC5B,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;QACjC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,UAAU,CAAA;QACzB,CAAC;QAED,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;QAEzD,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IACD,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,+DACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBAEtB,8DAAQ,CACH,CACP,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype ButtonColor = 'success' | 'secondary' | 'primary' | 'danger' | 'warning'\n\n/**\n * @slot - button content\n */\n@Component({\n    tag: 'p-button',\n    styleUrl: 'button.scss',\n    shadow: true,\n})\nexport class Button {\n    @Prop()\n    type?: ButtonColor = 'primary'\n    @Prop()\n    outline?: boolean = false\n    @Prop()\n    large?: boolean = false\n    @Prop()\n    small?: boolean = false\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    disabled?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    public getClass(): string {\n        const types = ['success', 'secondary', 'primary', 'danger', 'warning']\n        let cssClass = ''\n\n        if (!types.includes(this.type)) {\n            cssClass = 'btn-primary'\n        } else {\n            cssClass = `btn-${this.type}`\n        }\n\n        if (this.disabled) {\n            cssClass = 'disabled'\n        }\n\n        cssClass = `${cssClass}${this.outline ? '-outline' : ''}`\n        cssClass = `${cssClass}${this.large ? ' btn-large' : ''}`\n        cssClass = `${cssClass}${this.small ? ' btn-small' : ''}`\n        cssClass = `${cssClass}${this.block ? ' btn-block' : ''}`\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier'\n\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <button\n                    disabled={this.disabled}\n                    type=\"button\"\n                    class={this.getClass()}\n                >\n                    <slot />\n                </button>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/button/stories/button.stories.js

@@ -0,0 +1,53 @@
+export default {
+    title: 'Components/Buttons/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['success', 'secondary', 'warning', 'danger'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <div style="width: 400px">
+            <p-button
+                type="${args.type}"
+                ${args.darkMode ? 'dark' : ''}
+                ${args.outline ? 'outline' : ''}
+                ${args.small ? 'small' : ''}
+                ${args.large ? 'large' : ''}
+                ${args.block ? 'block' : ''}
+                ${args.disabled ? 'disabled' : ''}
+            >
+                ${args.contenr}
+            </p-button>
+        </div>
+    `
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Awesome button',
+    type: 'success',
+    darkMode: false,
+    outline: false,
+    large: false,
+    small: false,
+    block: false,
+    disabled: false,
+}

package/dist/collection/components/dropdown/{dropdown.css → dropdown/dropdown.css}

@@ -3263,7 +3263,7 @@
 }
 :host .dropdown__children {
   position: absolute;
-  z-index: 10;
+  z-index: 222;
   top: 31px;
   left: 0;
   width: 100%;

package/dist/collection/components/dropdown/{dropdown.js → dropdown/dropdown.js}

@@ -1,35 +1,52 @@
 import { h, } from "@stencil/core";
 import feather from "feather-icons";
+/**
+ * @slot - slot for p-dropdown-item
+ */
 export class Alert {
     constructor() {
         this.dark = false;
+        /** Prevent dropdown self update selected value */
+        this.preventSelected = false;
+        /** Selected item value */
+        this.value = '';
         this.open = false;
     }
     getParentClass() {
-        let cssClass = 'papier dropdown'; // is--block
-        if (this.dark) {
-            cssClass = `${cssClass} is--dark`;
-        }
-        if (this.open) {
-            cssClass = `${cssClass} is--open`;
-        }
-        return cssClass;
+        return {
+            'papier dropdown': true,
+            'is--dark': this.dark,
+            'is--open': this.open,
+        };
     }
     detectOutsideClick(ev) {
-        if (this.el.contains(ev.target)) {
-            return;
+        if (!this.el.contains(ev.target)) {
+            this.open = false;
         }
-        this.open = false;
     }
-    componentDidLoad() {
+    resetItem() {
+        const items = Array.from(this.el.getElementsByTagName('p-dropdown-item'));
+        for (const item of items) {
+            item.removeAttribute('selected');
+        }
+    }
+    componentWillLoad() {
         const items = Array.from(this.el.getElementsByTagName('p-dropdown-item'));
         for (const item of items) {
             if (this.dark) {
                 item.setAttribute('dark', 'true');
             }
+            if (item.selected === true) {
+                this.value = item.value;
+            }
             item.addEventListener('change', (e) => {
                 this.selectEvent.emit(e.detail);
                 this.open = !this.open;
+                if (!this.preventSelected) {
+                    this.resetItem();
+                    item.setAttribute('selected', '');
+                    this.value = e.detail;
+                }
             });
         }
     }
@@ -37,20 +54,18 @@ export class Alert {
         this.selectEvent.emit(value);
     }
     getSelectedValue() {
-        const items = this.el.getElementsByTagName('p-dropdown-item');
-        const list = Array.from(items);
+        const list = Array.from(this.el.querySelectorAll('p-dropdown-item'));
         const selected = list.find((item) => {
-            const attr = item.getAttribute('selected');
-            return attr === 'true' || attr === '';
+            return item.value === this.value;
         });
         return (selected === null || selected === void 0 ? void 0 : selected.innerText) || this.placeholder || '';
     }
     render() {
         const selected = this.getSelectedValue();
         const arrowIcon = feather.icons['chevron-down'].toSvg();
-        return (h("div", { key: '9f7c66a6e8ef3f1a050364e6b6cc1da192b86f73', class: this.getParentClass() }, h("div", { key: '9782c6a363e58d6c3b18ccc6d33c9493ab01b6a6', class: "dropdown__header border border-primary", onClick: () => {
+        return (h("div", { key: 'a58cb116140fba1936bdd1256e45c02dd14adf4b', class: this.getParentClass() }, h("div", { key: '3f73224c62767cc1af3547b5957c4570714c4857', class: "dropdown__header border border-primary", onClick: () => {
                 this.open = !this.open;
-            } }, h("span", { key: '4b2953444c789ed80dc4cb414aef552c3b3c1dd5' }, selected), h("span", { key: 'e41e42ae315100c022a7b49c290e7c4e9f030468', class: "for--icon", innerHTML: arrowIcon })), h("div", { key: '82d2dd647027e24bcf858a7488f017db6b3e5657', class: "dropdown__children" }, h("slot", { key: '8227a8fc7c135db8f14f961038073f225849cfad' }))));
+            } }, h("span", { key: '5cea9b8d3e440a539e29d8d75313446df89e52a9' }, selected), h("span", { key: '9ed09221e97a13894a3a81a6a4b0f3e0c268c155', class: "for--icon", innerHTML: arrowIcon })), h("div", { key: '6f79a026eddddd24b9e4973e732a25ea68a9be16', class: "dropdown__children" }, h("slot", { key: 'cb95fcdbe5ac7d6319473064280c9d63544b87dd' }))));
     }
     static get is() { return "p-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -86,6 +101,46 @@ export class Alert {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "preventSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevent dropdown self update selected value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prevent-selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected item value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/dropdown/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    type EventEmitter,\n    Listen,\n    Prop,\n    State,\n    h,\n} from '@stencil/core'\nimport feather from 'feather-icons'\n\n/**\n * @slot - slot for p-dropdown-item\n */\n@Component({\n    tag: 'p-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    dark?: boolean = false\n    /** Prevent dropdown self update selected value */\n    @Prop()\n    preventSelected?: boolean = false\n    /** Selected item value */\n    @Prop({ mutable: true })\n    value?: string = ''\n    @State()\n    open?: boolean = false\n    @Prop()\n    placeholder?: string\n    @State()\n    selectedValue?: string\n    @Element()\n    public el: HTMLElement\n\n    @Event({ eventName: 'select' })\n    public selectEvent: EventEmitter<string>\n\n    public getParentClass() {\n        return {\n            'papier dropdown': true,\n            'is--dark': this.dark,\n            'is--open': this.open,\n        }\n    }\n\n    @Listen('click', { target: 'window' })\n    public detectOutsideClick(ev) {\n        if (!this.el.contains(ev.target)) {\n            this.open = false\n        }\n    }\n\n    public resetItem() {\n        const items = Array.from(\n            this.el.getElementsByTagName('p-dropdown-item'),\n        )\n\n        for (const item of items) {\n            item.removeAttribute('selected')\n        }\n    }\n\n    public componentWillLoad() {\n        const items = Array.from(\n            this.el.getElementsByTagName('p-dropdown-item'),\n        )\n\n        for (const item of items) {\n            if (this.dark) {\n                item.setAttribute('dark', 'true')\n            }\n            if (item.selected === true) {\n                this.value = item.value\n            }\n            item.addEventListener('change', (e) => {\n                this.selectEvent.emit(e.detail)\n                this.open = !this.open\n\n                if (!this.preventSelected) {\n                    this.resetItem()\n                    item.setAttribute('selected', '')\n                    this.value = e.detail\n                }\n            })\n        }\n    }\n\n    public selectValue(value: string) {\n        this.selectEvent.emit(value)\n    }\n\n    public getSelectedValue(): string {\n        const list = Array.from(this.el.querySelectorAll('p-dropdown-item'))\n        const selected = list.find((item) => {\n            return item.value === this.value\n        })\n\n        return selected?.innerText || this.placeholder || ''\n    }\n\n    render() {\n        const selected = this.getSelectedValue()\n        const arrowIcon = feather.icons['chevron-down'].toSvg()\n\n        return (\n            <div class={this.getParentClass()}>\n                <div\n                    class=\"dropdown__header border border-primary\"\n                    onClick={() => {\n                        this.open = !this.open\n                    }}\n                >\n                    <span>{selected}</span>\n                    <span class=\"for--icon\" innerHTML={arrowIcon} />\n                </div>\n                <div class=\"dropdown__children\">\n                    <slot />\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/dropdown/dropdown/stories/dropdown-playground.stories.js

@@ -0,0 +1,73 @@
+import { Source } from '@storybook/blocks'
+
+export default {
+    title: 'Components/Dropdown/Playground',
+    argTypes: {
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    return `
+        <div style="width : 90%">
+            <p-leaf>
+                <h3>p-dropdown</h3>
+            </p-leaf>
+            <br />
+            <p>
+                By default dropdown update and display selected value :
+            </p>
+            <div>
+                <p-dropdown
+                    ${args.darkMode ? 'dark' : ''}
+                    value="Vue js"
+                    ${args.preventSelected ? 'prevent-selected' : ''}
+                >
+                    <p-dropdown-item value="Vue js" selected>
+                        Vue Js
+                    </p-dropdown-item>
+                    <p-dropdown-item value="Nest">
+                        Nest
+                    </p-dropdown-item>
+                    <p-dropdown-item value="Storybook">
+                        Storybook
+                    </p-dropdown-item>
+                </p-dropdown>
+            </div>
+            <p-leaf>
+                <h3>p-dropdown with placeholder</h3>
+                <p>
+                    But you can prevent this with 'prevent-selected' :
+                </p>
+            </p-leaf>
+            <div>
+                <p-dropdown
+                    ${args.darkMode ? 'dark' : ''}
+                    placeholder="${args.placeholder}"
+                    ${args.preventSelected ? 'prevent-selected' : ''}
+                >
+                    <p-dropdown-item value="Vue js">
+                        Vue Js
+                    </p-dropdown-item>
+                    <p-dropdown-item value="Nest">
+                        Nest
+                    </p-dropdown-item>
+                    <p-dropdown-item value="Storybook">
+                        Storybook
+                    </p-dropdown-item>
+                </p-dropdown>
+            </div>
+        </div>
+    `
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    darkMode: false,
+    preventSelected: false,
+    placeholder: 'Choose a framework',
+}