From 7e938727c25a2935faa31226941ccfcb0094a770 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Wed, 4 Oct 2023 20:16:46 -0400
Subject: [PATCH 01/30] build component and test

---
 package-lock.json      | 659 +++++++++++++++++++++++++++++++++++++++--
 package.json           |   3 +
 result.js              |  88 ++++++
 src/build-component.js |  36 +++
 test.html              |   3 +
 x-button.html          |   3 +
 6 files changed, 761 insertions(+), 31 deletions(-)
 create mode 100644 result.js
 create mode 100644 src/build-component.js
 create mode 100644 test.html
 create mode 100644 x-button.html

diff --git a/package-lock.json b/package-lock.json
index 8c29283..d0f92e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
 			"name": "tram-lite",
 			"version": "4.1.1",
 			"license": "MIT",
+			"dependencies": {
+				"jsdom": "^22.1.0"
+			},
 			"devDependencies": {
 				"cypress": "^12.14.0",
 				"html-import-element": "^1.1.0",
@@ -74,6 +77,14 @@
 				"ms": "^2.1.1"
 			}
 		},
+		"node_modules/@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/@types/node": {
 			"version": "14.18.50",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.50.tgz",
@@ -108,6 +119,11 @@
 			"integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
 			"dev": true
 		},
+		"node_modules/abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+		},
 		"node_modules/accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -121,6 +137,17 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"dependencies": {
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
 		"node_modules/aggregate-error": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -269,8 +296,7 @@
 		"node_modules/asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-			"dev": true
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 		},
 		"node_modules/at-least-node": {
 			"version": "1.0.0",
@@ -780,7 +806,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-			"dev": true,
 			"dependencies": {
 				"delayed-stream": "~1.0.0"
 			},
@@ -892,6 +917,17 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/cssstyle": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
+			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+			"dependencies": {
+				"rrweb-cssom": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/cypress": {
 			"version": "12.14.0",
 			"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz",
@@ -961,6 +997,19 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/data-urls": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
+			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+			"dependencies": {
+				"abab": "^2.0.6",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/dayjs": {
 			"version": "1.11.8",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
@@ -971,7 +1020,6 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -984,6 +1032,11 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+		},
 		"node_modules/deep-extend": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -997,11 +1050,21 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
 			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/domexception": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+			"dependencies": {
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1045,6 +1108,17 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1359,12 +1433,36 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/html-encoding-sniffer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"dependencies": {
+				"whatwg-encoding": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/html-import-element": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/html-import-element/-/html-import-element-1.1.0.tgz",
 			"integrity": "sha512-Mw4SmJDp0lIrAmF3R41gZ9k4fWfaKnIAkKUFJLsZK5oukpeAUCKpHHIJRidysrcrSIEXH/pU2ZG285njj1EXXQ==",
 			"dev": true
 		},
+		"node_modules/http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"dependencies": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/http-signature": {
 			"version": "1.3.6",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
@@ -1379,6 +1477,18 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"dependencies": {
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -1388,6 +1498,17 @@
 				"node": ">=8.12.0"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -1515,6 +1636,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+		},
 		"node_modules/is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -1575,6 +1701,82 @@
 			"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
 			"dev": true
 		},
+		"node_modules/jsdom": {
+			"version": "22.1.0",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
+			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+			"dependencies": {
+				"abab": "^2.0.6",
+				"cssstyle": "^3.0.0",
+				"data-urls": "^4.0.0",
+				"decimal.js": "^10.4.3",
+				"domexception": "^4.0.0",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.1",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.4",
+				"parse5": "^7.1.2",
+				"rrweb-cssom": "^0.6.0",
+				"saxes": "^6.0.0",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.1.2",
+				"w3c-xmlserializer": "^4.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^2.0.0",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.1",
+				"ws": "^8.13.0",
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"canvas": "^2.5.0"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jsdom/node_modules/form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/jsdom/node_modules/tough-cookie": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+			"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+			"dependencies": {
+				"psl": "^1.1.33",
+				"punycode": "^2.1.1",
+				"universalify": "^0.2.0",
+				"url-parse": "^1.5.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsdom/node_modules/universalify": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
 		"node_modules/json-schema": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -1755,7 +1957,6 @@
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -1764,7 +1965,6 @@
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-			"dev": true,
 			"dependencies": {
 				"mime-db": "1.52.0"
 			},
@@ -1805,8 +2005,7 @@
 		"node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 		},
 		"node_modules/negotiator": {
 			"version": "0.6.3",
@@ -1829,6 +2028,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/nwsapi": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
+			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
+		},
 		"node_modules/object-inspect": {
 			"version": "1.12.3",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -1892,6 +2096,17 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1979,8 +2194,7 @@
 		"node_modules/psl": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"dev": true
+			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
 		},
 		"node_modules/pump": {
 			"version": "3.0.0",
@@ -1996,7 +2210,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
 			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -2016,6 +2229,11 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/querystringify": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+		},
 		"node_modules/range-parser": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@@ -2086,6 +2304,11 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+		},
 		"node_modules/restore-cursor": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -2120,6 +2343,11 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/rrweb-cssom": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw=="
+		},
 		"node_modules/rxjs": {
 			"version": "7.8.1",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -2152,8 +2380,18 @@
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+		},
+		"node_modules/saxes": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+			"dependencies": {
+				"xmlchars": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=v12.22.7"
+			}
 		},
 		"node_modules/semver": {
 			"version": "7.5.1",
@@ -2383,6 +2621,11 @@
 				"url": "https://github.com/chalk/supports-color?sponsor=1"
 			}
 		},
+		"node_modules/symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+		},
 		"node_modules/throttleit": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -2420,6 +2663,17 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/tr46": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
+			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+			"dependencies": {
+				"punycode": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/tslib": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
@@ -2505,6 +2759,15 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"dependencies": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -2537,6 +2800,56 @@
 				"extsprintf": "^1.2.0"
 			}
 		},
+		"node_modules/w3c-xmlserializer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"dependencies": {
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-url": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
+			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"dependencies": {
+				"tr46": "^4.1.1",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2640,6 +2953,39 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"node_modules/ws": {
+			"version": "8.14.2",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
+			"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -2712,6 +3058,11 @@
 				}
 			}
 		},
+		"@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
+		},
 		"@types/node": {
 			"version": "14.18.50",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.50.tgz",
@@ -2746,6 +3097,11 @@
 			"integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
 			"dev": true
 		},
+		"abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+		},
 		"accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -2756,6 +3112,14 @@
 				"negotiator": "0.6.3"
 			}
 		},
+		"agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"requires": {
+				"debug": "4"
+			}
+		},
 		"aggregate-error": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -2859,8 +3223,7 @@
 		"asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-			"dev": true
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 		},
 		"at-least-node": {
 			"version": "1.0.0",
@@ -3202,7 +3565,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-			"dev": true,
 			"requires": {
 				"delayed-stream": "~1.0.0"
 			}
@@ -3295,6 +3657,14 @@
 				"which": "^2.0.1"
 			}
 		},
+		"cssstyle": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
+			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+			"requires": {
+				"rrweb-cssom": "^0.6.0"
+			}
+		},
 		"cypress": {
 			"version": "12.14.0",
 			"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz",
@@ -3354,6 +3724,16 @@
 				"assert-plus": "^1.0.0"
 			}
 		},
+		"data-urls": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
+			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+			"requires": {
+				"abab": "^2.0.6",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.0"
+			}
+		},
 		"dayjs": {
 			"version": "1.11.8",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
@@ -3364,11 +3744,15 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
 			"requires": {
 				"ms": "2.1.2"
 			}
 		},
+		"decimal.js": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+		},
 		"deep-extend": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -3378,8 +3762,15 @@
 		"delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-			"dev": true
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+		},
+		"domexception": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+			"requires": {
+				"webidl-conversions": "^7.0.0"
+			}
 		},
 		"eastasianwidth": {
 			"version": "0.2.0",
@@ -3421,6 +3812,11 @@
 				"ansi-colors": "^4.1.1"
 			}
 		},
+		"entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+		},
 		"escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -3660,12 +4056,30 @@
 			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
 			"dev": true
 		},
+		"html-encoding-sniffer": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"requires": {
+				"whatwg-encoding": "^2.0.0"
+			}
+		},
 		"html-import-element": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/html-import-element/-/html-import-element-1.1.0.tgz",
 			"integrity": "sha512-Mw4SmJDp0lIrAmF3R41gZ9k4fWfaKnIAkKUFJLsZK5oukpeAUCKpHHIJRidysrcrSIEXH/pU2ZG285njj1EXXQ==",
 			"dev": true
 		},
+		"http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"requires": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			}
+		},
 		"http-signature": {
 			"version": "1.3.6",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
@@ -3677,12 +4091,29 @@
 				"sshpk": "^1.14.1"
 			}
 		},
+		"https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"requires": {
+				"agent-base": "6",
+				"debug": "4"
+			}
+		},
 		"human-signals": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
 			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
 			"dev": true
 		},
+		"iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"requires": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			}
+		},
 		"ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3760,6 +4191,11 @@
 			"integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
 			"dev": true
 		},
+		"is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+		},
 		"is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -3805,6 +4241,64 @@
 			"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
 			"dev": true
 		},
+		"jsdom": {
+			"version": "22.1.0",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
+			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+			"requires": {
+				"abab": "^2.0.6",
+				"cssstyle": "^3.0.0",
+				"data-urls": "^4.0.0",
+				"decimal.js": "^10.4.3",
+				"domexception": "^4.0.0",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.1",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.4",
+				"parse5": "^7.1.2",
+				"rrweb-cssom": "^0.6.0",
+				"saxes": "^6.0.0",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.1.2",
+				"w3c-xmlserializer": "^4.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^2.0.0",
+				"whatwg-mimetype": "^3.0.0",
+				"whatwg-url": "^12.0.1",
+				"ws": "^8.13.0",
+				"xml-name-validator": "^4.0.0"
+			},
+			"dependencies": {
+				"form-data": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+					"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+					"requires": {
+						"asynckit": "^0.4.0",
+						"combined-stream": "^1.0.8",
+						"mime-types": "^2.1.12"
+					}
+				},
+				"tough-cookie": {
+					"version": "4.1.3",
+					"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+					"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+					"requires": {
+						"psl": "^1.1.33",
+						"punycode": "^2.1.1",
+						"universalify": "^0.2.0",
+						"url-parse": "^1.5.3"
+					}
+				},
+				"universalify": {
+					"version": "0.2.0",
+					"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+					"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
+				}
+			}
+		},
 		"json-schema": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -3943,14 +4437,12 @@
 		"mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-			"dev": true
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
 		},
 		"mime-types": {
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-			"dev": true,
 			"requires": {
 				"mime-db": "1.52.0"
 			}
@@ -3979,8 +4471,7 @@
 		"ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 		},
 		"negotiator": {
 			"version": "0.6.3",
@@ -3997,6 +4488,11 @@
 				"path-key": "^3.0.0"
 			}
 		},
+		"nwsapi": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
+			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
+		},
 		"object-inspect": {
 			"version": "1.12.3",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -4042,6 +4538,14 @@
 				"aggregate-error": "^3.0.0"
 			}
 		},
+		"parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"requires": {
+				"entities": "^4.4.0"
+			}
+		},
 		"path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -4105,8 +4609,7 @@
 		"psl": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"dev": true
+			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
 		},
 		"pump": {
 			"version": "3.0.0",
@@ -4121,8 +4624,7 @@
 		"punycode": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-			"dev": true
+			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
 		},
 		"qs": {
 			"version": "6.10.4",
@@ -4133,6 +4635,11 @@
 				"side-channel": "^1.0.4"
 			}
 		},
+		"querystringify": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+		},
 		"range-parser": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@@ -4193,6 +4700,11 @@
 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
 			"dev": true
 		},
+		"requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+		},
 		"restore-cursor": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -4218,6 +4730,11 @@
 				"glob": "^7.1.3"
 			}
 		},
+		"rrweb-cssom": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw=="
+		},
 		"rxjs": {
 			"version": "7.8.1",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -4236,8 +4753,15 @@
 		"safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+		},
+		"saxes": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+			"requires": {
+				"xmlchars": "^2.2.0"
+			}
 		},
 		"semver": {
 			"version": "7.5.1",
@@ -4409,6 +4933,11 @@
 				"has-flag": "^4.0.0"
 			}
 		},
+		"symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+		},
 		"throttleit": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -4440,6 +4969,14 @@
 				"punycode": "^2.1.1"
 			}
 		},
+		"tr46": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
+			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+			"requires": {
+				"punycode": "^2.3.0"
+			}
+		},
 		"tslib": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
@@ -4504,6 +5041,15 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"requires": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
 		"uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -4527,6 +5073,41 @@
 				"extsprintf": "^1.2.0"
 			}
 		},
+		"w3c-xmlserializer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"requires": {
+				"xml-name-validator": "^4.0.0"
+			}
+		},
+		"webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="
+		},
+		"whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"requires": {
+				"iconv-lite": "0.6.3"
+			}
+		},
+		"whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="
+		},
+		"whatwg-url": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
+			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"requires": {
+				"tr46": "^4.1.1",
+				"webidl-conversions": "^7.0.0"
+			}
+		},
 		"which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4596,6 +5177,22 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"ws": {
+			"version": "8.14.2",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
+			"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+			"requires": {}
+		},
+		"xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="
+		},
+		"xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+		},
 		"yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 77eae6b..ef941b5 100644
--- a/package.json
+++ b/package.json
@@ -52,5 +52,8 @@
 		"prettier": "^3.0.3",
 		"serve": "^14.2.0",
 		"uglify-js": "^3.17.4"
+	},
+	"dependencies": {
+		"jsdom": "^22.1.0"
 	}
 }
diff --git a/result.js b/result.js
new file mode 100644
index 0000000..f8f1567
--- /dev/null
+++ b/result.js
@@ -0,0 +1,88 @@
+class CustomTramLiteElement extends HTMLElement {
+            static tramLiteVersion = "4.1.1";
+            static tagName = rootElement.tagName.toLowerCase();
+            static get observedAttributes() {
+                // all of the template variables are attributes that we'll update on
+                return templateVariables;
+            }
+            constructor() {
+                super(), 
+                // list of attribute and text nodes that have a template value
+                // these are scanned through when templated attributes are updated
+                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
+                // Create a shadow root
+                // and append our HTML to it
+                var shadow = this.attachShadow({
+                    mode: "open"
+                });
+                shadow.append(...rootElement.cloneNode(!0).childNodes), 
+                // save the original template in templateValuesTextNodes
+                ComponentDefinition.getTextNodesWithTramLiteValues(shadow).forEach(textNode => {
+                    this.templateValuesTextNodes.push({
+                        textNode: textNode,
+                        originalTemplate: textNode.textContent
+                    });
+                }), 
+                // save the original attribute in the templateValuesAttributes
+                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(shadow).forEach(element => {
+                    [ ...element.attributes ].forEach(attrNode => {
+                        attrNode.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
+                            attrNode: attrNode,
+                            element: element,
+                            originalTemplate: attrNode.value
+                        });
+                    });
+                });
+            }
+            connectedCallback() {
+                // set all attribute values
+                // - the first default value is whatever is set on DOM creation
+                // - next, we check if there are default values that were part of the define
+                // - lastly, we'll set it to an empty string.
+                var defaultAttributes = Object.keys(defaultAttributeValues);
+                [ ...templateVariables, ...defaultAttributes ].forEach(attributeName => {
+                    null === this.getAttribute(attributeName) && this.setAttribute(attributeName, defaultAttributeValues[attributeName] || "");
+                }), 
+                // an initial call to set the default attributes
+                this.attributeChangedCallback(), 
+                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
+                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(componentEffect => {
+                    componentEffect.removeAttribute("tl-hold");
+                });
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                // scan through all text nodes and attributes with template values, and update them
+                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
+            }
+            getUpdatedTemplate(originalTemplate) {
+                let updatedTemplate = originalTemplate;
+                return templateVariables.forEach(attributeName => {
+                    // fallback on the default values or an empty string if there is no value for this attribute yet
+                    var attributeValue = this.getAttribute(attributeName) || defaultAttributeValues[attributeName] || "";
+                    updatedTemplate = updatedTemplate.replaceAll(`tl:${attributeName}:`, attributeValue);
+                }), updatedTemplate;
+            }
+            updateTextNodeTemplates() {
+                // go through each text node that has a template variable, and update them
+                this.templateValuesTextNodes.forEach(({
+                    textNode,
+                    originalTemplate
+                }) => {
+                    textNode.textContent = this.getUpdatedTemplate(originalTemplate);
+                });
+            }
+            updateAttrNodeTemplates() {
+                // go through each element with an attribute that has a template variable, and update those attribute values
+                this.templateValuesAttrNodes.forEach(({
+                    attrNode,
+                    element,
+                    originalTemplate
+                }) => {
+                    // set the attribute value to the new value (updated with all template variables)
+                    attrNode.value = this.getUpdatedTemplate(originalTemplate), 
+                    // these attributes are special, in order to update the live value (after a user has interacted with them),
+                    // they need to be set on the element as well
+                    [ "value", "checked", "selected" ].includes(attrNode.name) && (element[attrNode.name] = this.getUpdatedTemplate(originalTemplate));
+                });
+            }
+        }
\ No newline at end of file
diff --git a/src/build-component.js b/src/build-component.js
new file mode 100644
index 0000000..54761a0
--- /dev/null
+++ b/src/build-component.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const jsdom = require('jsdom'); // used to create web interfaces (namely document.createElement)
+const { JSDOM } = jsdom;
+const { window } = new JSDOM('');
+global.document = window.document;
+global.HTMLElement = window.HTMLElement;
+
+// Load TramLite class
+const TramLite = require('../output/api');
+
+// Get the path from command line arguments
+const filePath = process.argv[2];
+
+if (!filePath) {
+	console.error('Error: No file path provided.');
+	process.exit(1);
+}
+
+// Construct the full path
+const fullPath = path.resolve(filePath);
+
+// Read the file content
+fs.readFile(fullPath, 'utf8', (err, data) => {
+	if (err) {
+		console.error('Error reading the file:', err);
+		process.exit(1);
+	}
+
+	const newClassComponent = TramLite.makeComponentClass(data);
+
+	// Output the result or do further processing...
+	// console.log(newClassComponent.toString());
+	fs.writeFileSync('./result.js', newClassComponent.toString());
+});
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..b7bfb5e
--- /dev/null
+++ b/test.html
@@ -0,0 +1,3 @@
+<script src="./result.js"></script>
+
+<x-button></x-button>
diff --git a/x-button.html b/x-button.html
new file mode 100644
index 0000000..ef13373
--- /dev/null
+++ b/x-button.html
@@ -0,0 +1,3 @@
+<x-button>
+	<button>Hello World!</button>
+</x-button>

From 35b8c1e3b9c59ef38c8717fe34b0e90975dfab75 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Fri, 6 Oct 2023 22:14:22 -0400
Subject: [PATCH 02/30] working import-component output

---
 cypress/import.cy.js                   |  18 +++
 cypress/inline.cy.js                   |  65 ++++++++++
 cypress/spec.cy.js                     |  65 ----------
 examples/import/example-container.html |  14 +++
 examples/import/im-progressbar.html    |  17 +++
 examples/import/im-temperature.html    |  46 +++++++
 examples/import/index.html             |  31 +++++
 examples/{ => inline}/index.html       | 162 ++++++++++++-------------
 package.json                           |  10 +-
 result.js                              |  88 --------------
 src/TramLite.js                        |  10 +-
 src/build-component.js                 |  36 ------
 src/import-component.js                |  36 ++++++
 src/processors/ComponentDefinition.js  |  16 +++
 test.html                              |   3 -
 x-button.html                          |   3 -
 16 files changed, 336 insertions(+), 284 deletions(-)
 create mode 100644 cypress/import.cy.js
 create mode 100644 cypress/inline.cy.js
 delete mode 100644 cypress/spec.cy.js
 create mode 100644 examples/import/example-container.html
 create mode 100644 examples/import/im-progressbar.html
 create mode 100644 examples/import/im-temperature.html
 create mode 100644 examples/import/index.html
 rename examples/{ => inline}/index.html (53%)
 delete mode 100644 result.js
 delete mode 100644 src/build-component.js
 create mode 100644 src/import-component.js
 delete mode 100644 test.html
 delete mode 100644 x-button.html

diff --git a/cypress/import.cy.js b/cypress/import.cy.js
new file mode 100644
index 0000000..3b4e390
--- /dev/null
+++ b/cypress/import.cy.js
@@ -0,0 +1,18 @@
+describe('Tram-Lite Example Components (via import)', () => {
+	it('should validate Tram-Lite APIs and Use Cases when importing components', () => {
+		// visit index.html (this works because the test page doesn't need to be hosted to work!)
+		cy.visit('../examples/import/index.html');
+
+		/* verify that component effects trigger on dependency updates */
+		cy.get('im-temperature').get('input#f').type('19');
+		cy.get('im-temperature').get('input#c').should('have.value', '-7');
+		cy.get('im-temperature').get('input#f').should('have.value', '19');
+
+		/* verify that an element with multiple dependencies triggers on either dependency */
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+		cy.get('im-progressbar').get('input#value').clear().type('12');
+		cy.get('im-progressbar').should('have.attr', 'warning');
+		cy.get('im-progressbar').get('input#max').clear().type('15');
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+	});
+});
diff --git a/cypress/inline.cy.js b/cypress/inline.cy.js
new file mode 100644
index 0000000..2f232df
--- /dev/null
+++ b/cypress/inline.cy.js
@@ -0,0 +1,65 @@
+describe('Tram-Lite Example Components', () => {
+	// per Cypress best practices (https://docs.cypress.io/guides/references/best-practices#Creating-Tiny-Tests-With-A-Single-Assertion)
+	// it is often better to run all tests together, rather than having unit-like tests... so we'll comment the intent of each test,
+	// rather than doing a reset between each test. The results should still be just as obvious in the cypress runner!
+	it('should validate all Tram-Lite APIs and Use Cases', () => {
+		// visit index.html (this works because the test page doesn't need to be hosted to work!)
+		cy.visit('../examples/inline/index.html');
+
+		/* validate that slot elements are rendered as expected in Tram-Lite */
+		cy.get('in-title').contains('Title');
+		cy.get('in-title').contains('Tram-Lite Components!');
+
+		/* validate that the counter elements work as expected */
+		cy.get('in-counter#default').contains(/Green: 0/); // default values should populate
+		cy.get('in-counter#red').contains(/Red: 0/); // passed in values should populate
+		cy.get('in-counter#red').click(); // clicking a counter should increment
+		cy.get('in-counter#red').contains(/Red: 1/);
+
+		/* verify that updating inputs updates attributes as expected (tl-controlled) */
+		cy.get('in-mirror').get('input#source').type('Hello, World');
+		cy.get('in-mirror').get('input#reflection').should('have.value', 'Hello, World');
+		cy.get('in-mirror').should('have.attr', 'value', 'Hello, World');
+		cy.get('in-mirror').should('have.attr', 'is-mirrored', '');
+
+		/* verify that updating an attribute copies to multiple elements and attributes */
+		cy.get('in-colorpicker').invoke('attr', 'hue', '120');
+		cy.get('in-colorpicker').get('input#hue-range-input').should('have.value', '120');
+		cy.get('in-colorpicker').get('input#hue-text-input').should('have.value', '120');
+		cy.get('in-colorpicker')
+			.get('rect')
+			.then(($element) => {
+				const rawColor = window.getComputedStyle($element[0])['fill'];
+				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
+			});
+
+		/* verify that startup scripts in component definitions trigger as expected */
+		cy.get('in-todoitem').contains('Example Initial Item');
+		cy.get('in-todoitem').contains('Learning Tram-Lite');
+
+		/* verify that creating elements works as expected */
+		cy.get('in-todolist').get('form input').type('Cypress Test'); // create new todo item
+		cy.get('in-todolist').get('form').submit();
+
+		cy.get('in-todoitem').contains('Cypress Test'); // verify it exists
+
+		cy.get('in-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
+		cy.get('in-todolist').get('span').contains('(1/3)');
+
+		/* verify that updating an input with a false value unsets the attribute value */
+		cy.get('in-todoitem').contains('Cypress Test').click();
+		cy.get('in-todolist').get('span').contains('(0/3)');
+
+		/* verify that component effects trigger on dependency updates */
+		cy.get('in-temperature').get('input#f').type('19');
+		cy.get('in-temperature').get('input#c').should('have.value', '-7');
+		cy.get('in-temperature').get('input#f').should('have.value', '19');
+
+		/* verify that an element with multiple dependencies triggers on either dependency */
+		cy.get('in-progressbar').should('not.have.attr', 'warning');
+		cy.get('in-progressbar').get('input#value').clear().type('12');
+		cy.get('in-progressbar').should('have.attr', 'warning');
+		cy.get('in-progressbar').get('input#max').clear().type('15');
+		cy.get('in-progressbar').should('not.have.attr', 'warning');
+	});
+});
diff --git a/cypress/spec.cy.js b/cypress/spec.cy.js
deleted file mode 100644
index f8a1f48..0000000
--- a/cypress/spec.cy.js
+++ /dev/null
@@ -1,65 +0,0 @@
-describe('Tram-Lite Example Components', () => {
-	// per Cypress best practices (https://docs.cypress.io/guides/references/best-practices#Creating-Tiny-Tests-With-A-Single-Assertion)
-	// it is often better to run all tests together, rather than having unit-like tests... so we'll comment the intent of each test,
-	// rather than doing a reset between each test. The results should still be just as obvious in the cypress runner!
-	it('should validate all Tram-Lite APIs and Use Cases', () => {
-		// visit index.html (this works because the test page doesn't need to be hosted to work!)
-		cy.visit('../examples/index.html');
-
-		/* validate that slot elements are rendered as expected in Tram-Lite */
-		cy.get('ex-title').contains('Title');
-		cy.get('ex-title').contains('Tram-Lite Components!');
-
-		/* validate that the counter elements work as expected */
-		cy.get('ex-counter#default').contains(/Green: 0/); // default values should populate
-		cy.get('ex-counter#red').contains(/Red: 0/); // passed in values should populate
-		cy.get('ex-counter#red').click(); // clicking a counter should increment
-		cy.get('ex-counter#red').contains(/Red: 1/);
-
-		/* verify that updating inputs updates attributes as expected (tl-controlled) */
-		cy.get('ex-mirror').get('input#source').type('Hello, World');
-		cy.get('ex-mirror').get('input#reflection').should('have.value', 'Hello, World');
-		cy.get('ex-mirror').should('have.attr', 'value', 'Hello, World');
-		cy.get('ex-mirror').should('have.attr', 'is-mirrored', '');
-
-		/* verify that updating an attribute copies to multiple elements and attributes */
-		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
-		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
-		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
-		cy.get('ex-colorpicker')
-			.get('rect')
-			.then(($element) => {
-				const rawColor = window.getComputedStyle($element[0])['fill'];
-				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
-			});
-
-		/* verify that startup scripts in component definitions trigger as expected */
-		cy.get('ex-todoitem').contains('Example Initial Item');
-		cy.get('ex-todoitem').contains('Learning Tram-Lite');
-
-		/* verify that creating elements works as expected */
-		cy.get('ex-todolist').get('form input').type('Cypress Test'); // create new todo item
-		cy.get('ex-todolist').get('form').submit();
-
-		cy.get('ex-todoitem').contains('Cypress Test'); // verify it exists
-
-		cy.get('ex-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
-		cy.get('ex-todolist').get('span').contains('(1/3)');
-
-		/* verify that updating an input with a false value unsets the attribute value */
-		cy.get('ex-todoitem').contains('Cypress Test').click();
-		cy.get('ex-todolist').get('span').contains('(0/3)');
-
-		/* verify that component effects trigger on dependency updates */
-		cy.get('ex-temperature').get('input#f').type('19');
-		cy.get('ex-temperature').get('input#c').should('have.value', '-7');
-		cy.get('ex-temperature').get('input#f').should('have.value', '19');
-
-		/* verify that an element with multiple dependencies triggers on either dependency */
-		cy.get('ex-progressbar').should('not.have.attr', 'warning');
-		cy.get('ex-progressbar').get('input#value').clear().type('12');
-		cy.get('ex-progressbar').should('have.attr', 'warning');
-		cy.get('ex-progressbar').get('input#max').clear().type('15');
-		cy.get('ex-progressbar').should('not.have.attr', 'warning');
-	});
-});
diff --git a/examples/import/example-container.html b/examples/import/example-container.html
new file mode 100644
index 0000000..566f319
--- /dev/null
+++ b/examples/import/example-container.html
@@ -0,0 +1,14 @@
+<example-container>
+	<style>
+		fieldset {
+			border: yellow 1px solid;
+		}
+		legend {
+			color: yellow;
+		}
+	</style>
+	<fieldset>
+		<legend>${'name'}</legend>
+		<slot></slot>
+	</fieldset>
+</example-container>
diff --git a/examples/import/im-progressbar.html b/examples/import/im-progressbar.html
new file mode 100644
index 0000000..5a71ade
--- /dev/null
+++ b/examples/import/im-progressbar.html
@@ -0,0 +1,17 @@
+<im-progressbar value="3" max="10">
+	<div>
+		<input id="value" type="number" tl-controlled tl-trigger="input" />
+		<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
+	</div>
+	<progress value="${'value'}" max="${'max'}"></progress>
+	<div>${'warning'}</div>
+	<script tl-effect tl-dependencies="value max">
+		const value = parseInt(this.getAttribute('value'));
+		const max = parseInt(this.getAttribute('max'));
+		if (value > max) {
+			this.setAttribute('warning', `WARNING: ${value} is greater than ${max}`);
+		} else {
+			this.removeAttribute('warning');
+		}
+	</script>
+</im-progressbar>
diff --git a/examples/import/im-temperature.html b/examples/import/im-temperature.html
new file mode 100644
index 0000000..54bf837
--- /dev/null
+++ b/examples/import/im-temperature.html
@@ -0,0 +1,46 @@
+<im-temperature celsius="" fahrenheit="">
+	<label>
+		<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
+		Celsius
+	</label>
+	=
+	<label>
+		<input id="f" tl-controlled placeholder="F" unit="fahrenheit" tl-hostattr="fahrenheit" tl-trigger="input" />
+		Fahrenheit
+	</label>
+
+	<script tl-effect>
+		// functions to define for the rest of the component
+		this.calcCelsius = (f) => {
+			return ((f - 32) * (5 / 9)).toFixed(0);
+		};
+
+		this.calcFahrenheit = (c) => {
+			return (c * (9 / 5) + 32).toFixed(0);
+		};
+
+		this.isReflectiveUpdate = (temperatureConverter) => {
+			const f = temperatureConverter.getAttribute('fahrenheit');
+			const c = temperatureConverter.getAttribute('celsius');
+			// if this celsius or fahrenheit value would generate the other, don't update
+			// this is indicative of an update triggered by another update!
+			// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+			// e.g. 19F and 20F both map to -7C
+			return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+		};
+	</script>
+	<script tl-effect tl-dependencies="celsius">
+		const c = this.getAttribute('celsius');
+		const newF = this.calcFahrenheit(c);
+		if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
+			this.setAttribute('fahrenheit', newF);
+		}
+	</script>
+	<script tl-effect tl-dependencies="fahrenheit">
+		const f = this.getAttribute('fahrenheit');
+		const newC = this.calcCelsius(f);
+		if (f && !isNaN(newC)) {
+			this.setAttribute('celsius', newC);
+		}
+	</script>
+</im-temperature>
diff --git a/examples/import/index.html b/examples/import/index.html
new file mode 100644
index 0000000..d5cbece
--- /dev/null
+++ b/examples/import/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>Tram-Lite Example Components</title>
+		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
+
+		<meta charset="utf-8" />
+		<style>
+			:root {
+				color-scheme: dark light;
+			}
+			body {
+				margin: auto;
+				max-width: 800px;
+			}
+		</style>
+
+		<script
+			src="../../output/import-component.js"
+			tl-components="/examples/import/example-container.html /examples/import/im-progressbar.html /examples/import/im-temperature.html"
+		></script>
+	</head>
+	<body>
+		<example-container name="Temperature Converter">
+			<im-temperature></im-temperature>
+		</example-container>
+		<example-container name="Progress Bar">
+			<im-progressbar></im-progressbar>
+		</example-container>
+	</body>
+</html>
diff --git a/examples/index.html b/examples/inline/index.html
similarity index 53%
rename from examples/index.html
rename to examples/inline/index.html
index 7f40718..c2e239e 100644
--- a/examples/index.html
+++ b/examples/inline/index.html
@@ -15,7 +15,7 @@
 			}
 		</style>
 
