@twobirds/microcomponents 0.11.0 → 0.12.1

package/README.md

@@ -100,18 +100,23 @@ pnpm run cli -- new my-card --target-html --target-css --dry-run
 ```bash
 pnpm run cli -- create --namespace mc --dir mc-app
 # created mc-app/package.json
+# created mc-app/tsconfig.json
+# created mc-app/tsconfig.test.json
+# created mc-app/vitest.config.ts
 # created mc-app/opencode.jsonc
+# created mc-app/.opencode/skills/components/SKILL.md
 # created mc-app/src/index.html
 # created mc-app/src/index-dev.html
 # created mc-app/src/mc/app.ts
-# created mc-app/src/mc/app.target.html
+# created mc-app/src/mc/app.html
 # created mc-app/src/mc/app.target.css
 # created mc-app/src/mc/bundle.ts
+# created mc-app/test/mc/app.spec.ts
 # ...
 # project "mc" created in mc-app/ — run: cd mc-app && pnpm install && pnpm dev
 ```
 
-`pnpm dev` runs `mc dev`: `tsc -w` plus a `node:http` server serving `build/`, so a saved component reaches the browser through `autoload()` with nothing bundled; companion assets are mirrored into `build/` next to the compiled component, and the library is resolved through an import map to the served `microcomponents.min.js`. `pnpm build` runs `tsc` then `mc bundle`, which emits one `bundle.js` into `public/` with every companion asset inlined by the CLI bundler, the concatenated `bundle.css`, and the production shell — a single script tag, no autoloader. `pnpm preview` serves `public/`. `opencode.jsonc` registers the MCP server, so opencode picks it up when you open the project.
+`pnpm dev` runs `mc dev`: `tsc -w` plus a `node:http` server serving `build/`, so a saved component reaches the browser through `autoload()` with nothing bundled; companion assets are mirrored into `build/` next to the compiled component, and the library is resolved through an import map to the served `microcomponents.min.js`. `pnpm build` runs `tsc` then `mc bundle`, which emits one `bundle.js` into `public/` with every companion asset inlined by the CLI bundler, the concatenated `bundle.css`, and the production shell — a single script tag, no autoloader. `pnpm preview` serves `public/`. `pnpm typecheck` checks `src/` and `test/` in two contexts, and `pnpm test` runs the specs under vitest in jsdom, so component class code executes against a real DOM. `opencode.jsonc` registers the MCP server, so opencode picks it up when you open the project.
 
 The namespace (1 to 4 lowercase letters) becomes the `src/<namespace>/` folder and the first segment of every component tag, so `mc` is the home of tags like `<mc-app>`. Because the dev shell is the autoload base, `import.meta.url` + the tag-to-path rule resolves `<mc-app>` to `build/mc/app.js` — the compiled starter. New components are served automatically by the autoloader, but the bundle walks one entry, so add each one to `src/<namespace>/bundle.ts`. `--dir` defaults to the namespace, `--dry-run` prints the plan without touching disk.
 
@@ -121,7 +126,7 @@ Existing files are never overwritten silently: every target is checked before th
 
 ```bash
 pnpm run cli -- create --namespace mc
-# refusing to overwrite 10 existing file(s):
+# refusing to overwrite 16 existing file(s):
 #         mc/package.json
 #         mc/src/mc/app.ts
 #         ...
@@ -134,11 +139,16 @@ Once installed from npm the same command is available as `mc` (and as `microcomp
 ```bash
 mc new my-card [--css] [--html] [--target-html] [--shadow-html] [--target-css] [--shadow-css] [--js] [--dir <path>] [--force] [--dry-run]
 mc create --namespace <ns> [--dir <path>] [--force] [--dry-run]
+mc dev [--port <n>] [--host <addr>]
+mc bundle
+mc preview [--port <n>] [--host <addr>]
 mc clean
 mc check
 mc --version
 ```
 
+`dev` serves `build/` with `tsc -w` running, and `preview` serves `public/`. Both bind to `127.0.0.1` by default, so the served files are not reachable off the machine; pass `--host 0.0.0.0` (or an interface address) when you want the LAN to reach them.
+
 `clean` and `check` are thin wrappers around the package.json scripts of the same name, so the scripts remain the single source of truth for what they do — `mc check` type-checks every project context (lib, cli, mcp, test, demo, node) and exits with the script's exit code. `mc --version` (`-v`) prints the version of the package the CLI ships in, read from its own package.json, so it reports the installed library, not the version of the project the command runs in.
 
 Nothing has to be installed to run it once — `npx` fetches the package into its own cache and runs the bin from there:

package/dist/cli/create.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/cli/create.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;EAkBE;AAUF;;;;;;;;;;EAUE;AACF,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,yCAAyC;AACzC,MAAM,WAAW,aAAa;IAC7B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;EAYE;AACF,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CA0BhE"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/cli/create.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;EAkBE;AAUF;;;;;;;;;;EAUE;AACF,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,yCAAyC;AACzC,MAAM,WAAW,aAAa;IAC7B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;EAYE;AACF,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CA6BhE"}

package/dist/cli/dev.d.ts

