@trunkjs/content-pane 1.0.9 → 1.0.11

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.11 (2025-12-11)
+
+This was a version bump only for content-pane to align it with other projects, there were no code changes.
+
+## 1.0.10 (2025-11-11)
+
+This was a version bump only for content-pane to align it with other projects, there were no code changes.
+
 ## 1.0.9 (2025-11-10)
 
 This was a version bump only for content-pane to align it with other projects, there were no code changes.

package/README_2.md

@@ -0,0 +1,134 @@
+# TrunkJS Content-Pane
+
+Das `<tj-content-pane>` Element übernimmt zwei Aufgaben: 
+
+- Scritt 1: Es baut aus einer flachen HTML Struktur (H1-6, p, hr etc) eine Baumstruktur auf.
+- Scritt 2: Es ändert die tag-Names und Attribute der Elemente basierend auf den `layout` Attributen.
+
+
+## Schritt 1: Baumstruktur aufbauen
+
+Basierend auf dem `I`-Index baut die Komponente z.B. aus einer serverseitig
+generierten flachen HTML Struktur eine Baumstruktur auf
+
+| Element                | I-Index         |
+|------------------------|-----------------|
+| H1,H2                  | 2               |
+| H3                     | 3               |
+| H4                     | 4               |
+| H5                     | 5               |
+| H6                     | 6               |
+| hr mit layout-attribut | letzter I + 0.5 |
+
+Dabei werden Element wie folgt verschachtelt:
+
+```text
+i1
+    i2
+       i2.5
+            i3
+            i3
+    i2
+        i3
+        i4
+        i3
+```
+
+### Übertragen von Attributen
+
+Attribute wie 'layout' und mit 'section-' geprefixte Attribute werden auf das `<section>` Element übertragen.
+
+Beispiel:
+
+```markdown
+## Header 2
+{: layout="#id1.class1" section-class="abc"}
+````
+
+Wird zu:
+
+```html
+<section layout="#id1.class1" class="abc">
+    <h2>Header 2</h2>
+</section>
+```
+
+***Achtung: In diesem Schritt werden die Tags noch nicht verändert!*** Dies erfolgt erst im Layout-Schritt.
+
+### Benutzerdefiniert I-Layer
+
+Über das `layout` Attribut kann ein benutzerdefinierter I-Layer definiert werden.
+
+Beispiel:
+
+```markdown
+## Header 2
+{: layout="3;"}
+```
+Dies würde das Element in den I-Layer 3 verschieben.
+
+### Das HR-Element
+
+Standardmäßig wird ein `<hr>` nicht behandelt, außer es hat ein layout-Attribut.
+
+Wenn kein dedizierter I-Layer angegeben ist, wird der I-Layer des vorherigen Elements + 0.5 verwendet.
+
+
+## Schritt 2: Apply-Layouts
+
+In diesem Schritt werden die layout-Attribute (ohne I-Layer) ausgewertet und die Elemente entsprechend umgewandelt.
+
+Beispiel:
+
+````markdown
+## Header 2
+{: layout="custom-element#id1.class1[slot=slotname]"}
+````
+
+entpsricht:
+
+```html
+<section layout="custom-element#id1.class1[slot=slotname]">
+    <h2>Header 2</h2>
+</section>
+``` 
+Wird zu: (*transformiert durch applyLayout()*)
+
+```html
+<custom-element class="class1" id="id1" slot="slotname">
+    <h2>Header 2</h2>   
+</custom-element>
+``` 
+
+### Verschachtelte Layouts
+
+z.B. sollen Layout-Elemente die darunterliegenden Elemente verändern:
+
+- Automatisches zuweisen von `slot`-Attributen
+- Automatisches zuweisen von layout-Attributen
+
+
+#### Nutzung des `SubLayoutApplyMixin()`
+
+
+Das `SubLayoutApplyMixin()` kann genutzt werden, um verschachtelte Layouts zu realisieren.
+Es analysiert nach dem update() die slot-Elemente im Shadow-DOM. Selektiert werden Slot-elemente mit `data-query` Attribut.
+
+Beispiel:
+
+```javascript
+class CustomElement extends SubLayoutApplyMixin(LitElement) {
+    ...
+    render() {
+        return html`
+            <slot data-query=":scope > h2,h3,h4" name="header"></slot>
+            <slot data-query=":scope > section" data-set-attribute-layout="nte-card"></slot>
+        `;
+    }
+}
+```
+
+##### data-query
+
+Data Query kann ein oder Mehrere durch `|` getrennte CSS-Selektoren enthalten. Das erste Element,
+das gefunden wird, wird verwendet.

package/components/tj-content-pane/TjContentPane.d.ts

@@ -1,9 +1,9 @@
 import { ReactiveElement } from 'lit';
 declare const ContentAreaElement2_base: (abstract new (...args: any[]) => {
-    "__#2898@#debugCached": boolean | null;
-    "__#2898@#myElementId": number;
+    "__#3383@#debugCached": boolean | null;
+    "__#3383@#myElementId": number;
     invalidateDebugCache(): void;
-    "__#2898@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
+    "__#3383@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
     readonly _debug: boolean;
     getLogger(instanceId?: string): import('../../../../browser-utils/src/index.ts').Logger;
     log(...args: any[]): void;
@@ -13,6 +13,7 @@ declare const ContentAreaElement2_base: (abstract new (...args: any[]) => {
 }) & typeof ReactiveElement;
 export declare class ContentAreaElement2 extends ContentAreaElement2_base {
     static get is(): string;
+    accessor skipLayout: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
     constructor();
     arrange(): void;

package/index.d.ts

@@ -2,3 +2,4 @@ export * from './components/tj-content-pane/TjContentPane';
 export * from './lib/apply-layout';
 export * from './lib/attrAssign';
 export * from './lib/SectionTreeBuilder';
+export * from './mixins/SubLayoutApplyMixin';

package/index.js

@@ -1,33 +1,33 @@
-import { create_element as F, LoggingMixin as U, Stopwatch as X, waitForDomContentLoaded as Y } from "@trunkjs/browser-utils";
-import { html as Z, unsafeCSS as ee, LitElement as te, ReactiveElement as re } from "lit";
-import { customElement as R, property as ne } from "lit/decorators.js";
-const oe = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
-var ie = Object.create, I = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, W = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), y = (e) => {
+import { create_element as V, LoggingMixin as ae, Stopwatch as se, waitForDomContentLoaded as ce } from "@trunkjs/browser-utils";
+import { html as le, unsafeCSS as de, LitElement as ue, ReactiveElement as he } from "lit";
+import { customElement as J, property as K } from "lit/decorators.js";
+const pe = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
+var fe = Object.create, P = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, U = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), A = (e) => {
   throw TypeError(e);
-}, se = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, z = (e, t) => I(e, "name", { value: t, configurable: !0 }), ce = (e) => [, , , ie((e == null ? void 0 : e[W("metadata")]) ?? null)], j = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], w = (e) => e !== void 0 && typeof e != "function" ? y("Function expected") : e, le = (e, t, n, o, r) => ({ kind: j[e], name: t, metadata: o, addInitializer: (i) => n._ ? y("Already initialized") : r.push(w(i || null)) }), de = (e, t) => se(t, W("metadata"), e[3]), E = (e, t, n, o) => {
-  for (var r = 0, i = e[t >> 1], s = i && i.length; r < s; r++) t & 1 ? i[r].call(n) : o = i[r].call(n, o);
+}, ve = (e, t, r) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, D = (e, t) => P(e, "name", { value: t, configurable: !0 }), ge = (e) => [, , , fe((e == null ? void 0 : e[U("metadata")]) ?? null)], X = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], k = (e) => e !== void 0 && typeof e != "function" ? A("Function expected") : e, ye = (e, t, r, o, i) => ({ kind: X[e], name: t, metadata: o, addInitializer: (a) => r._ ? A("Already initialized") : i.push(k(a || null)) }), me = (e, t) => ve(t, U("metadata"), e[3]), L = (e, t, r, o) => {
+  for (var i = 0, a = e[t >> 1], s = a && a.length; i < s; i++) t & 1 ? a[i].call(r) : o = a[i].call(r, o);
   return o;
-}, D = (e, t, n, o, r, i) => {
-  var s, c, h, l, d, a = t & 7, f = !!(t & 8), u = !!(t & 16), v = a > 3 ? e.length + 1 : a ? f ? 1 : 2 : 0, L = j[a + 5], P = a > 3 && (e[v - 1] = []), Q = e[v] || (e[v] = []), _ = a && (!u && !f && (r = r.prototype), a < 5 && (a > 3 || !u) && ae(a < 4 ? r : { get [n]() {
-    return M(this, i);
-  }, set [n](p) {
-    return O(this, i, p);
-  } }, n));
-  a ? u && a < 4 && z(i, (a > 2 ? "set " : a > 1 ? "get " : "") + n) : z(r, n);
-  for (var x = o.length - 1; x >= 0; x--)
-    l = le(a, n, h = {}, e[3], Q), a && (l.static = f, l.private = u, d = l.access = { has: u ? (p) => ue(r, p) : (p) => n in p }, a ^ 3 && (d.get = u ? (p) => (a ^ 1 ? M : pe)(p, r, a ^ 4 ? i : _.get) : (p) => p[n]), a > 2 && (d.set = u ? (p, C) => O(p, r, C, a ^ 4 ? i : _.set) : (p, C) => p[n] = C)), c = (0, o[x])(a ? a < 4 ? u ? i : _[L] : a > 4 ? void 0 : { get: _.get, set: _.set } : r, l), h._ = 1, a ^ 4 || c === void 0 ? w(c) && (a > 4 ? P.unshift(c) : a ? u ? i = c : _[L] = c : r = c) : typeof c != "object" || c === null ? y("Object expected") : (w(s = c.get) && (_.get = s), w(s = c.set) && (_.set = s), w(s = c.init) && P.unshift(s));
-  return a || de(e, r), _ && I(r, n, _), u ? a ^ 4 ? i : _ : r;
-}, S = (e, t, n) => t.has(e) || y("Cannot " + n), ue = (e, t) => Object(t) !== t ? y('Cannot use the "in" operator on this value') : e.has(t), M = (e, t, n) => (S(e, t, "read from private field"), n ? n.call(e) : t.get(e)), he = (e, t, n) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), O = (e, t, n, o) => (S(e, t, "write to private field"), o ? o.call(e, n) : t.set(e, n), n), pe = (e, t, n) => (S(e, t, "access private method"), n), B, b, H, g, $;
-H = [R("tj-error-element")];
-class m extends (b = te, B = [ne({ type: String, reflect: !0 })], b) {
-  constructor(t = "An error occurred", n) {
-    super(), this.originalCode = void 0, he(this, $, E(g, 8, this)), E(g, 11, this), this.message = t, this.originalCode = n;
+}, Y = (e, t, r, o, i, a) => {
+  var s, c, h, l, f, n = t & 7, _ = !!(t & 8), u = !!(t & 16), v = n > 3 ? e.length + 1 : n ? _ ? 1 : 2 : 0, x = X[n + 5], E = n > 3 && (e[v - 1] = []), N = e[v] || (e[v] = []), p = n && (!u && !_ && (i = i.prototype), n < 5 && (n > 3 || !u) && _e(n < 4 ? i : { get [r]() {
+    return B(this, a);
+  }, set [r](d) {
+    return H(this, a, d);
+  } }, r));
+  n ? u && n < 4 && D(a, (n > 2 ? "set " : n > 1 ? "get " : "") + r) : D(i, r);
+  for (var g = o.length - 1; g >= 0; g--)
+    l = ye(n, r, h = {}, e[3], N), n && (l.static = _, l.private = u, f = l.access = { has: u ? (d) => we(i, d) : (d) => r in d }, n ^ 3 && (f.get = u ? (d) => (n ^ 1 ? B : Ae)(d, i, n ^ 4 ? a : p.get) : (d) => d[r]), n > 2 && (f.set = u ? (d, y) => H(d, i, y, n ^ 4 ? a : p.set) : (d, y) => d[r] = y)), c = (0, o[g])(n ? n < 4 ? u ? a : p[x] : n > 4 ? void 0 : { get: p.get, set: p.set } : i, l), h._ = 1, n ^ 4 || c === void 0 ? k(c) && (n > 4 ? E.unshift(c) : n ? u ? a = c : p[x] = c : i = c) : typeof c != "object" || c === null ? A("Object expected") : (k(s = c.get) && (p.get = s), k(s = c.set) && (p.set = s), k(s = c.init) && E.unshift(s));
+  return n || me(e, i), p && P(i, r, p), u ? n ^ 4 ? a : p : i;
+}, z = (e, t, r) => t.has(e) || A("Cannot " + r), we = (e, t) => Object(t) !== t ? A('Cannot use the "in" operator on this value') : e.has(t), B = (e, t, r) => (z(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Ce = (e, t, r) => t.has(e) ? A("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), H = (e, t, r, o) => (z(e, t, "write to private field"), o ? o.call(e, r) : t.set(e, r), r), Ae = (e, t, r) => (z(e, t, "access private method"), r), Z, T, ee, m, q;
+ee = [J("tj-error-element")];
+class w extends (T = ue, Z = [K({ type: String, reflect: !0 })], T) {
+  constructor(t = "An error occurred", r) {
+    super(), this.originalCode = void 0, Ce(this, q, L(m, 8, this)), L(m, 11, this), this.message = t, this.originalCode = r;
   }
   static get is() {
     return "tj-error-element";
   }
   render() {
-    return Z`
+    return le`
       <div id="error-fixed-indicator" @click=${() => this.scrollIntoView({ behavior: "smooth" })}>
         Err: ${this.message}
       </div>
@@ -43,120 +43,107 @@ class m extends (b = te, B = [ne({ type: String, reflect: !0 })], b) {
     `;
   }
 }