-		<script src="../output/tram-lite.js"></script>
+		<script src="../../output/tram-lite.js"></script>
 	</head>
 	<body>
 		<template tl-definition>
@@ -34,36 +34,43 @@
 				</fieldset>
 			</example-container>
 
-			<ex-title>
+			<in-title>
 				<h1 style="font-size: 1em">Title: <slot></slot></h1>
-			</ex-title>
+			</in-title>
 
-			<ex-counter count="0" label="Green" color="#CEFFCE">
-				<button style="color: ${'color'}" onclick="increment(this)">${'label'}: ${'count'}</button>
-			</ex-counter>
+			<in-counter count="0" label="Green" color="#CEFFCE">
+				<button style="color: ${'color'}">${'label'}: ${'count'}</button>
+				<script tl-effect>
+					const inCounter = this;
+					inCounter.shadowRoot.querySelector('button').addEventListener('click', () => {
+						const newCount = parseInt(inCounter.getAttribute('count')) + 1;
+						inCounter.setAttribute('count', newCount);
+					});
+				</script>
+			</in-counter>
 
-			<ex-mirror value="" is-mirrored="">
+			<in-mirror value="" is-mirrored="">
 				<input size="10" id="reflection" placeholder="Mirrored" disabled tl-controlled />
 				<input size="10" id="source" placeholder="Type in here!" tl-controlled tl-trigger="keyup" />
-			</ex-mirror>
+			</in-mirror>
 
-			<ex-todoitem>
+			<in-todoitem>
 				<label style="display: block">
 					<input type="checkbox" tl-controlled tl-hostattr="checked" tl-targetattr="checked" />
 					<slot></slot>
 				</label>
 				<script tl-effect tl-dependencies="checked">
-					const todoList = this.getRootNode().host;
+					const todoItemList = this.getRootNode().host;
 
 					// query all list items to determine new completed and total
-					const todoItems = todoList.shadowRoot.querySelectorAll('ex-todoitem');
-					todoList.setAttribute('total', todoItems.length);
-					const completedItems = todoList.shadowRoot.querySelectorAll('ex-todoitem[checked]');
-					todoList.setAttribute('completed', completedItems.length);
+					const todoItems = todoItemList.shadowRoot.querySelectorAll('in-todoitem');
+					todoItemList.setAttribute('total', todoItems.length);
+					const completedItems = todoItemList.shadowRoot.querySelectorAll('in-todoitem[checked]');
+					todoItemList.setAttribute('completed', completedItems.length);
 				</script>
-			</ex-todoitem>
+			</in-todoitem>
 
-			<ex-todolist completed="0" total="0">
+			<in-todolist completed="0" total="0">
 				<style>
 					todo-section {
 						padding-inline-start: 5px;
@@ -71,17 +78,33 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 					}
 				</style>
 				<span>To Do List (${'completed'}/${'total'})</span>
-				<form onsubmit="submitNewTodoItem(this, event)">
+				<form>
 					<input name="input" placeholder="New Item" autofill="false" />
 				</form>
 				<todo-section></todo-section>
 				<script tl-effect>
-					addNewTodoItem(this, 'Example Initial Item');
-					addNewTodoItem(this, 'Learning Tram-Lite');
+					const todoList = this;
+
+					function addNewTodoItem(todoText) {
+						const list = todoList.shadowRoot.querySelector('todo-section');
+						const newItem = this.document.createElement('in-todoitem');
+						newItem.innerText = todoText;
+						list.appendChild(newItem);
+					}
+
+					function submitNewTodoItem(event) {
+						event.preventDefault();
+						addNewTodoItem(event.target.input.value);
+						event.target.reset();
+					}
+					todoList.shadowRoot.querySelector('form').addEventListener('submit', submitNewTodoItem);
+
+					addNewTodoItem('Example Initial Item');
+					addNewTodoItem('Learning Tram-Lite');
 				</script>
-			</ex-todolist>
+			</in-todolist>
 
-			<ex-colorpicker width="100px">
+			<in-colorpicker width="100px">
 				<style>
 					svg {
 						display: block;
@@ -95,9 +118,9 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 				<svg viewbox="0 0 100 100" width="${'width'}">
 					<rect width="100" height="100" />
 				</svg>
-			</ex-colorpicker>
+			</in-colorpicker>
 
-			<ex-temperature celsius="" fahrenheit="">
+			<in-temperature celsius="" fahrenheit="">
 				<label>
 					<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
 					Celsius
@@ -108,23 +131,43 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 					Fahrenheit
 				</label>
 
+				<script tl-effect>
+					// functions to define for the rest of the component
+					this.calcCelsius = (f) => {
+						return ((f - 32) * (5 / 9)).toFixed(0);
+					};
+
+					this.calcFahrenheit = (c) => {
+						return (c * (9 / 5) + 32).toFixed(0);
+					};
+
+					this.isReflectiveUpdate = (temperatureConverter) => {
+						const f = temperatureConverter.getAttribute('fahrenheit');
+						const c = temperatureConverter.getAttribute('celsius');
+						// if this celsius or fahrenheit value would generate the other, don't update
+						// this is indicative of an update triggered by another update!
+						// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+						// e.g. 19F and 20F both map to -7C
+						return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+					};
+				</script>
 				<script tl-effect tl-dependencies="celsius">
 					const c = this.getAttribute('celsius');
-					const newF = calcFahrenheit(c);
-					if (c && !isNaN(newF) && !isReflectiveUpdate(this)) {
+					const newF = this.calcFahrenheit(c);
+					if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
 						this.setAttribute('fahrenheit', newF);
 					}
 				</script>
 				<script tl-effect tl-dependencies="fahrenheit">
 					const f = this.getAttribute('fahrenheit');
-					const newC = calcCelsius(f);
+					const newC = this.calcCelsius(f);
 					if (f && !isNaN(newC)) {
 						this.setAttribute('celsius', newC);
 					}
 				</script>
-			</ex-temperature>
+			</in-temperature>
 
-			<ex-progressbar value="3" max="10">
+			<in-progressbar value="3" max="10">
 				<div>
 					<input id="value" type="number" tl-controlled tl-trigger="input" />
 					<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
@@ -140,72 +183,29 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 						this.removeAttribute('warning');
 					}
 				</script>
-			</ex-progressbar>
+			</in-progressbar>
 		</template>
 
-		<script>
-			// for ex-counter
-			function increment(button) {
-				const counter = button.getRootNode().host;
-				const newCount = parseInt(counter.getAttribute('count')) + 1;
-				counter.setAttribute('count', newCount);
-			}
-
-			// for todo list
-			function addNewTodoItem(todoList, todoText) {
-				const list = todoList.shadowRoot.querySelector('todo-section');
-				const newItem = document.createElement('ex-todoitem');
-				newItem.innerText = todoText;
-				list.appendChild(newItem);
-			}
-
-			function submitNewTodoItem(form, event) {
-				event.preventDefault();
-				const todoList = form.getRootNode().host;
-				addNewTodoItem(todoList, form.input.value);
-				form.reset();
-			}
-
-			// for temperature converter
-			function calcCelsius(f) {
-				return ((f - 32) * (5 / 9)).toFixed(0);
-			}
-
-			function calcFahrenheit(c) {
-				return (c * (9 / 5) + 32).toFixed(0);
-			}
-
-			function isReflectiveUpdate(temperatureConverter) {
-				const f = temperatureConverter.getAttribute('fahrenheit');
-				const c = temperatureConverter.getAttribute('celsius');
-				// if this celsius or fahrenheit value would generate the other, don't update
-				// this is indicative of an update triggered by another update!
-				// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
-				// e.g. 19F and 20F both map to -7C
-				return calcFahrenheit(calcCelsius(f)) === calcFahrenheit(c);
-			}
-		</script>
-
-		<ex-title>Tram-Lite Components!</ex-title>
+		<in-title>Tram-Lite Components!</in-title>
 		<example-container name="Counters">
-			<ex-counter id="blue" label="Blue" color="#CECEFF"></ex-counter>
-			<ex-counter id="red" label="Red" color="#FFCECE"></ex-counter>
-			<ex-counter id="default"></ex-counter>
+			<in-counter id="blue" label="Blue" color="#CECEFF"></in-counter>
+			<in-counter id="red" label="Red" color="#FFCECE"></in-counter>
+			<in-counter id="default"></in-counter>
 		</example-container>
 		<example-container name="Mirror Input">
-			<ex-mirror></ex-mirror>
+			<in-mirror></in-mirror>
 		</example-container>
 		<example-container name="To Do List">
-			<ex-todolist></ex-todolist>
+			<in-todolist></in-todolist>
 		</example-container>
 		<example-container name="Color Picker">
-			<ex-colorpicker hue="200"></ex-colorpicker>
+			<in-colorpicker hue="200"></in-colorpicker>
 		</example-container>
 		<example-container name="Temperature Converter">
-			<ex-temperature></ex-temperature>
+			<in-temperature></in-temperature>
 		</example-container>
 		<example-container name="Progress Bar">
-			<ex-progressbar></ex-progressbar>
+			<in-progressbar></in-progressbar>
 		</example-container>
 	</body>
 </html>
