:docs:

docs_src/components/code.html.js

@@ -14,6 +14,7 @@ ${host}{
 	--shiki-token-punctuation: var(--code);
 	--shiki-token-link: #EE0000;
 	white-space: pre;
+	overflow: scroll;
 }
 ${host}[data-js=todo]{
 	border: 1px solid var(--border);
@@ -30,11 +31,13 @@ import { el } from "deka-dom-el";
  * @param {object} attrs
  * @param {string} [attrs.id]
  * @param {string} [attrs.className]
- * @param {string} attrs.content Example code file path
+ * @param {URL} [attrs.src] Example code file path
+ * @param {string} [attrs.content] Example code
  * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
  * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
  * */
-export function code({ id, content, language= "js", className= "code", page_id }){
+export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){
+	if(src) content= s.cat(src);
 	let dataJS;
 	if(page_id){
 		registerClientPart(page_id);

docs_src/components/examples/elements/intro.js

@@ -0,0 +1,10 @@
+// when NPM
+import { assign, el, elNS } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+// “internal” utils
+import {
+	assignAttribute,
+	classListDeclarative,
+	chainableAppend
+} from "deka-dom-el";

docs_src/components/examples/events/intro.js

@@ -0,0 +1,7 @@
+// when NPM
+import { on, dispatchEvent } from "deka-dom-el";
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+
+/**
+ * @type {ddeElementAddon}
+ * */

docs_src/components/examples/signals/intro.js

@@ -1,8 +1,10 @@
+// when NPM
 import { S } from "deka-dom-el/signals";
-// α — `signal` represents a reactive value
-const signal= S(0);
-// β — just reacts on signal changes
-S.on(signal, console.log);
-// γ — just updates the value
-signal(signal()+1);
-setInterval(()=> signal(signal()+1), 5000);
+// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+
+/**
+ * @type {ddeSignal}
+ * */
+/**
+ * @type {ddeActions}
+ * */

docs_src/components/examples/signals/signals.js

@@ -0,0 +1,8 @@
+import { S } from "deka-dom-el/signals";
+// α — `signal` represents a reactive value
+const signal= S(0);
+// β — just reacts on signal changes
+S.on(signal, console.log);
+// γ — just updates the value
+signal(signal()+1);
+setInterval(()=> signal(signal()+1), 5000);

docs_src/components/mnemonicUl.html.js

@@ -0,0 +1,19 @@
+import { styles } from "../ssr.js";
+import { h3 } from "./pageUtils.html.js";
+const host= ".notice";
+styles.css`
+${host} h3{
+	margin-top: 0;
+}
+`;
+import { el, simulateSlots } from "deka-dom-el";
+/** @param {Object} props @param {string} props.textContent */
+export function mnemonicUl({ textContent= "" }){
+	if(textContent) textContent= " – "+textContent
+	return simulateSlots(el("div", { className: "notice" }).append(
+		el(h3, "Mnemonic"+textContent),
+		el("ul").append(
+			el("slot")
+		)
+	));
+}