-g = ce(b);
-$ = /* @__PURE__ */ new WeakMap();
-D(g, 4, "message", B, m, $);
-m = D(g, 0, "TjErrorElement", H, m);
-m.styles = [ee(oe)];
-E(g, 1, m);
-function fe(e, { allowAttributes: t = !0, ignoreGaps: n = !0 } = {}) {
-  let o = "div", r = null, i = [], s = [], c = {};
+m = ge(T);
+q = /* @__PURE__ */ new WeakMap();
+Y(m, 4, "message", Z, w, q);
+w = Y(m, 0, "TjErrorElement", ee, w);
+w.styles = [de(pe)];
+L(m, 1, w);
+function be(e, { allowAttributes: t = !0, ignoreGaps: r = !0 } = {}) {
+  let o = "div", i = null, a = [], s = [], c = {};
   const h = /(^[a-z][\w-]*)|#[\w-]+|\.[\w:-]+|\[\s*([\w-]+)(?:\s*=\s*(['"]?)(.*?)\3)?\s*\]/gi;
   let l = 0;
   for (; ; ) {
-    const d = h.exec(e);
-    if (!d || d.index !== l) {
-      if (!n && d && d.index > l)
+    const f = h.exec(e);
+    if (!f || f.index !== l) {
+      if (!r && f && f.index > l)
         break;
       break;
     }
-    const a = d[0];
-    if (a[0] === "#") r = a.slice(1);
-    else if (a[0] === ".") i.push(a.slice(1));
-    else if (a[0] === "[") {
-      if (!t) throw new Error(`Attributes not allowed: '${a}'`);
-      const f = d[2], u = d[4] || void 0;
-      s.push({ name: f, value: u }), c[f] = u;
-    } else o = a;
-    l += a.length;
-  }
-  return { tag: o, id: r, classes: i, attrs: s, attrsMap: c, length: l, rest: e.slice(l) };
+    const n = f[0];
+    if (n[0] === "#") i = n.slice(1);
+    else if (n[0] === ".") a.push(n.slice(1));
+    else if (n[0] === "[") {
+      if (!t) throw new Error(`Attributes not allowed: '${n}'`);
+      const _ = f[2], u = f[4] || void 0;
+      s.push({ name: _, value: u }), c[_] = u;
+    } else o = n;
+    l += n.length;
+  }
+  return { tag: o, id: i, classes: a, attrs: s, attrsMap: c, length: l, rest: e.slice(l) };
 }
-function _e(e) {
+function xe(e) {
   return typeof e.beforeLayoutCallback == "function";
 }
-function ve(e, t, n) {
-  var d, a;
-  console.log("Applying layout to element:", e, "with layout:", n);
-  const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, r = n.replace(o, ""), i = fe(r), s = i.attrsMap;
-  s.class = "", i.attrsMap.class && (s.class = i.attrsMap.class + " "), s.class += i.classes.join(" "), s.id = i.id ?? void 0, ((d = s.class) == null ? void 0 : d.trim()) === "" && delete s.class, ((a = s.id) == null ? void 0 : a.trim()) === "" && delete s.id;
-  const c = i.tag || "div";
-  let h = !1, l = F(c, { ...s, layoutOrig: n });
+function Ee(e, t, r) {
+  var f, n;
+  const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, i = r.replace(o, ""), a = be(i), s = a.attrsMap;
+  s.class = "", a.attrsMap.class && (s.class = a.attrsMap.class + " "), s.class += a.classes.join(" "), s.id = a.id ?? void 0, ((f = s.class) == null ? void 0 : f.trim()) === "" && delete s.class, ((n = s.id) == null ? void 0 : n.trim()) === "" && delete s.id;
+  const c = a.tag || "div";
+  let h = !1, l = V(c, { ...s, layoutOrig: r });
   if (c.includes("-") && !customElements.get(c))
-    console.warn(`Custom element <${c}> is not registered.`), l = new m(`Custom element <${c}> is not registered.`, e.outerHTML), e.replaceWith(l), l.append(e), h = !0;
+    console.warn(`Custom element <${c}> is not registered.`), l = new w(`Custom element <${c}> is not registered.`, e.outerHTML), e.replaceWith(l), l.append(e), h = !0;
   else {
-    const f = Array.from(e.children);
-    _e(l) && (h = l.beforeLayoutCallback(e, l, f) === !1), console.log(
-      "Replacement element created:",
-      l,
-      "with children:",
-      f,
-      "skipChildren:",
-      h
-    ), l.__ORIG_ELEMENT__ = e, l.append(...Array.from(e.children)), e.replaceWith(l);
+    const _ = Array.from(e.children);
+    xe(l) && (h = l.beforeLayoutCallback(e, l, _) === !1), l.__ORIG_ELEMENT__ = e, l.append(...Array.from(e.children)), e.replaceWith(l);
   }
   return {
     replacementElement: l,
     skipChildren: h
   };
 }
-function k(e, t = {}) {
-  console.log("applyLayout called with element:", e, "and options:", t);
-  const { recursive: n = !0 } = t;
+function $(e, t = {}) {
+  const { recursive: r = !0 } = t;
   let o = [];
   if (Array.isArray(e))
-    return e.forEach((c) => o.push(...k(c, t))), o;
+    return e.forEach((c) => o.push(...$(c, t))), o;
   if (!(e instanceof HTMLElement))
     return [];
-  const r = e.getAttribute("layout");
-  let i = !1, s = e;
-  if (r && ({ replacementElement: s, skipChildren: i } = ve(e, t, r)), n && !i) {
-    const c = Array.from(s.children);
-    console.log("Applying layout to children:", c, "of element:", s), c.forEach((h) => o.push(...k(h, t)));
-  }
-  return o;
+  const i = e.getAttribute("layout");
+  let a = !1, s = e;
+  return i && ({ replacementElement: s, skipChildren: a } = Ee(e, t, i)), r && !a && Array.from(s.children).forEach((h) => o.push(...$(h, t))), o;
 }
-function Te(e) {
+function Re(e) {
   return e && typeof e == "object" && "__I__" in e && typeof e.__I__ == "object" && "i" in e.__I__;
 }
-class ge {
-  constructor(t, n = !1) {
-    this.debug = n, this.currentContainerNode = null, this.containerPath = [], this.containerIndex = [0], this.lastFixedI = 20, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
+class ke {
+  constructor(t, r = !1) {
+    this.debug = r, this.currentContainerNode = null, this.containerPath = [], this.containerIndex = [0], this.lastFixedI = 20, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
   }
   getI(t) {
-    const n = t.tagName, o = t.getAttribute("layout"), r = { i: -99, variant: "new", tag: "hr", hi: null };
+    const r = t.tagName, o = t.getAttribute("layout"), i = { i: -99, variant: "new", tag: "hr", hi: null };
     if (o) {
-      const i = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, s = o.match(i);
-      s && (console.debug("Layout matches", s), r.variant = s[1] === "+" ? "append" : s[1] === "-" ? "skip" : "new", s[2] !== "" && (r.i = parseFloat(s[2]) * 10));
+      const a = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, s = o.match(a);
+      s && (i.variant = s[1] === "+" ? "append" : s[1] === "-" ? "skip" : "new", s[2] !== "" && (i.i = parseFloat(s[2]) * 10));
     }
-    if (n.startsWith("H") && n.length === 2) {
-      let i = n.substring(1);
-      return r.tag = "h", r.hi = parseInt(i), i === "1" && (i = "2"), r.i === -99 && (r.i = parseInt(i) * 10, this.lastFixedI = r.i), r;
+    if (r.startsWith("H") && r.length === 2) {
+      let a = r.substring(1);
+      return i.tag = "h", i.hi = parseInt(a), a === "1" && (a = "2"), i.i === -99 && (i.i = parseInt(a) * 10, this.lastFixedI = i.i), i;
     }
-    return r.i === -99 && n === "HR" ? (r.i = this.lastFixedI + 5, r) : null;
+    return i.i === -99 && r === "HR" && o !== null ? (i.i = this.lastFixedI + 5, i) : null;
   }
-  getAttributeRecords(t, n = !1) {
+  getAttributeRecords(t, r = !1) {
     const o = {};
-    for (const r of t.attributes)
-      r.name.startsWith("section-") ? o[r.name] = r.value.replace(/^section-/, "") : r.name.startsWith("layout") ? (o[r.name] = r.value, t.removeAttribute(r.name)) : n && (o[r.name] = r.value);
-    if (!n)
-      for (const r of Array.from(t.classList))
-        r.startsWith("section-") && (o.class = (o.class || "") + " " + r.replace(/^section-/, ""), t.classList.remove(r));
+    for (const i of t.attributes)
+      i.name.startsWith("section-") ? o[i.name.replace(/^section-/, "")] = i.value : i.name.startsWith("layout") ? (o[i.name] = i.value, t.removeAttribute(i.name)) : r && (o[i.name] = i.value);
+    if (!r)
+      for (const i of Array.from(t.classList))
+        i.startsWith("section-") && (o.class = (o.class || "") + " " + i.replace(/^section-/, ""), t.classList.remove(i));
     return o;
   }
-  createNewContainerNode(t, n) {
-    const o = this.getAttributeRecords(t, t.tagName === "HR"), r = F("section", o);
-    return r.__IT = n, r;
+  createNewContainerNode(t, r) {
+    const o = this.getAttributeRecords(t, t.tagName === "HR"), i = V("section", o);
+    return i.__IT = r, i;
   }
-  arrangeSingleNode(t, n) {
-    n.i;
+  arrangeSingleNode(t, r) {
+    r.i;
     let o = 0;
-    for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= n.i); o++)
+    for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= r.i); o++)
       ;
-    let r = null;
-    n.variant === "append" ? (console.log("Appending to container at index", o, "with i", n.i), r = this.containerPath[o]) : r = this.createNewContainerNode(t, n);
-    const i = this.containerPath[o - 1];
-    this.containerPath.length = o, this.containerIndex.length = o, r.appendChild(t), i.appendChild(r), this.containerPath.push(r), this.containerIndex.push(n.i), this.currentContainerNode = r;
+    let i = null;
+    r.variant === "append" ? i = this.containerPath[o] : i = this.createNewContainerNode(t, r);
+    const a = this.containerPath[o - 1];
+    this.containerPath.length = o, this.containerIndex.length = o, t.tagName === "HR" && (t.setAttribute("aria-hidden", "true"), t.setAttribute("hidden", "hidden")), i.appendChild(t), a.appendChild(i), this.containerPath.push(i), this.containerIndex.push(r.i), this.currentContainerNode = i;
   }
   appendToCurrentContainer(t) {
     if (this.currentContainerNode === null)
@@ -164,73 +151,128 @@ class ge {
     this.currentContainerNode.appendChild(t);
   }
   arrange(t) {
-    for (let n of t) {
-      if (n.nodeType !== Node.ELEMENT_NODE) {
-        this.appendToCurrentContainer(n);
+    for (let r of t) {
+      if (r.nodeType !== Node.ELEMENT_NODE) {
+        this.appendToCurrentContainer(r);
         continue;
       }
-      const o = n, r = this.getI(o);
-      if (!r || r.variant === "skip") {
-        this.appendToCurrentContainer(n);
+      const o = r, i = this.getI(o);
+      if (!i || i.variant === "skip") {
+        this.appendToCurrentContainer(r);
         continue;
       }
-      this.arrangeSingleNode(o, r);
+      this.arrangeSingleNode(o, i);
     }
   }
 }
-var me = Object.create, N = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, q = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), G = (e) => {
+var Se = Object.create, W = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, te = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), b = (e) => {
   throw TypeError(e);
-}, we = (e, t, n) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, xe = (e, t) => N(e, "name", { value: t, configurable: !0 }), Ce = (e) => [, , , me((e == null ? void 0 : e[q("metadata")]) ?? null)], Ee = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], V = (e) => e !== void 0 && typeof e != "function" ? G("Function expected") : e, be = (e, t, n, o, r) => ({ kind: Ee[e], name: t, metadata: o, addInitializer: (i) => n._ ? G("Already initialized") : r.push(V(i || null)) }), ke = (e, t) => we(t, q("metadata"), e[3]), Ae = (e, t, n, o) => {
-  for (var r = 0, i = e[t >> 1], s = i && i.length; r < s; r++) i[r].call(n);
+}, Ie = (e, t, r) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, G = (e, t) => W(e, "name", { value: t, configurable: !0 }), Ne = (e) => [, , , Se((e == null ? void 0 : e[te("metadata")]) ?? null)], re = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], S = (e) => e !== void 0 && typeof e != "function" ? b("Function expected") : e, Le = (e, t, r, o, i) => ({ kind: re[e], name: t, metadata: o, addInitializer: (a) => r._ ? b("Already initialized") : i.push(S(a || null)) }), Te = (e, t) => Ie(t, te("metadata"), e[3]), M = (e, t, r, o) => {
+  for (var i = 0, a = e[t >> 1], s = a && a.length; i < s; i++) t & 1 ? a[i].call(r) : o = a[i].call(r, o);
   return o;
-}, Ie = (e, t, n, o, r, i) => {
-  var s, c, h, l = t & 7, d = !1, a = 0, f = e[a] || (e[a] = []), u = l && (r = r.prototype, l < 5 && (l > 3 || !d) && ye(r, n));
-  xe(r, n);
-  for (var v = o.length - 1; v >= 0; v--)
-    h = be(l, n, c = {}, e[3], f), s = (0, o[v])(r, h), c._ = 1, V(s) && (r = s);
-  return ke(e, r), u && N(r, n, u), d ? l ^ 4 ? i : u : r;
-}, J, T, K;
-J = [R("tj-content-pane")];
-class A extends (K = U(re)) {
+}, ie = (e, t, r, o, i, a) => {
+  var s, c, h, l, f, n = t & 7, _ = !!(t & 8), u = !!(t & 16), v = n > 3 ? e.length + 1 : n ? _ ? 1 : 2 : 0, x = re[n + 5], E = n > 3 && (e[v - 1] = []), N = e[v] || (e[v] = []), p = n && (!u && !_ && (i = i.prototype), n < 5 && (n > 3 || !u) && $e(n < 4 ? i : { get [r]() {
+    return j(this, a);
+  }, set [r](d) {
+    return Q(this, a, d);
+  } }, r));
+  n ? u && n < 4 && G(a, (n > 2 ? "set " : n > 1 ? "get " : "") + r) : G(i, r);
+  for (var g = o.length - 1; g >= 0; g--)
+    l = Le(n, r, h = {}, e[3], N), n && (l.static = _, l.private = u, f = l.access = { has: u ? (d) => Me(i, d) : (d) => r in d }, n ^ 3 && (f.get = u ? (d) => (n ^ 1 ? j : Pe)(d, i, n ^ 4 ? a : p.get) : (d) => d[r]), n > 2 && (f.set = u ? (d, y) => Q(d, i, y, n ^ 4 ? a : p.set) : (d, y) => d[r] = y)), c = (0, o[g])(n ? n < 4 ? u ? a : p[x] : n > 4 ? void 0 : { get: p.get, set: p.set } : i, l), h._ = 1, n ^ 4 || c === void 0 ? S(c) && (n > 4 ? E.unshift(c) : n ? u ? a = c : p[x] = c : i = c) : typeof c != "object" || c === null ? b("Object expected") : (S(s = c.get) && (p.get = s), S(s = c.set) && (p.set = s), S(s = c.init) && E.unshift(s));
+  return n || Te(e, i), p && W(i, r, p), u ? n ^ 4 ? a : p : i;
+}, F = (e, t, r) => t.has(e) || b("Cannot " + r), Me = (e, t) => Object(t) !== t ? b('Cannot use the "in" operator on this value') : e.has(t), j = (e, t, r) => (F(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Oe = (e, t, r) => t.has(e) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Q = (e, t, r, o) => (F(e, t, "write to private field"), o ? o.call(e, r) : t.set(e, r), r), Pe = (e, t, r) => (F(e, t, "access private method"), r), ne, O, oe, C, R;
+oe = [J("tj-content-pane")];
+class I extends (O = ae(he), ne = [K({ type: Boolean, reflect: !0, attribute: "skip-layout" })], O) {
+  constructor() {
+    super(), Oe(this, R, M(C, 8, this, !1)), M(C, 11, this);
+  }
   static get is() {
     return "tj-content-pane";
   }
   createRenderRoot() {
     return this;
   }
-  constructor() {
-    super();
-  }
   arrange() {
-    const t = new X("SectionTreeBuilder");
+    const t = new se("SectionTreeBuilder");
     this.log("arrange() called");
-    const n = new ge(this), o = Array.from(this.children);
-    n.arrange(o), k(Array.from(this.children), { recursive: !0 }), t.lap("after arrange");
+    const r = new ke(this), o = Array.from(this.children);
+    if (r.arrange(o), this.skipLayout) {
+      this.warn("Skipping layout as per skipLayout property.");
+      return;
+    }
+    $(Array.from(this.children), { recursive: !0 }), t.lap("after arrange");
   }
   async connectedCallback() {
-    await Y(), super.connectedCallback(), this.arrange();
+    await ce(), super.connectedCallback(), this.arrange();
   }
 }
-T = Ce(K);
-A = Ie(T, 0, "ContentAreaElement2", J, A);
-Ae(T, 1, A);
-function Le(e, t, n) {
-  const o = [], r = t.split("|");
-  for (const i of r) {
-    const s = e.querySelectorAll(i.trim());
+C = Ne(O);
+R = /* @__PURE__ */ new WeakMap();
+ie(C, 4, "skipLayout", ne, I, R);
+I = ie(C, 0, "ContentAreaElement2", oe, I);
+M(C, 1, I);
+function De(e, t, r) {
+  const o = [], i = t.split("|");
+  for (const a of i) {
+    const s = e.querySelectorAll(a.trim());
     if (s.length > 0)
       for (const c of s) {
         o.push(c);
-        for (const [h, l] of Object.entries(n))
+        for (const [h, l] of Object.entries(r))
           c.setAttribute(h, l);
       }
   }
   return o;
 }
+function ze(e, t) {
+  const r = e.split("|");
+  for (const o of r) {
+    const i = t.querySelectorAll(o.trim());
+    if (i.length > 0)
+      return Array.from(i);
+  }
+  return [];
+}
+function Be(e) {
+  class t extends e {
+    beforeLayoutCallback(o, i, a) {
+      return !1;
+    }
+    updated() {
+      var i;
+      const o = ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("slot[data-query]")) ?? [];
+      for (const a of Array.from(o)) {
+        const s = a.getAttribute("data-query");
+        if (!s) continue;
+        let c = [];
+        try {
+          c = ze(s, this);
+        } catch (h) {
+          throw this.error(`"${h}" in slot`, a), h;
+        }
+        c.forEach((h) => {
+          if (a.getAttributeNames().filter((l) => l.startsWith("data-set-attribute-")).forEach((l) => {
+            const f = l.replace(/^data-set-attribute-/, "");
+            if (!h.hasAttribute(f)) {
+              const n = a.getAttribute(l);
+              n !== null && h.setAttribute(f, n);
+            }
+          }), !h.hasAttribute("slot")) {
+            const l = a.getAttribute("name");
+            l && h.setAttribute("slot", l);
+          }
+        });
+      }
+      $(Array.from(this.children), { recursive: !0 });
+    }
+  }
+  return t;
+}
 export {
-  A as ContentAreaElement2,
-  ge as SectionTreeBuilder,
-  k as applyLayout,
-  Le as attrAssign,
-  Te as isSectionTreeElement
+  I as ContentAreaElement2,
+  ke as SectionTreeBuilder,
+  Be as SubLayoutApplyMixin,
+  $ as applyLayout,
+  De as attrAssign,
+  Re as isSectionTreeElement
 };

package/lib/SectionTreeBuilder.d.ts

@@ -3,8 +3,8 @@ export type IType = {
      * Number  10 - 60 - 2.5 -> 25
      */
     i: number;
-    variant: "append" | "new" | "skip";
-    tag: "hr" | "h";
+    variant: 'append' | 'new' | 'skip';
+    tag: 'hr' | 'h';
     hi?: number | null;
 };
 export interface SectionTreeElement {

package/lib/multiQuerySelectAll.d.ts

@@ -0,0 +1 @@
+export declare function multiQuerySelectAll(qurey: string, element: HTMLElement): HTMLElement[];

package/mixins/SubLayoutApplyMixin.d.ts

@@ -0,0 +1,344 @@
+type Constructor<T = object> = abstract new (...args: any[]) => T;
+export declare function SubLayoutApplyMixin<TBase extends Constructor<HTMLElement>>(Base: TBase): (abstract new (...args: any[]) => {
+    beforeLayoutCallback(element: HTMLElement, replacementElement: HTMLElement, children: HTMLElement[]): boolean;
+    updated(): void;
+    accessKey: string;
+    readonly accessKeyLabel: string;
+    autocapitalize: string;
+    dir: string;
+    draggable: boolean;
+    hidden: boolean;
+    inert: boolean;
+    innerText: string;
+    lang: string;
+    readonly offsetHeight: number;
+    readonly offsetLeft: number;
+    readonly offsetParent: Element | null;
+    readonly offsetTop: number;
+    readonly offsetWidth: number;
+    outerText: string;
+    popover: string | null;
+    spellcheck: boolean;
+    title: string;
+    translate: boolean;
+    writingSuggestions: string;
+    attachInternals(): ElementInternals;
+    click(): void;
+    hidePopover(): void;
+    showPopover(): void;
+    togglePopover(options?: boolean): boolean;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    readonly attributes: NamedNodeMap;
+    get classList(): DOMTokenList;
+    set classList(value: string);
+    className: string;
+    readonly clientHeight: number;
+    readonly clientLeft: number;
+    readonly clientTop: number;
+    readonly clientWidth: number;
+    readonly currentCSSZoom: number;
+    id: string;
+    innerHTML: string;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+    onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+    outerHTML: string;
+    readonly ownerDocument: Document;
+    get part(): DOMTokenList;
+    set part(value: string);
+    readonly prefix: string | null;
+    readonly scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    readonly scrollWidth: number;
+    readonly shadowRoot: ShadowRoot | null;
+    slot: string;
+    readonly tagName: string;
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
+    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    computedStyleMap(): StylePropertyMapReadOnly;
+    getAttribute(qualifiedName: string): string | null;
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    getAttributeNames(): string[];
+    getAttributeNode(qualifiedName: string): Attr | null;
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    getBoundingClientRect(): DOMRect;
+    getClientRects(): DOMRectList;
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    getHTML(options?: GetHTMLOptions): string;
+    hasAttribute(qualifiedName: string): boolean;
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    hasAttributes(): boolean;
+    hasPointerCapture(pointerId: number): boolean;
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    insertAdjacentHTML(position: InsertPosition, string: string): void;
+    insertAdjacentText(where: InsertPosition, data: string): void;
+    matches(selectors: string): boolean;
+    releasePointerCapture(pointerId: number): void;
+    removeAttribute(qualifiedName: string): void;
+    removeAttributeNS(namespace: string | null, localName: string): void;
+    removeAttributeNode(attr: Attr): Attr;
+    requestFullscreen(options?: FullscreenOptions): Promise<void>;
+    requestPointerLock(options?: PointerLockOptions): Promise<void>;
+    scroll(options?: ScrollToOptions): void;
+    scroll(x: number, y: number): void;
+    scrollBy(options?: ScrollToOptions): void;
+    scrollBy(x: number, y: number): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+    scrollTo(options?: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+    setAttribute(qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+    setAttributeNode(attr: Attr): Attr | null;
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    setHTMLUnsafe(html: string): void;
+    setPointerCapture(pointerId: number): void;
+    toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+    webkitMatchesSelector(selectors: string): boolean;
+    readonly baseURI: string;
+    readonly childNodes: NodeListOf<ChildNode>;
+    readonly firstChild: ChildNode | null;
+    readonly isConnected: boolean;
+    readonly lastChild: ChildNode | null;
+    readonly nextSibling: ChildNode | null;
+    readonly nodeName: string;
+    readonly nodeType: number;
+    nodeValue: string | null;
+    readonly parentElement: HTMLElement | null;
+    readonly parentNode: ParentNode | null;
+    readonly previousSibling: ChildNode | null;
+    textContent: string | null;
+    appendChild<T extends Node>(node: T): T;
+    cloneNode(subtree?: boolean): Node;
+    compareDocumentPosition(other: Node): number;
+    contains(other: Node | null): boolean;
+    getRootNode(options?: GetRootNodeOptions): Node;
+    hasChildNodes(): boolean;
+    insertBefore<T extends Node>(node: T, child: Node | null): T;
+    isDefaultNamespace(namespace: string | null): boolean;
+    isEqualNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: Node | null): boolean;
+    lookupNamespaceURI(prefix: string | null): string | null;
+    lookupPrefix(namespace: string | null): string | null;
+    normalize(): void;
+    removeChild<T extends Node>(child: T): T;
+    replaceChild<T extends Node>(node: Node, child: T): T;
+    readonly ELEMENT_NODE: 1;
+    readonly ATTRIBUTE_NODE: 2;
+    readonly TEXT_NODE: 3;
+    readonly CDATA_SECTION_NODE: 4;
+    readonly ENTITY_REFERENCE_NODE: 5;
+    readonly ENTITY_NODE: 6;
+    readonly PROCESSING_INSTRUCTION_NODE: 7;
+    readonly COMMENT_NODE: 8;
+    readonly DOCUMENT_NODE: 9;
+    readonly DOCUMENT_TYPE_NODE: 10;
+    readonly DOCUMENT_FRAGMENT_NODE: 11;
+    readonly NOTATION_NODE: 12;
+    readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+    readonly DOCUMENT_POSITION_PRECEDING: 2;
+    readonly DOCUMENT_POSITION_FOLLOWING: 4;
+    readonly DOCUMENT_POSITION_CONTAINS: 8;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
+    dispatchEvent(event: Event): boolean;
+    ariaAtomic: string | null;
+    ariaAutoComplete: string | null;
+    ariaBrailleLabel: string | null;
+    ariaBrailleRoleDescription: string | null;
+    ariaBusy: string | null;
+    ariaChecked: string | null;
+    ariaColCount: string | null;
+    ariaColIndex: string | null;
+    ariaColIndexText: string | null;
+    ariaColSpan: string | null;
+    ariaCurrent: string | null;
+    ariaDescription: string | null;
+    ariaDisabled: string | null;
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    ariaHidden: string | null;
+    ariaInvalid: string | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: string | null;
+    ariaLive: string | null;
+    ariaModal: string | null;
+    ariaMultiLine: string | null;
+    ariaMultiSelectable: string | null;
+    ariaOrientation: string | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: string | null;
+    ariaPressed: string | null;
+    ariaReadOnly: string | null;
+    ariaRelevant: string | null;
+    ariaRequired: string | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: string | null;
+    ariaRowIndex: string | null;
+    ariaRowIndexText: string | null;
+    ariaRowSpan: string | null;
+    ariaSelected: string | null;
+    ariaSetSize: string | null;
+    ariaSort: string | null;
+    ariaValueMax: string | null;
+    ariaValueMin: string | null;
+    ariaValueNow: string | null;
+    ariaValueText: string | null;
+    role: string | null;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    after(...nodes: (Node | string)[]): void;
+    before(...nodes: (Node | string)[]): void;
+    remove(): void;
+    replaceWith(...nodes: (Node | string)[]): void;
+    readonly nextElementSibling: Element | null;
+    readonly previousElementSibling: Element | null;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    readonly firstElementChild: Element | null;
+    readonly lastElementChild: Element | null;
+    append(...nodes: (Node | string)[]): void;
+    prepend(...nodes: (Node | string)[]): void;
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    replaceChildren(...nodes: (Node | string)[]): void;
+    readonly assignedSlot: HTMLSlotElement | null;
+    readonly attributeStyleMap: StylePropertyMap;
+    get style(): CSSStyleDeclaration;
+    set style(cssText: string);
+    contentEditable: string;
+    enterKeyHint: string;
+    inputMode: string;
+    readonly isContentEditable: boolean;
+    onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onerror: OnErrorEventHandler;
+    onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+    ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
+    onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+    onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+    onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+    autofocus: boolean;
+    readonly dataset: DOMStringMap;
+    nonce?: string;
+    tabIndex: number;
+    blur(): void;
+    focus(options?: FocusOptions): void;
+}) & TBase;
+export {};

package/package.json

@@ -1,11 +1,14 @@
 {
     "name": "@trunkjs/content-pane",
-    "version": "1.0.9",
+    "version": "1.0.11",
     "main": "./index.js",
     "dependencies": {
         "@trunkjs/browser-utils": "^1.0.14",
         "lit": "^3.3.1"
     },
+    "devDependencies": {
+        "@trunkjs/markdown-loader": "*"
+    },
     "type": "module",
     "types": "./index.d.ts",
     "web-types": "./web-types.json"

package/web-types.json

@@ -11,6 +11,10 @@
                         {
                             "name": "debug",
                             "type": "boolean"
+                        },
+                        {
+                            "name": "skip-layout",
+                            "type": "boolean"
                         }
                     ]
                 }