diff --git a/package.json b/package.json
index ef941b5..4b7cf1d 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,16 @@
 	"scripts": {
 		"prestart": "npm run build",
 		"start": "serve .",
-		"build": "npm run bundle && npm run build:api && npm run build:tram-lite",
+		"build": "npm run bundle && npm run set && npm run minify",
 		"bundle": "uglifyjs src/TramLite.js src/processors/*.js -o output/bundle-step.js --define APP_VERSION=\"'4.1.1'\" -b --comments all",
-		"build:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" -b --comments all ",
-		"build:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" -b --comments all ",
+		"set": "npm run set:api && npm run set:tram-lite && npm run set:import-component",
+		"set:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" -b --comments all ",
+		"set:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" -b --comments all ",
+		"set:import-component": "uglifyjs output/bundle-step.js src/import-component.js -o output/import-component.js --define MODULE=\"true\" -b --comments all ",
+		"minify": "npm run minify:api && npm run minify:tram-lite && npm run minify:import-component",
 		"minify:api": "uglifyjs output/api.js -o output/api.min.js -c -m",
 		"minify:tram-lite": "uglifyjs output/tram-lite.js -o output/tram-lite.min.js -c -m",
+		"minify:import-component": "uglifyjs output/import-component.js -o output/import-component.min.js -c -m",
 		"prepublishOnly": "npm run build",
 		"pretest": "npm run build",
 		"test": "cypress open",
diff --git a/result.js b/result.js
deleted file mode 100644
index f8f1567..0000000
--- a/result.js
+++ /dev/null
@@ -1,88 +0,0 @@
-class CustomTramLiteElement extends HTMLElement {
-            static tramLiteVersion = "4.1.1";
-            static tagName = rootElement.tagName.toLowerCase();
-            static get observedAttributes() {
-                // all of the template variables are attributes that we'll update on
-                return templateVariables;
-            }
-            constructor() {
-                super(), 
-                // list of attribute and text nodes that have a template value
-                // these are scanned through when templated attributes are updated
-                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
-                // Create a shadow root
-                // and append our HTML to it
-                var shadow = this.attachShadow({
-                    mode: "open"
-                });
-                shadow.append(...rootElement.cloneNode(!0).childNodes), 
-                // save the original template in templateValuesTextNodes
-                ComponentDefinition.getTextNodesWithTramLiteValues(shadow).forEach(textNode => {
-                    this.templateValuesTextNodes.push({
-                        textNode: textNode,
-                        originalTemplate: textNode.textContent
-                    });
-                }), 
-                // save the original attribute in the templateValuesAttributes
-                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(shadow).forEach(element => {
-                    [ ...element.attributes ].forEach(attrNode => {
-                        attrNode.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
-                            attrNode: attrNode,
-                            element: element,
-                            originalTemplate: attrNode.value
-                        });
-                    });
-                });
-            }
-            connectedCallback() {
-                // set all attribute values
-                // - the first default value is whatever is set on DOM creation
-                // - next, we check if there are default values that were part of the define
-                // - lastly, we'll set it to an empty string.
-                var defaultAttributes = Object.keys(defaultAttributeValues);
-                [ ...templateVariables, ...defaultAttributes ].forEach(attributeName => {
-                    null === this.getAttribute(attributeName) && this.setAttribute(attributeName, defaultAttributeValues[attributeName] || "");
-                }), 
-                // an initial call to set the default attributes
-                this.attributeChangedCallback(), 
-                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
-                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(componentEffect => {
-                    componentEffect.removeAttribute("tl-hold");
-                });
-            }
-            attributeChangedCallback(name, oldValue, newValue) {
-                // scan through all text nodes and attributes with template values, and update them
-                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
-            }
-            getUpdatedTemplate(originalTemplate) {
-                let updatedTemplate = originalTemplate;
-                return templateVariables.forEach(attributeName => {
-                    // fallback on the default values or an empty string if there is no value for this attribute yet
-                    var attributeValue = this.getAttribute(attributeName) || defaultAttributeValues[attributeName] || "";
-                    updatedTemplate = updatedTemplate.replaceAll(`tl:${attributeName}:`, attributeValue);
-                }), updatedTemplate;
-            }
-            updateTextNodeTemplates() {
-                // go through each text node that has a template variable, and update them
-                this.templateValuesTextNodes.forEach(({
-                    textNode,
-                    originalTemplate
-                }) => {
-                    textNode.textContent = this.getUpdatedTemplate(originalTemplate);
-                });
-            }
-            updateAttrNodeTemplates() {
-                // go through each element with an attribute that has a template variable, and update those attribute values
-                this.templateValuesAttrNodes.forEach(({
-                    attrNode,
-                    element,
-                    originalTemplate
-                }) => {
-                    // set the attribute value to the new value (updated with all template variables)
-                    attrNode.value = this.getUpdatedTemplate(originalTemplate), 
-                    // these attributes are special, in order to update the live value (after a user has interacted with them),
-                    // they need to be set on the element as well
-                    [ "value", "checked", "selected" ].includes(attrNode.name) && (element[attrNode.name] = this.getUpdatedTemplate(originalTemplate));
-                });
-            }
-        }
\ No newline at end of file
diff --git a/src/TramLite.js b/src/TramLite.js
index 0874ebe..989cfbd 100644
--- a/src/TramLite.js
+++ b/src/TramLite.js
@@ -194,18 +194,18 @@ class TramLite {
 	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
 	 * @param {string} matcher
 	 * @param {{ connect: function }} componentClass
-	 * @param {(node: Node) => boolean} [rootNodeTest=() => true]
+	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
 	 */
-	static appendShadowRootProcessor(matcher, componentClass, rootNodeTest = () => true) {
+	static appendShadowRootProcessor(matcher, componentClass, shadowRoot = ShadowRoot.prototype) {
 		// save the original version of shadowRoot.append
-		const shAppend = ShadowRoot.prototype.append;
+		const shAppend = shadowRoot.append;
 
-		ShadowRoot.prototype.append = function (...nodes) {
+		shadowRoot.append = function (...nodes) {
 			shAppend.call(this, ...nodes);
 			// if any element in this shadowRoot matches our matcher,
 			//   run the `connect` function from this class
 			this.querySelectorAll(matcher).forEach((matchingElement) => {
-				if (rootNodeTest(matchingElement.getRootNode().host)) {
+				if (matchingElement.getRootNode().host) {
 					componentClass.connect(matchingElement);
 				}
 			});
diff --git a/src/build-component.js b/src/build-component.js
deleted file mode 100644
index 54761a0..0000000
--- a/src/build-component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const jsdom = require('jsdom'); // used to create web interfaces (namely document.createElement)
-const { JSDOM } = jsdom;
-const { window } = new JSDOM('');
-global.document = window.document;
-global.HTMLElement = window.HTMLElement;
-
-// Load TramLite class
-const TramLite = require('../output/api');
-
-// Get the path from command line arguments
-const filePath = process.argv[2];
-
-if (!filePath) {
-	console.error('Error: No file path provided.');
-	process.exit(1);
-}
-
-// Construct the full path
-const fullPath = path.resolve(filePath);
-
-// Read the file content
-fs.readFile(fullPath, 'utf8', (err, data) => {
-	if (err) {
-		console.error('Error reading the file:', err);
-		process.exit(1);
-	}
-
-	const newClassComponent = TramLite.makeComponentClass(data);
-
-	// Output the result or do further processing...
-	// console.log(newClassComponent.toString());
-	fs.writeFileSync('./result.js', newClassComponent.toString());
-});
diff --git a/src/import-component.js b/src/import-component.js
new file mode 100644
index 0000000..eaa86ca
--- /dev/null
+++ b/src/import-component.js
@@ -0,0 +1,36 @@
+// usage - this script is intended to be used as part of a script tag
+// e.g. <script src=".../import-component.js" tl-components=".../my-component.html">
+
+// tl-components can have a space separated list of import paths
+const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);
+
+// for each path we have, process the component definition
+componentPaths.forEach(async (componentPath) => {
+	const componentResult = await fetch(componentPath);
+	if (!componentResult.ok) {
+		// if we couldn't fetch the component, don't process anything
+		return;
+	}
+
+	// load the content as text, and then build the template tag pieces
+	const componentContent = await componentResult.text();
+	const [componentRawStrings, componentTemplateVariables] =
+		ComponentDefinition.extractTemplateVariables(componentContent);
+
+	// make a component class based on the template tag pieces
+	// (this is done, over define, so we can attach shadow root processors)
+	const componentClass = TramLite.makeComponentClass(componentRawStrings, ...componentTemplateVariables);
+
+	// override attachShadow so that we can add shadowRootProcessors
+	const attachShadow = componentClass.prototype.attachShadow;
+	componentClass.prototype.attachShadow = function (...options) {
+		const shadowRoot = attachShadow.call(this, ...options);
+		TramLite.appendShadowRootProcessor('[tl-controlled]', ControlledInput, shadowRoot);
+		TramLite.appendShadowRootProcessor('[tl-effect]', ComponentEffect, shadowRoot);
+
+		return shadowRoot;
+	};
+
+	// define the component in the DOM
+	customElements.define(componentClass.tagName, componentClass);
+});
diff --git a/src/processors/ComponentDefinition.js b/src/processors/ComponentDefinition.js
index 20fbd55..26942f2 100644
--- a/src/processors/ComponentDefinition.js
+++ b/src/processors/ComponentDefinition.js
@@ -86,6 +86,22 @@ class ComponentDefinition {
 		});
 	}
 
+	/**
+	 * utility function to extract js template strings, so that they can be passed into a template tag function
+	 */
+	static extractTemplateVariables(templateString) {
+		// we expect template variables to be in the following pattern, matching "${'...'}"
+		const variablePattern = /\$\{\'(.*?)\'\}/;
+		// Split the string by the above pattern, which lets us get an alternating list of strings and variables
+		const parts = templateString.split(variablePattern);
+
+		// Extract the strings and the variables
+		const rawStrings = parts.filter((_, index) => index % 2 === 0);
+		const templateVaraibles = parts.filter((_, index) => index % 2 !== 0);
+
+		return [rawStrings, templateVaraibles];
+	}
+
 	/**
 	 * function to set up an observer to watch for when new templates are added,
 	 *   and process all the definitions in them
diff --git a/test.html b/test.html
deleted file mode 100644
index b7bfb5e..0000000
--- a/test.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<script src="./result.js"></script>
-
-<x-button></x-button>
diff --git a/x-button.html b/x-button.html
deleted file mode 100644
index ef13373..0000000
--- a/x-button.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<x-button>
-	<button>Hello World!</button>
-</x-button>

From 74b289973cfa6ecb838af4c1cf4276e7a08b14b4 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Fri, 6 Oct 2023 22:19:34 -0400
Subject: [PATCH 03/30] remove jsdom

---
 package-lock.json | 659 +++-------------------------------------------
 package.json      |   3 -
 2 files changed, 31 insertions(+), 631 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d0f92e5..8c29283 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,6 @@
 			"name": "tram-lite",
 			"version": "4.1.1",
 			"license": "MIT",
-			"dependencies": {
-				"jsdom": "^22.1.0"
-			},
 			"devDependencies": {
 				"cypress": "^12.14.0",
 				"html-import-element": "^1.1.0",
@@ -77,14 +74,6 @@
 				"ms": "^2.1.1"
 			}
 		},
-		"node_modules/@tootallnate/once": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-			"engines": {
-				"node": ">= 10"
-			}
-		},
 		"node_modules/@types/node": {
 			"version": "14.18.50",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.50.tgz",
@@ -119,11 +108,6 @@
 			"integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
 			"dev": true
 		},
-		"node_modules/abab": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
-		},
 		"node_modules/accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -137,17 +121,6 @@
 				"node": ">= 0.6"
 			}
 		},
-		"node_modules/agent-base": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-			"dependencies": {
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6.0.0"
-			}
-		},
 		"node_modules/aggregate-error": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -296,7 +269,8 @@
 		"node_modules/asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"dev": true
 		},
 		"node_modules/at-least-node": {
 			"version": "1.0.0",
@@ -806,6 +780,7 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dev": true,
 			"dependencies": {
 				"delayed-stream": "~1.0.0"
 			},
@@ -917,17 +892,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/cssstyle": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
-			"dependencies": {
-				"rrweb-cssom": "^0.6.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
 		"node_modules/cypress": {
 			"version": "12.14.0",
 			"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz",
@@ -997,19 +961,6 @@
 				"node": ">=0.10"
 			}
 		},
-		"node_modules/data-urls": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
-			"dependencies": {
-				"abab": "^2.0.6",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
 		"node_modules/dayjs": {
 			"version": "1.11.8",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
@@ -1020,6 +971,7 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dev": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -1032,11 +984,6 @@
 				}
 			}
 		},
-		"node_modules/decimal.js": {
-			"version": "10.4.3",
-			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
-		},
 		"node_modules/deep-extend": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -1050,21 +997,11 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
 			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"dev": true,
 			"engines": {
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/domexception": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-			"dependencies": {
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1108,17 +1045,6 @@
 				"node": ">=8.6"
 			}
 		},
-		"node_modules/entities": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-			"engines": {
-				"node": ">=0.12"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/entities?sponsor=1"
-			}
-		},
 		"node_modules/escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1433,36 +1359,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/html-encoding-sniffer": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-			"dependencies": {
-				"whatwg-encoding": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/html-import-element": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/html-import-element/-/html-import-element-1.1.0.tgz",
 			"integrity": "sha512-Mw4SmJDp0lIrAmF3R41gZ9k4fWfaKnIAkKUFJLsZK5oukpeAUCKpHHIJRidysrcrSIEXH/pU2ZG285njj1EXXQ==",
 			"dev": true
 		},
-		"node_modules/http-proxy-agent": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-			"dependencies": {
-				"@tootallnate/once": "2",
-				"agent-base": "6",
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"node_modules/http-signature": {
 			"version": "1.3.6",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
@@ -1477,18 +1379,6 @@
 				"node": ">=0.10"
 			}
 		},
-		"node_modules/https-proxy-agent": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-			"dependencies": {
-				"agent-base": "6",
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"node_modules/human-signals": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -1498,17 +1388,6 @@
 				"node": ">=8.12.0"
 			}
 		},
-		"node_modules/iconv-lite": {
-			"version": "0.6.3",
-			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-			"dependencies": {
-				"safer-buffer": ">= 2.1.2 < 3.0.0"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -1636,11 +1515,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/is-potential-custom-element-name": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
-		},
 		"node_modules/is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -1701,82 +1575,6 @@
 			"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
 			"dev": true
 		},
-		"node_modules/jsdom": {
-			"version": "22.1.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-			"dependencies": {
-				"abab": "^2.0.6",
-				"cssstyle": "^3.0.0",
-				"data-urls": "^4.0.0",
-				"decimal.js": "^10.4.3",
-				"domexception": "^4.0.0",
-				"form-data": "^4.0.0",
-				"html-encoding-sniffer": "^3.0.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.1",
-				"is-potential-custom-element-name": "^1.0.1",
-				"nwsapi": "^2.2.4",
-				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.6.0",
-				"saxes": "^6.0.0",
-				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.1.2",
-				"w3c-xmlserializer": "^4.0.0",
-				"webidl-conversions": "^7.0.0",
-				"whatwg-encoding": "^2.0.0",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.1",
-				"ws": "^8.13.0",
-				"xml-name-validator": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=16"
-			},
-			"peerDependencies": {
-				"canvas": "^2.5.0"
-			},
-			"peerDependenciesMeta": {
-				"canvas": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/jsdom/node_modules/form-data": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-			"dependencies": {
-				"asynckit": "^0.4.0",
-				"combined-stream": "^1.0.8",
-				"mime-types": "^2.1.12"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/jsdom/node_modules/tough-cookie": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-			"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
-			"dependencies": {
-				"psl": "^1.1.33",
-				"punycode": "^2.1.1",
-				"universalify": "^0.2.0",
-				"url-parse": "^1.5.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/jsdom/node_modules/universalify": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-			"engines": {
-				"node": ">= 4.0.0"
-			}
-		},
 		"node_modules/json-schema": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -1957,6 +1755,7 @@
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -1965,6 +1764,7 @@
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
 			"dependencies": {
 				"mime-db": "1.52.0"
 			},
@@ -2005,7 +1805,8 @@
 		"node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"dev": true
 		},
 		"node_modules/negotiator": {
 			"version": "0.6.3",
@@ -2028,11 +1829,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/nwsapi": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
-		},
 		"node_modules/object-inspect": {
 			"version": "1.12.3",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -2096,17 +1892,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/parse5": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-			"dependencies": {
-				"entities": "^4.4.0"
-			},
-			"funding": {
-				"url": "https://github.com/inikulin/parse5?sponsor=1"
-			}
-		},
 		"node_modules/path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2194,7 +1979,8 @@
 		"node_modules/psl": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+			"dev": true
 		},
 		"node_modules/pump": {
 			"version": "3.0.0",
@@ -2210,6 +1996,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
 			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -2229,11 +2016,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/querystringify": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-		},
 		"node_modules/range-parser": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@@ -2304,11 +2086,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/requires-port": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-		},
 		"node_modules/restore-cursor": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -2343,11 +2120,6 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"node_modules/rrweb-cssom": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw=="
-		},
 		"node_modules/rxjs": {
 			"version": "7.8.1",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -2380,18 +2152,8 @@
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-		},
-		"node_modules/saxes": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-			"dependencies": {
-				"xmlchars": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=v12.22.7"
-			}
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"dev": true
 		},
 		"node_modules/semver": {
 			"version": "7.5.1",
@@ -2621,11 +2383,6 @@
 				"url": "https://github.com/chalk/supports-color?sponsor=1"
 			}
 		},
-		"node_modules/symbol-tree": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-		},
 		"node_modules/throttleit": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -2663,17 +2420,6 @@
 				"node": ">=0.8"
 			}
 		},
-		"node_modules/tr46": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-			"dependencies": {
-				"punycode": "^2.3.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
 		"node_modules/tslib": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
@@ -2759,15 +2505,6 @@
 				"punycode": "^2.1.0"
 			}
 		},
-		"node_modules/url-parse": {
-			"version": "1.5.10",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-			"dependencies": {
-				"querystringify": "^2.1.1",
-				"requires-port": "^1.0.0"
-			}
-		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -2800,56 +2537,6 @@
 				"extsprintf": "^1.2.0"
 			}
 		},
-		"node_modules/w3c-xmlserializer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-			"dependencies": {
-				"xml-name-validator": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/whatwg-encoding": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-			"dependencies": {
-				"iconv-lite": "0.6.3"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/whatwg-mimetype": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/whatwg-url": {
-			"version": "12.0.1",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
-			"dependencies": {
-				"tr46": "^4.1.1",
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2953,39 +2640,6 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
-		"node_modules/ws": {
-			"version": "8.14.2",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-			"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
-			"engines": {
-				"node": ">=10.0.0"
-			},
-			"peerDependencies": {
-				"bufferutil": "^4.0.1",
-				"utf-8-validate": ">=5.0.2"
-			},
-			"peerDependenciesMeta": {
-				"bufferutil": {
-					"optional": true
-				},
-				"utf-8-validate": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/xml-name-validator": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/xmlchars": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
-		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -3058,11 +2712,6 @@
 				}
 			}
 		},
-		"@tootallnate/once": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
-		},
 		"@types/node": {
 			"version": "14.18.50",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.50.tgz",
@@ -3097,11 +2746,6 @@
 			"integrity": "sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==",
 			"dev": true
 		},
-		"abab": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
-		},
 		"accepts": {
 			"version": "1.3.8",
 			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -3112,14 +2756,6 @@
 				"negotiator": "0.6.3"
 			}
 		},
-		"agent-base": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-			"requires": {
-				"debug": "4"
-			}
-		},
 		"aggregate-error": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -3223,7 +2859,8 @@
 		"asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"dev": true
 		},
 		"at-least-node": {
 			"version": "1.0.0",
@@ -3565,6 +3202,7 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dev": true,
 			"requires": {
 				"delayed-stream": "~1.0.0"
 			}
@@ -3657,14 +3295,6 @@
 				"which": "^2.0.1"
 			}
 		},
-		"cssstyle": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
-			"requires": {
-				"rrweb-cssom": "^0.6.0"
-			}
-		},
 		"cypress": {
 			"version": "12.14.0",
 			"resolved": "https://registry.npmjs.org/cypress/-/cypress-12.14.0.tgz",
@@ -3724,16 +3354,6 @@
 				"assert-plus": "^1.0.0"
 			}
 		},
-		"data-urls": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
-			"requires": {
-				"abab": "^2.0.6",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.0"
-			}
-		},
 		"dayjs": {
 			"version": "1.11.8",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
@@ -3744,15 +3364,11 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dev": true,
 			"requires": {
 				"ms": "2.1.2"
 			}
 		},
-		"decimal.js": {
-			"version": "10.4.3",
-			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
-		},
 		"deep-extend": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -3762,15 +3378,8 @@
 		"delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
-		},
-		"domexception": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-			"requires": {
-				"webidl-conversions": "^7.0.0"
-			}
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"dev": true
 		},
 		"eastasianwidth": {
 			"version": "0.2.0",
@@ -3812,11 +3421,6 @@
 				"ansi-colors": "^4.1.1"
 			}
 		},
-		"entities": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
-		},
 		"escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -4056,30 +3660,12 @@
 			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
 			"dev": true
 		},
-		"html-encoding-sniffer": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-			"requires": {
-				"whatwg-encoding": "^2.0.0"
-			}
-		},
 		"html-import-element": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/html-import-element/-/html-import-element-1.1.0.tgz",
 			"integrity": "sha512-Mw4SmJDp0lIrAmF3R41gZ9k4fWfaKnIAkKUFJLsZK5oukpeAUCKpHHIJRidysrcrSIEXH/pU2ZG285njj1EXXQ==",
 			"dev": true
 		},
-		"http-proxy-agent": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-			"requires": {
-				"@tootallnate/once": "2",
-				"agent-base": "6",
-				"debug": "4"
-			}
-		},
 		"http-signature": {
 			"version": "1.3.6",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
@@ -4091,29 +3677,12 @@
 				"sshpk": "^1.14.1"
 			}
 		},
-		"https-proxy-agent": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-			"requires": {
-				"agent-base": "6",
-				"debug": "4"
-			}
-		},
 		"human-signals": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
 			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
 			"dev": true
 		},
-		"iconv-lite": {
-			"version": "0.6.3",
-			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-			"requires": {
-				"safer-buffer": ">= 2.1.2 < 3.0.0"
-			}
-		},
 		"ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -4191,11 +3760,6 @@
 			"integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
 			"dev": true
 		},
-		"is-potential-custom-element-name": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
-		},
 		"is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -4241,64 +3805,6 @@
 			"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
 			"dev": true
 		},
-		"jsdom": {
-			"version": "22.1.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-			"requires": {
-				"abab": "^2.0.6",
-				"cssstyle": "^3.0.0",
-				"data-urls": "^4.0.0",
-				"decimal.js": "^10.4.3",
-				"domexception": "^4.0.0",
-				"form-data": "^4.0.0",
-				"html-encoding-sniffer": "^3.0.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.1",
-				"is-potential-custom-element-name": "^1.0.1",
-				"nwsapi": "^2.2.4",
-				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.6.0",
-				"saxes": "^6.0.0",
-				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.1.2",
-				"w3c-xmlserializer": "^4.0.0",
-				"webidl-conversions": "^7.0.0",
-				"whatwg-encoding": "^2.0.0",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.1",
-				"ws": "^8.13.0",
-				"xml-name-validator": "^4.0.0"
-			},
-			"dependencies": {
-				"form-data": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-					"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-					"requires": {
-						"asynckit": "^0.4.0",
-						"combined-stream": "^1.0.8",
-						"mime-types": "^2.1.12"
-					}
-				},
-				"tough-cookie": {
-					"version": "4.1.3",
-					"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-					"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
-					"requires": {
-						"psl": "^1.1.33",
-						"punycode": "^2.1.1",
-						"universalify": "^0.2.0",
-						"url-parse": "^1.5.3"
-					}
-				},
-				"universalify": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-					"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
-				}
-			}
-		},
 		"json-schema": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -4437,12 +3943,14 @@
 		"mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true
 		},
 		"mime-types": {
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
 			"requires": {
 				"mime-db": "1.52.0"
 			}
@@ -4471,7 +3979,8 @@
 		"ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"dev": true
 		},
 		"negotiator": {
 			"version": "0.6.3",
@@ -4488,11 +3997,6 @@
 				"path-key": "^3.0.0"
 			}
 		},
-		"nwsapi": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
-		},
 		"object-inspect": {
 			"version": "1.12.3",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -4538,14 +4042,6 @@
 				"aggregate-error": "^3.0.0"
 			}
 		},
-		"parse5": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-			"requires": {
-				"entities": "^4.4.0"
-			}
-		},
 		"path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -4609,7 +4105,8 @@
 		"psl": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+			"dev": true
 		},
 		"pump": {
 			"version": "3.0.0",
@@ -4624,7 +4121,8 @@
 		"punycode": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
+			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+			"dev": true
 		},
 		"qs": {
 			"version": "6.10.4",
@@ -4635,11 +4133,6 @@
 				"side-channel": "^1.0.4"
 			}
 		},
-		"querystringify": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-		},
 		"range-parser": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@@ -4700,11 +4193,6 @@
 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
 			"dev": true
 		},
-		"requires-port": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-		},
 		"restore-cursor": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -4730,11 +4218,6 @@
 				"glob": "^7.1.3"
 			}
 		},
-		"rrweb-cssom": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw=="
-		},
 		"rxjs": {
 			"version": "7.8.1",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -4753,15 +4236,8 @@
 		"safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-		},
-		"saxes": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-			"requires": {
-				"xmlchars": "^2.2.0"
-			}
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"dev": true
 		},
 		"semver": {
 			"version": "7.5.1",
@@ -4933,11 +4409,6 @@
 				"has-flag": "^4.0.0"
 			}
 		},
-		"symbol-tree": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-		},
 		"throttleit": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -4969,14 +4440,6 @@
 				"punycode": "^2.1.1"
 			}
 		},
-		"tr46": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-			"requires": {
-				"punycode": "^2.3.0"
-			}
-		},
 		"tslib": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
@@ -5041,15 +4504,6 @@
 				"punycode": "^2.1.0"
 			}
 		},
-		"url-parse": {
-			"version": "1.5.10",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-			"requires": {
-				"querystringify": "^2.1.1",
-				"requires-port": "^1.0.0"
-			}
-		},
 		"uuid": {
 			"version": "8.3.2",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -5073,41 +4527,6 @@
 				"extsprintf": "^1.2.0"
 			}
 		},
-		"w3c-xmlserializer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-			"requires": {
-				"xml-name-validator": "^4.0.0"
-			}
-		},
-		"webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="
-		},
-		"whatwg-encoding": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-			"requires": {
-				"iconv-lite": "0.6.3"
-			}
-		},
-		"whatwg-mimetype": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="
-		},
-		"whatwg-url": {
-			"version": "12.0.1",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
-			"requires": {
-				"tr46": "^4.1.1",
-				"webidl-conversions": "^7.0.0"
-			}
-		},
 		"which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5177,22 +4596,6 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
-		"ws": {
-			"version": "8.14.2",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-			"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
-			"requires": {}
-		},
-		"xml-name-validator": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="
-		},
-		"xmlchars": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
-		},
 		"yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 4b7cf1d..1afa2dd 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,5 @@
 		"prettier": "^3.0.3",
 		"serve": "^14.2.0",
 		"uglify-js": "^3.17.4"
-	},
-	"dependencies": {
-		"jsdom": "^22.1.0"
 	}
 }

From 668ccfb96257ddeaba711095384cadbf223c1529 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Fri, 6 Oct 2023 22:26:05 -0400
Subject: [PATCH 04/30] 4.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8c29283..ff2f47c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.1.1",
+	"version": "4.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.1.1",
+			"version": "4.2.0",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 1afa2dd..442374e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.1.1",
+	"version": "4.2.0",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From 79223a37892e8baf447616232047ed70ef66de5d Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Fri, 6 Oct 2023 23:55:06 -0400
Subject: [PATCH 05/30] hybrid test, enclose component import, non-module and
 non-install build

---
 cypress/hybrid.cy.js                  | 18 ++++++
 cypress/import.cy.js                  |  2 +-
 docs/index.html                       |  7 +++
 docs/pages/install.html               | 16 ++++++
 examples/hybrid/index.html            | 81 +++++++++++++++++++++++++++
 package.json                          |  6 +-
 src/TramLite.js                       |  3 +-
 src/processors/ComponentDefinition.js |  3 +-
 src/processors/ComponentEffect.js     |  3 +-
 src/processors/ControlledInput.js     |  3 +-
 10 files changed, 134 insertions(+), 8 deletions(-)
 create mode 100644 cypress/hybrid.cy.js
 create mode 100644 examples/hybrid/index.html

diff --git a/cypress/hybrid.cy.js b/cypress/hybrid.cy.js
new file mode 100644
index 0000000..6adf513
--- /dev/null
+++ b/cypress/hybrid.cy.js
@@ -0,0 +1,18 @@
+describe('Tram-Lite Example Components (via import and inline)', () => {
+	it('should validate Tram-Lite APIs and Use Cases when importing and inline defining components', () => {
+		// visit index.html
+		cy.visit('../examples/hybrid/index.html');
+
+		/* verify that component effects trigger on dependency updates */
+		cy.get('in-temperature').get('input#f').type('19');
+		cy.get('in-temperature').get('input#c').should('have.value', '-7');
+		cy.get('in-temperature').get('input#f').should('have.value', '19');
+
+		/* verify that an element with multiple dependencies triggers on either dependency */
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+		cy.get('im-progressbar').get('input#value').clear().type('12');
+		cy.get('im-progressbar').should('have.attr', 'warning');
+		cy.get('im-progressbar').get('input#max').clear().type('15');
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+	});
+});
diff --git a/cypress/import.cy.js b/cypress/import.cy.js
index 3b4e390..25b56b3 100644
--- a/cypress/import.cy.js
+++ b/cypress/import.cy.js
@@ -1,6 +1,6 @@
 describe('Tram-Lite Example Components (via import)', () => {
 	it('should validate Tram-Lite APIs and Use Cases when importing components', () => {
-		// visit index.html (this works because the test page doesn't need to be hosted to work!)
+		// visit index.html
 		cy.visit('../examples/import/index.html');
 
 		/* verify that component effects trigger on dependency updates */
diff --git a/docs/index.html b/docs/index.html
index cbd2ab7..36d44db 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -44,6 +44,13 @@
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:image:src" content="https://tram-one.io/tram-lite/preview.png" />
 
+		<!-- styles -->
+		<style>
+			:root {
+				background: rgb(33, 37, 41);
+				background: linear-gradient(140deg, rgba(33, 37, 41, 1) 0%, rgba(41, 41, 33, 1) 100%);
+			}
+		</style>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
 
 		<!-- highlight.js -->
diff --git a/docs/pages/install.html b/docs/pages/install.html
index b596efe..17b502f 100644
--- a/docs/pages/install.html
+++ b/docs/pages/install.html
@@ -29,6 +29,22 @@ <h2>script tag</h2>
 	</code-template-html>
 </p>
 
+<h2>Import Components</h2>
+<p>
+	If you want to import components from an external source, or would like to break up your component definitions into
+	separate files, you can use the provided <code>import-components.js</code> in a script tag. You can even do this in
+	projects that don't otherwise import Tram-Lite!
+
+	<code-template-html>
+		<template>
+			<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="..."></script>
+		</template>
+	</code-template-html>
+
+	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
+	components you'd like to import.
+</p>
+
 <h2>Javascript API</h2>
 <p>
 	If you only want access to the Javascript API, or are using tram-lite in a non-browser environment, you can pull just
diff --git a/examples/hybrid/index.html b/examples/hybrid/index.html
new file mode 100644
index 0000000..02da9e0
--- /dev/null
+++ b/examples/hybrid/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>Tram-Lite Example Components</title>
+		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
+
+		<meta charset="utf-8" />
+		<style>
+			:root {
+				color-scheme: dark light;
+			}
+			body {
+				margin: auto;
+				max-width: 800px;
+			}
+		</style>
+
+		<script src="../../output/tram-lite.js"></script>
+		<script
+			src="../../output/import-component.js"
+			tl-components="/examples/import/example-container.html /examples/import/im-progressbar.html"
+		></script>
+
+		<template tl-definition>
+			<in-temperature celsius="" fahrenheit="">
+				<label>
+					<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
+					Celsius
+				</label>
+				=
+				<label>
+					<input id="f" tl-controlled placeholder="F" unit="fahrenheit" tl-hostattr="fahrenheit" tl-trigger="input" />
+					Fahrenheit
+				</label>
+
+				<script tl-effect>
+					// functions to define for the rest of the component
+					this.calcCelsius = (f) => {
+						return ((f - 32) * (5 / 9)).toFixed(0);
+					};
+
+					this.calcFahrenheit = (c) => {
+						return (c * (9 / 5) + 32).toFixed(0);
+					};
+
+					this.isReflectiveUpdate = (temperatureConverter) => {
+						const f = temperatureConverter.getAttribute('fahrenheit');
+						const c = temperatureConverter.getAttribute('celsius');
+						// if this celsius or fahrenheit value would generate the other, don't update
+						// this is indicative of an update triggered by another update!
+						// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+						// e.g. 19F and 20F both map to -7C
+						return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+					};
+				</script>
+				<script tl-effect tl-dependencies="celsius">
+					const c = this.getAttribute('celsius');
+					const newF = this.calcFahrenheit(c);
+					if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
+						this.setAttribute('fahrenheit', newF);
+					}
+				</script>
+				<script tl-effect tl-dependencies="fahrenheit">
+					const f = this.getAttribute('fahrenheit');
+					const newC = this.calcCelsius(f);
+					if (f && !isNaN(newC)) {
+						this.setAttribute('celsius', newC);
+					}
+				</script>
+			</in-temperature>
+		</template>
+	</head>
+	<body>
+		<example-container name="Temperature Converter">
+			<in-temperature></in-temperature>
+		</example-container>
+		<example-container name="Progress Bar">
+			<im-progressbar></im-progressbar>
+		</example-container>
+	</body>
+</html>
diff --git a/package.json b/package.json
index 442374e..5191f08 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
 		"build": "npm run bundle && npm run set && npm run minify",
 		"bundle": "uglifyjs src/TramLite.js src/processors/*.js -o output/bundle-step.js --define APP_VERSION=\"'4.1.1'\" -b --comments all",
 		"set": "npm run set:api && npm run set:tram-lite && npm run set:import-component",
-		"set:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" -b --comments all ",
-		"set:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" -b --comments all ",
-		"set:import-component": "uglifyjs output/bundle-step.js src/import-component.js -o output/import-component.js --define MODULE=\"true\" -b --comments all ",
+		"set:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" --define INSTALL=\"false\" -b --comments all ",
+		"set:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" --define INSTALL=\"true\" -b --comments all ",
+		"set:import-component": "uglifyjs output/bundle-step.js src/import-component.js -o output/import-component.js --define MODULE=\"false\" --define INSTALL=\"false\"  -b --comments all -e",
 		"minify": "npm run minify:api && npm run minify:tram-lite && npm run minify:import-component",
 		"minify:api": "uglifyjs output/api.js -o output/api.min.js -c -m",
 		"minify:tram-lite": "uglifyjs output/tram-lite.js -o output/tram-lite.min.js -c -m",
diff --git a/src/TramLite.js b/src/TramLite.js
index 989cfbd..4a1c804 100644
--- a/src/TramLite.js
+++ b/src/TramLite.js
@@ -218,7 +218,8 @@ if (MODULE === true) {
 	if (typeof module !== 'undefined') {
 		module.exports = TramLite;
 	}
-} else {
+}
+if (INSTALL === true) {
 	// if this is a script tag, note that we've installed Tram-Lite listeners
 	TramLite.installed = true;
 }
diff --git a/src/processors/ComponentDefinition.js b/src/processors/ComponentDefinition.js
index 26942f2..9ec3402 100644
--- a/src/processors/ComponentDefinition.js
+++ b/src/processors/ComponentDefinition.js
@@ -134,7 +134,8 @@ if (MODULE === true) {
 	if (typeof module !== 'undefined') {
 		module.exports.ComponentDefinition = ComponentDefinition;
 	}
-} else {
+}
+if (INSTALL === true) {
 	// setup mutation observer so that template elements created will automatically be defined
 	ComponentDefinition.setupMutationObserverForTemplates();
 }
diff --git a/src/processors/ComponentEffect.js b/src/processors/ComponentEffect.js
index 85eabe9..e3d1574 100644
--- a/src/processors/ComponentEffect.js
+++ b/src/processors/ComponentEffect.js
@@ -65,7 +65,8 @@ if (MODULE === true) {
 	if (typeof module !== 'undefined') {
 		module.exports.ComponentEffect = ComponentEffect;
 	}
-} else {
+}
+if (INSTALL === true) {
 	// setup shadow root processor so that tl-effects that are added are processed correctly
 	TramLite.appendShadowRootProcessor('[tl-effect]', ComponentEffect);
 }
diff --git a/src/processors/ControlledInput.js b/src/processors/ControlledInput.js
index 2b2945a..8ac2b06 100644
--- a/src/processors/ControlledInput.js
+++ b/src/processors/ControlledInput.js
@@ -40,7 +40,8 @@ if (MODULE === true) {
 	if (typeof module !== 'undefined') {
 		module.exports.ControlledInput = ControlledInput;
 	}
-} else {
+}
+if (INSTALL === true) {
 	// setup shadow root processor so that tl-controlled that are added are processed correctly
 	TramLite.appendShadowRootProcessor('[tl-controlled]', ControlledInput);
 }

From 8ae56c4b7b24a7a2b7eb5befbe118768f4a03ff4 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 00:36:15 -0400
Subject: [PATCH 06/30] simplify build tooling

---
 build.js     | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json | 11 +--------
 2 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 build.js

diff --git a/build.js b/build.js
new file mode 100644
index 0000000..4573084
--- /dev/null
+++ b/build.js
@@ -0,0 +1,69 @@
+const fs = require('fs');
+const UglifyJS = require('uglify-js');
+const { version } = require('./package.json');
+
+// load all files
+const classFiles = ['src/TramLite.js', ...fs.readdirSync('src/processors').map((file) => `src/processors/${file}`)];
+const loadedClassFiles = Object.fromEntries(
+	classFiles.map((filePath) => {
+		console.log('loading', filePath);
+		return [filePath, fs.readFileSync(filePath).toString()];
+	}),
+);
+
+console.log('loading', 'src/import-component.js');
+const importComponent = { 'src/import-component.js': fs.readFileSync('src/import-component.js').toString() };
+
+// Set configurations
+const setConfigs = [
+	{
+		outputFile: 'output/api.js',
+		files: loadedClassFiles,
+		defines: { MODULE: true, INSTALL: false },
+	},
+	{
+		outputFile: 'output/tram-lite.js',
+		files: loadedClassFiles,
+		defines: { MODULE: false, INSTALL: true },
+	},
+	{
+		outputFile: 'output/import-component.js',
+		files: { ...loadedClassFiles, ...importComponent },
+		defines: { MODULE: false, INSTALL: false },
+		enclose: true,
+	},
+];
+
+setConfigs.forEach((config) => {
+	console.log('building', config.outputFile);
+	const options = {
+		compress: {
+			global_defs: {
+				APP_VERSION: version,
+				...config.defines,
+			},
+		},
+		output: {
+			comments: 'all',
+			beautify: true,
+			wrap_iife: config.enclose,
+		},
+	};
+	const result = UglifyJS.minify(config.files, options);
+	fs.writeFileSync(config.outputFile, result.code);
+});
+
+// Minify
+const minifyConfigs = [
+	{ inputFile: 'output/api.js', outputFile: 'output/api.min.js' },
+	{ inputFile: 'output/tram-lite.js', outputFile: 'output/tram-lite.min.js' },
+	{ inputFile: 'output/import-component.js', outputFile: 'output/import-component.min.js' },
+];
+
+minifyConfigs.forEach((config) => {
+	console.log('minifying', config.outputFile);
+	const result = UglifyJS.minify(fs.readFileSync(config.inputFile, 'utf8'));
+	fs.writeFileSync(config.outputFile, result.code);
+});
+
+console.log('Build complete!');
diff --git a/package.json b/package.json
index 5191f08..1d4fa57 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,7 @@
 	"scripts": {
 		"prestart": "npm run build",
 		"start": "serve .",
-		"build": "npm run bundle && npm run set && npm run minify",
-		"bundle": "uglifyjs src/TramLite.js src/processors/*.js -o output/bundle-step.js --define APP_VERSION=\"'4.1.1'\" -b --comments all",
-		"set": "npm run set:api && npm run set:tram-lite && npm run set:import-component",
-		"set:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" --define INSTALL=\"false\" -b --comments all ",
-		"set:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" --define INSTALL=\"true\" -b --comments all ",
-		"set:import-component": "uglifyjs output/bundle-step.js src/import-component.js -o output/import-component.js --define MODULE=\"false\" --define INSTALL=\"false\"  -b --comments all -e",
-		"minify": "npm run minify:api && npm run minify:tram-lite && npm run minify:import-component",
-		"minify:api": "uglifyjs output/api.js -o output/api.min.js -c -m",
-		"minify:tram-lite": "uglifyjs output/tram-lite.js -o output/tram-lite.min.js -c -m",
-		"minify:import-component": "uglifyjs output/import-component.js -o output/import-component.min.js -c -m",
+		"build": "node build.js",
 		"prepublishOnly": "npm run build",
 		"pretest": "npm run build",
 		"test": "cypress open",

From 6a2a19da64d4b71d30349ce9cfa58a9ff9feb00b Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 00:56:39 -0400
Subject: [PATCH 07/30] enclose

---
 build.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build.js b/build.js
index 4573084..8a97a1c 100644
--- a/build.js
+++ b/build.js
@@ -43,10 +43,10 @@ setConfigs.forEach((config) => {
 				...config.defines,
 			},
 		},
+		enclose: config.enclose,
 		output: {
 			comments: 'all',
 			beautify: true,
-			wrap_iife: config.enclose,
 		},
 	};
 	const result = UglifyJS.minify(config.files, options);

From 0d8e7473411e8a0d5f3c3e9ef6b9bb336adb378d Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 16:10:08 -0400
Subject: [PATCH 08/30] export-script logic

---
 build.js                                      |  25 +-
 cypress/export.cy.js                          |  29 ++
 cypress/hybrid.cy.js                          |  25 +-
 cypress/import.cy.js                          |  31 +-
 docs/index.html                               |   4 +-
 examples/components/build-test-components.sh  |   2 +
 examples/components/ex-colorpicker.html       |  15 +
 examples/components/ex-colorpicker.js         | 379 ++++++++++++++
 .../ex-container.html}                        |   4 +-
 .../ex-progressbar.html}                      |   4 +-
 .../ex-temperature.html}                      |   4 +-
 examples/components/example-components.js     | 474 ++++++++++++++++++
 examples/export/index.html                    |  31 ++
 examples/hybrid/index.html                    |  16 +-
 examples/import/index.html                    |  17 +-
 examples/inline/index.html                    |  28 +-
 package.json                                  |   3 +-
 src/ImportComponent.js                        |  27 +
 src/import-component.js                       |  36 --
 src/scripts/export-script.js                  |  54 ++
 src/scripts/import-script.js                  |  18 +
 21 files changed, 1135 insertions(+), 91 deletions(-)
 create mode 100644 cypress/export.cy.js
 create mode 100644 examples/components/build-test-components.sh
 create mode 100644 examples/components/ex-colorpicker.html
 create mode 100644 examples/components/ex-colorpicker.js
 rename examples/{import/example-container.html => components/ex-container.html} (80%)
 rename examples/{import/im-progressbar.html => components/ex-progressbar.html} (91%)
 rename examples/{import/im-temperature.html => components/ex-temperature.html} (96%)
 create mode 100644 examples/components/example-components.js
 create mode 100644 examples/export/index.html
 create mode 100644 src/ImportComponent.js
 delete mode 100644 src/import-component.js
 create mode 100644 src/scripts/export-script.js
 create mode 100644 src/scripts/import-script.js

diff --git a/build.js b/build.js
index 8a97a1c..28d0f19 100644
--- a/build.js
+++ b/build.js
@@ -12,7 +12,17 @@ const loadedClassFiles = Object.fromEntries(
 );
 
 console.log('loading', 'src/import-component.js');