@@ -81,7 +81,9 @@ export declare function createDevServer(projectRoot: string, options: {
  * @param projectRoot Project root (defaults to the current directory).
  * @param minJs Path of `microcomponents.min.js` (defaults to this package's `dist/`).
  * @param port Dev-server port.
+ * @param host Bind address. Defaults to loopback, so a dev server serving source files is
+ *   not reachable off the machine. Pass an interface address to serve the LAN.
  * @returns The process exit code (the server keeps running until killed).
  */
-export declare function runDev(projectRoot?: string, minJs?: string, port?: number): Promise<number>;
+export declare function runDev(projectRoot?: string, minJs?: string, port?: number, host?: string): Promise<number>;
 //# sourceMappingURL=dev.d.ts.map

package/dist/cli/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/cli/dev.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AASjG;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAO5C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAO/F;AA8BD;;;;;;;;;;;GAWG;AACH,wBAAsB,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAC9B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACtC,MAAM,CAKR;AAED;;;;;;;;GAQG;AAEH,wBAAsB,MAAM,CAC3B,WAAW,GAAE,MAAsB,EACnC,KAAK,GAAE,MAAuE,EAC9E,IAAI,GAAE,MAAa,GACjB,OAAO,CAAC,MAAM,CAAC,CA8BjB"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/cli/dev.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AASjG;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAO5C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAO/F;AA8BD;;;;;;;;;;;GAWG;AACH,wBAAsB,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAC9B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACtC,MAAM,CAKR;AAED;;;;;;;;;;GAUG;AAEH,wBAAsB,MAAM,CAC3B,WAAW,GAAE,MAAsB,EACnC,KAAK,GAAE,MAAuE,EAC9E,IAAI,GAAE,MAAa,EACnB,IAAI,GAAE,MAAoB,GACxB,OAAO,CAAC,MAAM,CAAC,CAiCjB"}

package/dist/cli/dispatch.d.ts

@@ -13,6 +13,7 @@ so the command works in any consumer project.
 */
 export type Runner = (script: string, options?: {
     port?: number;
+    host?: string;
 }) => Promise<number>;
 /**
 Runs a package.json script through pnpm and resolves with its exit code.
@@ -29,6 +30,7 @@ const code = await runScript('check');
 */
 export declare function runScript(script: string, options?: {
     port?: number;
+    host?: string;
 }): Promise<number>;
 /**
 Parses `argv` and routes it to the matching command, returning a process exit

package/dist/cli/dispatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dispatch.d.ts","sourceRoot":"","sources":["../../src/cli/dispatch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;EAYE;AAoEF,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAwHtF;;;;;;;;;;;;EAYE;AACF,wBAAsB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAW5F;AAED;;;;;;;;;;;;;;;;EAgBE;AACF,wBAAsB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,GAAE,MAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,CAsHnF"}
+{"version":3,"file":"dispatch.d.ts","sourceRoot":"","sources":["../../src/cli/dispatch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;EAYE;AAsEF,MAAM,MAAM,MAAM,GAAG,CACpB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KACtC,OAAO,CAAC,MAAM,CAAC,CAAC;AAwHrB;;;;;;;;;;;;EAYE;AACF,wBAAsB,SAAS,CAC9B,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACxC,OAAO,CAAC,MAAM,CAAC,CAajB;AAED;;;;;;;;;;;;;;;;EAgBE;AACF,wBAAsB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,GAAE,MAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,CA8HnF"}

package/dist/cli/index.js

@@ -215,6 +215,8 @@ function scaffoldProject(namespace) {
 	const files = {};
 	files["package.json"] = packageJson(namespace);
 	files["tsconfig.json"] = tsconfig();
+	files["tsconfig.test.json"] = tsconfigTest();
+	files["vitest.config.ts"] = vitestConfig();
 	files[".gitignore"] = gitignore();
 	files["opencode.jsonc"] = opencodeConfig();
 	files[".opencode/skills/components/SKILL.md"] = componentSkill(namespace, tag);
@@ -226,6 +228,7 @@ function scaffoldProject(namespace) {
 	files[`src/${base}.target.css`] = appCss(tag);
 	files[`src/${namespace}/bundle.ts`] = bundle();
 	files["src/bundle.json"] = bundleConfig(namespace);
+	files[`test/${base}.spec.ts`] = appSpec(tag);
 	return {
 		files,
 		namespace
@@ -240,10 +243,15 @@ function packageJson(namespace) {
 			dev: "mc dev",
 			build: "tsc -p tsconfig.json && mc bundle",
 			preview: "mc preview",
-			typecheck: "tsc --noEmit -p tsconfig.json"
+			typecheck: "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
+			test: "vitest run"
 		},
-		dependencies: { "@twobirds/microcomponents": "^0.11.0" },
-		devDependencies: { typescript: "^6.0.3" }
+		dependencies: { "@twobirds/microcomponents": "^0.12.1" },
+		devDependencies: {
+			typescript: "^6.0.3",
+			vitest: "^4.1.10",
+			jsdom: "^29.1.1"
+		}
 	}, null, "	");
 }
 function tsconfig() {
@@ -267,6 +275,60 @@ function tsconfig() {
 		include: ["src/**/*.ts"]
 	}, null, "	");
 }
