🚀 🚧 improvements (handlign special cases) + docs

docs_src/components/example.html.js

@@ -1,12 +1,12 @@
-let loaded= false;
+let is_register= false;
 import { styles } from "../index.css.js";
 export const css= styles().scope(example).css`
 :host{
 	--body-max-width: 80rem;
-	height: 20rem;
+	height: 25rem;
 }
 `
-import { el } from "../../jsdom.js";
+import { el } from "deka-dom-el";
 export function example({ src, language= "javascript" }){
 	register();
 	const cwd= "components";
@@ -32,12 +32,12 @@ function elCode({ id, content }){
 		files: [{ name: ".js", content }],
 		toolbar: false
 	});
-	return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${options}));`);
+	return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
 }
 function register(){
-	if(loaded) return;
+	if(is_register) return;
 	document.head.append(
 		el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
 	);
-	loaded= true;
+	is_register= true;
 }

docs_src/index.css.js

@@ -30,7 +30,7 @@ export function styles(){ return Object.assign(Object.create(s), { content: "" }
 export const common= css`
 :root {
 	color-scheme: dark light;
-	--body-max-width: 40rem;
+	--body-max-width: 45rem;
 }
 *, ::before, ::after { box-sizing: border-box; }
 body > * {

docs_src/index.html.js

@@ -1,4 +1,4 @@
-import { el } from "../jsdom.js";
+import { el } from "deka-dom-el";
 import { head as headCommon } from "./layout/head.html.js";
 export function head(pkg, path_target){
 	return headCommon({
@@ -43,7 +43,7 @@ export function body(pkg){
 			}),
 			".",
 		),
-		example({ src: "./components/examples/helloWorld.js" })
+		el(example, { src: "./components/examples/helloWorld.js" })
 	);
 }
 function pageName(pkg){

docs_src/layout/head.html.js

@@ -1,4 +1,4 @@
-import { el } from "../../jsdom.js";
+import { el } from "deka-dom-el";
 /**
  * @param {object} def
  * @param {string} def.id Page `id` is used as stylesheet name.