-const importComponent = { 'src/import-component.js': fs.readFileSync('src/import-component.js').toString() };
+const importComponentClass = {
+	'src/ImportComponent.js': fs.readFileSync('src/ImportComponent.js').toString(),
+};
+console.log('loading', 'src/import-script.js');
+const importScript = {
+	'src/scripts/import-script.js': fs.readFileSync('src/scripts/import-script.js').toString(),
+};
+console.log('loading', 'src/export-script.js');
+const exportScript = {
+	'src/scripts/export-script.js': fs.readFileSync('src/scripts/export-script.js').toString(),
+};
 
 // Set configurations
 const setConfigs = [
@@ -28,10 +38,20 @@ const setConfigs = [
 	},
 	{
 		outputFile: 'output/import-component.js',
-		files: { ...loadedClassFiles, ...importComponent },
+		files: { ...loadedClassFiles, ...importComponentClass, ...importScript },
 		defines: { MODULE: false, INSTALL: false },
 		enclose: true,
 	},
+	{
+		outputFile: 'output/export-dependencies.js',
+		files: { ...loadedClassFiles, ...importComponentClass },
+		defines: { MODULE: false, INSTALL: false },
+	},
+	{
+		outputFile: 'output/export-script.js',
+		files: { ...exportScript },
+		defines: { MODULE: false, INSTALL: false },
+	},
 ];
 
 setConfigs.forEach((config) => {
@@ -58,6 +78,7 @@ const minifyConfigs = [
 	{ inputFile: 'output/api.js', outputFile: 'output/api.min.js' },
 	{ inputFile: 'output/tram-lite.js', outputFile: 'output/tram-lite.min.js' },
 	{ inputFile: 'output/import-component.js', outputFile: 'output/import-component.min.js' },
+	{ inputFile: 'output/export-dependencies.js', outputFile: 'output/export-dependencies.min.js' },
 ];
 
 minifyConfigs.forEach((config) => {
diff --git a/cypress/export.cy.js b/cypress/export.cy.js
new file mode 100644
index 0000000..33671b7
--- /dev/null
+++ b/cypress/export.cy.js
@@ -0,0 +1,29 @@
+describe('Tram-Lite Example Components (via export)', () => {
+	it('should validate Tram-Lite APIs and Use Cases when exporting components', () => {
+		// visit index.html
+		cy.visit('../examples/export/index.html');
+
+		/* copied from inline tests */
+		cy.get('ex-temperature').get('input#f').type('19');
+		cy.get('ex-temperature').get('input#c').should('have.value', '-7');
+		cy.get('ex-temperature').get('input#f').should('have.value', '19');
+
+		/* copied from inline tests */
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#value').clear().type('12');
+		cy.get('ex-progressbar').should('have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#max').clear().type('15');
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+
+		/* copied from inline tests */
+		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
+		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
+		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
+		cy.get('ex-colorpicker')
+			.get('rect')
+			.then(($element) => {
+				const rawColor = window.getComputedStyle($element[0])['fill'];
+				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
+			});
+	});
+});
diff --git a/cypress/hybrid.cy.js b/cypress/hybrid.cy.js
index 6adf513..514df2c 100644
--- a/cypress/hybrid.cy.js
+++ b/cypress/hybrid.cy.js
@@ -3,16 +3,27 @@ describe('Tram-Lite Example Components (via import and inline)', () => {
 		// visit index.html
 		cy.visit('../examples/hybrid/index.html');
 
-		/* verify that component effects trigger on dependency updates */
+		/* copied from inline tests, verify inline defined element */
 		cy.get('in-temperature').get('input#f').type('19');
 		cy.get('in-temperature').get('input#c').should('have.value', '-7');
 		cy.get('in-temperature').get('input#f').should('have.value', '19');
 
-		/* verify that an element with multiple dependencies triggers on either dependency */
-		cy.get('im-progressbar').should('not.have.attr', 'warning');
-		cy.get('im-progressbar').get('input#value').clear().type('12');
-		cy.get('im-progressbar').should('have.attr', 'warning');
-		cy.get('im-progressbar').get('input#max').clear().type('15');
-		cy.get('im-progressbar').should('not.have.attr', 'warning');
+		/* copied from inline tests, verify the external component imported works */
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#value').clear().type('12');
+		cy.get('ex-progressbar').should('have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#max').clear().type('15');
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+
+		/* copied from inline tests, verify that external component exported works */
+		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
+		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
+		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
+		cy.get('ex-colorpicker')
+			.get('rect')
+			.then(($element) => {
+				const rawColor = window.getComputedStyle($element[0])['fill'];
+				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
+			});
 	});
 });
diff --git a/cypress/import.cy.js b/cypress/import.cy.js
index 25b56b3..7280325 100644
--- a/cypress/import.cy.js
+++ b/cypress/import.cy.js
@@ -3,16 +3,27 @@ describe('Tram-Lite Example Components (via import)', () => {
 		// visit index.html
 		cy.visit('../examples/import/index.html');
 
-		/* verify that component effects trigger on dependency updates */
-		cy.get('im-temperature').get('input#f').type('19');
-		cy.get('im-temperature').get('input#c').should('have.value', '-7');
-		cy.get('im-temperature').get('input#f').should('have.value', '19');
+		/* copied from inline tests */
+		cy.get('ex-temperature').get('input#f').type('19');
+		cy.get('ex-temperature').get('input#c').should('have.value', '-7');
+		cy.get('ex-temperature').get('input#f').should('have.value', '19');
 
-		/* verify that an element with multiple dependencies triggers on either dependency */
-		cy.get('im-progressbar').should('not.have.attr', 'warning');
-		cy.get('im-progressbar').get('input#value').clear().type('12');
-		cy.get('im-progressbar').should('have.attr', 'warning');
-		cy.get('im-progressbar').get('input#max').clear().type('15');
-		cy.get('im-progressbar').should('not.have.attr', 'warning');
+		/* copied from inline tests */
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#value').clear().type('12');
+		cy.get('ex-progressbar').should('have.attr', 'warning');
+		cy.get('ex-progressbar').get('input#max').clear().type('15');
+		cy.get('ex-progressbar').should('not.have.attr', 'warning');
+
+		/* copied from inline tests */
+		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
+		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
+		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
+		cy.get('ex-colorpicker')
+			.get('rect')
+			.then(($element) => {
+				const rawColor = window.getComputedStyle($element[0])['fill'];
+				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
+			});
 	});
 });
diff --git a/docs/index.html b/docs/index.html
index 36d44db..f94ee86 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -47,8 +47,8 @@
 		<!-- styles -->
 		<style>
 			:root {
-				background: rgb(33, 37, 41);
-				background: linear-gradient(140deg, rgba(33, 37, 41, 1) 0%, rgba(41, 41, 33, 1) 100%);
+				background: rgb(31, 44, 57);
+				background: linear-gradient(140deg, rgba(31, 44, 57, 1) 0%, rgba(49, 49, 26, 1) 100%);
 			}
 		</style>
 		<link rel="stylesheet" type="text/css" href="./styles.css" />
