feat: add Atropos web component

* Element add

* Changes in atropos.js and main.css

* chore: fix component children lookup

* Props changed (to an object) and adoptedStyleSheets

* Get Value from  changed attribute

* Added Element in src, scripts and changed styles

* Build-element refactored (ESM,ESM Browser,UMD)

* build-element refactored

* chore: update terser

* Changes in minifiedCode (only in prod)

* package.json added, main.js import changed and roll up refactored

* path exports changed in package

* chore: tweak element build

* chore: move defaults to common object

* Update atropos.less

* Update package.json

* Props[key] (number) changed

---------

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>

build/element/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "atropos/element",
+  "private": true,
+  "type": "module",
+  "exports": "./atropos-element.esm.js",
+  "sideEffects": false
+}

build/package.json

@@ -9,12 +9,13 @@
     "./esm/browser": "./react/atropos.esm.browser.js",
     "./esm/browser/min": "./react/atropos.esm.browser.min.js",
     "./react": "./react/atropos-react.esm.js",
-    "./vue": "./react/atropos-vue.esm.js",
+    "./vue": "./vue/atropos-vue.esm.js",
     "./atropos.js": "./atropos.js",
     "./atropos.min.js": "./atropos.min.js",
     "./atropos.css": "./atropos.css",
     "./atropos.min.css": "./atropos.min.css",
     "./atropos.less": "./atropos.less",
-    "./atropos.scss": "./atropos.scss"
+    "./atropos.scss": "./atropos.scss",
+    "./element": "./element/atropos-element.esm.js"
   }
 }

package.json

@@ -14,6 +14,7 @@
     "react": "npm run build:dev && concurrently --kill-others \"vite ./playground/react\" \"npm run watch:dev\"",
     "vue": "npm run build:dev && concurrently --kill-others \"vite ./playground/vue\" \"npm run watch:dev\"",
     "svelte": "npm run build:dev && concurrently --kill-others \"vite ./playground/svelte\" \"npm run watch:dev\"",
+    "element": "npm run build:dev && concurrently --kill-others \"vite ./playground/element\" \"npm run watch:dev\"",
     "/*============ Tooling ============*/": "============",
     "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts|svelte|jsx)\"",
     "format": "npm run prettier -- --write",
@@ -57,7 +58,7 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "exec-sh": "^0.4.0",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^10.1.0",
     "inquirer": "^8.1.1",
     "less": "^4.1.1",
     "npm-run-all": "^4.1.5",
@@ -69,7 +70,7 @@
     "rollup": "^2.52.1",
     "serve": "^11.3.2",
     "svelte": "^3.43.1",
-    "terser": "^5.7.0",
+    "terser": "^5.18.1",
     "vite": "^2.3.7",
     "vue": "^3.1.1"
   }

package/element/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "atropos/element",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./element": "./atropos-element.esm.js",
+    "./element/browser": "./atropos-element.esm.min.js"
+  },
+  "sideEffects": false
+}

package/package.json

@@ -24,7 +24,9 @@
     "./atropos.min.css": "./atropos.min.css",
     "./atropos.less": "./atropos.less",
     "./atropos.scss": "./atropos.scss",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./element":"./element/atropos-element.esm.js",
+    "./element/browser": "./element/atropos-element.esm.min.js"
   },
   "repository": {
     "type": "git",