+function tsconfigTest() {
+	return JSON.stringify({
+		compilerOptions: {
+			target: "ESNext",
+			module: "ESNext",
+			moduleResolution: "Bundler",
+			lib: [
+				"ESNext",
+				"DOM",
+				"DOM.Iterable"
+			],
+			strict: true,
+			esModuleInterop: true,
+			skipLibCheck: true,
+			noEmit: true
+		},
+		include: ["test/**/*.ts"]
+	}, null, "	");
+}
+function vitestConfig() {
+	return `import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	test: {
+		// components need a DOM: jsdom gives \`customElements\`, \`document\`, and the
+		// \`_mc\` contract the library writes, so a spec runs the real class code
+		environment: 'jsdom',
+		include: ['test/**/*.spec.ts'],
+	},
+});
+`;
+}
+function appSpec(tag) {
+	const className = kebabToPascal(tag);
+	return `import { describe, expect, it } from 'vitest';
+import { DC, parse } from '@twobirds/microcomponents';
+import { ${className} } from '../../src/${tagPath(tag)}.js';
+
+describe('${tag}', () => {
+	it('registers the starter tag in the custom element registry', () => {
+		// importing the module runs defineCE, so the tag is in the registry, and the
+		// exported class is the DC subclass behind it
+		expect(customElements.get('${tag}')).toBeDefined();
+		expect(${className}.prototype instanceof DC).toBe(true);
+	});
+
+	it('renders the title from data through parse()', () => {
+		const html = parse('<h1>{title}</h1>', { title: 'Micro Components' });
+
+		expect(html).toContain('<h1>Micro Components</h1>');
+	});
+});
+`;
+}
 function gitignore() {
 	return `node_modules/
 build/
@@ -359,11 +421,14 @@ Bubble up or down the tree only when the receiver cannot be named.
 
 \`\`\`sh
 pnpm typecheck
+pnpm test
 pnpm dev
 pnpm build
 pnpm preview
 \`\`\`
 
+Specs live in \`test/\` and run under vitest in jsdom, so component class code executes against a real DOM. Import the component from \`src/\` with a \`.js\` specifier; vitest resolves it to the \`.ts\` source.
+
 \`mc clean\` removes \`build/\`, \`public/\` and \`coverage/\`.
 
 ## API reference
@@ -391,7 +456,8 @@ pnpm dev
 The dev server runs \`tsc -w\` and serves \`build/\`, so a saved component reaches the
 browser through \`autoload()\` with no bundling. Companion \`.css\`, \`.html\` and \`.json\`
 files are mirrored into \`build/\` next to the compiled component, which is where the
-autoloader looks for them.
+autoloader looks for them. The server binds loopback, so only this machine reaches it;
+\`pnpm dev -- --host 0.0.0.0\` widens it to the LAN.
 
 ## Build
 
@@ -410,13 +476,26 @@ The bundle is driven by \`src/bundle.json\`: \`entry\` names the barrel to bundl
 pnpm preview
 \`\`\`
 
+## Test
+
+\`\`\`sh
+pnpm test
+\`\`\`
+
+Specs live in \`test/\` and run under vitest in jsdom, so component class code executes
+against a real DOM: \`customElements\`, \`document\`, and the \`_mc\` property the library
+writes. \`test/${namespace}/app.spec.ts\` is the starter spec — it asserts the tag is
+registered and that \`parse()\` renders the title from \`data\`.
+
 ## Type-check
 
 \`\`\`sh
 pnpm typecheck
 \`\`\`
 
-\`tsconfig.json\` compiles \`src/\` into \`build/\`.
+\`tsconfig.json\` compiles \`src/\` into \`build/\`; \`tsconfig.test.json\` type-checks
+\`test/\` without emitting, so a spec that imports a component is checked against the
+component's real types.
 
 ## Components
 
@@ -499,7 +578,7 @@ function appSource(namespace, tag) {
 <${tag}></${tag}>
 \`\`\`
 */
-class ${className} extends DC {
+export class ${className} extends DC {
 	static assets = ['html', 'targetCss'];
 
 	data = { title: 'Micro Components' };
@@ -1341,10 +1420,12 @@ function createDevServer(projectRoot, options) {
 * @param projectRoot Project root (defaults to the current directory).
 * @param minJs Path of `microcomponents.min.js` (defaults to this package's `dist/`).
 * @param port Dev-server port.
+* @param host Bind address. Defaults to loopback, so a dev server serving source files is
+*   not reachable off the machine. Pass an interface address to serve the LAN.
 * @returns The process exit code (the server keeps running until killed).
 */
 /* v8 ignore start — the long-running server + tsc watch is exercised by hand, not in the suite */
-async function runDev(projectRoot = process.cwd(), minJs = path.join(import.meta.dirname, "..", "microcomponents.min.js"), port = 5173) {
+async function runDev(projectRoot = process.cwd(), minJs = path.join(import.meta.dirname, "..", "microcomponents.min.js"), port = 5173, host = "127.0.0.1") {
 	const sourceRoot = path.join(projectRoot, "src");
 	const buildRoot = path.join(projectRoot, "build");
 	await mirrorInto(sourceRoot, buildRoot);
@@ -1369,8 +1450,8 @@ async function runDev(projectRoot = process.cwd(), minJs = path.join(import.meta
 		minJs,
 		port
 	});
-	server.listen(port);
-	console.log(`dev server on http://localhost:${port}/ (serving build/, tsc -w running)`);
+	server.listen(port, host);
+	console.log(`dev server on http://${host === "0.0.0.0" ? "localhost" : host}:${port}/ (serving build/, tsc -w running)`);
 	return new Promise((resolve) => {
 		tsc.on("exit", () => {
 			server.close();
@@ -1454,13 +1535,15 @@ function createPreviewServer(projectRoot, port, outDir = "public") {
 *
 * @param projectRoot Project root (defaults to the current directory).
 * @param port Preview-server port.
+* @param host Bind address. Defaults to loopback, so a preview server is not reachable off
+*   the machine. Pass an interface address to serve the LAN.
 * @returns The process exit code (the server keeps running until killed).
 */
 /* v8 ignore start — the long-running server is exercised by hand, not in the suite */
-async function runPreview(projectRoot = process.cwd(), port = 5174) {
+async function runPreview(projectRoot = process.cwd(), port = 5174, host = "127.0.0.1") {
 	const server = createPreviewServer(projectRoot, port);
-	server.listen(port);
-	console.log(`preview server on http://localhost:${port}/ (serving public/)`);
+	server.listen(port, host);
+	console.log(`preview server on http://${host === "0.0.0.0" ? "localhost" : host}:${port}/ (serving public/)`);
 	return new Promise((resolve) => {
 		server.on("close", () => resolve(0));
 	});
@@ -1486,9 +1569,9 @@ var USAGE = `mc — Micro Components build tools
 Usage:
   mc new <tag> [--css] [--html] [--target-html] [--shadow-html] [--target-css] [--shadow-css] [--js] [--dir <path>] [--force] [--dry-run]
   mc create --namespace <ns> [--dir <path>] [--force] [--dry-run]
-  mc dev [--port <n>]
+  mc dev [--port <n>] [--host <addr>]
   mc bundle
-  mc preview [--port <n>]
+  mc preview [--port <n>] [--host <addr>]
   mc clean
   mc check
   mc --version
@@ -1515,6 +1598,8 @@ Other options:
   --js         emit plain JavaScript instead of TypeScript
   --dir <path> scaffold root (default: src)
   --port <n>   dev / preview server port (default: 5173 / 5174)
+  --host <addr> dev / preview bind address (default: 127.0.0.1 — loopback only; pass
+                0.0.0.0 or a interface address to serve the LAN)
   --force      overwrite files that already exist
   --dry-run    print what would be written; touch nothing on disk
   --version    print the version of the package the CLI ships in (-v)
@@ -1670,9 +1755,9 @@ async function runScript(script, options) {
 	if (await hasScript(script)) return spawnProcess("pnpm", ["run", script]);
 	if (script === "clean") return cleanSelf();
 	if (script === "check") return checkSelf();
-	if (script === "dev") return runDev(process.cwd(), void 0, options?.port ?? 5173);
+	if (script === "dev") return runDev(process.cwd(), void 0, options?.port ?? 5173, options?.host ?? "127.0.0.1");
 	if (script === "bundle") return runBundle();
-	if (script === "preview") return runPreview(process.cwd(), options?.port ?? 5174);
+	if (script === "preview") return runPreview(process.cwd(), options?.port ?? 5174, options?.host ?? "127.0.0.1");
 	console.error(`mc: no "${script}" script in the current project`);
 	return 1;
 }
@@ -1708,6 +1793,7 @@ async function main(argv, run = runScript) {
 			dir: { type: "string" },
 			namespace: { type: "string" },
 			port: { type: "string" },
+			host: { type: "string" },
 			force: { type: "boolean" },
 			"dry-run": { type: "boolean" },
 			help: {
@@ -1791,9 +1877,15 @@ async function main(argv, run = runScript) {
 		console.log(`\nproject "${namespace}" created in ${root}/ — run: cd ${root} && pnpm install && pnpm dev`);
 		return 0;
 	}
-	if (command === "dev") return run("dev", { port: values.port ? Number(values.port) : 5173 });
+	if (command === "dev") return run("dev", {
+		port: values.port ? Number(values.port) : 5173,
+		host: values.host
+	});
 	if (command === "bundle") return run("bundle");
-	if (command === "preview") return run("preview", { port: values.port ? Number(values.port) : 5174 });
+	if (command === "preview") return run("preview", {
+		port: values.port ? Number(values.port) : 5174,
+		host: values.host
+	});
 	if (command === "clean") return run("clean");
 	if (command === "check") return run("check");
 	console.error(`mc: unknown command "${command}"\n\n${USAGE}`);

package/dist/cli/preview.d.ts

@@ -42,7 +42,9 @@ export declare function createPreviewServer(projectRoot: string, port: number, o
  *
  * @param projectRoot Project root (defaults to the current directory).
  * @param port Preview-server port.
+ * @param host Bind address. Defaults to loopback, so a preview server is not reachable off
+ *   the machine. Pass an interface address to serve the LAN.
  * @returns The process exit code (the server keeps running until killed).
  */
-export declare function runPreview(projectRoot?: string, port?: number): Promise<number>;
+export declare function runPreview(projectRoot?: string, port?: number, host?: string): Promise<number>;
 //# sourceMappingURL=preview.d.ts.map

package/dist/cli/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/cli/preview.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AAMjG;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKvF;AA6BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAW,GAAG,MAAM,CAKhG;AAED;;;;;;GAMG;AAEH,wBAAsB,UAAU,CAC/B,WAAW,GAAE,MAAsB,EACnC,IAAI,GAAE,MAAa,GACjB,OAAO,CAAC,MAAM,CAAC,CAOjB"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/cli/preview.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAsC,KAAK,MAAM,EAAuB,MAAM,WAAW,CAAC;AAMjG;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKvF;AA6BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAW,GAAG,MAAM,CAKhG;AAED;;;;;;;;GAQG;AAEH,wBAAsB,UAAU,CAC/B,WAAW,GAAE,MAAsB,EACnC,IAAI,GAAE,MAAa,EACnB,IAAI,GAAE,MAAoB,GACxB,OAAO,CAAC,MAAM,CAAC,CAUjB"}

package/dist/docs/cli.d.ts

@@ -101,7 +101,7 @@ mc check
 Reports the version of the installed library, not the version of the project it runs in.
 
 ```sh
-mc --version      # 0.11.0
+mc --version      # 0.12.1
 ```
 
 ## mc --help

package/dist/helpers.min.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i,a=!1){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}return n.addEventListener(e(n,r),i,{capture:!1,once:a}),i}}var n=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function r(t,i,a={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>r(e,i,a,o));return}let c=/^_mc/.test(i)?i:e(t,i),l=s||new n,u=new CustomEvent(c,{detail:{data:a,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&r(t.parentElement,c,a,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)r(e,c,a,`ld`)})}function i(){return typeof window<`u`&&window.document!==void 0}function a(e){return typeof e==`object`&&!!e&&e.constructor===Object}function o(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],s=e[i];a(s)?t[i]=o(s):t[i]=s}return t}function s(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=s(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?o(n):n}function c(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!c(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!c(n[t],r[t]))return!1}return!0}function l(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?a(i)?l(r.slice(1),i):void 0:i}function u(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=u(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=l(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>u(e,t));else if(a(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=u(n[e],t))})}return e}function d(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function f(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function p(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function m(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function h(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var g=new WeakMap;function _(e,t){let n=g.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),g.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function v(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:_(document,t[i]);break;case`targetCss`:_(document,t[i]);break;case`shadowCss`:_(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],b(r,e);break;case`targetHtml`:n.innerHTML=t[i],b(n,e);break}})}function y(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function b(e,n){let i=[...e.querySelectorAll(`*`)];for(let e of i){if(!(e instanceof HTMLElement))continue;let i=[...e.attributes];for(let a of i){let i=a.name.toLowerCase();if(!(`on`+i in e))continue;let o=a.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(a.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?t(e,i,()=>n.trigger(c,u)):t(e,i,()=>r(s,c,u))}}}export{b as bindTemplateEvents,h as copyGettersSetters,p as debounce,c as deepEqual,s as flattenObject,m as htmlToElements,_ as injectCSS,i as isBrowser,a as isNativeObject,d as kebabToPascal,y as loadAssets,l as nameSpace,u as parse,f as pascalToKebab,v as processAssets,o as sortObject};

package/dist/mcp/api.json

@@ -1,6 +1,6 @@
 {
-  "libraryVersion": "0.11.0",
-  "exportedCount": 57,
+  "libraryVersion": "0.12.1",
+  "exportedCount": 59,
   "entries": {
     "MC": {
       "name": "MC",
@@ -358,6 +358,16 @@
         }
       ]
     },
+    "makePlaceholders": {
+      "name": "makePlaceholders",
+      "kind": "function",
+      "group": "State",
+      "file": "src/state/placeholders.ts",
+      "signatures": [
+        "export function makePlaceholders(element: HTMLElement | DocumentFragment | ShadowRoot): void {"
+      ],
+      "description": "Applies placeholder support to an element and its descendants.\n\nThis function scans the provided target for elements containing placeholders\nand attaches a `Placeholders` controller instance to each one if not already present."
+    },
     "getMcEventName": {
       "name": "getMcEventName",
       "kind": "function",
@@ -614,6 +624,22 @@
         }
       ]
     },
+    "pascalToKebab": {
+      "name": "pascalToKebab",
+      "kind": "function",
+      "group": "Helpers",
+      "file": "src/utils/helpers.ts",
+      "signatures": [
+        "export function pascalToKebab(str: string) {"
+      ],
+      "description": "Converts a PascalCase string to kebab-case.\nExample: 'MyComponentName' -> 'my-component-name'",
+      "examples": [
+        {
+          "title": "",
+          "code": "console.log(pascalToKebab('MyElement'));"
+        }
+      ]
+    },
     "debounce": {
       "name": "debounce",
       "kind": "function",

package/dist/mcp/concepts/mc-types.md

@@ -124,14 +124,15 @@ the namespaced variables of their composed parent.
 Each custom element (`.ts`/`.js`) ships with optional companion files sharing the same
 base name. The suffix encodes the structural sub-pattern (§1a–1b) and the styling target.
 
-| Suffix         | Purpose                                                               | Styling Target                                       |
-| -------------- | --------------------------------------------------------------------- | ---------------------------------------------------- |
-| `.css`         | CSS custom properties (variable defaults) only — no structural styles | N/A (token definitions)                              |
-| `.target.css`  | Structural style rules for target DOM (`innerHTML`)                   | Global document scope via `injectCSS(document, ...)` |
-| `.shadow.css`  | Structural style rules for shadow DOM                                 | Shadow root via `injectCSS(shadowRoot, ...)`         |
-| `.target.html` | HTML template injected into `this.target.innerHTML`                   | N/A (markup)                                         |
-| `.shadow.html` | HTML template injected into `shadowRoot.innerHTML`                    | N/A (markup)                                         |
-| `.json`        | Static data files imported by the component                           | N/A (data)                                           |
+| Suffix         | Purpose                                                                 | Styling Target                                       |
+| -------------- | ----------------------------------------------------------------------- | ---------------------------------------------------- |
+| `.css`         | CSS custom properties (variable defaults) only — no structural styles   | N/A (token definitions)                              |
+| `.target.css`  | Structural style rules for target DOM (`innerHTML`)                     | Global document scope via `injectCSS(document, ...)` |
+| `.shadow.css`  | Structural style rules for shadow DOM                                   | Shadow root via `injectCSS(shadowRoot, ...)`         |
+| `.target.html` | HTML template injected into `this.target.innerHTML`                     | N/A (markup)                                         |
+| `.shadow.html` | HTML template injected into `shadowRoot.innerHTML`                      | N/A (markup)                                         |
+| `.html`        | HTML template loaded as a plain string; the component injects it itself | N/A (markup)                                         |
+| `.json`        | Static data files imported by the component                             | N/A (data)                                           |
 
 Companion files follow the same directory structure as their source file. A component at
 `src/shop/sidebar.ts` has companions at `src/shop/sidebar.target.html`,
@@ -139,6 +140,12 @@ Companion files follow the same directory structure as their source file. A comp
 `loadAssets()` / `processAssets()`; keep the `.ts` source focused on logic only —
 constructor, lifecycle, event handlers, state.
 
+**Declarative attributes are bound by the asset pipeline for `targetHtml` and `shadowHtml`
+only.** `processAssets()` calls `bindTemplateEvents()` after injecting those two. A plain
+`html` asset arrives as a string and is injected by the component, so its `click=` / `change=`
+attributes are inert until the component binds them itself — `oneInit()` calls
+`bindTemplateEvents(this.target, this)` right after the parse, as `<todo-item>` does.
+
 ### Inline Templates — Escape Hatch
 
 A simple `const template` string constant is allowed **only** when the component has no

package/dist/microcomponents.d.ts

@@ -6,4 +6,5 @@ export * from './utils/events.js';
 export * from './core/elements.js';
 export * from './state/observables.js';
 export * from './state/formValues.js';
+export * from './state/placeholders.js';
 //# sourceMappingURL=microcomponents.d.ts.map

package/dist/microcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}

package/dist/microcomponents.js

@@ -2987,4 +2987,4 @@ formValues: function(target, propName) {
 	} });
 }
 //#endregion
-export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, nameSpace, observe, observePlugin, off, on, one, parse, pascalToKebab, processAssets, sortObject, trigger, trueEventName };
+export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, makePlaceholders, nameSpace, observe, observePlugin, off, on, one, parse, pascalToKebab, processAssets, sortObject, trigger, trueEventName };

package/dist/microcomponents.min.js

@@ -1 +1 @@
-function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?c(i)?f(r.slice(1),i):void 0:i}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>p(e,t));else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function g(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var v=new WeakMap;function y(e,t){let n=v.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),v.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function b(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:y(document,t[i]);break;case`targetCss`:y(document,t[i]);break;case`shadowCss`:y(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],S(r,e);break;case`targetHtml`:n.innerHTML=t[i],S(n,e);break}})}function x(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function S(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function C(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function te(e,t,n={}){let r=e;`_mc`in e||(r._mc=new O(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function ne(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function w(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function T(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function re(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function E(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var D=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof O&&this.constructor!==O&&T(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=x(t._originalTag||(this instanceof O?this.target.tagName.toLowerCase():h(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},ie=class extends D{constructor(e){super(e)}},O=class e extends D{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){b(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{b(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),w(this)}):w(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return te(e,t,n)}static remove(e,t){ne(e,t)}static get(e,t,n){if(!C(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=E(this.target,e);for(;n;)t.push(n),n=E(n.target,e);return t}closest(e){return E(this.target,e)}children(e){let t=re(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function k(e){return e.split(`-`).join(`/`)}function A(e){return`./`+k(e)+`.js`}var j=new Set;function M(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc~="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{O.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!C(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function N(e){if(j.has(e))return;j.add(e);let t=A(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(M(e)),n.addEventListener(`load`,t=>{j.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,n=>{console.error(`could not load DC code from`,t),j.delete(e)}),document.head.append(n)}function P(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!j.has(e.tagName.toLowerCase())).forEach(e=>{N(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!j.has(e)&&!t?N(e):t&&M(e)()})})}var F=null,I=null;function L(e=!0){return e?F?!0:(F=new MutationObserver(P),I=setTimeout(()=>{I=null,F&&(F.observe(document.body,{childList:!0,subtree:!0}),P())},5),window.autoload??=L,!0):(I&&=(clearTimeout(I),null),F&&=(F.disconnect(),null),j.clear(),!1)}L.state=j;function ae(e,t){return Object.defineProperty(t,"name",{value:e})}function oe(e){return class extends e{constructor(...e){super(...e)}}}function R(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof D))return customElements.define(e,t),t;let o=ae(a,class extends oe(i){constructor(e){super(),r||this.attachInternals(),O.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return r||(o.formAssociated=!0),customElements.define(e,o,{extends:r}),R.list||=[],R.list.push(e),o}function z(e){return customElements.get(e)}function B(){return R.list??[]}function V(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var H=[`INPUT`,`SELECT`,`TEXTAREA`],U=class extends O{data={};#e=``;#t=!1;constructor(e){super(e),V(e).forEach(e=>this.data[e]=``),X(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!H.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function W(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!V(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function G(e){W(e).forEach(e=>{e?._mc?._placeholders||O.add(e,`_placeholders`,new U(e))})}function K(e){return typeof e==`object`&&!!e}var q={};function se(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],K(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!s())return this;if(K(this.valueOf())){G(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=K(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return q[n]=r,r}function J(e){return q[e.constructor.name]||se(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(K(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(K(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(O);var ce=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]].filter(t=>t.getAttribute(`value`)===e).shift();t&&(t.checked=!0)}},ue=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},de=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},fe=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},pe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},me=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(ce(e)){case`input`:switch(e.type){case`radio`:r=new le(e);break;case`checkbox`:r=new ue(e);break;default:r=new de(e)}break;case`select`:r=new fe(e);break;case`textarea`:r=new pe(e);break}if(r){let i=r;O.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=me(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function he(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,O as DC,ie as MC,D as McBase,L as autoload,S as bindTemplateEvents,_ as copyGettersSetters,g as debounce,d as deepEqual,R as defineCE,u as flattenObject,he as formValuePlugin,$ as formValues,z as getCE,e as getMcEventName,ee as htmlToElements,y as injectCSS,Y as isAlreadyObserved,s as isBrowser,C as isMcHost,c as isNativeObject,m as kebabToPascal,B as listCE,x as loadAssets,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,h as pascalToKebab,b as processAssets,l as sortObject,o as trigger,t as trueEventName};
+function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!n||!r[0]||!(r[0]in n))return;let i=n[r[0]];return r.length>1?c(i)?f(r.slice(1),i):void 0:i}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(Array.isArray(e))return e.map(e=>p(e,t));else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function g(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var v=new WeakMap;function y(e,t){let n=v.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),v.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function b(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:y(document,t[i]);break;case`targetCss`:y(document,t[i]);break;case`shadowCss`:y(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],S(r,e);break;case`targetHtml`:n.innerHTML=t[i],S(n,e);break}})}function x(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function S(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function C(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function w(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function te(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function T(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function E(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function ne(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function D(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var O=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof k&&this.constructor!==k&&E(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=x(t._originalTag||(this instanceof k?this.target.tagName.toLowerCase():h(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},re=class extends O{constructor(e){super(e)}},k=class e extends O{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){b(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{b(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),T(this)}):T(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return w(e,t,n)}static remove(e,t){te(e,t)}static get(e,t,n){if(!C(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=D(this.target,e);for(;n;)t.push(n),n=D(n.target,e);return t}closest(e){return D(this.target,e)}children(e){let t=ne(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function A(e){return e.split(`-`).join(`/`)}function j(e){return`./`+A(e)+`.js`}var M=new Set;function N(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc~="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!C(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function P(e){if(M.has(e))return;M.add(e);let t=j(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(N(e)),n.addEventListener(`load`,t=>{M.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,n=>{console.error(`could not load DC code from`,t),M.delete(e)}),document.head.append(n)}function F(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!M.has(e.tagName.toLowerCase())).forEach(e=>{P(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!M.has(e)&&!t?P(e):t&&N(e)()})})}var I=null,L=null;function R(e=!0){return e?I?!0:(I=new MutationObserver(F),L=setTimeout(()=>{L=null,I&&(I.observe(document.body,{childList:!0,subtree:!0}),F())},5),window.autoload??=R,!0):(L&&=(clearTimeout(L),null),I&&=(I.disconnect(),null),M.clear(),!1)}R.state=M;function ie(e,t){return Object.defineProperty(t,"name",{value:e})}function ae(e){return class extends e{constructor(...e){super(...e)}}}function z(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof O))return customElements.define(e,t),t;let o=ie(a,class extends ae(i){constructor(e){super(),r||this.attachInternals(),k.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return r||(o.formAssociated=!0),customElements.define(e,o,{extends:r}),z.list||=[],z.list.push(e),o}function oe(e){return customElements.get(e)}function B(){return z.list??[]}function V(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var H=[`INPUT`,`SELECT`,`TEXTAREA`],U=class extends k{data={};#e=``;#t=!1;constructor(e){super(e),V(e).forEach(e=>this.data[e]=``),X(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!H.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function W(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!V(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function G(e){W(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new U(e))})}function K(e){return typeof e==`object`&&!!e}var q={};function se(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],K(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!s())return this;if(K(this.valueOf())){G(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=K(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return q[n]=r,r}function J(e){return q[e.constructor.name]||se(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(K(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(K(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(k);var ce=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]].filter(t=>t.getAttribute(`value`)===e).shift();t&&(t.checked=!0)}},ue=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},de=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},fe=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},pe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},me=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(ce(e)){case`input`:switch(e.type){case`radio`:r=new le(e);break;case`checkbox`:r=new ue(e);break;default:r=new de(e)}break;case`select`:r=new fe(e);break;case`textarea`:r=new pe(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=me(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function he(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,re as MC,O as McBase,R as autoload,S as bindTemplateEvents,_ as copyGettersSetters,g as debounce,d as deepEqual,z as defineCE,u as flattenObject,he as formValuePlugin,$ as formValues,oe as getCE,e as getMcEventName,ee as htmlToElements,y as injectCSS,Y as isAlreadyObserved,s as isBrowser,C as isMcHost,c as isNativeObject,m as kebabToPascal,B as listCE,x as loadAssets,G as makePlaceholders,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,h as pascalToKebab,b as processAssets,l as sortObject,o as trigger,t as trueEventName};

package/dist/placeholders.min.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function f(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var p=new WeakMap;function m(e,t){let n=p.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),p.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function h(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:m(document,t[i]);break;case`targetCss`:m(document,t[i]);break;case`shadowCss`:m(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],_(r,e);break;case`targetHtml`:n.innerHTML=t[i],_(n,e);break}})}function g(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function _(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function v(e,t){if(typeof HTMLElement>`u`||!(e instanceof HTMLElement)||!(`_mc`in e))return!1;if(t===void 0)return!0;let n=e._mc;return typeof n!=`object`||!n?!1:t in n}function y(e,t,n={}){let r=e;`_mc`in e||(r._mc=new E(e));let i=r._mc;return t.length&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function b(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function x(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function S(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function C(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function w(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var T=class{#e;static _assets={};static assets=[];static _assetsPromise;constructor(e){this.#e=new WeakRef(e||{});let t=this.constructor;this instanceof E&&this.constructor!==E&&S(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=g(t._originalTag||(this instanceof E?this.target.tagName.toLowerCase():d(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this.#e.deref()}get assets(){return this.constructor._assets||{}}},E=class e extends T{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){h(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{h(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),x(this)}):x(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return y(e,t,n)}static remove(e,t){b(e,t)}static get(e,t,n){if(!v(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=w(this.target,e);for(;n;)t.push(n),n=w(n.target,e);return t}closest(e){return w(this.target,e)}children(e){let t=C(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function D(e){return typeof e==`object`&&!!e}var O={};function k(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],D(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(!o())return this;if(D(this.valueOf())){L(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}notify(e){let t=D(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return O[n]=r,r}function A(e){return O[e.constructor.name]||k(e)}function j(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function M(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!j(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(A(i))(i),o=!1,s=function(){o||(o=!0,queueMicrotask(function(){o=!1,a.notify()}))};Object.defineProperty(e,t,{enumerable:!0,get(){if(D(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||s()})}return a},set(e){if(typeof e==typeof a.valueOf())if(D(a.valueOf())&&!(a.valueOf()instanceof Array))j(a)||(a=new(A(e))(structuredClone(Object.assign({},e))),f(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(A(e))(e),a.callbacks=n,s())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function N(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var P=[`INPUT`,`SELECT`,`TEXTAREA`],F=class extends E{data={};#e=``;#t=!1;constructor(e){super(e),N(e).forEach(e=>this.data[e]=``),M(this),this.#r()}#n(e,t,n){t.replace(/[\{\}]/g,``);let r=t.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);return e.replace(new RegExp(r,`g`),n)}#r(){let e=this.target;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))});let t=[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g));t.length&&(this.#e=e.getAttribute(`style`)||``,t.forEach(t=>{let n=t.nodeValue??``,r=new Set(n.match(/\{[^\{\}]*\}/g));this.data.subscribe((n=>i=>{let a=n;r.forEach(e=>{a=this.#n(a,e,String(i[e.replace(/[\{\}]/g,``)]))}),this.#t||(this.#t=!0,this.#e?e.style=this.#e:e.removeAttribute(`style`)),t.nodeValue=a})(n)),!P.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)}))}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function I(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!N(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function L(e){I(e).forEach(e=>{e?._mc?._placeholders||E.add(e,`_placeholders`,new F(e))})}export{L as makePlaceholders};