diff --git a/examples/components/build-test-components.sh b/examples/components/build-test-components.sh
new file mode 100644
index 0000000..8f97acb
--- /dev/null
+++ b/examples/components/build-test-components.sh
@@ -0,0 +1,2 @@
+node output/export-script.js examples/components/ex-progressbar.html examples/components/ex-temperature.html examples/components/ex-container.html examples/components/ex-colorpicker.html -o examples/components/example-components.js
+node output/export-script.js examples/components/ex-colorpicker.html -o examples/components/ex-colorpicker.js
diff --git a/examples/components/ex-colorpicker.html b/examples/components/ex-colorpicker.html
new file mode 100644
index 0000000..966ff53
--- /dev/null
+++ b/examples/components/ex-colorpicker.html
@@ -0,0 +1,15 @@
+<ex-colorpicker width="100px">
+	<style>
+		svg {
+			display: block;
+		}
+		rect {
+			fill: oklch(70% 0.1 ${'hue'});
+		}
+	</style>
+	<input id="hue-range-input" type="range" tl-controlled tl-hostattr="hue" tl-trigger="input" min="0" max="360" />
+	<input id="hue-text-input" type="text" placeholder="hue value" tl-controlled tl-hostattr="hue" />
+	<svg viewbox="0 0 100 100" width="${'width'}">
+		<rect width="100" height="100" />
+	</svg>
+</ex-colorpicker>
diff --git a/examples/components/ex-colorpicker.js b/examples/components/ex-colorpicker.js
new file mode 100644
index 0000000..f7cbf50
--- /dev/null
+++ b/examples/components/ex-colorpicker.js
@@ -0,0 +1,379 @@
+{
+class TramLite {
+    static version = "4.2.0";
+    static installed = !1;
+    /**
+	 * utility function to build the component class from the template string
+	 * (this is an underlying utility for the define function)
+	 */
+    static makeComponentClass(t, ...e) {
+        var a = document.createElement("template"), o = e.map(t => `tl:${t}:`);
+        // tag our templateVariables, so we know how to look for them in the dom
+        a.innerHTML = String.raw({
+            raw: t
+        }, ...o);
+        const i = a.content.firstElementChild, r = {};
+        // any attributes on the root are considered default values
+        [ ...i.attributes ].forEach(t => {
+            r[t.name] = t.value;
+        }), 
+        // if there are any component-effects that aren't already on hold, hold them now
+        //   (we don't want them triggering before the component has been completely defined)
+        // if there is already a hold, we won't touch these elements
+        //   (the developer may want to defer processing until later)
+        i.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t => {
+            t.setAttribute("tl-hold", "component-mount");
+        });
+        // Custom element class with tram-lite template support.
+        class n extends HTMLElement {
+            static tramLiteVersion = "4.2.0";
+            static tagName = i.tagName.toLowerCase();
+            static get observedAttributes() {
+                // all of the template variables are attributes that we'll update on
+                return e;
+            }
+            constructor() {
+                super(), 
+                // list of attribute and text nodes that have a template value
+                // these are scanned through when templated attributes are updated
+                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
+                // Create a shadow root
+                // and append our HTML to it
+                var t = this.attachShadow({
+                    mode: "open"
+                });
+                t.append(...i.cloneNode(!0).childNodes), 
+                // save the original template in templateValuesTextNodes
+                ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t => {
+                    this.templateValuesTextNodes.push({
+                        textNode: t,
+                        originalTemplate: t.textContent
+                    });
+                }), 
+                // save the original attribute in the templateValuesAttributes
+                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e => {
+                    [ ...e.attributes ].forEach(t => {
+                        t.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
+                            attrNode: t,
+                            element: e,
+                            originalTemplate: t.value
+                        });
+                    });
+                });
+            }
+            connectedCallback() {
+                // set all attribute values
+                // - the first default value is whatever is set on DOM creation
+                // - next, we check if there are default values that were part of the define
+                // - lastly, we'll set it to an empty string.
+                var t = Object.keys(r);
+                [ ...e, ...t ].forEach(t => {
+                    null === this.getAttribute(t) && this.setAttribute(t, r[t] || "");
+                }), 
+                // an initial call to set the default attributes
+                this.attributeChangedCallback(), 
+                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
+                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t => {
+                    t.removeAttribute("tl-hold");
+                });
+            }
+            attributeChangedCallback(t, e, a) {
+                // scan through all text nodes and attributes with template values, and update them
+                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
+            }
+            getUpdatedTemplate(t) {
+                let a = t;
+                return e.forEach(t => {
+                    // fallback on the default values or an empty string if there is no value for this attribute yet
+                    var e = this.getAttribute(t) || r[t] || "";
+                    a = a.replaceAll(`tl:${t}:`, e);
+                }), a;
+            }
+            updateTextNodeTemplates() {
+                // go through each text node that has a template variable, and update them
+                this.templateValuesTextNodes.forEach(({
+                    textNode: t,
+                    originalTemplate: e
+                }) => {
+                    t.textContent = this.getUpdatedTemplate(e);
+                });
+            }
+            updateAttrNodeTemplates() {
+                // go through each element with an attribute that has a template variable, and update those attribute values
+                this.templateValuesAttrNodes.forEach(({
+                    attrNode: t,
+                    element: e,
+                    originalTemplate: a
+                }) => {
+                    // set the attribute value to the new value (updated with all template variables)
+                    t.value = this.getUpdatedTemplate(a), 
+                    // these attributes are special, in order to update the live value (after a user has interacted with them),
+                    // they need to be set on the element as well
+                    [ "value", "checked", "selected" ].includes(t.name) && (e[t.name] = this.getUpdatedTemplate(a));
+                });
+            }
+        }
+        return n;
+    }
+    /**
+	 * a template tag function used to create new web-components.
+	 * {@link https://tram-one.io/tram-lite/#define Read the full docs here.}
+	 */
+    static define(t, ...e) {
+        // build the new component class from the template
+        t = TramLite.makeComponentClass(t, ...e);
+        // register this as a new element as a native web-component
+        return customElements.define(t.tagName, t), t;
+    }
+    /**
+	 * a helper function to update the root web-component when an input updates
+	 * {@link https://tram-one.io/tram-lite/#updateRootAttr Read the full docs here.}
+	 * @param {string} attributeName
+	 * @param {Event} event
+	 * @param {string} [targetAttribute="value"]
+	 */
+    static updateRootAttr(t, e, a = "value") {
+        var o = e.target.getRootNode().host;
+        e.target[a] ? o.setAttribute(t, e.target[a]) : o.removeAttribute(t);
+    }
+    /**
+	 * helper function to set up a callback for when an element's attribute changes
+	 * {@link https://tram-one.io/tram-lite/#addAttributeListener Read the full docs here.}
+	 * @param {Element} targetElement - The DOM element to observe.
+	 * @param {string[]} attributeNames - The name of the attribute (or list of attributes) to observe for changes.
+	 * @param {function(MutationRecord):void} callback - The function to call when the observed attribute changes.
+	 *    This function takes one argument: the MutationRecord representing the change.
+	 */
+    static addAttributeListener(e, t, a) {
+        new MutationObserver(t => {
+            t.forEach(t => {
+                // only call the mutation if an attribute changed
+                t.oldValue !== e.getAttribute(t.attributeName) && a(t);
+            });
+        }).observe(e, {
+            attributes: !0,
+            attributeFilter: t,
+            attributeOldValue: !0
+        });
+    }
+    /**
+	 * function to append new behaviors to elements that are attached to the shadowDOM.
+	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
+	 * @param {string} matcher
+	 * @param {{ connect: function }} componentClass
+	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
+	 */
+    static appendShadowRootProcessor(e, a, t = ShadowRoot.prototype) {
+        // save the original version of shadowRoot.append
+        const o = t.append;
+        t.append = function(...t) {
+            o.call(this, ...t), 
+            // if any element in this shadowRoot matches our matcher,
+            //   run the `connect` function from this class
+            this.querySelectorAll(e).forEach(t => {
+                t.getRootNode().host && a.connect(t);
+            });
+        };
+    }
+}
+
+/**
+ * ComponentDefinition is a custom element that extends the template element, that allows developers
+ * to build new web-components, using Tram-Lite, all in their HTML templates!
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-definition}
+ */
+class ComponentDefinition {
+    // regex for finding attributes that have been templated in
+    static templateVariableRegex = /tl:(.+?):/;
+    /**
+	 * function to test if node has an attribute value with a template variable
+	 * e.g. <custom-element style="color: ${'color'}">
+	 */
+    static nodeHasTramLiteAttr = t => [ ...t.attributes ].some(t => t.value.match(ComponentDefinition.templateVariableRegex)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    /**
+	 * function to test if node has an TEXT node with a template variable
+	 * e.g. <custom-element>Hello ${'name'}</custom-element>
+	 */
+    static nodeHasTextElementWithTramLiteAttr = t => t.textContent.match(ComponentDefinition.templateVariableRegex) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    /**
+	 * generic function to build a tree walker, and use the filter + tram-lite matcher.
+	 * this should return all elements that match the criteria
+	 */
+    static buildTreeWalkerTramLiteMatcher(t, e, a) {
+        for (var o, i = [], r = document.createTreeWalker(t, e, {
+            acceptNode: a
+        })
+        // build a tree walker that goes through each element, and each attribute
+        ; o = r.nextNode(); ) i.push(o);
+        return i;
+    }
+    // Returns elements with attributes containing tram-lite template variables.
+    static getElementsWithTramLiteValuesInAttributes(t) {
+        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_ELEMENT, ComponentDefinition.nodeHasTramLiteAttr);
+    }
+    // Returns text nodes containing tram-lite template variables.
+    static getTextNodesWithTramLiteValues(t) {
+        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_TEXT, ComponentDefinition.nodeHasTextElementWithTramLiteAttr);
+    }
+    /**
+	 * static function to process template tags and define components
+	 * @param {HTMLTemplateElement} templateTag
+	 */
+    static processTemplateDefinition(t) {
+        [ ...t.content.children ].forEach(t => {
+            var t = t.outerHTML.split(/\$\{\'(.*?)\'\}/), e = t.filter((t, e) => e % 2 == 0), t = t.filter((t, e) => e % 2 != 0);
+            // we expect template variables to be in the following pattern, matching "${'...'}"
+            TramLite.define(e, ...t);
+        });
+    }
+    /**
+	 * utility function to extract js template strings, so that they can be passed into a template tag function
+	 */
+    static extractTemplateVariables(t) {
+        // we expect template variables to be in the following pattern, matching "${'...'}"
+        t = t.split(/\$\{\'(.*?)\'\}/);
+        // Split the string by the above pattern, which lets us get an alternating list of strings and variables
+        return [ t.filter((t, e) => e % 2 == 0), t.filter((t, e) => e % 2 != 0) ];
+    }
+    /**
+	 * function to set up an observer to watch for when new templates are added,
+	 *   and process all the definitions in them
+	 * @param {Document} [targetRoot=document]
+	 */
+    static setupMutationObserverForTemplates(t = document) {
+        new MutationObserver(t => {
+            t.forEach(t => {
+                t.addedNodes.forEach(t => {
+                    // check if the previous element is a definition template
+                    // we wait until we are in the next element (most likely a #text node)
+                    // because that will confirm that the element has been completely parsed
+                    t.previousSibling?.matches?.("[tl-definition]") && ComponentDefinition.processTemplateDefinition(t.previousSibling);
+                });
+            });
+        }).observe(document, {
+            subtree: !0,
+            childList: !0
+        });
+    }
+}
+
+/**
+ * ComponentEffect is a class that can extend the script element, that allows developers
+ * to build side-effects for web-components.
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-effect}
+ */
+class ComponentEffect {
+    /**
+	 * function to trigger the javascript in a script tag.
+	 * This does not handle the src attribute, only inline javascript.
+	 * The `this` keyword will reference the host parent node of this script tag.
+	 * @param {HTMLScriptElement} scriptTag
+	 */
+    static processScriptTag(t) {
+        // don't do this if we have a hold on the script tag
+        if (!t.hasAttribute("tl-hold")) {
+            const e = t.getRootNode().host;
+            // provide a scoped evaluation of the script tags in this element
+            t = t.innerHTML, Function("document", "window", t).bind(e)(e.shadowRoot, window);
+        }
+    }
+    /**
+	 * connect function for ComponentEffect - when this is run on a script,
+	 *   we trigger that script with the host element as context, and set up an
+	 *   observer if a set of dependencies are defined and ever update
+	 * @param {HTMLScriptElement} newNode
+	 */
+    static connect(t) {
+        var e, a = t.getRootNode().host;
+        // run an initial run of the script
+        // (this won't happen if there is a tl-hold on the script)
+        ComponentEffect.processScriptTag(t), 
+        // if we have any dependencies, add a listener to trigger them
+        t.hasAttribute("tl-dependencies") && !0 !== t.hasSetupListener && (e = t.getAttribute("tl-dependencies").split(" "), 
+        TramLite.addAttributeListener(a, e, () => {
+            // check if the inline script is being held
+            ComponentEffect.processScriptTag(t);
+        }), t.hasSetupListener = !0), 
+        // if we ever set (or remove) the hold on this, trigger the inline script
+        // (this allows developers to delay triggering inline scripts)
+        TramLite.addAttributeListener(t, [ "tl-hold" ], () => {
+            ComponentEffect.processScriptTag(t);
+        });
+    }
+}
+
+/**
+ * ControlledInput is a class that can extend the input or script element, that allows developers
+ * to build 2-way data-binding for web-components.
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-effect}
+ */
+class ControlledInput {
+    /**
+	 * connect function for ControlledInput - when this is run on an input (or other similar control),
+	 *   we set up a 2-way data binding from the input to the host element.
+	 * @param {HTMLInputElement} newNode
+	 */
+    static connect(e) {
+        // attributes that control the behavior of the controlled input
+        var t = (e.getAttribute("tl-trigger") || "change").split(" ");
+        const a = e.getAttribute("tl-hostattr") || "value", o = e.getAttribute("tl-targetattr") || "value", i = e.getRootNode().host;
+        e[o] = i.getAttribute(a), 
+        // update this input whenever the host attribute updates
+        TramLite.addAttributeListener(i, [ a ], () => {
+            e[o] = i.getAttribute(a);
+        }), 
+        // update the root component attribute whenever the value changes for this node updates
+        t.forEach(t => {
+            e.addEventListener(t, t => {
+                TramLite.updateRootAttr(a, t, o);
+            });
+        });
+    }
+}
+
+class ImportComponent {
+    /**
+	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
+	 * @param {string} componentContent
+	 */
+    static importNewComponent(t) {
+        var [ t, e ] = ComponentDefinition.extractTemplateVariables(t), t = TramLite.makeComponentClass(t, ...e);
+        // make a component class based on the template tag pieces
+        // (this is done, over define, so we can attach shadow root processors)
+        // override attachShadow so that we can add shadowRootProcessors
+        const a = t.prototype.attachShadow;
+        t.prototype.attachShadow = function(...t) {
+            t = a.call(this, ...t);
+            return TramLite.appendShadowRootProcessor("[tl-controlled]", ControlledInput, t), 
+            TramLite.appendShadowRootProcessor("[tl-effect]", ComponentEffect, t), 
+            t;
+        }, 
+        // define the component in the DOM
+        customElements.define(t.tagName, t);
+    }
+}
+
+{
+	const componentTemplate = `<ex-colorpicker width="100px">
+	<style>
+		svg {
+			display: block;
+		}
+		rect {
+			fill: oklch(70% 0.1 \${'hue'});
+		}
+	</style>
+	<input id="hue-range-input" type="range" tl-controlled tl-hostattr="hue" tl-trigger="input" min="0" max="360" />
+	<input id="hue-text-input" type="text" placeholder="hue value" tl-controlled tl-hostattr="hue" />
+	<svg viewbox="0 0 100 100" width="\${'width'}">
+		<rect width="100" height="100" />
+	</svg>
+</ex-colorpicker>
+`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+
+}
\ No newline at end of file
diff --git a/examples/import/example-container.html b/examples/components/ex-container.html
similarity index 80%
rename from examples/import/example-container.html
rename to examples/components/ex-container.html
index 566f319..d9dde76 100644
--- a/examples/import/example-container.html
+++ b/examples/components/ex-container.html
@@ -1,4 +1,4 @@
-<example-container>
+<ex-container>
 	<style>
 		fieldset {
 			border: yellow 1px solid;
@@ -11,4 +11,4 @@
 		<legend>${'name'}</legend>
 		<slot></slot>
 	</fieldset>
-</example-container>
+</ex-container>
diff --git a/examples/import/im-progressbar.html b/examples/components/ex-progressbar.html
similarity index 91%
rename from examples/import/im-progressbar.html
rename to examples/components/ex-progressbar.html
index 5a71ade..6521ee1 100644
--- a/examples/import/im-progressbar.html
+++ b/examples/components/ex-progressbar.html
@@ -1,4 +1,4 @@
-<im-progressbar value="3" max="10">
+<ex-progressbar value="3" max="10">
 	<div>
 		<input id="value" type="number" tl-controlled tl-trigger="input" />
 		<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
@@ -14,4 +14,4 @@
 			this.removeAttribute('warning');
 		}
 	</script>
-</im-progressbar>
+</ex-progressbar>
diff --git a/examples/import/im-temperature.html b/examples/components/ex-temperature.html
similarity index 96%
rename from examples/import/im-temperature.html
rename to examples/components/ex-temperature.html
index 54bf837..ab0e08f 100644
--- a/examples/import/im-temperature.html
+++ b/examples/components/ex-temperature.html
@@ -1,4 +1,4 @@
-<im-temperature celsius="" fahrenheit="">
+<ex-temperature celsius="" fahrenheit="">
 	<label>
 		<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
 		Celsius
@@ -43,4 +43,4 @@
 			this.setAttribute('celsius', newC);
 		}
 	</script>
-</im-temperature>
+</ex-temperature>
diff --git a/examples/components/example-components.js b/examples/components/example-components.js
new file mode 100644
index 0000000..c4a6e70
--- /dev/null
+++ b/examples/components/example-components.js
@@ -0,0 +1,474 @@
+{
+class TramLite {
+    static version = "4.2.0";
+    static installed = !1;
+    /**
+	 * utility function to build the component class from the template string
+	 * (this is an underlying utility for the define function)
+	 */
+    static makeComponentClass(t, ...e) {
+        var a = document.createElement("template"), o = e.map(t => `tl:${t}:`);
+        // tag our templateVariables, so we know how to look for them in the dom
+        a.innerHTML = String.raw({
+            raw: t
+        }, ...o);
+        const i = a.content.firstElementChild, r = {};
+        // any attributes on the root are considered default values
+        [ ...i.attributes ].forEach(t => {
+            r[t.name] = t.value;
+        }), 
+        // if there are any component-effects that aren't already on hold, hold them now
+        //   (we don't want them triggering before the component has been completely defined)
+        // if there is already a hold, we won't touch these elements
+        //   (the developer may want to defer processing until later)
+        i.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t => {
+            t.setAttribute("tl-hold", "component-mount");
+        });
+        // Custom element class with tram-lite template support.
+        class n extends HTMLElement {
+            static tramLiteVersion = "4.2.0";
+            static tagName = i.tagName.toLowerCase();
+            static get observedAttributes() {
+                // all of the template variables are attributes that we'll update on
+                return e;
+            }
+            constructor() {
+                super(), 
+                // list of attribute and text nodes that have a template value
+                // these are scanned through when templated attributes are updated
+                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
+                // Create a shadow root
+                // and append our HTML to it
+                var t = this.attachShadow({
+                    mode: "open"
+                });
+                t.append(...i.cloneNode(!0).childNodes), 
+                // save the original template in templateValuesTextNodes
+                ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t => {
+                    this.templateValuesTextNodes.push({
+                        textNode: t,
+                        originalTemplate: t.textContent
+                    });
+                }), 
+                // save the original attribute in the templateValuesAttributes
+                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e => {
+                    [ ...e.attributes ].forEach(t => {
+                        t.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
+                            attrNode: t,
+                            element: e,
+                            originalTemplate: t.value
+                        });
+                    });
+                });
+            }
+            connectedCallback() {
+                // set all attribute values
+                // - the first default value is whatever is set on DOM creation
+                // - next, we check if there are default values that were part of the define
+                // - lastly, we'll set it to an empty string.
+                var t = Object.keys(r);
+                [ ...e, ...t ].forEach(t => {
+                    null === this.getAttribute(t) && this.setAttribute(t, r[t] || "");
+                }), 
+                // an initial call to set the default attributes
+                this.attributeChangedCallback(), 
+                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
+                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t => {
+                    t.removeAttribute("tl-hold");
+                });
+            }
+            attributeChangedCallback(t, e, a) {
+                // scan through all text nodes and attributes with template values, and update them
+                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
+            }
+            getUpdatedTemplate(t) {
+                let a = t;
+                return e.forEach(t => {
+                    // fallback on the default values or an empty string if there is no value for this attribute yet
+                    var e = this.getAttribute(t) || r[t] || "";
+                    a = a.replaceAll(`tl:${t}:`, e);
+                }), a;
+            }
+            updateTextNodeTemplates() {
+                // go through each text node that has a template variable, and update them
+                this.templateValuesTextNodes.forEach(({
+                    textNode: t,
+                    originalTemplate: e
+                }) => {
+                    t.textContent = this.getUpdatedTemplate(e);
+                });
+            }
+            updateAttrNodeTemplates() {
+                // go through each element with an attribute that has a template variable, and update those attribute values
+                this.templateValuesAttrNodes.forEach(({
+                    attrNode: t,
+                    element: e,
+                    originalTemplate: a
+                }) => {
+                    // set the attribute value to the new value (updated with all template variables)
+                    t.value = this.getUpdatedTemplate(a), 
+                    // these attributes are special, in order to update the live value (after a user has interacted with them),
+                    // they need to be set on the element as well
+                    [ "value", "checked", "selected" ].includes(t.name) && (e[t.name] = this.getUpdatedTemplate(a));
+                });
+            }
+        }
+        return n;
+    }
+    /**
+	 * a template tag function used to create new web-components.
+	 * {@link https://tram-one.io/tram-lite/#define Read the full docs here.}
+	 */
+    static define(t, ...e) {
+        // build the new component class from the template
+        t = TramLite.makeComponentClass(t, ...e);
+        // register this as a new element as a native web-component
+        return customElements.define(t.tagName, t), t;
+    }
+    /**
+	 * a helper function to update the root web-component when an input updates
+	 * {@link https://tram-one.io/tram-lite/#updateRootAttr Read the full docs here.}
+	 * @param {string} attributeName
+	 * @param {Event} event
+	 * @param {string} [targetAttribute="value"]
+	 */
+    static updateRootAttr(t, e, a = "value") {
+        var o = e.target.getRootNode().host;
+        e.target[a] ? o.setAttribute(t, e.target[a]) : o.removeAttribute(t);
+    }
+    /**
+	 * helper function to set up a callback for when an element's attribute changes
+	 * {@link https://tram-one.io/tram-lite/#addAttributeListener Read the full docs here.}
+	 * @param {Element} targetElement - The DOM element to observe.
+	 * @param {string[]} attributeNames - The name of the attribute (or list of attributes) to observe for changes.
+	 * @param {function(MutationRecord):void} callback - The function to call when the observed attribute changes.
+	 *    This function takes one argument: the MutationRecord representing the change.
+	 */
+    static addAttributeListener(e, t, a) {
+        new MutationObserver(t => {
+            t.forEach(t => {
+                // only call the mutation if an attribute changed
+                t.oldValue !== e.getAttribute(t.attributeName) && a(t);
+            });
+        }).observe(e, {
+            attributes: !0,
+            attributeFilter: t,
+            attributeOldValue: !0
+        });
+    }
+    /**
+	 * function to append new behaviors to elements that are attached to the shadowDOM.
+	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
+	 * @param {string} matcher
+	 * @param {{ connect: function }} componentClass
+	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
+	 */
+    static appendShadowRootProcessor(e, a, t = ShadowRoot.prototype) {
+        // save the original version of shadowRoot.append
+        const o = t.append;
+        t.append = function(...t) {
+            o.call(this, ...t), 
+            // if any element in this shadowRoot matches our matcher,
+            //   run the `connect` function from this class
+            this.querySelectorAll(e).forEach(t => {
+                t.getRootNode().host && a.connect(t);
+            });
+        };
+    }
+}
+
+/**
+ * ComponentDefinition is a custom element that extends the template element, that allows developers
+ * to build new web-components, using Tram-Lite, all in their HTML templates!
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-definition}
+ */
+class ComponentDefinition {
+    // regex for finding attributes that have been templated in
+    static templateVariableRegex = /tl:(.+?):/;
+    /**
+	 * function to test if node has an attribute value with a template variable
+	 * e.g. <custom-element style="color: ${'color'}">
+	 */
+    static nodeHasTramLiteAttr = t => [ ...t.attributes ].some(t => t.value.match(ComponentDefinition.templateVariableRegex)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    /**
+	 * function to test if node has an TEXT node with a template variable
+	 * e.g. <custom-element>Hello ${'name'}</custom-element>
+	 */
+    static nodeHasTextElementWithTramLiteAttr = t => t.textContent.match(ComponentDefinition.templateVariableRegex) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    /**
+	 * generic function to build a tree walker, and use the filter + tram-lite matcher.
+	 * this should return all elements that match the criteria
+	 */
+    static buildTreeWalkerTramLiteMatcher(t, e, a) {
+        for (var o, i = [], r = document.createTreeWalker(t, e, {
+            acceptNode: a
+        })
+        // build a tree walker that goes through each element, and each attribute
+        ; o = r.nextNode(); ) i.push(o);
+        return i;
+    }
+    // Returns elements with attributes containing tram-lite template variables.
+    static getElementsWithTramLiteValuesInAttributes(t) {
+        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_ELEMENT, ComponentDefinition.nodeHasTramLiteAttr);
+    }
+    // Returns text nodes containing tram-lite template variables.
+    static getTextNodesWithTramLiteValues(t) {
+        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_TEXT, ComponentDefinition.nodeHasTextElementWithTramLiteAttr);
+    }
+    /**
+	 * static function to process template tags and define components
+	 * @param {HTMLTemplateElement} templateTag
+	 */
+    static processTemplateDefinition(t) {
+        [ ...t.content.children ].forEach(t => {
+            var t = t.outerHTML.split(/\$\{\'(.*?)\'\}/), e = t.filter((t, e) => e % 2 == 0), t = t.filter((t, e) => e % 2 != 0);
+            // we expect template variables to be in the following pattern, matching "${'...'}"
+            TramLite.define(e, ...t);
+        });
+    }
+    /**
+	 * utility function to extract js template strings, so that they can be passed into a template tag function
+	 */
+    static extractTemplateVariables(t) {
+        // we expect template variables to be in the following pattern, matching "${'...'}"
+        t = t.split(/\$\{\'(.*?)\'\}/);
+        // Split the string by the above pattern, which lets us get an alternating list of strings and variables
+        return [ t.filter((t, e) => e % 2 == 0), t.filter((t, e) => e % 2 != 0) ];
+    }
+    /**
+	 * function to set up an observer to watch for when new templates are added,
+	 *   and process all the definitions in them
+	 * @param {Document} [targetRoot=document]
+	 */
+    static setupMutationObserverForTemplates(t = document) {
+        new MutationObserver(t => {
+            t.forEach(t => {
+                t.addedNodes.forEach(t => {
+                    // check if the previous element is a definition template
+                    // we wait until we are in the next element (most likely a #text node)
+                    // because that will confirm that the element has been completely parsed
+                    t.previousSibling?.matches?.("[tl-definition]") && ComponentDefinition.processTemplateDefinition(t.previousSibling);
+                });
+            });
+        }).observe(document, {
+            subtree: !0,
+            childList: !0
+        });
+    }
+}
+
+/**
+ * ComponentEffect is a class that can extend the script element, that allows developers
+ * to build side-effects for web-components.
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-effect}
+ */
+class ComponentEffect {
+    /**
+	 * function to trigger the javascript in a script tag.
+	 * This does not handle the src attribute, only inline javascript.
+	 * The `this` keyword will reference the host parent node of this script tag.
+	 * @param {HTMLScriptElement} scriptTag
+	 */
+    static processScriptTag(t) {
+        // don't do this if we have a hold on the script tag
+        if (!t.hasAttribute("tl-hold")) {
+            const e = t.getRootNode().host;
+            // provide a scoped evaluation of the script tags in this element
+            t = t.innerHTML, Function("document", "window", t).bind(e)(e.shadowRoot, window);
+        }
+    }
+    /**
+	 * connect function for ComponentEffect - when this is run on a script,
+	 *   we trigger that script with the host element as context, and set up an
+	 *   observer if a set of dependencies are defined and ever update
+	 * @param {HTMLScriptElement} newNode
+	 */
+    static connect(t) {
+        var e, a = t.getRootNode().host;
+        // run an initial run of the script
+        // (this won't happen if there is a tl-hold on the script)
+        ComponentEffect.processScriptTag(t), 
+        // if we have any dependencies, add a listener to trigger them
+        t.hasAttribute("tl-dependencies") && !0 !== t.hasSetupListener && (e = t.getAttribute("tl-dependencies").split(" "), 
+        TramLite.addAttributeListener(a, e, () => {
+            // check if the inline script is being held
+            ComponentEffect.processScriptTag(t);
+        }), t.hasSetupListener = !0), 
+        // if we ever set (or remove) the hold on this, trigger the inline script
+        // (this allows developers to delay triggering inline scripts)
+        TramLite.addAttributeListener(t, [ "tl-hold" ], () => {
+            ComponentEffect.processScriptTag(t);
+        });
+    }
+}
+
+/**
+ * ControlledInput is a class that can extend the input or script element, that allows developers
+ * to build 2-way data-binding for web-components.
+ *
+ * {@link https://tram-one.io/tram-lite/#tl-effect}
+ */
+class ControlledInput {
+    /**
+	 * connect function for ControlledInput - when this is run on an input (or other similar control),
+	 *   we set up a 2-way data binding from the input to the host element.
+	 * @param {HTMLInputElement} newNode
+	 */
+    static connect(e) {
+        // attributes that control the behavior of the controlled input
+        var t = (e.getAttribute("tl-trigger") || "change").split(" ");
+        const a = e.getAttribute("tl-hostattr") || "value", o = e.getAttribute("tl-targetattr") || "value", i = e.getRootNode().host;
+        e[o] = i.getAttribute(a), 
+        // update this input whenever the host attribute updates
+        TramLite.addAttributeListener(i, [ a ], () => {
+            e[o] = i.getAttribute(a);
+        }), 
+        // update the root component attribute whenever the value changes for this node updates
+        t.forEach(t => {
+            e.addEventListener(t, t => {
+                TramLite.updateRootAttr(a, t, o);
+            });
+        });
+    }
+}
+
+class ImportComponent {
+    /**
+	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
+	 * @param {string} componentContent
+	 */
+    static importNewComponent(t) {
+        var [ t, e ] = ComponentDefinition.extractTemplateVariables(t), t = TramLite.makeComponentClass(t, ...e);
+        // make a component class based on the template tag pieces
+        // (this is done, over define, so we can attach shadow root processors)
+        // override attachShadow so that we can add shadowRootProcessors
+        const a = t.prototype.attachShadow;
+        t.prototype.attachShadow = function(...t) {
+            t = a.call(this, ...t);
+            return TramLite.appendShadowRootProcessor("[tl-controlled]", ControlledInput, t), 
+            TramLite.appendShadowRootProcessor("[tl-effect]", ComponentEffect, t), 
+            t;
+        }, 
+        // define the component in the DOM
+        customElements.define(t.tagName, t);
+    }
+}
+
+{
+	const componentTemplate = `<ex-progressbar value="3" max="10">
+	<div>
+		<input id="value" type="number" tl-controlled tl-trigger="input" />
+		<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
+	</div>
+	<progress value="\${'value'}" max="\${'max'}"></progress>
+	<div>\${'warning'}</div>
+	<script tl-effect tl-dependencies="value max">
+		const value = parseInt(this.getAttribute('value'));
+		const max = parseInt(this.getAttribute('max'));
+		if (value > max) {
+			this.setAttribute('warning', \`WARNING: \${value} is greater than \${max}\`);
+		} else {
+			this.removeAttribute('warning');
+		}
+	</script>
+</ex-progressbar>
+`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+
+
+{
+	const componentTemplate = `<ex-temperature celsius="" fahrenheit="">
+	<label>
+		<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
+		Celsius
+	</label>
+	=
+	<label>
+		<input id="f" tl-controlled placeholder="F" unit="fahrenheit" tl-hostattr="fahrenheit" tl-trigger="input" />
+		Fahrenheit
+	</label>
+
+	<script tl-effect>
+		// functions to define for the rest of the component
+		this.calcCelsius = (f) => {
+			return ((f - 32) * (5 / 9)).toFixed(0);
+		};
+
+		this.calcFahrenheit = (c) => {
+			return (c * (9 / 5) + 32).toFixed(0);
+		};
+
+		this.isReflectiveUpdate = (temperatureConverter) => {
+			const f = temperatureConverter.getAttribute('fahrenheit');
+			const c = temperatureConverter.getAttribute('celsius');
+			// if this celsius or fahrenheit value would generate the other, don't update
+			// this is indicative of an update triggered by another update!
+			// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+			// e.g. 19F and 20F both map to -7C
+			return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+		};
+	</script>
+	<script tl-effect tl-dependencies="celsius">
+		const c = this.getAttribute('celsius');
+		const newF = this.calcFahrenheit(c);
+		if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
+			this.setAttribute('fahrenheit', newF);
+		}
+	</script>
+	<script tl-effect tl-dependencies="fahrenheit">
+		const f = this.getAttribute('fahrenheit');
+		const newC = this.calcCelsius(f);
+		if (f && !isNaN(newC)) {
+			this.setAttribute('celsius', newC);
+		}
+	</script>
+</ex-temperature>
+`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+
+
+{
+	const componentTemplate = `<ex-container>
+	<style>
+		fieldset {
+			border: yellow 1px solid;
+		}
+		legend {
+			color: yellow;
+		}
+	</style>
+	<fieldset>
+		<legend>\${'name'}</legend>
+		<slot></slot>
+	</fieldset>
+</ex-container>
+`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+
+
+{
+	const componentTemplate = `<ex-colorpicker width="100px">
+	<style>
+		svg {
+			display: block;
+		}
+		rect {
+			fill: oklch(70% 0.1 \${'hue'});
+		}
+	</style>
+	<input id="hue-range-input" type="range" tl-controlled tl-hostattr="hue" tl-trigger="input" min="0" max="360" />
+	<input id="hue-text-input" type="text" placeholder="hue value" tl-controlled tl-hostattr="hue" />
+	<svg viewbox="0 0 100 100" width="\${'width'}">
+		<rect width="100" height="100" />
+	</svg>
+</ex-colorpicker>
+`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+
+}
\ No newline at end of file
diff --git a/examples/export/index.html b/examples/export/index.html
new file mode 100644
index 0000000..1272936
--- /dev/null
+++ b/examples/export/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>Tram-Lite Example Components</title>
+		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
+
+		<meta charset="utf-8" />
+		<style>
+			:root {
+				color-scheme: dark light;
+			}
+			body {
+				margin: auto;
+				max-width: 800px;
+			}
+		</style>
+
+		<script src="/examples/components/example-components.js"></script>
+	</head>
+	<body>
+		<ex-container name="Temperature Converter">
+			<ex-temperature></ex-temperature>
+		</ex-container>
+		<ex-container name="Progress Bar">
+			<ex-progressbar></ex-progressbar>
+		</ex-container>
+		<ex-container name="Color Picker">
+			<ex-colorpicker hue="200"></ex-colorpicker>
+		</ex-container>
+	</body>
+</html>
diff --git a/examples/hybrid/index.html b/examples/hybrid/index.html
index 02da9e0..ad5e53f 100644
--- a/examples/hybrid/index.html
+++ b/examples/hybrid/index.html
@@ -18,8 +18,9 @@
 		<script src="../../output/tram-lite.js"></script>
 		<script
 			src="../../output/import-component.js"
-			tl-components="/examples/import/example-container.html /examples/import/im-progressbar.html"
+			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html"
 		></script>
+		<script src="/examples/components/ex-colorpicker.js"></script>
 
 		<template tl-definition>
 			<in-temperature celsius="" fahrenheit="">
@@ -71,11 +72,14 @@
 		</template>
 	</head>
 	<body>
-		<example-container name="Temperature Converter">
+		<ex-container name="Temperature Converter">
 			<in-temperature></in-temperature>
-		</example-container>
-		<example-container name="Progress Bar">
-			<im-progressbar></im-progressbar>
-		</example-container>
+		</ex-container>
+		<ex-container name="Progress Bar">
+			<ex-progressbar></ex-progressbar>
+		</ex-container>
+		<ex-container name="Color Picker">
+			<ex-colorpicker hue="200"></ex-colorpicker>
+		</ex-container>
 	</body>
 </html>
diff --git a/examples/import/index.html b/examples/import/index.html
index d5cbece..1f1f762 100644
--- a/examples/import/index.html
+++ b/examples/import/index.html
@@ -17,15 +17,18 @@
 
 		<script
 			src="../../output/import-component.js"
-			tl-components="/examples/import/example-container.html /examples/import/im-progressbar.html /examples/import/im-temperature.html"
+			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html /examples/components/ex-temperature.html /examples/components/ex-colorpicker.html"
 		></script>
 	</head>
 	<body>
-		<example-container name="Temperature Converter">
-			<im-temperature></im-temperature>
-		</example-container>
-		<example-container name="Progress Bar">
-			<im-progressbar></im-progressbar>
-		</example-container>
+		<ex-container name="Temperature Converter">
+			<ex-temperature></ex-temperature>
+		</ex-container>
+		<ex-container name="Progress Bar">
+			<ex-progressbar></ex-progressbar>
+		</ex-container>
+		<ex-container name="Color Picker">
+			<ex-colorpicker hue="200"></ex-colorpicker>
+		</ex-container>
 	</body>
 </html>
diff --git a/examples/inline/index.html b/examples/inline/index.html
index c2e239e..25ac00b 100644
--- a/examples/inline/index.html
+++ b/examples/inline/index.html
@@ -19,7 +19,7 @@
 	</head>
 	<body>
 		<template tl-definition>
-			<example-container>
+			<in-container>
 				<style>
 					fieldset {
 						border: yellow 1px solid;
@@ -32,7 +32,7 @@
 					<legend>${'name'}</legend>
 					<slot></slot>
 				</fieldset>
-			</example-container>
+			</in-container>
 
 			<in-title>
 				<h1 style="font-size: 1em">Title: <slot></slot></h1>
@@ -187,25 +187,25 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 		</template>
 
 		<in-title>Tram-Lite Components!</in-title>
-		<example-container name="Counters">
+		<in-container name="Counters">
 			<in-counter id="blue" label="Blue" color="#CECEFF"></in-counter>
 			<in-counter id="red" label="Red" color="#FFCECE"></in-counter>
 			<in-counter id="default"></in-counter>
-		</example-container>
-		<example-container name="Mirror Input">
+		</in-container>
+		<in-container name="Mirror Input">
 			<in-mirror></in-mirror>
-		</example-container>
-		<example-container name="To Do List">
+		</in-container>
+		<in-container name="To Do List">
 			<in-todolist></in-todolist>
-		</example-container>
-		<example-container name="Color Picker">
+		</in-container>
+		<in-container name="Color Picker">
 			<in-colorpicker hue="200"></in-colorpicker>
-		</example-container>
-		<example-container name="Temperature Converter">
+		</in-container>
+		<in-container name="Temperature Converter">
 			<in-temperature></in-temperature>
-		</example-container>
-		<example-container name="Progress Bar">
+		</in-container>
+		<in-container name="Progress Bar">
 			<in-progressbar></in-progressbar>
-		</example-container>
+		</in-container>
 	</body>
 </html>
diff --git a/package.json b/package.json
index 1d4fa57..091d7c9 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
 		"start": "serve .",
 		"build": "node build.js",
 		"prepublishOnly": "npm run build",
-		"pretest": "npm run build",
+		"build-test-components": "bash ./examples/components/build-test-components.sh",
+		"pretest": "npm run build && npm run build-test-components",
 		"test": "cypress open",
 		"docs": "serve ./docs"
 	},
diff --git a/src/ImportComponent.js b/src/ImportComponent.js
new file mode 100644
index 0000000..b9153e9
--- /dev/null
+++ b/src/ImportComponent.js
@@ -0,0 +1,27 @@
+class ImportComponent {
+	/**
+	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
+	 * @param {string} componentContent
+	 */
+	static importNewComponent(componentContent) {
+		const [componentRawStrings, componentTemplateVariables] =
+			ComponentDefinition.extractTemplateVariables(componentContent);
+
+		// make a component class based on the template tag pieces
+		// (this is done, over define, so we can attach shadow root processors)
+		const componentClass = TramLite.makeComponentClass(componentRawStrings, ...componentTemplateVariables);
+
+		// override attachShadow so that we can add shadowRootProcessors
+		const attachShadow = componentClass.prototype.attachShadow;
+		componentClass.prototype.attachShadow = function (...options) {
+			const shadowRoot = attachShadow.call(this, ...options);
+			TramLite.appendShadowRootProcessor('[tl-controlled]', ControlledInput, shadowRoot);
+			TramLite.appendShadowRootProcessor('[tl-effect]', ComponentEffect, shadowRoot);
+
+			return shadowRoot;
+		};
+
+		// define the component in the DOM
+		customElements.define(componentClass.tagName, componentClass);
+	}
+}
diff --git a/src/import-component.js b/src/import-component.js
deleted file mode 100644
index eaa86ca..0000000
--- a/src/import-component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// usage - this script is intended to be used as part of a script tag
-// e.g. <script src=".../import-component.js" tl-components=".../my-component.html">
-
-// tl-components can have a space separated list of import paths
-const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);
-
-// for each path we have, process the component definition
-componentPaths.forEach(async (componentPath) => {
-	const componentResult = await fetch(componentPath);
-	if (!componentResult.ok) {
-		// if we couldn't fetch the component, don't process anything
-		return;
-	}
-
-	// load the content as text, and then build the template tag pieces
-	const componentContent = await componentResult.text();
-	const [componentRawStrings, componentTemplateVariables] =
-		ComponentDefinition.extractTemplateVariables(componentContent);
-
-	// make a component class based on the template tag pieces
-	// (this is done, over define, so we can attach shadow root processors)
-	const componentClass = TramLite.makeComponentClass(componentRawStrings, ...componentTemplateVariables);
-
-	// override attachShadow so that we can add shadowRootProcessors
-	const attachShadow = componentClass.prototype.attachShadow;
-	componentClass.prototype.attachShadow = function (...options) {
-		const shadowRoot = attachShadow.call(this, ...options);
-		TramLite.appendShadowRootProcessor('[tl-controlled]', ControlledInput, shadowRoot);
-		TramLite.appendShadowRootProcessor('[tl-effect]', ComponentEffect, shadowRoot);
-
-		return shadowRoot;
-	};
-
-	// define the component in the DOM
-	customElements.define(componentClass.tagName, componentClass);
-});
diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
new file mode 100644
index 0000000..6346103
--- /dev/null
+++ b/src/scripts/export-script.js
@@ -0,0 +1,54 @@
+const fs = require('fs');
+const path = require('path');
+
+// check to see if we should use the minified flag for external dependencies
+const useMinified = process.argv.includes('-m') || process.argv.includes('--minified');
+
+// check to see if there is a predefined output filename (otherwise we will try to generate one)
+const outputFlagIndex = process.argv.findIndex((arg) => arg === '-o' || arg === '--output');
+const customOutputFile = outputFlagIndex !== -1 ? process.argv[outputFlagIndex + 1] : null;
+
+const filePaths = process.argv.slice(2).filter((arg, index) => {
+	const originalIndex = index + 2;
+	// do not include any flags
+	const isNotAFlag = !arg.startsWith('-');
+	// do not include the path after the output flag
+	const isNotOutput = originalIndex !== outputFlagIndex + 1;
+	return isNotAFlag && isNotOutput;
+});
+
+if (filePaths.length === 0) {
+	console.error('Please provide at least one file path as an argument.');
+	process.exit(1);
+}
+
+console.log('processing', filePaths, 'for export');
+const componentDefinitions = filePaths.map((filePath) => fs.readFileSync(filePath, 'utf8'));
+
+const tramLiteExportDependenciesPath = useMinified
+	? 'output/export-dependencies.min.js'
+	: 'output/export-dependencies.js';
+
+const tramLiteExportDepenedencies = fs.readFileSync(tramLiteExportDependenciesPath).toString();
+const templateAndLoadCode = componentDefinitions
+	.map((componentCode) => {
+		// update the component code, in case it also uses ``, we'll need to escape them
+		const formattedComponentCode = componentCode.replaceAll('`', '\\`').replaceAll('${', '\\${');
+		return `
+{
+	const componentTemplate = \`${formattedComponentCode}\`;
+	ImportComponent.importNewComponent(componentTemplate)
+}
+`;
+	})
+	.join('\n');
+
+const isSingleFile = filePaths.length === 1;
+// if we are processing a single file, use that as the file name
+// if we are processing more than one file, use the directory name
+const generatedOutputFileName = isSingleFile
+	? path.basename(filePaths[0], '.html') + '.js'
+	: path.basename(process.cwd()) + '.js';
+
+const result = '{\n' + tramLiteExportDepenedencies + '\n' + templateAndLoadCode + '\n}';
+fs.writeFileSync(customOutputFile || generatedOutputFileName, result);
diff --git a/src/scripts/import-script.js b/src/scripts/import-script.js
new file mode 100644
index 0000000..c28a1f6
--- /dev/null
+++ b/src/scripts/import-script.js
@@ -0,0 +1,18 @@
+// usage - this script is intended to be used as part of a script tag
+// e.g. <script src=".../import-component.js" tl-components=".../my-component.html">
+
+// tl-components can have a space separated list of import paths
+const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);
+
+// for each path we have, process the component definition
+componentPaths.forEach(async (componentPath) => {
+	const componentResult = await fetch(componentPath);
+	if (!componentResult.ok) {
+		// if we couldn't fetch the component, don't process anything
+		return;
+	}
+
+	// load the content as text, and then build the template tag pieces
+	const componentContent = await componentResult.text();
+	ImportComponent.importNewComponent(componentContent);
+});

From 77e550bc1e2d3e3eb450efe4d0fed3978092aa66 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 16:12:59 -0400
Subject: [PATCH 09/30] move test files to relevant locations

---
 {cypress => examples/export}/export.cy.js | 0
 {cypress => examples/hybrid}/hybrid.cy.js | 0
 {cypress => examples/import}/import.cy.js | 0
 {cypress => examples/inline}/inline.cy.js | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename {cypress => examples/export}/export.cy.js (100%)
 rename {cypress => examples/hybrid}/hybrid.cy.js (100%)
 rename {cypress => examples/import}/import.cy.js (100%)
 rename {cypress => examples/inline}/inline.cy.js (100%)

diff --git a/cypress/export.cy.js b/examples/export/export.cy.js
similarity index 100%
rename from cypress/export.cy.js
rename to examples/export/export.cy.js
diff --git a/cypress/hybrid.cy.js b/examples/hybrid/hybrid.cy.js
similarity index 100%
rename from cypress/hybrid.cy.js
rename to examples/hybrid/hybrid.cy.js
diff --git a/cypress/import.cy.js b/examples/import/import.cy.js
similarity index 100%
rename from cypress/import.cy.js
rename to examples/import/import.cy.js
diff --git a/cypress/inline.cy.js b/examples/inline/inline.cy.js
similarity index 100%
rename from cypress/inline.cy.js
rename to examples/inline/inline.cy.js

From 13e784389552923cd0630e5d614a212883e439e5 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 18:13:43 -0400
Subject: [PATCH 10/30] fix build scripts, fix safari issue, start
 documentation

---
 build.js                                     | 31 +++++----
 docs/index.html                              |  1 +
 docs/pages/importing-and-exporting.html      | 71 ++++++++++++++++++++
 docs/pages/install.html                      | 15 +----
 examples/components/build-test-components.sh |  4 +-
 examples/export/index.html                   |  2 +-
 examples/hybrid/index.html                   |  4 +-
 examples/import/index.html                   |  4 +-
 examples/inline/index.html                   |  2 +-
 src/scripts/export-script.js                 |  2 +
 src/scripts/import-script.js                 | 11 ++-
 11 files changed, 113 insertions(+), 34 deletions(-)
 create mode 100644 docs/pages/importing-and-exporting.html

diff --git a/build.js b/build.js
index 28d0f19..4332a88 100644
--- a/build.js
+++ b/build.js
@@ -1,7 +1,20 @@
 const fs = require('fs');
+const path = require('path');
 const UglifyJS = require('uglify-js');
 const { version } = require('./package.json');
 
+// ensure the output directory exists
+if (!fs.existsSync('output')) {
+	fs.mkdirSync('output');
+} else {
+	// If it exists, read all the files inside the directory and remove them
+	const files = fs.readdirSync('output');
+	for (const file of files) {
+		const filePath = path.join('output', file);
+		fs.unlinkSync(filePath);
+	}
+}
+
 // load all files
 const classFiles = ['src/TramLite.js', ...fs.readdirSync('src/processors').map((file) => `src/processors/${file}`)];
 const loadedClassFiles = Object.fromEntries(
@@ -11,7 +24,7 @@ const loadedClassFiles = Object.fromEntries(
 	}),
 );
 
-console.log('loading', 'src/import-component.js');
+console.log('loading', 'src/import-components.js');
 const importComponentClass = {
 	'src/ImportComponent.js': fs.readFileSync('src/ImportComponent.js').toString(),
 };
@@ -19,10 +32,6 @@ console.log('loading', 'src/import-script.js');
 const importScript = {
 	'src/scripts/import-script.js': fs.readFileSync('src/scripts/import-script.js').toString(),
 };
-console.log('loading', 'src/export-script.js');
-const exportScript = {
-	'src/scripts/export-script.js': fs.readFileSync('src/scripts/export-script.js').toString(),
-};
 
 // Set configurations
 const setConfigs = [
@@ -37,7 +46,7 @@ const setConfigs = [
 		defines: { MODULE: false, INSTALL: true },
 	},
 	{
-		outputFile: 'output/import-component.js',
+		outputFile: 'output/import-components.js',
 		files: { ...loadedClassFiles, ...importComponentClass, ...importScript },
 		defines: { MODULE: false, INSTALL: false },
 		enclose: true,
@@ -47,11 +56,6 @@ const setConfigs = [
 		files: { ...loadedClassFiles, ...importComponentClass },
 		defines: { MODULE: false, INSTALL: false },
 	},
-	{
-		outputFile: 'output/export-script.js',
-		files: { ...exportScript },
-		defines: { MODULE: false, INSTALL: false },
-	},
 ];
 
 setConfigs.forEach((config) => {
@@ -77,7 +81,7 @@ setConfigs.forEach((config) => {
 const minifyConfigs = [
 	{ inputFile: 'output/api.js', outputFile: 'output/api.min.js' },
 	{ inputFile: 'output/tram-lite.js', outputFile: 'output/tram-lite.min.js' },
-	{ inputFile: 'output/import-component.js', outputFile: 'output/import-component.min.js' },
+	{ inputFile: 'output/import-components.js', outputFile: 'output/import-components.min.js' },
 	{ inputFile: 'output/export-dependencies.js', outputFile: 'output/export-dependencies.min.js' },
 ];
 
@@ -87,4 +91,7 @@ minifyConfigs.forEach((config) => {
 	fs.writeFileSync(config.outputFile, result.code);
 });
 
+// do a simple copy for the export-script
+fs.copyFileSync('src/scripts/export-script.js', 'output/export-components.js');
+
 console.log('Build complete!');
diff --git a/docs/index.html b/docs/index.html
index f94ee86..f4d4878 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -117,6 +117,7 @@
 			></page>
 			<page id="guiding-principles"><html-import src="./pages/guiding-principles.html"></html-import></page>
 			<page id="building-components"><html-import src="./pages/guide-building-components.html"></html-import></page>
+			<page id="importing-and-exporting"><html-import src="./pages/importing-and-exporting.html"></html-import></page>
 			<page id="projects-and-posts"><html-import src="./pages/projects-and-posts.html"></html-import></page>
 			<!-- <page id="cheat-sheet"><html-import src="./pages/cheat-sheet.html"></html-import></page> -->
 		</main>
diff --git a/docs/pages/importing-and-exporting.html b/docs/pages/importing-and-exporting.html
new file mode 100644
index 0000000..8a5bc49
--- /dev/null
+++ b/docs/pages/importing-and-exporting.html
@@ -0,0 +1,71 @@
+<h2>Importing And Exporting Components</h2>
+<p>
+	If you are building a library, there are a few different options when it comes to sharing your components with other
+	developers. On this page, we document a few different options, and the reasons why you may choose one.
+</p>
+<p>
+	Regardless of how you choose to share your components, doing so is a great way to make components easily consumable
+	among other developers, without requiring Tram-Lite as a core dependency. All methods also allow you to have different
+	versions of Tram-Lite components in the same project.
+</p>
+
+<h3>Using import-components script</h3>
+<p>
+	The <code>import-components</code> script is a great way to share raw HTML templates without requiring a build step as
+	part of your project. It also allows developers to selectively choose which elements they would like to import.
+
+	<code-template-html>
+		<template>
+			<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="..."></script>
+		</template>
+	</code-template-html>
+
+	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
+	components you'd like to import.
+</p>
+<p>
+	For example, we might have the following <code>x-button.html</code>.
+	<code-template-html>
+		<x-button>
+			<button>Hello World</button>
+		</x-button>
+	</code-template-html>
+
+	We could then import and immediately use this component in our HTML page using the
+	<code>import-components.js</code> script.
+
+	<code-template-html>
+		<template>
+			<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="./x-button.html"></script>
+			<x-button></x-button>
+		</template>
+	</code-template-html>
+</p>
+<p>This script is also available as a minified script - simply point to <code>import-components.min.js</code>.</p>
+
+<h3>Using export-components command</h3>
+<p>
+	The <code>export-components</code> CLI tool is a great way to build native javascript if consumers of the library are
+	using tools to bundle their code, and if you (or your consumers) have a build step.
+
+	<code-template-js>
+		<template>
+			<script>
+				npx tram-lite
+				<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="..."></script>
+			</script>
+		</template>
+	</code-template-js>
+
+	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
+	components you'd like to import.
+</p>
+<p>
+	Similar to the example above, we start with a component definition in an <code>x-button.html</code> For example, we
+	might have the following <code>x-button.html</code>.
+	<code-template-html>
+		<x-button>
+			<button>Hello World</button>
+		</x-button>
+	</code-template-html>
+</p>
diff --git a/docs/pages/install.html b/docs/pages/install.html
index 17b502f..5d286a3 100644
--- a/docs/pages/install.html
+++ b/docs/pages/install.html
@@ -29,20 +29,11 @@ <h2>script tag</h2>
 	</code-template-html>
 </p>
 
-<h2>Import Components</h2>
+<h2>Importing and Exporting Components</h2>
 <p>
 	If you want to import components from an external source, or would like to break up your component definitions into
-	separate files, you can use the provided <code>import-components.js</code> in a script tag. You can even do this in
-	projects that don't otherwise import Tram-Lite!
-
-	<code-template-html>
-		<template>
-			<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="..."></script>
-		</template>
-	</code-template-html>
-
-	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
-	components you'd like to import.
+	separate files, check out the documentation on
+	<a href="importing-and-exporting">Importing and Exporting Components</a>.
 </p>
 
 <h2>Javascript API</h2>
diff --git a/examples/components/build-test-components.sh b/examples/components/build-test-components.sh
index 8f97acb..f243098 100644
--- a/examples/components/build-test-components.sh
+++ b/examples/components/build-test-components.sh
@@ -1,2 +1,2 @@
-node output/export-script.js examples/components/ex-progressbar.html examples/components/ex-temperature.html examples/components/ex-container.html examples/components/ex-colorpicker.html -o examples/components/example-components.js
-node output/export-script.js examples/components/ex-colorpicker.html -o examples/components/ex-colorpicker.js
+node output/export-components.js examples/components/ex-progressbar.html examples/components/ex-temperature.html examples/components/ex-container.html examples/components/ex-colorpicker.html -o examples/components/example-components.js
+node output/export-components.js examples/components/ex-colorpicker.html -o examples/components/ex-colorpicker.js
diff --git a/examples/export/index.html b/examples/export/index.html
index 1272936..571f40a 100644
--- a/examples/export/index.html
+++ b/examples/export/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<title>Tram-Lite Example Components</title>
+		<title>Tram-Lite Exported Components</title>
 		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
 
 		<meta charset="utf-8" />
diff --git a/examples/hybrid/index.html b/examples/hybrid/index.html
index ad5e53f..2c0eae8 100644
--- a/examples/hybrid/index.html
+++ b/examples/hybrid/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<title>Tram-Lite Example Components</title>
+		<title>Tram-Lite Hybrid Components</title>
 		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
 
 		<meta charset="utf-8" />
@@ -17,7 +17,7 @@
 
 		<script src="../../output/tram-lite.js"></script>
 		<script
-			src="../../output/import-component.js"
+			src="../../output/import-components.js"
 			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html"
 		></script>
 		<script src="/examples/components/ex-colorpicker.js"></script>
diff --git a/examples/import/index.html b/examples/import/index.html
index 1f1f762..b75a60d 100644
--- a/examples/import/index.html
+++ b/examples/import/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<title>Tram-Lite Example Components</title>
+		<title>Tram-Lite Imported Components</title>
 		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
 
 		<meta charset="utf-8" />
@@ -16,7 +16,7 @@
 		</style>
 
 		<script
-			src="../../output/import-component.js"
+			src="../../output/import-components.js"
 			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html /examples/components/ex-temperature.html /examples/components/ex-colorpicker.html"
 		></script>
 	</head>
diff --git a/examples/inline/index.html b/examples/inline/index.html
index 25ac00b..6d81c21 100644
--- a/examples/inline/index.html
+++ b/examples/inline/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
-		<title>Tram-Lite Example Components</title>
+		<title>Tram-Lite Inline Components</title>
 		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
 
 		<meta charset="utf-8" />
diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index 6346103..f91ca60 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 const fs = require('fs');
 const path = require('path');
 
diff --git a/src/scripts/import-script.js b/src/scripts/import-script.js
index c28a1f6..6944f21 100644
--- a/src/scripts/import-script.js
+++ b/src/scripts/import-script.js
@@ -1,11 +1,18 @@
 // usage - this script is intended to be used as part of a script tag
-// e.g. <script src=".../import-component.js" tl-components=".../my-component.html">
+// e.g. <script src=".../import-components.js" tl-components=".../my-component.html">
 
 // tl-components can have a space separated list of import paths
 const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);
 
 // for each path we have, process the component definition
-componentPaths.forEach(async (componentPath) => {
+componentPaths.forEach(async (componentPath, index) => {
+	// author's note:
+	// there's no reason for index to be required here, but there is an issue
+	// where the minified code breaks in safari - more investigation probably needs to happen
+	// here, but for now, this appears to work
+	if (index === null || componentPath === undefined) {
+		throw 'Tram-Lite: Import could not process component';
+	}
 	const componentResult = await fetch(componentPath);
 	if (!componentResult.ok) {
 		// if we couldn't fetch the component, don't process anything

From d78c514bcc1b3f5d043a42ab6244186748769161 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 18:51:42 -0400
Subject: [PATCH 11/30] final documentation

---
 docs/index.html                         |  1 +
 docs/pages/importing-and-exporting.html | 75 ++++++++++++++++++++-----
 docs/pages/install.html                 |  4 +-
 3 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index f4d4878..292f0c0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -85,6 +85,7 @@
 			<side-nav-section>
 				<a href="#install">Install</a>
 				<a href="#building-components">Building Components</a>
+				<a href="#importing-and-exporting">Importing & Exporting</a>
 			</side-nav-section>
 			<a>HTML API</a>
 			<side-nav-section>
diff --git a/docs/pages/importing-and-exporting.html b/docs/pages/importing-and-exporting.html
index 8a5bc49..93150fc 100644
--- a/docs/pages/importing-and-exporting.html
+++ b/docs/pages/importing-and-exporting.html
@@ -23,12 +23,21 @@ <h3>Using import-components script</h3>
 	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
 	components you'd like to import.
 </p>
+<h4>Parameters</h4>
+<p>
+	The only parameter for <code>import-components.js</code> is the <code>tl-components</code> attribute. It is a space
+	delimited list of component definition paths. The components should be HTML, and just the definition of the component
+	(no surrounding template tag, or adjacent tags).
+</p>
+<h4>Example Importing an HTML Template</h4>
 <p>
 	For example, we might have the following <code>x-button.html</code>.
 	<code-template-html>
-		<x-button>
-			<button>Hello World</button>
-		</x-button>
+		<template>
+			<x-button>
+				<button>Hello World</button>
+			</x-button>
+		</template>
 	</code-template-html>
 
 	We could then import and immediately use this component in our HTML page using the
@@ -46,26 +55,66 @@ <h3>Using import-components script</h3>
 <h3>Using export-components command</h3>
 <p>
 	The <code>export-components</code> CLI tool is a great way to build native javascript if consumers of the library are
-	using tools to bundle their code, and if you (or your consumers) have a build step.
+	using tools to bundle their code, or if you (or your consumers) have a build step. It's also great because it works
+	with the native script import on the consumer's side.
 
 	<code-template-js>
 		<template>
 			<script>
-				npx tram-lite
-				<script src="https://unpkg.com/tram-lite@4/output/import-components.js" tl-components="..."></script>
+				npx tram-lite@4 export-components ...
 			</script>
 		</template>
 	</code-template-js>
 
-	The script depends on an attribute <code>tl-components</code>, which is a space separated list of paths to the
-	components you'd like to import.
+	You can pass in any html files you'd like to be bundled, and it will create a javascript file that people can natively
+	import with a script tag.
 </p>
+<h4>Parameters</h4>
 <p>
-	Similar to the example above, we start with a component definition in an <code>x-button.html</code> For example, we
-	might have the following <code>x-button.html</code>.
+	<code-template-js>
+		<template>
+			<script>
+				npx tram-lite@4 export-components <components> [--output output-file.js] [--minified]
+			</script>
+		</template>
+	</code-template-js>
+	Aside from the required components, the command has two optional flags, <code>--output</code> and
+	<code>--minified</code>.
+</p>
+<p>
+	<code>--output</code> (or <code>-o</code>) can be used to set the file name and directory of the resulting javascript.
+	If this flag is missing, the command will place the file in the current directory, named based on the component files
+	passed in.
+</p>
+<p>
+	<code>--minified</code> (or <code>-m</code>) can be used to import the minified Tram-Lite code as part of your export.
+	This should reduce the total size of the exported components.
+</p>
+<h4>Example Exporting an HTML Template to Javascript</h4>
+<p>
+	Similar to the example above, we start with a component definition in an <code>x-button.html</code>.
+	<code-template-html>
+		<template>
+			<x-button>
+				<button>Hello World</button>
+			</x-button>
+		</template>
+	</code-template-html>
+
+	Then we can run the command to export this component to javascript.
+	<code-template-js>
+		<template>
+			<script>
+				npx tram-lite@4 export-components x-button.html
+			</script>
+		</template>
+	</code-template-js>
+
+	This will create an <code>x-button.js</code> file locally. We can then import that file using a normal script tag.
 	<code-template-html>
-		<x-button>
-			<button>Hello World</button>
-		</x-button>
+		<template>
+			<script src="x-button.js"></script>
+			<x-button></x-button>
+		</template>
 	</code-template-html>
 </p>
diff --git a/docs/pages/install.html b/docs/pages/install.html
index 5d286a3..bd7e3c8 100644
--- a/docs/pages/install.html
+++ b/docs/pages/install.html
@@ -29,11 +29,11 @@ <h2>script tag</h2>
 	</code-template-html>
 </p>
 
-<h2>Importing and Exporting Components</h2>
+<h2>Importing & Exporting Components</h2>
 <p>
 	If you want to import components from an external source, or would like to break up your component definitions into
 	separate files, check out the documentation on
-	<a href="importing-and-exporting">Importing and Exporting Components</a>.
+	<a href="importing-and-exporting">Importing & Exporting Components</a>.
 </p>
 
 <h2>Javascript API</h2>

From 9b4ddab24a8d0119f422ebc8b0800733f4dcc9a0 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 18:57:02 -0400
Subject: [PATCH 12/30] include the export command as a binary

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 091d7c9..ad1ba4e 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
 	"files": [
 		"output"
 	],
+	"bin": {
+		"export-component": "./output/export-component.js"
+	},
 	"scripts": {
 		"prestart": "npm run build",
 		"start": "serve .",

From 1636823f5f70c4256649214afdf9c060ca8b859b Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 18:58:50 -0400
Subject: [PATCH 13/30] 4.2.0-beta.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff2f47c..ed7e9f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0",
+	"version": "4.2.0-beta.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0",
+			"version": "4.2.0-beta.0",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index ad1ba4e..a26c83f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0",
+	"version": "4.2.0-beta.0",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From 023a5eba381c97f117a0f46801c9d5aad3718319 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 19:02:59 -0400
Subject: [PATCH 14/30] fix export script

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a26c83f..5ba2284 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
 		"output"
 	],
 	"bin": {
-		"export-component": "./output/export-component.js"
+		"export-components": "./output/export-components.js"
 	},
 	"scripts": {
 		"prestart": "npm run build",

From 76bd25da7c21176f9e7d7bcffad156d1dbb2c678 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 19:03:10 -0400
Subject: [PATCH 15/30] 4.2.0-beta.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ed7e9f8..116a62d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.0",
+	"version": "4.2.0-beta.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0-beta.0",
+			"version": "4.2.0-beta.1",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 5ba2284..482f3db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.0",
+	"version": "4.2.0-beta.1",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From a24696b559e81055bcf56b62ccd90ef9a038d83a Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 20:15:47 -0400
Subject: [PATCH 16/30] fix export

---
 src/scripts/export-script.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index f91ca60..5246938 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -10,13 +10,8 @@ const useMinified = process.argv.includes('-m') || process.argv.includes('--mini
 const outputFlagIndex = process.argv.findIndex((arg) => arg === '-o' || arg === '--output');
 const customOutputFile = outputFlagIndex !== -1 ? process.argv[outputFlagIndex + 1] : null;
 
-const filePaths = process.argv.slice(2).filter((arg, index) => {
-	const originalIndex = index + 2;
-	// do not include any flags
-	const isNotAFlag = !arg.startsWith('-');
-	// do not include the path after the output flag
-	const isNotOutput = originalIndex !== outputFlagIndex + 1;
-	return isNotAFlag && isNotOutput;
+const filePaths = process.argv.filter((arg) => {
+	return arg.match(/\.html$/);
 });
 
 if (filePaths.length === 0) {

From e161e5660d0467f82d93fc1060bf3a3e4542e246 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 20:15:53 -0400
Subject: [PATCH 17/30] 4.2.0-beta.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 116a62d..6a11010 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.1",
+	"version": "4.2.0-beta.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0-beta.1",
+			"version": "4.2.0-beta.2",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 482f3db..4613237 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.1",
+	"version": "4.2.0-beta.2",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From a72da44088b1696b377f590959055e5b7e2dd46a Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 20:17:23 -0400
Subject: [PATCH 18/30] use relative paths for export

---
 examples/components/ex-colorpicker.js     | 4 ++--
 examples/components/example-components.js | 4 ++--
 src/scripts/export-script.js              | 4 +---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/examples/components/ex-colorpicker.js b/examples/components/ex-colorpicker.js
index f7cbf50..09654b7 100644
--- a/examples/components/ex-colorpicker.js
+++ b/examples/components/ex-colorpicker.js
@@ -1,6 +1,6 @@
 {
 class TramLite {
-    static version = "4.2.0";
+    static version = "4.2.0-beta.2";
     static installed = !1;
     /**
 	 * utility function to build the component class from the template string
@@ -26,7 +26,7 @@ class TramLite {
         });
         // Custom element class with tram-lite template support.
         class n extends HTMLElement {
-            static tramLiteVersion = "4.2.0";
+            static tramLiteVersion = "4.2.0-beta.2";
             static tagName = i.tagName.toLowerCase();
             static get observedAttributes() {
                 // all of the template variables are attributes that we'll update on
diff --git a/examples/components/example-components.js b/examples/components/example-components.js
index c4a6e70..4b9e4f5 100644
--- a/examples/components/example-components.js
+++ b/examples/components/example-components.js
@@ -1,6 +1,6 @@
 {
 class TramLite {
-    static version = "4.2.0";
+    static version = "4.2.0-beta.2";
     static installed = !1;
     /**
 	 * utility function to build the component class from the template string
@@ -26,7 +26,7 @@ class TramLite {
         });
         // Custom element class with tram-lite template support.
         class n extends HTMLElement {
-            static tramLiteVersion = "4.2.0";
+            static tramLiteVersion = "4.2.0-beta.2";
             static tagName = i.tagName.toLowerCase();
             static get observedAttributes() {
                 // all of the template variables are attributes that we'll update on
diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index 5246938..58481a9 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -22,9 +22,7 @@ if (filePaths.length === 0) {
 console.log('processing', filePaths, 'for export');
 const componentDefinitions = filePaths.map((filePath) => fs.readFileSync(filePath, 'utf8'));
 
-const tramLiteExportDependenciesPath = useMinified
-	? 'output/export-dependencies.min.js'
-	: 'output/export-dependencies.js';
+const tramLiteExportDependenciesPath = useMinified ? './export-dependencies.min.js' : './export-dependencies.js';
 
 const tramLiteExportDepenedencies = fs.readFileSync(tramLiteExportDependenciesPath).toString();
 const templateAndLoadCode = componentDefinitions

From f6918eee6f5d03a90ee2d6c10cb02b1d182b0d46 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 20:18:17 -0400
Subject: [PATCH 19/30] 4.2.0-beta.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a11010..483328b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.2",
+	"version": "4.2.0-beta.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0-beta.2",
+			"version": "4.2.0-beta.3",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 4613237..15fc69a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.2",
+	"version": "4.2.0-beta.3",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From 79e14994bb749635667b420fc0205575dac75938 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 21:17:45 -0400
Subject: [PATCH 20/30] use real relative paths

---
 src/scripts/export-script.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index 58481a9..f340587 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -22,7 +22,9 @@ if (filePaths.length === 0) {
 console.log('processing', filePaths, 'for export');
 const componentDefinitions = filePaths.map((filePath) => fs.readFileSync(filePath, 'utf8'));
 
-const tramLiteExportDependenciesPath = useMinified ? './export-dependencies.min.js' : './export-dependencies.js';
+const tramLiteExportDependenciesPath = useMinified
+	? path.join(__dirname, './export-dependencies.min.js')
+	: path.join(__dirname, './export-dependencies.js');
 
 const tramLiteExportDepenedencies = fs.readFileSync(tramLiteExportDependenciesPath).toString();
 const templateAndLoadCode = componentDefinitions

From fd506dde20ed0e9a069b28960be870c4e1247910 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sat, 7 Oct 2023 21:17:52 -0400
Subject: [PATCH 21/30] 4.2.0-beta.4

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 483328b..5a9e3f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.3",
+	"version": "4.2.0-beta.4",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0-beta.3",
+			"version": "4.2.0-beta.4",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 15fc69a..80d0cf1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.3",
+	"version": "4.2.0-beta.4",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From b38bb4707efcc4eb028aeeb620494c4e6932f0fb Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 10:27:12 -0400
Subject: [PATCH 22/30] more comments for build.js

---
 build.js | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/build.js b/build.js
index 4332a88..a845024 100644
--- a/build.js
+++ b/build.js
@@ -1,13 +1,20 @@
+// This script contains all the steps for generating the output results.
+// This can be triggered by running `npm run build`
+//
+// A majority of this file uses the UglifyJS API
+// https://www.npmjs.com/package/uglify-js
+//
 const fs = require('fs');
 const path = require('path');
 const UglifyJS = require('uglify-js');
 const { version } = require('./package.json');
 
-// ensure the output directory exists
+// before we start anything, make sure the output directory exists and is empty
 if (!fs.existsSync('output')) {
+	// if it doesn't exist make it
 	fs.mkdirSync('output');
 } else {
-	// If it exists, read all the files inside the directory and remove them
+	// if it does, remove all files in the directory
 	const files = fs.readdirSync('output');
 	for (const file of files) {
 		const filePath = path.join('output', file);
@@ -15,7 +22,7 @@ if (!fs.existsSync('output')) {
 	}
 }
 
-// load all files
+// load all source class files (these will be included in all builds)
 const classFiles = ['src/TramLite.js', ...fs.readdirSync('src/processors').map((file) => `src/processors/${file}`)];
 const loadedClassFiles = Object.fromEntries(
 	classFiles.map((filePath) => {
@@ -24,6 +31,7 @@ const loadedClassFiles = Object.fromEntries(
 	}),
 );
 
+// load all import/export scripts separately (these are only included in some builds)
 console.log('loading', 'src/import-components.js');
 const importComponentClass = {
 	'src/ImportComponent.js': fs.readFileSync('src/ImportComponent.js').toString(),
@@ -33,8 +41,12 @@ const importScript = {
 	'src/scripts/import-script.js': fs.readFileSync('src/scripts/import-script.js').toString(),
 };
 
-// Set configurations
-const setConfigs = [
+// uglify parameters to change the result of each bundle.
+// `MODULE` and `INSTALL` are variables that can be found in the class files and
+//   determine if we should attach listeners for a window or export the class for a JS API.
+// `enclose` determines if the code should be wrapped in an IIFE (which prevents
+//   prevents class definitions from colliding).
+const buildConfigs = [
 	{
 		outputFile: 'output/api.js',
 		files: loadedClassFiles,
@@ -58,7 +70,7 @@ const setConfigs = [
 	},
 ];
 
-setConfigs.forEach((config) => {
+buildConfigs.forEach((config) => {
 	console.log('building', config.outputFile);
 	const options = {
 		compress: {
@@ -77,7 +89,7 @@ setConfigs.forEach((config) => {
 	fs.writeFileSync(config.outputFile, result.code);
 });
 
-// Minify
+// for each of these, create a minified version
 const minifyConfigs = [
 	{ inputFile: 'output/api.js', outputFile: 'output/api.min.js' },
 	{ inputFile: 'output/tram-lite.js', outputFile: 'output/tram-lite.min.js' },
@@ -91,7 +103,7 @@ minifyConfigs.forEach((config) => {
 	fs.writeFileSync(config.outputFile, result.code);
 });
 
-// do a simple copy for the export-script
+// do a simple copy for the export-script (needs no minification)
 fs.copyFileSync('src/scripts/export-script.js', 'output/export-components.js');
 
-console.log('Build complete!');
+console.log('Tram-Lite build complete!');

From 3b5ccd96e2bf18b7f269c818cb35b906a37846f9 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 10:34:24 -0400
Subject: [PATCH 23/30] fix hyperlink

---
 docs/pages/install.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/install.html b/docs/pages/install.html
index bd7e3c8..49eff00 100644
--- a/docs/pages/install.html
+++ b/docs/pages/install.html
@@ -33,7 +33,7 @@ <h2>Importing & Exporting Components</h2>
 <p>
 	If you want to import components from an external source, or would like to break up your component definitions into
 	separate files, check out the documentation on
-	<a href="importing-and-exporting">Importing & Exporting Components</a>.
+	<a href="#importing-and-exporting">Importing & Exporting Components</a>.
 </p>
 
 <h2>Javascript API</h2>

From 9fd79ff0d7dbdcbe03032acc3d2a294399a45d36 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 10:49:31 -0400
Subject: [PATCH 24/30] remove generated components

---
 .gitignore                                |   4 +
 examples/components/ex-colorpicker.js     | 379 -----------------
 examples/components/example-components.js | 474 ----------------------
 3 files changed, 4 insertions(+), 853 deletions(-)
 delete mode 100644 examples/components/ex-colorpicker.js
 delete mode 100644 examples/components/example-components.js

diff --git a/.gitignore b/.gitignore
index d97ed1b..be89a6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,7 @@ output
 
 # Dependency directory
 node_modules
+
+# components that are generated as part of build-test-components.sh
+examples/components/ex-colorpicker.js
+examples/components/example-components.js
diff --git a/examples/components/ex-colorpicker.js b/examples/components/ex-colorpicker.js
deleted file mode 100644
index 09654b7..0000000
--- a/examples/components/ex-colorpicker.js
+++ /dev/null
@@ -1,379 +0,0 @@
-{
-class TramLite {
-    static version = "4.2.0-beta.2";
-    static installed = !1;
-    /**
-	 * utility function to build the component class from the template string
-	 * (this is an underlying utility for the define function)
-	 */
-    static makeComponentClass(t, ...e) {
-        var a = document.createElement("template"), o = e.map(t => `tl:${t}:`);
-        // tag our templateVariables, so we know how to look for them in the dom
-        a.innerHTML = String.raw({
-            raw: t
-        }, ...o);
-        const i = a.content.firstElementChild, r = {};
-        // any attributes on the root are considered default values
-        [ ...i.attributes ].forEach(t => {
-            r[t.name] = t.value;
-        }), 
-        // if there are any component-effects that aren't already on hold, hold them now
-        //   (we don't want them triggering before the component has been completely defined)
-        // if there is already a hold, we won't touch these elements
-        //   (the developer may want to defer processing until later)
-        i.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t => {
-            t.setAttribute("tl-hold", "component-mount");
-        });
-        // Custom element class with tram-lite template support.
-        class n extends HTMLElement {
-            static tramLiteVersion = "4.2.0-beta.2";
-            static tagName = i.tagName.toLowerCase();
-            static get observedAttributes() {
-                // all of the template variables are attributes that we'll update on
-                return e;
-            }
-            constructor() {
-                super(), 
-                // list of attribute and text nodes that have a template value
-                // these are scanned through when templated attributes are updated
-                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
-                // Create a shadow root
-                // and append our HTML to it
-                var t = this.attachShadow({
-                    mode: "open"
-                });
-                t.append(...i.cloneNode(!0).childNodes), 
-                // save the original template in templateValuesTextNodes
-                ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t => {
-                    this.templateValuesTextNodes.push({
-                        textNode: t,
-                        originalTemplate: t.textContent
-                    });
-                }), 
-                // save the original attribute in the templateValuesAttributes
-                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e => {
-                    [ ...e.attributes ].forEach(t => {
-                        t.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
-                            attrNode: t,
-                            element: e,
-                            originalTemplate: t.value
-                        });
-                    });
-                });
-            }
-            connectedCallback() {
-                // set all attribute values
-                // - the first default value is whatever is set on DOM creation
-                // - next, we check if there are default values that were part of the define
-                // - lastly, we'll set it to an empty string.
-                var t = Object.keys(r);
-                [ ...e, ...t ].forEach(t => {
-                    null === this.getAttribute(t) && this.setAttribute(t, r[t] || "");
-                }), 
-                // an initial call to set the default attributes
-                this.attributeChangedCallback(), 
-                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
-                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t => {
-                    t.removeAttribute("tl-hold");
-                });
-            }
-            attributeChangedCallback(t, e, a) {
-                // scan through all text nodes and attributes with template values, and update them
-                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
-            }
-            getUpdatedTemplate(t) {
-                let a = t;
-                return e.forEach(t => {
-                    // fallback on the default values or an empty string if there is no value for this attribute yet
-                    var e = this.getAttribute(t) || r[t] || "";
-                    a = a.replaceAll(`tl:${t}:`, e);
-                }), a;
-            }
-            updateTextNodeTemplates() {
-                // go through each text node that has a template variable, and update them
-                this.templateValuesTextNodes.forEach(({
-                    textNode: t,
-                    originalTemplate: e
-                }) => {
-                    t.textContent = this.getUpdatedTemplate(e);
-                });
-            }
-            updateAttrNodeTemplates() {
-                // go through each element with an attribute that has a template variable, and update those attribute values
-                this.templateValuesAttrNodes.forEach(({
-                    attrNode: t,
-                    element: e,
-                    originalTemplate: a
-                }) => {
-                    // set the attribute value to the new value (updated with all template variables)
-                    t.value = this.getUpdatedTemplate(a), 
-                    // these attributes are special, in order to update the live value (after a user has interacted with them),
-                    // they need to be set on the element as well
-                    [ "value", "checked", "selected" ].includes(t.name) && (e[t.name] = this.getUpdatedTemplate(a));
-                });
-            }
-        }
-        return n;
-    }
-    /**
-	 * a template tag function used to create new web-components.
-	 * {@link https://tram-one.io/tram-lite/#define Read the full docs here.}
-	 */
-    static define(t, ...e) {
-        // build the new component class from the template
-        t = TramLite.makeComponentClass(t, ...e);
-        // register this as a new element as a native web-component
-        return customElements.define(t.tagName, t), t;
-    }
-    /**
-	 * a helper function to update the root web-component when an input updates
-	 * {@link https://tram-one.io/tram-lite/#updateRootAttr Read the full docs here.}
-	 * @param {string} attributeName
-	 * @param {Event} event
-	 * @param {string} [targetAttribute="value"]
-	 */
-    static updateRootAttr(t, e, a = "value") {
-        var o = e.target.getRootNode().host;
-        e.target[a] ? o.setAttribute(t, e.target[a]) : o.removeAttribute(t);
-    }
-    /**
-	 * helper function to set up a callback for when an element's attribute changes
-	 * {@link https://tram-one.io/tram-lite/#addAttributeListener Read the full docs here.}
-	 * @param {Element} targetElement - The DOM element to observe.
-	 * @param {string[]} attributeNames - The name of the attribute (or list of attributes) to observe for changes.
-	 * @param {function(MutationRecord):void} callback - The function to call when the observed attribute changes.
-	 *    This function takes one argument: the MutationRecord representing the change.
-	 */
-    static addAttributeListener(e, t, a) {
-        new MutationObserver(t => {
-            t.forEach(t => {
-                // only call the mutation if an attribute changed
-                t.oldValue !== e.getAttribute(t.attributeName) && a(t);
-            });
-        }).observe(e, {
-            attributes: !0,
-            attributeFilter: t,
-            attributeOldValue: !0
-        });
-    }
-    /**
-	 * function to append new behaviors to elements that are attached to the shadowDOM.
-	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
-	 * @param {string} matcher
-	 * @param {{ connect: function }} componentClass
-	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
-	 */
-    static appendShadowRootProcessor(e, a, t = ShadowRoot.prototype) {
-        // save the original version of shadowRoot.append
-        const o = t.append;
-        t.append = function(...t) {
-            o.call(this, ...t), 
-            // if any element in this shadowRoot matches our matcher,
-            //   run the `connect` function from this class
-            this.querySelectorAll(e).forEach(t => {
-                t.getRootNode().host && a.connect(t);
-            });
-        };
-    }
-}
-
-/**
- * ComponentDefinition is a custom element that extends the template element, that allows developers
- * to build new web-components, using Tram-Lite, all in their HTML templates!
- *
- * {@link https://tram-one.io/tram-lite/#tl-definition}
- */
-class ComponentDefinition {
-    // regex for finding attributes that have been templated in
-    static templateVariableRegex = /tl:(.+?):/;
-    /**
-	 * function to test if node has an attribute value with a template variable
-	 * e.g. <custom-element style="color: ${'color'}">
-	 */
-    static nodeHasTramLiteAttr = t => [ ...t.attributes ].some(t => t.value.match(ComponentDefinition.templateVariableRegex)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    /**
-	 * function to test if node has an TEXT node with a template variable
-	 * e.g. <custom-element>Hello ${'name'}</custom-element>
-	 */
-    static nodeHasTextElementWithTramLiteAttr = t => t.textContent.match(ComponentDefinition.templateVariableRegex) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    /**
-	 * generic function to build a tree walker, and use the filter + tram-lite matcher.
-	 * this should return all elements that match the criteria
-	 */
-    static buildTreeWalkerTramLiteMatcher(t, e, a) {
-        for (var o, i = [], r = document.createTreeWalker(t, e, {
-            acceptNode: a
-        })
-        // build a tree walker that goes through each element, and each attribute
-        ; o = r.nextNode(); ) i.push(o);
-        return i;
-    }
-    // Returns elements with attributes containing tram-lite template variables.
-    static getElementsWithTramLiteValuesInAttributes(t) {
-        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_ELEMENT, ComponentDefinition.nodeHasTramLiteAttr);
-    }
-    // Returns text nodes containing tram-lite template variables.
-    static getTextNodesWithTramLiteValues(t) {
-        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_TEXT, ComponentDefinition.nodeHasTextElementWithTramLiteAttr);
-    }
-    /**
-	 * static function to process template tags and define components
-	 * @param {HTMLTemplateElement} templateTag
-	 */
-    static processTemplateDefinition(t) {
-        [ ...t.content.children ].forEach(t => {
-            var t = t.outerHTML.split(/\$\{\'(.*?)\'\}/), e = t.filter((t, e) => e % 2 == 0), t = t.filter((t, e) => e % 2 != 0);
-            // we expect template variables to be in the following pattern, matching "${'...'}"
-            TramLite.define(e, ...t);
-        });
-    }
-    /**
-	 * utility function to extract js template strings, so that they can be passed into a template tag function
-	 */
-    static extractTemplateVariables(t) {
-        // we expect template variables to be in the following pattern, matching "${'...'}"
-        t = t.split(/\$\{\'(.*?)\'\}/);
-        // Split the string by the above pattern, which lets us get an alternating list of strings and variables
-        return [ t.filter((t, e) => e % 2 == 0), t.filter((t, e) => e % 2 != 0) ];
-    }
-    /**
-	 * function to set up an observer to watch for when new templates are added,
-	 *   and process all the definitions in them
-	 * @param {Document} [targetRoot=document]
-	 */
-    static setupMutationObserverForTemplates(t = document) {
-        new MutationObserver(t => {
-            t.forEach(t => {
-                t.addedNodes.forEach(t => {
-                    // check if the previous element is a definition template
-                    // we wait until we are in the next element (most likely a #text node)
-                    // because that will confirm that the element has been completely parsed
-                    t.previousSibling?.matches?.("[tl-definition]") && ComponentDefinition.processTemplateDefinition(t.previousSibling);
-                });
-            });
-        }).observe(document, {
-            subtree: !0,
-            childList: !0
-        });
-    }
-}
-
-/**
- * ComponentEffect is a class that can extend the script element, that allows developers
- * to build side-effects for web-components.
- *
- * {@link https://tram-one.io/tram-lite/#tl-effect}
- */
-class ComponentEffect {
-    /**
-	 * function to trigger the javascript in a script tag.
-	 * This does not handle the src attribute, only inline javascript.
-	 * The `this` keyword will reference the host parent node of this script tag.
-	 * @param {HTMLScriptElement} scriptTag
-	 */
-    static processScriptTag(t) {
-        // don't do this if we have a hold on the script tag
-        if (!t.hasAttribute("tl-hold")) {
-            const e = t.getRootNode().host;
-            // provide a scoped evaluation of the script tags in this element
-            t = t.innerHTML, Function("document", "window", t).bind(e)(e.shadowRoot, window);
-        }
-    }
-    /**
-	 * connect function for ComponentEffect - when this is run on a script,
-	 *   we trigger that script with the host element as context, and set up an
-	 *   observer if a set of dependencies are defined and ever update
-	 * @param {HTMLScriptElement} newNode
-	 */
-    static connect(t) {
-        var e, a = t.getRootNode().host;
-        // run an initial run of the script
-        // (this won't happen if there is a tl-hold on the script)
-        ComponentEffect.processScriptTag(t), 
-        // if we have any dependencies, add a listener to trigger them
-        t.hasAttribute("tl-dependencies") && !0 !== t.hasSetupListener && (e = t.getAttribute("tl-dependencies").split(" "), 
-        TramLite.addAttributeListener(a, e, () => {
-            // check if the inline script is being held
-            ComponentEffect.processScriptTag(t);
-        }), t.hasSetupListener = !0), 
-        // if we ever set (or remove) the hold on this, trigger the inline script
-        // (this allows developers to delay triggering inline scripts)
-        TramLite.addAttributeListener(t, [ "tl-hold" ], () => {
-            ComponentEffect.processScriptTag(t);
-        });
-    }
-}
-
-/**
- * ControlledInput is a class that can extend the input or script element, that allows developers
- * to build 2-way data-binding for web-components.
- *
- * {@link https://tram-one.io/tram-lite/#tl-effect}
- */
-class ControlledInput {
-    /**
-	 * connect function for ControlledInput - when this is run on an input (or other similar control),
-	 *   we set up a 2-way data binding from the input to the host element.
-	 * @param {HTMLInputElement} newNode
-	 */
-    static connect(e) {
-        // attributes that control the behavior of the controlled input
-        var t = (e.getAttribute("tl-trigger") || "change").split(" ");
-        const a = e.getAttribute("tl-hostattr") || "value", o = e.getAttribute("tl-targetattr") || "value", i = e.getRootNode().host;
-        e[o] = i.getAttribute(a), 
-        // update this input whenever the host attribute updates
-        TramLite.addAttributeListener(i, [ a ], () => {
-            e[o] = i.getAttribute(a);
-        }), 
-        // update the root component attribute whenever the value changes for this node updates
-        t.forEach(t => {
-            e.addEventListener(t, t => {
-                TramLite.updateRootAttr(a, t, o);
-            });
-        });
-    }
-}
-
-class ImportComponent {
-    /**
-	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
-	 * @param {string} componentContent
-	 */
-    static importNewComponent(t) {
-        var [ t, e ] = ComponentDefinition.extractTemplateVariables(t), t = TramLite.makeComponentClass(t, ...e);
-        // make a component class based on the template tag pieces
-        // (this is done, over define, so we can attach shadow root processors)
-        // override attachShadow so that we can add shadowRootProcessors
-        const a = t.prototype.attachShadow;
-        t.prototype.attachShadow = function(...t) {
-            t = a.call(this, ...t);
-            return TramLite.appendShadowRootProcessor("[tl-controlled]", ControlledInput, t), 
-            TramLite.appendShadowRootProcessor("[tl-effect]", ComponentEffect, t), 
-            t;
-        }, 
-        // define the component in the DOM
-        customElements.define(t.tagName, t);
-    }
-}
-
-{
-	const componentTemplate = `<ex-colorpicker width="100px">
-	<style>
-		svg {
-			display: block;
-		}
-		rect {
-			fill: oklch(70% 0.1 \${'hue'});
-		}
-	</style>
-	<input id="hue-range-input" type="range" tl-controlled tl-hostattr="hue" tl-trigger="input" min="0" max="360" />
-	<input id="hue-text-input" type="text" placeholder="hue value" tl-controlled tl-hostattr="hue" />
-	<svg viewbox="0 0 100 100" width="\${'width'}">
-		<rect width="100" height="100" />
-	</svg>
-</ex-colorpicker>
-`;
-	ImportComponent.importNewComponent(componentTemplate)
-}
-
-}
\ No newline at end of file
diff --git a/examples/components/example-components.js b/examples/components/example-components.js
deleted file mode 100644
index 4b9e4f5..0000000
--- a/examples/components/example-components.js
+++ /dev/null
@@ -1,474 +0,0 @@
-{
-class TramLite {
-    static version = "4.2.0-beta.2";
-    static installed = !1;
-    /**
-	 * utility function to build the component class from the template string
-	 * (this is an underlying utility for the define function)
-	 */
-    static makeComponentClass(t, ...e) {
-        var a = document.createElement("template"), o = e.map(t => `tl:${t}:`);
-        // tag our templateVariables, so we know how to look for them in the dom
-        a.innerHTML = String.raw({
-            raw: t
-        }, ...o);
-        const i = a.content.firstElementChild, r = {};
-        // any attributes on the root are considered default values
-        [ ...i.attributes ].forEach(t => {
-            r[t.name] = t.value;
-        }), 
-        // if there are any component-effects that aren't already on hold, hold them now
-        //   (we don't want them triggering before the component has been completely defined)
-        // if there is already a hold, we won't touch these elements
-        //   (the developer may want to defer processing until later)
-        i.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t => {
-            t.setAttribute("tl-hold", "component-mount");
-        });
-        // Custom element class with tram-lite template support.
-        class n extends HTMLElement {
-            static tramLiteVersion = "4.2.0-beta.2";
-            static tagName = i.tagName.toLowerCase();
-            static get observedAttributes() {
-                // all of the template variables are attributes that we'll update on
-                return e;
-            }
-            constructor() {
-                super(), 
-                // list of attribute and text nodes that have a template value
-                // these are scanned through when templated attributes are updated
-                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
-                // Create a shadow root
-                // and append our HTML to it
-                var t = this.attachShadow({
-                    mode: "open"
-                });
-                t.append(...i.cloneNode(!0).childNodes), 
-                // save the original template in templateValuesTextNodes
-                ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t => {
-                    this.templateValuesTextNodes.push({
-                        textNode: t,
-                        originalTemplate: t.textContent
-                    });
-                }), 
-                // save the original attribute in the templateValuesAttributes
-                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e => {
-                    [ ...e.attributes ].forEach(t => {
-                        t.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
-                            attrNode: t,
-                            element: e,
-                            originalTemplate: t.value
-                        });
-                    });
-                });
-            }
-            connectedCallback() {
-                // set all attribute values
-                // - the first default value is whatever is set on DOM creation
-                // - next, we check if there are default values that were part of the define
-                // - lastly, we'll set it to an empty string.
-                var t = Object.keys(r);
-                [ ...e, ...t ].forEach(t => {
-                    null === this.getAttribute(t) && this.setAttribute(t, r[t] || "");
-                }), 
-                // an initial call to set the default attributes
-                this.attributeChangedCallback(), 
-                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
-                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t => {
-                    t.removeAttribute("tl-hold");
-                });
-            }
-            attributeChangedCallback(t, e, a) {
-                // scan through all text nodes and attributes with template values, and update them
-                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
-            }
-            getUpdatedTemplate(t) {
-                let a = t;
-                return e.forEach(t => {
-                    // fallback on the default values or an empty string if there is no value for this attribute yet
-                    var e = this.getAttribute(t) || r[t] || "";
-                    a = a.replaceAll(`tl:${t}:`, e);
-                }), a;
-            }
-            updateTextNodeTemplates() {
-                // go through each text node that has a template variable, and update them
-                this.templateValuesTextNodes.forEach(({
-                    textNode: t,
-                    originalTemplate: e
-                }) => {
-                    t.textContent = this.getUpdatedTemplate(e);
-                });
-            }
-            updateAttrNodeTemplates() {
-                // go through each element with an attribute that has a template variable, and update those attribute values
-                this.templateValuesAttrNodes.forEach(({
-                    attrNode: t,
-                    element: e,
-                    originalTemplate: a
-                }) => {
-                    // set the attribute value to the new value (updated with all template variables)
-                    t.value = this.getUpdatedTemplate(a), 
-                    // these attributes are special, in order to update the live value (after a user has interacted with them),
-                    // they need to be set on the element as well
-                    [ "value", "checked", "selected" ].includes(t.name) && (e[t.name] = this.getUpdatedTemplate(a));
-                });
-            }
-        }
-        return n;
-    }
-    /**
-	 * a template tag function used to create new web-components.
-	 * {@link https://tram-one.io/tram-lite/#define Read the full docs here.}
-	 */
-    static define(t, ...e) {
-        // build the new component class from the template
-        t = TramLite.makeComponentClass(t, ...e);
-        // register this as a new element as a native web-component
-        return customElements.define(t.tagName, t), t;
-    }
-    /**
-	 * a helper function to update the root web-component when an input updates
-	 * {@link https://tram-one.io/tram-lite/#updateRootAttr Read the full docs here.}
-	 * @param {string} attributeName
-	 * @param {Event} event
-	 * @param {string} [targetAttribute="value"]
-	 */
-    static updateRootAttr(t, e, a = "value") {
-        var o = e.target.getRootNode().host;
-        e.target[a] ? o.setAttribute(t, e.target[a]) : o.removeAttribute(t);
-    }
-    /**
-	 * helper function to set up a callback for when an element's attribute changes
-	 * {@link https://tram-one.io/tram-lite/#addAttributeListener Read the full docs here.}
-	 * @param {Element} targetElement - The DOM element to observe.
-	 * @param {string[]} attributeNames - The name of the attribute (or list of attributes) to observe for changes.
-	 * @param {function(MutationRecord):void} callback - The function to call when the observed attribute changes.
-	 *    This function takes one argument: the MutationRecord representing the change.
-	 */
-    static addAttributeListener(e, t, a) {
-        new MutationObserver(t => {
-            t.forEach(t => {
-                // only call the mutation if an attribute changed
-                t.oldValue !== e.getAttribute(t.attributeName) && a(t);
-            });
-        }).observe(e, {
-            attributes: !0,
-            attributeFilter: t,
-            attributeOldValue: !0
-        });
-    }
-    /**
-	 * function to append new behaviors to elements that are attached to the shadowDOM.
-	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
-	 * @param {string} matcher
-	 * @param {{ connect: function }} componentClass
-	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
-	 */
-    static appendShadowRootProcessor(e, a, t = ShadowRoot.prototype) {
-        // save the original version of shadowRoot.append
-        const o = t.append;
-        t.append = function(...t) {
-            o.call(this, ...t), 
-            // if any element in this shadowRoot matches our matcher,
-            //   run the `connect` function from this class
-            this.querySelectorAll(e).forEach(t => {
-                t.getRootNode().host && a.connect(t);
-            });
-        };
-    }
-}
-
-/**
- * ComponentDefinition is a custom element that extends the template element, that allows developers
- * to build new web-components, using Tram-Lite, all in their HTML templates!
- *
- * {@link https://tram-one.io/tram-lite/#tl-definition}
- */
-class ComponentDefinition {
-    // regex for finding attributes that have been templated in
-    static templateVariableRegex = /tl:(.+?):/;
-    /**
-	 * function to test if node has an attribute value with a template variable
-	 * e.g. <custom-element style="color: ${'color'}">
-	 */
-    static nodeHasTramLiteAttr = t => [ ...t.attributes ].some(t => t.value.match(ComponentDefinition.templateVariableRegex)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    /**
-	 * function to test if node has an TEXT node with a template variable
-	 * e.g. <custom-element>Hello ${'name'}</custom-element>
-	 */
-    static nodeHasTextElementWithTramLiteAttr = t => t.textContent.match(ComponentDefinition.templateVariableRegex) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    /**
-	 * generic function to build a tree walker, and use the filter + tram-lite matcher.
-	 * this should return all elements that match the criteria
-	 */
-    static buildTreeWalkerTramLiteMatcher(t, e, a) {
-        for (var o, i = [], r = document.createTreeWalker(t, e, {
-            acceptNode: a
-        })
-        // build a tree walker that goes through each element, and each attribute
-        ; o = r.nextNode(); ) i.push(o);
-        return i;
-    }
-    // Returns elements with attributes containing tram-lite template variables.
-    static getElementsWithTramLiteValuesInAttributes(t) {
-        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_ELEMENT, ComponentDefinition.nodeHasTramLiteAttr);
-    }
-    // Returns text nodes containing tram-lite template variables.
-    static getTextNodesWithTramLiteValues(t) {
-        return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t, NodeFilter.SHOW_TEXT, ComponentDefinition.nodeHasTextElementWithTramLiteAttr);
-    }
-    /**
-	 * static function to process template tags and define components
-	 * @param {HTMLTemplateElement} templateTag
-	 */
-    static processTemplateDefinition(t) {
-        [ ...t.content.children ].forEach(t => {
-            var t = t.outerHTML.split(/\$\{\'(.*?)\'\}/), e = t.filter((t, e) => e % 2 == 0), t = t.filter((t, e) => e % 2 != 0);
-            // we expect template variables to be in the following pattern, matching "${'...'}"
-            TramLite.define(e, ...t);
-        });
-    }
-    /**
-	 * utility function to extract js template strings, so that they can be passed into a template tag function
-	 */
-    static extractTemplateVariables(t) {
-        // we expect template variables to be in the following pattern, matching "${'...'}"
-        t = t.split(/\$\{\'(.*?)\'\}/);
-        // Split the string by the above pattern, which lets us get an alternating list of strings and variables
-        return [ t.filter((t, e) => e % 2 == 0), t.filter((t, e) => e % 2 != 0) ];
-    }
-    /**
-	 * function to set up an observer to watch for when new templates are added,
-	 *   and process all the definitions in them
-	 * @param {Document} [targetRoot=document]
-	 */
-    static setupMutationObserverForTemplates(t = document) {
-        new MutationObserver(t => {
-            t.forEach(t => {
-                t.addedNodes.forEach(t => {
-                    // check if the previous element is a definition template
-                    // we wait until we are in the next element (most likely a #text node)
-                    // because that will confirm that the element has been completely parsed
-                    t.previousSibling?.matches?.("[tl-definition]") && ComponentDefinition.processTemplateDefinition(t.previousSibling);
-                });
-            });
-        }).observe(document, {
-            subtree: !0,
-            childList: !0
-        });
-    }
-}
-
-/**
- * ComponentEffect is a class that can extend the script element, that allows developers
- * to build side-effects for web-components.
- *
- * {@link https://tram-one.io/tram-lite/#tl-effect}
- */
-class ComponentEffect {
-    /**
-	 * function to trigger the javascript in a script tag.
-	 * This does not handle the src attribute, only inline javascript.
-	 * The `this` keyword will reference the host parent node of this script tag.
-	 * @param {HTMLScriptElement} scriptTag
-	 */
-    static processScriptTag(t) {
-        // don't do this if we have a hold on the script tag
-        if (!t.hasAttribute("tl-hold")) {
-            const e = t.getRootNode().host;
-            // provide a scoped evaluation of the script tags in this element
-            t = t.innerHTML, Function("document", "window", t).bind(e)(e.shadowRoot, window);
-        }
-    }
-    /**
-	 * connect function for ComponentEffect - when this is run on a script,
-	 *   we trigger that script with the host element as context, and set up an
-	 *   observer if a set of dependencies are defined and ever update
-	 * @param {HTMLScriptElement} newNode
-	 */
-    static connect(t) {
-        var e, a = t.getRootNode().host;
-        // run an initial run of the script
-        // (this won't happen if there is a tl-hold on the script)
-        ComponentEffect.processScriptTag(t), 
-        // if we have any dependencies, add a listener to trigger them
-        t.hasAttribute("tl-dependencies") && !0 !== t.hasSetupListener && (e = t.getAttribute("tl-dependencies").split(" "), 
-        TramLite.addAttributeListener(a, e, () => {
-            // check if the inline script is being held
-            ComponentEffect.processScriptTag(t);
-        }), t.hasSetupListener = !0), 
-        // if we ever set (or remove) the hold on this, trigger the inline script
-        // (this allows developers to delay triggering inline scripts)
-        TramLite.addAttributeListener(t, [ "tl-hold" ], () => {
-            ComponentEffect.processScriptTag(t);
-        });
-    }
-}
-
-/**
- * ControlledInput is a class that can extend the input or script element, that allows developers
- * to build 2-way data-binding for web-components.
- *
- * {@link https://tram-one.io/tram-lite/#tl-effect}
- */
-class ControlledInput {
-    /**
-	 * connect function for ControlledInput - when this is run on an input (or other similar control),
-	 *   we set up a 2-way data binding from the input to the host element.
-	 * @param {HTMLInputElement} newNode
-	 */
-    static connect(e) {
-        // attributes that control the behavior of the controlled input
-        var t = (e.getAttribute("tl-trigger") || "change").split(" ");
-        const a = e.getAttribute("tl-hostattr") || "value", o = e.getAttribute("tl-targetattr") || "value", i = e.getRootNode().host;
-        e[o] = i.getAttribute(a), 
-        // update this input whenever the host attribute updates
-        TramLite.addAttributeListener(i, [ a ], () => {
-            e[o] = i.getAttribute(a);
-        }), 
-        // update the root component attribute whenever the value changes for this node updates
-        t.forEach(t => {
-            e.addEventListener(t, t => {
-                TramLite.updateRootAttr(a, t, o);
-            });
-        });
-    }
-}
-
-class ImportComponent {
-    /**
-	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
-	 * @param {string} componentContent
-	 */
-    static importNewComponent(t) {
-        var [ t, e ] = ComponentDefinition.extractTemplateVariables(t), t = TramLite.makeComponentClass(t, ...e);
-        // make a component class based on the template tag pieces
-        // (this is done, over define, so we can attach shadow root processors)
-        // override attachShadow so that we can add shadowRootProcessors
-        const a = t.prototype.attachShadow;
-        t.prototype.attachShadow = function(...t) {
-            t = a.call(this, ...t);
-            return TramLite.appendShadowRootProcessor("[tl-controlled]", ControlledInput, t), 
-            TramLite.appendShadowRootProcessor("[tl-effect]", ComponentEffect, t), 
-            t;
-        }, 
-        // define the component in the DOM
-        customElements.define(t.tagName, t);
-    }
-}
-
-{
-	const componentTemplate = `<ex-progressbar value="3" max="10">
-	<div>
-		<input id="value" type="number" tl-controlled tl-trigger="input" />
-		<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
-	</div>
-	<progress value="\${'value'}" max="\${'max'}"></progress>
-	<div>\${'warning'}</div>
-	<script tl-effect tl-dependencies="value max">
-		const value = parseInt(this.getAttribute('value'));
-		const max = parseInt(this.getAttribute('max'));
-		if (value > max) {
-			this.setAttribute('warning', \`WARNING: \${value} is greater than \${max}\`);
-		} else {
-			this.removeAttribute('warning');
-		}
-	</script>
-</ex-progressbar>
-`;
-	ImportComponent.importNewComponent(componentTemplate)
-}
-
-
-{
-	const componentTemplate = `<ex-temperature celsius="" fahrenheit="">
-	<label>
-		<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
-		Celsius
-	</label>
-	=
-	<label>
-		<input id="f" tl-controlled placeholder="F" unit="fahrenheit" tl-hostattr="fahrenheit" tl-trigger="input" />
-		Fahrenheit
-	</label>
-
-	<script tl-effect>
-		// functions to define for the rest of the component
-		this.calcCelsius = (f) => {
-			return ((f - 32) * (5 / 9)).toFixed(0);
-		};
-
-		this.calcFahrenheit = (c) => {
-			return (c * (9 / 5) + 32).toFixed(0);
-		};
-
-		this.isReflectiveUpdate = (temperatureConverter) => {
-			const f = temperatureConverter.getAttribute('fahrenheit');
-			const c = temperatureConverter.getAttribute('celsius');
-			// if this celsius or fahrenheit value would generate the other, don't update
-			// this is indicative of an update triggered by another update!
-			// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
-			// e.g. 19F and 20F both map to -7C
-			return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
-		};
-	</script>
-	<script tl-effect tl-dependencies="celsius">
-		const c = this.getAttribute('celsius');
-		const newF = this.calcFahrenheit(c);
-		if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
-			this.setAttribute('fahrenheit', newF);
-		}
-	</script>
-	<script tl-effect tl-dependencies="fahrenheit">
-		const f = this.getAttribute('fahrenheit');
-		const newC = this.calcCelsius(f);
-		if (f && !isNaN(newC)) {
-			this.setAttribute('celsius', newC);
-		}
-	</script>
-</ex-temperature>
-`;
-	ImportComponent.importNewComponent(componentTemplate)
-}
-
-
-{
-	const componentTemplate = `<ex-container>
-	<style>
-		fieldset {
-			border: yellow 1px solid;
-		}
-		legend {
-			color: yellow;
-		}
-	</style>
-	<fieldset>
-		<legend>\${'name'}</legend>
-		<slot></slot>
-	</fieldset>
-</ex-container>
-`;
-	ImportComponent.importNewComponent(componentTemplate)
-}
-
-
-{
-	const componentTemplate = `<ex-colorpicker width="100px">
-	<style>
-		svg {
-			display: block;
-		}
-		rect {
-			fill: oklch(70% 0.1 \${'hue'});
-		}
-	</style>
-	<input id="hue-range-input" type="range" tl-controlled tl-hostattr="hue" tl-trigger="input" min="0" max="360" />
-	<input id="hue-text-input" type="text" placeholder="hue value" tl-controlled tl-hostattr="hue" />
-	<svg viewbox="0 0 100 100" width="\${'width'}">
-		<rect width="100" height="100" />
-	</svg>
-</ex-colorpicker>
-`;
-	ImportComponent.importNewComponent(componentTemplate)
-}
-
-}
\ No newline at end of file

From 03daa12633647cf69bfe35a7de5da11b09de2534 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 11:04:12 -0400
Subject: [PATCH 25/30] documentation for new shadowRoot parameter

---
 docs/pages/js-appendShadowRootProcessor.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/pages/js-appendShadowRootProcessor.html b/docs/pages/js-appendShadowRootProcessor.html
index bd5a3d3..aa056f7 100644
--- a/docs/pages/js-appendShadowRootProcessor.html
+++ b/docs/pages/js-appendShadowRootProcessor.html
@@ -46,7 +46,8 @@ <h2>Syntax</h2>
 		<code-template-js>
 			<template>
 				<script>
-					TramLite.appendShadowRootProcessor(cssSelector, behaviorClass);
+					// prettier-ignore
+					TramLite.appendShadowRootProcessor(cssSelector, behaviorClass, shadowRoot = ShadowRoot.prototype);
 				</script>
 			</template>
 		</code-template-js>
@@ -61,6 +62,13 @@ <h3>Parameters</h3>
 		<dd>
 			<p>class with a <code>static connect</code> function, which are associated with newly attached nodes.</p>
 		</dd>
+		<dt><code>shadowRoot</code><optional-badge>optional</optional-badge></dt>
+		<dd>
+			<p>
+				a specific shadowRoot instance to update the behavior for - by default this is the shadowRoot prototype for all
+				components, but by passing a specific shadowRoot, you only update the behavior of that component's shadowRoot.
+			</p>
+		</dd>
 	</dl>
 	<h3>Return Value</h3>
 	<p>None</p>

From ec47fd91ad9eb3e8c6beb808400496076b402b88 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 12:46:04 -0400
Subject: [PATCH 26/30] add comments pointing to documentation

---
 src/scripts/export-script.js | 4 ++++
 src/scripts/import-script.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index f340587..610a6e0 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -1,5 +1,9 @@
 #!/usr/bin/env node
 
+// usage - use this script to create a javascript version of a component definition
+// e.g. npx tram-lite export-components your-component-definition.html
+// see more usage details here: https://tram-one.io/tram-lite/#importing-and-exporting
+
 const fs = require('fs');
 const path = require('path');
 
diff --git a/src/scripts/import-script.js b/src/scripts/import-script.js
index 6944f21..ff564dc 100644
--- a/src/scripts/import-script.js
+++ b/src/scripts/import-script.js
@@ -1,5 +1,6 @@
 // usage - this script is intended to be used as part of a script tag
 // e.g. <script src=".../import-components.js" tl-components=".../my-component.html">
+// see more usage details here: https://tram-one.io/tram-lite/#importing-and-exporting
 
 // tl-components can have a space separated list of import paths
 const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);

From b7de92bb52a7e145091d6f34b230c643487d1087 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 13:04:11 -0400
Subject: [PATCH 27/30] 4.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a9e3f9..ff2f47c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.4",
+	"version": "4.2.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tram-lite",
-			"version": "4.2.0-beta.4",
+			"version": "4.2.0",
 			"license": "MIT",
 			"devDependencies": {
 				"cypress": "^12.14.0",
diff --git a/package.json b/package.json
index 80d0cf1..86e7043 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tram-lite",
-	"version": "4.2.0-beta.4",
+	"version": "4.2.0",
 	"description": "💡 HTML library for building and enhancing web-components",
 	"homepage": "https://tram-one.io/tram-lite/",
 	"repository": "https://github.com/Tram-One/tram-lite",

From 015bcfadb82613577cec23c4c3062061d4d6a66e Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 17:26:14 -0400
Subject: [PATCH 28/30] support and tests for multi-component definitions

---
 examples/components/build-test-components.sh |  1 +
 examples/components/ex-todolist.html         | 49 +++++++++++++++++
 examples/components/ex-todolist.js           | 58 ++++++++++++++++++++
 examples/export/export.cy.js                 | 15 +++++
 examples/export/index.html                   |  4 ++
 examples/import/import.cy.js                 | 21 ++++++-
 examples/import/index.html                   |  7 ++-
 src/ImportComponent.js                       | 23 +++++++-
 src/processors/ComponentDefinition.js        | 15 ++---
 src/scripts/export-script.js                 |  2 +-
 src/scripts/import-script.js                 |  4 +-
 11 files changed, 178 insertions(+), 21 deletions(-)
 create mode 100644 examples/components/ex-todolist.html
 create mode 100644 examples/components/ex-todolist.js

diff --git a/examples/components/build-test-components.sh b/examples/components/build-test-components.sh
index f243098..bef97a8 100644
--- a/examples/components/build-test-components.sh
+++ b/examples/components/build-test-components.sh
@@ -1,2 +1,3 @@
 node output/export-components.js examples/components/ex-progressbar.html examples/components/ex-temperature.html examples/components/ex-container.html examples/components/ex-colorpicker.html -o examples/components/example-components.js
 node output/export-components.js examples/components/ex-colorpicker.html -o examples/components/ex-colorpicker.js
+node output/export-components.js examples/components/ex-todolist.html -o examples/components/ex-todolist.js -m
diff --git a/examples/components/ex-todolist.html b/examples/components/ex-todolist.html
new file mode 100644
index 0000000..54c4912
--- /dev/null
+++ b/examples/components/ex-todolist.html
@@ -0,0 +1,49 @@
+<ex-todoitem>
+	<label style="display: block">
+		<input type="checkbox" tl-controlled tl-hostattr="checked" tl-targetattr="checked" />
+		<slot></slot>
+	</label>
+	<script tl-effect tl-dependencies="checked">
+		const todoItemList = this.getRootNode().host;
+
+		// query all list items to determine new completed and total
+		const todoItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem');
+		todoItemList.setAttribute('total', todoItems.length);
+		const completedItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem[checked]');
+		todoItemList.setAttribute('completed', completedItems.length);
+	</script>
+</ex-todoitem>
+
+<ex-todolist completed="0" total="0">
+	<style>
+		todo-section {
+			padding-inline-start: 5px;
+			margex-block-start: 5px;
+		}
+	</style>
+	<span>To Do List (${'completed'}/${'total'})</span>
+	<form>
+		<input name="input" placeholder="New Item" autofill="false" />
+	</form>
+	<todo-section></todo-section>
+	<script tl-effect>
+		const todoList = this;
+
+		function addNewTodoItem(todoText) {
+			const list = todoList.shadowRoot.querySelector('todo-section');
+			const newItem = this.document.createElement('ex-todoitem');
+			newItem.innerText = todoText;
+			list.appendChild(newItem);
+		}
+
+		function submitNewTodoItem(event) {
+			event.preventDefault();
+			addNewTodoItem(event.target.input.value);
+			event.target.reset();
+		}
+		todoList.shadowRoot.querySelector('form').addEventListener('submit', submitNewTodoItem);
+
+		addNewTodoItem('Example Initial Item');
+		addNewTodoItem('Learning Tram-Lite');
+	</script>
+</ex-todolist>
diff --git a/examples/components/ex-todolist.js b/examples/components/ex-todolist.js
new file mode 100644
index 0000000..d5e4fc2
--- /dev/null
+++ b/examples/components/ex-todolist.js
@@ -0,0 +1,58 @@
+{
+class TramLite{static version="4.2.0";static installed=!1;static makeComponentClass(t,...e){var a=document.createElement("template"),o=e.map(t=>`tl:${t}:`);a.innerHTML=String.raw({raw:t},...o);const r=a.content.firstElementChild,i={};[...r.attributes].forEach(t=>{i[t.name]=t.value}),r.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t=>{t.setAttribute("tl-hold","component-mount")});class n extends HTMLElement{static tramLiteVersion="4.2.0";static tagName=r.tagName.toLowerCase();static get observedAttributes(){return e}constructor(){super(),this.templateValuesAttrNodes=[],this.templateValuesTextNodes=[];var t=this.attachShadow({mode:"open"});t.append(...r.cloneNode(!0).childNodes),ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t=>{this.templateValuesTextNodes.push({textNode:t,originalTemplate:t.textContent})}),ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e=>{[...e.attributes].forEach(t=>{t.value.match(/tl:(.+?):/)&&this.templateValuesAttrNodes.push({attrNode:t,element:e,originalTemplate:t.value})})})}connectedCallback(){var t=Object.keys(i);[...e,...t].forEach(t=>{null===this.getAttribute(t)&&this.setAttribute(t,i[t]||"")}),this.attributeChangedCallback(),this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t=>{t.removeAttribute("tl-hold")})}attributeChangedCallback(t,e,a){this.updateTextNodeTemplates(),this.updateAttrNodeTemplates()}getUpdatedTemplate(t){let a=t;return e.forEach(t=>{var e=this.getAttribute(t)||i[t]||"";a=a.replaceAll(`tl:${t}:`,e)}),a}updateTextNodeTemplates(){this.templateValuesTextNodes.forEach(({textNode:t,originalTemplate:e})=>{t.textContent=this.getUpdatedTemplate(e)})}updateAttrNodeTemplates(){this.templateValuesAttrNodes.forEach(({attrNode:t,element:e,originalTemplate:a})=>{t.value=this.getUpdatedTemplate(a),["value","checked","selected"].includes(t.name)&&(e[t.name]=this.getUpdatedTemplate(a))})}}return n}static define(t,...e){return t=TramLite.makeComponentClass(t,...e),customElements.define(t.tagName,t),t}static updateRootAttr(t,e,a="value"){var o=e.target.getRootNode().host;e.target[a]?o.setAttribute(t,e.target[a]):o.removeAttribute(t)}static addAttributeListener(e,t,a){new MutationObserver(t=>{t.forEach(t=>{t.oldValue!==e.getAttribute(t.attributeName)&&a(t)})}).observe(e,{attributes:!0,attributeFilter:t,attributeOldValue:!0})}static appendShadowRootProcessor(e,a,t=ShadowRoot.prototype){const o=t.append;t.append=function(...t){o.call(this,...t),this.querySelectorAll(e).forEach(t=>{t.getRootNode().host&&a.connect(t)})}}}class ComponentDefinition{static templateVariableRegex=/tl:(.+?):/;static nodeHasTramLiteAttr=t=>[...t.attributes].some(t=>t.value.match(ComponentDefinition.templateVariableRegex))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;static nodeHasTextElementWithTramLiteAttr=t=>t.textContent.match(ComponentDefinition.templateVariableRegex)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT;static buildTreeWalkerTramLiteMatcher(t,e,a){for(var o,r=[],i=document.createTreeWalker(t,e,{acceptNode:a});o=i.nextNode();)r.push(o);return r}static getElementsWithTramLiteValuesInAttributes(t){return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t,NodeFilter.SHOW_ELEMENT,ComponentDefinition.nodeHasTramLiteAttr)}static getTextNodesWithTramLiteValues(t){return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t,NodeFilter.SHOW_TEXT,ComponentDefinition.nodeHasTextElementWithTramLiteAttr)}static processTemplateDefinition(t){[...t.content.children].forEach(t=>{var t=t.outerHTML,[t,e]=ComponentDefinition.extractTemplateVariables(t);TramLite.define(t,...e)})}static extractTemplateVariables(t){return[(t=t.split(/\$\{\'(.*?)\'\}/)).filter((t,e)=>e%2==0),t.filter((t,e)=>e%2!=0)]}static setupMutationObserverForTemplates(t=document){new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.previousSibling?.matches?.("[tl-definition]")&&ComponentDefinition.processTemplateDefinition(t.previousSibling)})})}).observe(document,{subtree:!0,childList:!0})}}class ComponentEffect{static processScriptTag(t){var e;t.hasAttribute("tl-hold")||(e=t.getRootNode().host,t=t.innerHTML,Function("document","window",t).bind(e)(e.shadowRoot,window))}static connect(t){var e,a=t.getRootNode().host;ComponentEffect.processScriptTag(t),t.hasAttribute("tl-dependencies")&&!0!==t.hasSetupListener&&(e=t.getAttribute("tl-dependencies").split(" "),TramLite.addAttributeListener(a,e,()=>{ComponentEffect.processScriptTag(t)}),t.hasSetupListener=!0),TramLite.addAttributeListener(t,["tl-hold"],()=>{ComponentEffect.processScriptTag(t)})}}class ControlledInput{static connect(e){var t=(e.getAttribute("tl-trigger")||"change").split(" ");const a=e.getAttribute("tl-hostattr")||"value",o=e.getAttribute("tl-targetattr")||"value",r=e.getRootNode().host;e[o]=r.getAttribute(a),TramLite.addAttributeListener(r,[a],()=>{e[o]=r.getAttribute(a)}),t.forEach(t=>{e.addEventListener(t,t=>{TramLite.updateRootAttr(a,t,o)})})}}class ImportComponent{static processDefinitionTemplate(t){var e=document.createElement("template");e.innerHTML=t,[...t=e.content.children].forEach(t=>{ImportComponent.importNewComponent(t.outerHTML)})}static importNewComponent(t){var[t,e]=ComponentDefinition.extractTemplateVariables(t);const a=(t=TramLite.makeComponentClass(t,...e)).prototype.attachShadow;t.prototype.attachShadow=function(...t){return t=a.call(this,...t),TramLite.appendShadowRootProcessor("[tl-controlled]",ControlledInput,t),TramLite.appendShadowRootProcessor("[tl-effect]",ComponentEffect,t),t},customElements.define(t.tagName,t)}}
+
+{
+	const componentTemplate = `<ex-todoitem>
+	<label style="display: block">
+		<input type="checkbox" tl-controlled tl-hostattr="checked" tl-targetattr="checked" />
+		<slot></slot>
+	</label>
+	<script tl-effect tl-dependencies="checked">
+		const todoItemList = this.getRootNode().host;
+
+		// query all list items to determine new completed and total
+		const todoItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem');
+		todoItemList.setAttribute('total', todoItems.length);
+		const completedItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem[checked]');
+		todoItemList.setAttribute('completed', completedItems.length);
+	</script>
+</ex-todoitem>
+
+<ex-todolist completed="0" total="0">
+	<style>
+		todo-section {
+			padding-inline-start: 5px;
+			margex-block-start: 5px;
+		}
+	</style>
+	<span>To Do List (\${'completed'}/\${'total'})</span>
+	<form>
+		<input name="input" placeholder="New Item" autofill="false" />
+	</form>
+	<todo-section></todo-section>
+	<script tl-effect>
+		const todoList = this;
+
+		function addNewTodoItem(todoText) {
+			const list = todoList.shadowRoot.querySelector('todo-section');
+			const newItem = this.document.createElement('ex-todoitem');
+			newItem.innerText = todoText;
+			list.appendChild(newItem);
+		}
+
+		function submitNewTodoItem(event) {
+			event.preventDefault();
+			addNewTodoItem(event.target.input.value);
+			event.target.reset();
+		}
+		todoList.shadowRoot.querySelector('form').addEventListener('submit', submitNewTodoItem);
+
+		addNewTodoItem('Example Initial Item');
+		addNewTodoItem('Learning Tram-Lite');
+	</script>
+</ex-todolist>
+`;
+	ImportComponent.processDefinitionTemplate(componentTemplate);
+}
+
+}
\ No newline at end of file
diff --git a/examples/export/export.cy.js b/examples/export/export.cy.js
index 33671b7..75703e6 100644
--- a/examples/export/export.cy.js
+++ b/examples/export/export.cy.js
@@ -25,5 +25,20 @@ describe('Tram-Lite Example Components (via export)', () => {
 				const rawColor = window.getComputedStyle($element[0])['fill'];
 				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
 			});
+
+		/* copied from inline tests - specifically verifies multi component definition in export */
+		cy.get('ex-todoitem').contains('Example Initial Item');
+		cy.get('ex-todoitem').contains('Learning Tram-Lite');
+
+		cy.get('ex-todolist').get('form input').type('Cypress Test'); // create new todo item
+		cy.get('ex-todolist').get('form').submit();
+
+		cy.get('ex-todoitem').contains('Cypress Test'); // verify it exists
+
+		cy.get('ex-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
+		cy.get('ex-todolist').get('span').contains('(1/3)');
+
+		cy.get('ex-todoitem').contains('Cypress Test').click();
+		cy.get('ex-todolist').get('span').contains('(0/3)');
 	});
 });
diff --git a/examples/export/index.html b/examples/export/index.html
index 571f40a..298bdd2 100644
--- a/examples/export/index.html
+++ b/examples/export/index.html
@@ -16,6 +16,7 @@
 		</style>
 
 		<script src="/examples/components/example-components.js"></script>
+		<script src="/examples/components/ex-todolist.js"></script>
 	</head>
 	<body>
 		<ex-container name="Temperature Converter">
@@ -27,5 +28,8 @@
 		<ex-container name="Color Picker">
 			<ex-colorpicker hue="200"></ex-colorpicker>
 		</ex-container>
+		<ex-container name="To Do List">
+			<ex-todolist></ex-todolist>
+		</ex-container>
 	</body>
 </html>
diff --git a/examples/import/import.cy.js b/examples/import/import.cy.js
index 7280325..a1686b8 100644
--- a/examples/import/import.cy.js
+++ b/examples/import/import.cy.js
@@ -3,19 +3,19 @@ describe('Tram-Lite Example Components (via import)', () => {
 		// visit index.html
 		cy.visit('../examples/import/index.html');
 
-		/* copied from inline tests */
+		/* copied from inline tests - verifies that multiple components in a single import works */
 		cy.get('ex-temperature').get('input#f').type('19');
 		cy.get('ex-temperature').get('input#c').should('have.value', '-7');
 		cy.get('ex-temperature').get('input#f').should('have.value', '19');
 
-		/* copied from inline tests */
+		/* copied from inline tests - verifies that multiple components in a single import works */
 		cy.get('ex-progressbar').should('not.have.attr', 'warning');
 		cy.get('ex-progressbar').get('input#value').clear().type('12');
 		cy.get('ex-progressbar').should('have.attr', 'warning');
 		cy.get('ex-progressbar').get('input#max').clear().type('15');
 		cy.get('ex-progressbar').should('not.have.attr', 'warning');
 
-		/* copied from inline tests */
+		/* copied from inline tests - verifies that multiple call of import-component works */
 		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
 		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
 		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
@@ -25,5 +25,20 @@ describe('Tram-Lite Example Components (via import)', () => {
 				const rawColor = window.getComputedStyle($element[0])['fill'];
 				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
 			});
+
+		/* copied from inline tests - specifically verifies multi component definition in import */
+		cy.get('ex-todoitem').contains('Example Initial Item');
+		cy.get('ex-todoitem').contains('Learning Tram-Lite');
+
+		cy.get('ex-todolist').get('form input').type('Cypress Test'); // create new todo item
+		cy.get('ex-todolist').get('form').submit();
+
+		cy.get('ex-todoitem').contains('Cypress Test'); // verify it exists
+
+		cy.get('ex-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
+		cy.get('ex-todolist').get('span').contains('(1/3)');
+
+		cy.get('ex-todoitem').contains('Cypress Test').click();
+		cy.get('ex-todolist').get('span').contains('(0/3)');
 	});
 });
diff --git a/examples/import/index.html b/examples/import/index.html
index b75a60d..119c35a 100644
--- a/examples/import/index.html
+++ b/examples/import/index.html
@@ -17,8 +17,10 @@
 
 		<script
 			src="../../output/import-components.js"
-			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html /examples/components/ex-temperature.html /examples/components/ex-colorpicker.html"
+			tl-components="/examples/components/ex-container.html /examples/components/ex-progressbar.html /examples/components/ex-temperature.html"
 		></script>
+		<script src="../../output/import-components.js" tl-components="/examples/components/ex-colorpicker.html"></script>
+		<script src="../../output/import-components.js" tl-components="/examples/components/ex-todolist.html"></script>
 	</head>
 	<body>
 		<ex-container name="Temperature Converter">
@@ -30,5 +32,8 @@
 		<ex-container name="Color Picker">
 			<ex-colorpicker hue="200"></ex-colorpicker>
 		</ex-container>
+		<ex-container name="To Do List">
+			<ex-todolist></ex-todolist>
+		</ex-container>
 	</body>
 </html>
diff --git a/src/ImportComponent.js b/src/ImportComponent.js
index b9153e9..3764266 100644
--- a/src/ImportComponent.js
+++ b/src/ImportComponent.js
@@ -1,11 +1,28 @@
 class ImportComponent {
+	/**
+	 * utility function for processing a list of component definitions.
+	 * @param {string} definitionTemplate
+	 */
+	static processDefinitionTemplate(definitionTemplate) {
+		// container for all our component definitions
+		const templateContainer = document.createElement('template');
+
+		templateContainer.innerHTML = definitionTemplate;
+
+		// for each child element, process the new definition (this is similar to processTemplateDefinition)
+		const allChildElements = templateContainer.content.children;
+		[...allChildElements].forEach((elementToDefine) => {
+			ImportComponent.importNewComponent(elementToDefine.outerHTML);
+		});
+	}
+
 	/**
 	 * utility function for importing and defining new components (outside of Tram-Lite being installed)
-	 * @param {string} componentContent
+	 * @param {string} componentTemplate
 	 */
-	static importNewComponent(componentContent) {
+	static importNewComponent(componentTemplate) {
 		const [componentRawStrings, componentTemplateVariables] =
-			ComponentDefinition.extractTemplateVariables(componentContent);
+			ComponentDefinition.extractTemplateVariables(componentTemplate);
 
 		// make a component class based on the template tag pieces
 		// (this is done, over define, so we can attach shadow root processors)
diff --git a/src/processors/ComponentDefinition.js b/src/processors/ComponentDefinition.js
index 9ec3402..1bba6a3 100644
--- a/src/processors/ComponentDefinition.js
+++ b/src/processors/ComponentDefinition.js
@@ -73,16 +73,9 @@ class ComponentDefinition {
 		[...allChildElements].forEach((elementToDefine) => {
 			const definitionString = elementToDefine.outerHTML;
 
-			// we expect template variables to be in the following pattern, matching "${'...'}"
-			const variablePattern = /\$\{\'(.*?)\'\}/;
-			// Split the string by the above pattern, which lets us get an alternating list of strings and variables
-			const parts = definitionString.split(variablePattern);
+			const [rawStrings, templateVariables] = ComponentDefinition.extractTemplateVariables(definitionString);
 
-			// Extract the strings and the variables
-			const rawStrings = parts.filter((_, index) => index % 2 === 0);
-			const templateVaraibles = parts.filter((_, index) => index % 2 !== 0);
-
-			TramLite.define(rawStrings, ...templateVaraibles);
+			TramLite.define(rawStrings, ...templateVariables);
 		});
 	}
 
@@ -97,9 +90,9 @@ class ComponentDefinition {
 
 		// Extract the strings and the variables
 		const rawStrings = parts.filter((_, index) => index % 2 === 0);
-		const templateVaraibles = parts.filter((_, index) => index % 2 !== 0);
+		const templateVariables = parts.filter((_, index) => index % 2 !== 0);
 
-		return [rawStrings, templateVaraibles];
+		return [rawStrings, templateVariables];
 	}
 
 	/**
diff --git a/src/scripts/export-script.js b/src/scripts/export-script.js
index 610a6e0..9ae81e9 100644
--- a/src/scripts/export-script.js
+++ b/src/scripts/export-script.js
@@ -38,7 +38,7 @@ const templateAndLoadCode = componentDefinitions
 		return `
 {
 	const componentTemplate = \`${formattedComponentCode}\`;
-	ImportComponent.importNewComponent(componentTemplate)
+	ImportComponent.processDefinitionTemplate(componentTemplate);
 }
 `;
 	})
diff --git a/src/scripts/import-script.js b/src/scripts/import-script.js
index ff564dc..06e0529 100644
--- a/src/scripts/import-script.js
+++ b/src/scripts/import-script.js
@@ -20,7 +20,7 @@ componentPaths.forEach(async (componentPath, index) => {
 		return;
 	}
 
-	// load the content as text, and then build the template tag pieces
+	// load the content as text, and process it as a definition template string
 	const componentContent = await componentResult.text();
-	ImportComponent.importNewComponent(componentContent);
+	ImportComponent.processDefinitionTemplate(componentContent);
 });

From a2141fa82d917abf70c158c5323d63036ec11b50 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 17:31:27 -0400
Subject: [PATCH 29/30] update documentation

---
 docs/pages/importing-and-exporting.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/pages/importing-and-exporting.html b/docs/pages/importing-and-exporting.html
index 93150fc..d19522d 100644
--- a/docs/pages/importing-and-exporting.html
+++ b/docs/pages/importing-and-exporting.html
@@ -26,8 +26,8 @@ <h3>Using import-components script</h3>
 <h4>Parameters</h4>
 <p>
 	The only parameter for <code>import-components.js</code> is the <code>tl-components</code> attribute. It is a space
-	delimited list of component definition paths. The components should be HTML, and just the definition of the component
-	(no surrounding template tag, or adjacent tags).
+	delimited list of component definition paths. The components should be HTML, and just the definition of the
+	components, the same as the content inside of a <a href="#tl-definition">tl-definition template tag</a>.
 </p>
 <h4>Example Importing an HTML Template</h4>
 <p>

From 961b8b03a2b748b8691c0e3bca8e4916445771c2 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Sun, 8 Oct 2023 17:42:01 -0400
Subject: [PATCH 30/30] remove todolist component

---
 .gitignore                         |  1 +
 examples/components/ex-todolist.js | 58 ------------------------------
 2 files changed, 1 insertion(+), 58 deletions(-)
 delete mode 100644 examples/components/ex-todolist.js

diff --git a/.gitignore b/.gitignore
index be89a6b..c9654a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@ node_modules
 
 # components that are generated as part of build-test-components.sh
 examples/components/ex-colorpicker.js
+examples/components/ex-todolist.js
 examples/components/example-components.js
diff --git a/examples/components/ex-todolist.js b/examples/components/ex-todolist.js
deleted file mode 100644
index d5e4fc2..0000000
--- a/examples/components/ex-todolist.js
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-class TramLite{static version="4.2.0";static installed=!1;static makeComponentClass(t,...e){var a=document.createElement("template"),o=e.map(t=>`tl:${t}:`);a.innerHTML=String.raw({raw:t},...o);const r=a.content.firstElementChild,i={};[...r.attributes].forEach(t=>{i[t.name]=t.value}),r.querySelectorAll("script[tl-effect]:not([tl-hold])").forEach(t=>{t.setAttribute("tl-hold","component-mount")});class n extends HTMLElement{static tramLiteVersion="4.2.0";static tagName=r.tagName.toLowerCase();static get observedAttributes(){return e}constructor(){super(),this.templateValuesAttrNodes=[],this.templateValuesTextNodes=[];var t=this.attachShadow({mode:"open"});t.append(...r.cloneNode(!0).childNodes),ComponentDefinition.getTextNodesWithTramLiteValues(t).forEach(t=>{this.templateValuesTextNodes.push({textNode:t,originalTemplate:t.textContent})}),ComponentDefinition.getElementsWithTramLiteValuesInAttributes(t).forEach(e=>{[...e.attributes].forEach(t=>{t.value.match(/tl:(.+?):/)&&this.templateValuesAttrNodes.push({attrNode:t,element:e,originalTemplate:t.value})})})}connectedCallback(){var t=Object.keys(i);[...e,...t].forEach(t=>{null===this.getAttribute(t)&&this.setAttribute(t,i[t]||"")}),this.attributeChangedCallback(),this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(t=>{t.removeAttribute("tl-hold")})}attributeChangedCallback(t,e,a){this.updateTextNodeTemplates(),this.updateAttrNodeTemplates()}getUpdatedTemplate(t){let a=t;return e.forEach(t=>{var e=this.getAttribute(t)||i[t]||"";a=a.replaceAll(`tl:${t}:`,e)}),a}updateTextNodeTemplates(){this.templateValuesTextNodes.forEach(({textNode:t,originalTemplate:e})=>{t.textContent=this.getUpdatedTemplate(e)})}updateAttrNodeTemplates(){this.templateValuesAttrNodes.forEach(({attrNode:t,element:e,originalTemplate:a})=>{t.value=this.getUpdatedTemplate(a),["value","checked","selected"].includes(t.name)&&(e[t.name]=this.getUpdatedTemplate(a))})}}return n}static define(t,...e){return t=TramLite.makeComponentClass(t,...e),customElements.define(t.tagName,t),t}static updateRootAttr(t,e,a="value"){var o=e.target.getRootNode().host;e.target[a]?o.setAttribute(t,e.target[a]):o.removeAttribute(t)}static addAttributeListener(e,t,a){new MutationObserver(t=>{t.forEach(t=>{t.oldValue!==e.getAttribute(t.attributeName)&&a(t)})}).observe(e,{attributes:!0,attributeFilter:t,attributeOldValue:!0})}static appendShadowRootProcessor(e,a,t=ShadowRoot.prototype){const o=t.append;t.append=function(...t){o.call(this,...t),this.querySelectorAll(e).forEach(t=>{t.getRootNode().host&&a.connect(t)})}}}class ComponentDefinition{static templateVariableRegex=/tl:(.+?):/;static nodeHasTramLiteAttr=t=>[...t.attributes].some(t=>t.value.match(ComponentDefinition.templateVariableRegex))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;static nodeHasTextElementWithTramLiteAttr=t=>t.textContent.match(ComponentDefinition.templateVariableRegex)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT;static buildTreeWalkerTramLiteMatcher(t,e,a){for(var o,r=[],i=document.createTreeWalker(t,e,{acceptNode:a});o=i.nextNode();)r.push(o);return r}static getElementsWithTramLiteValuesInAttributes(t){return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t,NodeFilter.SHOW_ELEMENT,ComponentDefinition.nodeHasTramLiteAttr)}static getTextNodesWithTramLiteValues(t){return ComponentDefinition.buildTreeWalkerTramLiteMatcher(t,NodeFilter.SHOW_TEXT,ComponentDefinition.nodeHasTextElementWithTramLiteAttr)}static processTemplateDefinition(t){[...t.content.children].forEach(t=>{var t=t.outerHTML,[t,e]=ComponentDefinition.extractTemplateVariables(t);TramLite.define(t,...e)})}static extractTemplateVariables(t){return[(t=t.split(/\$\{\'(.*?)\'\}/)).filter((t,e)=>e%2==0),t.filter((t,e)=>e%2!=0)]}static setupMutationObserverForTemplates(t=document){new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t.previousSibling?.matches?.("[tl-definition]")&&ComponentDefinition.processTemplateDefinition(t.previousSibling)})})}).observe(document,{subtree:!0,childList:!0})}}class ComponentEffect{static processScriptTag(t){var e;t.hasAttribute("tl-hold")||(e=t.getRootNode().host,t=t.innerHTML,Function("document","window",t).bind(e)(e.shadowRoot,window))}static connect(t){var e,a=t.getRootNode().host;ComponentEffect.processScriptTag(t),t.hasAttribute("tl-dependencies")&&!0!==t.hasSetupListener&&(e=t.getAttribute("tl-dependencies").split(" "),TramLite.addAttributeListener(a,e,()=>{ComponentEffect.processScriptTag(t)}),t.hasSetupListener=!0),TramLite.addAttributeListener(t,["tl-hold"],()=>{ComponentEffect.processScriptTag(t)})}}class ControlledInput{static connect(e){var t=(e.getAttribute("tl-trigger")||"change").split(" ");const a=e.getAttribute("tl-hostattr")||"value",o=e.getAttribute("tl-targetattr")||"value",r=e.getRootNode().host;e[o]=r.getAttribute(a),TramLite.addAttributeListener(r,[a],()=>{e[o]=r.getAttribute(a)}),t.forEach(t=>{e.addEventListener(t,t=>{TramLite.updateRootAttr(a,t,o)})})}}class ImportComponent{static processDefinitionTemplate(t){var e=document.createElement("template");e.innerHTML=t,[...t=e.content.children].forEach(t=>{ImportComponent.importNewComponent(t.outerHTML)})}static importNewComponent(t){var[t,e]=ComponentDefinition.extractTemplateVariables(t);const a=(t=TramLite.makeComponentClass(t,...e)).prototype.attachShadow;t.prototype.attachShadow=function(...t){return t=a.call(this,...t),TramLite.appendShadowRootProcessor("[tl-controlled]",ControlledInput,t),TramLite.appendShadowRootProcessor("[tl-effect]",ComponentEffect,t),t},customElements.define(t.tagName,t)}}
-
-{
-	const componentTemplate = `<ex-todoitem>
-	<label style="display: block">
-		<input type="checkbox" tl-controlled tl-hostattr="checked" tl-targetattr="checked" />
-		<slot></slot>
-	</label>
-	<script tl-effect tl-dependencies="checked">
-		const todoItemList = this.getRootNode().host;
-
-		// query all list items to determine new completed and total
-		const todoItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem');
-		todoItemList.setAttribute('total', todoItems.length);
-		const completedItems = todoItemList.shadowRoot.querySelectorAll('ex-todoitem[checked]');
-		todoItemList.setAttribute('completed', completedItems.length);
-	</script>
-</ex-todoitem>
-
-<ex-todolist completed="0" total="0">
-	<style>
-		todo-section {
-			padding-inline-start: 5px;
-			margex-block-start: 5px;
-		}
-	</style>
-	<span>To Do List (\${'completed'}/\${'total'})</span>
-	<form>
-		<input name="input" placeholder="New Item" autofill="false" />
-	</form>
-	<todo-section></todo-section>
-	<script tl-effect>
-		const todoList = this;
-
-		function addNewTodoItem(todoText) {
-			const list = todoList.shadowRoot.querySelector('todo-section');
-			const newItem = this.document.createElement('ex-todoitem');
-			newItem.innerText = todoText;
-			list.appendChild(newItem);
-		}
-
-		function submitNewTodoItem(event) {
-			event.preventDefault();
-			addNewTodoItem(event.target.input.value);
-			event.target.reset();
-		}
-		todoList.shadowRoot.querySelector('form').addEventListener('submit', submitNewTodoItem);
-
-		addNewTodoItem('Example Initial Item');
-		addNewTodoItem('Learning Tram-Lite');
-	</script>
-</ex-todolist>
-`;
-	ImportComponent.processDefinitionTemplate(componentTemplate);
-}
-
-}
\ No newline at end of file