Repository: jwstegemann/fritz2
Issue: Dynamic content within our stack components does not work

**Describe the bug**
If you want to show some content based upon a flow and use a ``stackUp`` or ``lineUp`` as container, the items are rendered at the wrong dom node level (above the parent, not as children!)

**To Reproduce**
Just execute the following snippet:

        div {
            val store = storeOf(listOf("A", "B", "C"))
            stackUp {
                items {  // this == RenderContext, but for the rendering ``Div`` is used
                    p { +"Should appear before items" }
                    store.renderEach({ it }) {
                        box { it.data.asText() }
                    }
                    p { +"Should appear after items" }
                }
            }
        }

If you run this code, the three items from the store are rendered as direct childrin of the enclosing ``div``!
That will looke like this:

    A
    B
    C
    Should appear before items
    Should appear after items

**Expected behavior**
The items should be rendered at the correct position of the dom tree!
This would lead to this output:

    Should appear before items
    A
    B
    C
    Should appear after items

**Additional context**
Obviously the receiver type of the component's ``item`` property and the *used* type by the component factory function does not match: ``RenderContext`` vs ``Div``.
 - change receiver of ``items`` to ``Div``
 - scan whole components library for similar cases (places, where unspecific ``RenderContext`` is used)


Changed files:
components/src/jsMain/kotlin/dev/fritz2/components/popover.kt, components/src/jsMain/kotlin/dev/fritz2/components/formcontrol.kt, core/src/jsMain/kotlin/dev/fritz2/dom/html/elements.kt, components/src/jsMain/kotlin/dev/fritz2/components/button.kt, components/src/jsMain/kotlin/dev/fritz2/components/stack.kt, components/src/jsMain/kotlin/dev/fritz2/components/modal.kt

diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/button.kt b/components/src/jsMain/kotlin/dev/fritz2/components/button.kt
index fafabc18..62c40144 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/button.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/button.kt
@@ -4,6 +4,8 @@ import dev.fritz2.dom.Listener
 import dev.fritz2.dom.WithEvents
 import dev.fritz2.dom.html.Button
 import dev.fritz2.dom.html.RenderContext
+import dev.fritz2.dom.html.Span
+import dev.fritz2.dom.html.TextElement
 import dev.fritz2.styling.StyleClass
 import dev.fritz2.styling.StyleClass.Companion.plus
 import dev.fritz2.styling.params.*
@@ -168,7 +170,7 @@ open class PushButtonComponent {
         label = { hide -> span(if (hide) hidden.name else null) { value.asText() } }
     }
 
-    var loadingText: (RenderContext.() -> Unit)? = null
+    var loadingText: (Button.() -> Unit)? = null
 
     fun loadingText(value: String) {
         loadingText = { span { +value } }
@@ -224,6 +226,7 @@ open class PushButtonComponent {
             label?.invoke(renderContext, false)
         } else {
             renderContext.apply {
+                val btnCtx = this
                 loading?.render { running ->
                     if (running) {
                         spinner({
@@ -233,7 +236,7 @@ open class PushButtonComponent {
                             } else leftSpinnerStyle()
                         }) {}
                         if (loadingText != null) {
-                            loadingText!!.invoke(this)
+                            loadingText!!.invoke(btnCtx)
                         } else {
                             label?.invoke(this, true)
                         }
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/formcontrol.kt b/components/src/jsMain/kotlin/dev/fritz2/components/formcontrol.kt
index 9b58c634..9d369570 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/formcontrol.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/formcontrol.kt
@@ -2,6 +2,7 @@ package dev.fritz2.components
 
 import dev.fritz2.binding.Store
 import dev.fritz2.components.FormControlComponent.Control
+import dev.fritz2.dom.Tag
 import dev.fritz2.dom.html.Input
 import dev.fritz2.dom.html.RenderContext
 import dev.fritz2.styling.StyleClass
@@ -14,6 +15,7 @@ import dev.fritz2.styling.whenever
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.flow.map
+import org.w3c.dom.HTMLElement
 
 
 /**
@@ -102,9 +104,9 @@ open class FormControlComponent {
     class Control {
 
         private val overflows: MutableList<String> = mutableListOf()
-        var assignee: Pair<String, (RenderContext.() -> Unit)>? = null
+        var assignee: Pair<String, (Tag<HTMLElement>.() -> Unit)>? = null
 
-        fun set(controlName: String, component: (RenderContext.() -> Unit)) {
+        fun set(controlName: String, component: (Tag<HTMLElement>.() -> Unit)) {
             if (assignee == null) {
                 assignee = Pair(controlName, component)
             } else {
@@ -292,7 +294,8 @@ open class FormControlComponent {
         }
     }
 
-    val requiredMarker: RenderContext.() -> Unit = {
+    // TODO: issue#228 change to ``RenderContext``
+    val requiredMarker: Tag<HTMLElement>.() -> Unit = {
         if (required) {
             (::span.styled {
                 color { danger }
@@ -309,7 +312,7 @@ interface ControlRenderer {
         id: String? = null,
         prefix: String = "formControl",
         renderContext: RenderContext,
-        control: RenderContext.() -> Unit
+        control: Tag<HTMLElement>.() -> Unit  // TODO: issue#228 change receiver to ``RenderContext``
     )
 }
 
@@ -320,7 +323,7 @@ class SingleControlRenderer(private val component: FormControlComponent) : Contr
         id: String?,
         prefix: String,
         renderContext: RenderContext,
-        control: RenderContext.() -> Unit
+        control: Tag<HTMLElement>.() -> Unit // TODO: issue#228 change receiver to ``RenderContext``
     ) {
         renderContext.stackUp(
             {
@@ -354,7 +357,7 @@ class ControlGroupRenderer(private val component: FormControlComponent) : Contro
         id: String?,
         prefix: String,
         renderContext: RenderContext,
-        control: RenderContext.() -> Unit
+        control: Tag<HTMLElement>.() -> Unit // TODO: issue#228 change receiver to ``RenderContext``
     ) {
         renderContext.box({
             width { full }
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/modal.kt b/components/src/jsMain/kotlin/dev/fritz2/components/modal.kt
index 544176a4..3cc52bea 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/modal.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/modal.kt
@@ -91,21 +91,6 @@ class ModalComponent {
         init {
             appendToBody(renderElement {
                 div(id = "modals") {
-                    // TODO: Check whether this stopped working (new solution is idiomatically much better anyways!)
-                    /*
-                    overlay.data.combine(stack.data) { o, m -> Pair(m, o) }.render { (modal, overlay) ->
-                        if (overlay.method == OverlayMethod.CoveringTopMost && modal.isNotEmpty()) {
-                            overlay.render(this, modal.size)
-                        }
-                        for ((index, modal) in modal.withIndex()) {
-                            if (overlay.method == OverlayMethod.CoveringEach) {
-                                overlay.render(this, index + 1)
-                            }
-                            modal(index + 1)
-                        }
-                    }
-                     */
-
                     stack.data.map { it.size }.render { size ->
                         val currentOverlay = overlay.current
                         if (currentOverlay.method == OverlayMethod.CoveringTopMost && size > 0) {
@@ -160,9 +145,9 @@ class ModalComponent {
         }
     }
 
-    var content: (RenderContext.() -> Unit)? = null
+    var content: (Div.() -> Unit)? = null
 
-    fun content(value: RenderContext.() -> Unit) {
+    fun content(value: Div.() -> Unit) {
         content = value
     }
 
@@ -204,7 +189,7 @@ class ModalComponent {
                 variant { ghost }
                 icon { fromTheme { close } }
                 build()
-            }.map { Unit } handledBy closeHandle
+            }.map { } handledBy closeHandle
         }
     }
 
@@ -232,8 +217,7 @@ class ModalComponent {
  * clickButton {
  *     text("Open")
  * } handledBy modal {
- *     hasCloseButton(true) // enable the integrated close button
- *     items { // provide arbitrary content
+ *     content { // provide arbitrary content
  *         p { +"Hello world from a modal!" }
  *         p { +"Please click the X to close this..." }
  *     }
@@ -242,11 +226,12 @@ class ModalComponent {
  * // apply custom close button
  * clickButton {
  *     text("Open")
- * } handledBy modal { close -> // SimpleHandler<Unit> is injected by default
- *     items {
+ * } handledBy modal { closeHandler -> // SimpleHandler<Unit> is injected by default
+ *     hasCloseButton(false) // disable the integrated close button
+ *     content {
  *         p { +"Hello world from a modal!" }
  *         p { +"Please click the X to close this..." }
- *         clickButton { text("Close") } handledBy close // define a custom button that uses the close handler
+ *         clickButton { text("Close") } handledBy closeHandler // define a custom button that uses the close handler
  *     }
  * }
  * ```
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/popover.kt b/components/src/jsMain/kotlin/dev/fritz2/components/popover.kt
index b4b7a1a1..af39b9fb 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/popover.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/popover.kt
@@ -2,7 +2,9 @@ package dev.fritz2.components
 
 import dev.fritz2.binding.RootStore
 import dev.fritz2.binding.SimpleHandler
+import dev.fritz2.dom.html.Div
 import dev.fritz2.dom.html.RenderContext
+import dev.fritz2.dom.html.TextElement
 import dev.fritz2.styling.StyleClass
 import dev.fritz2.styling.params.BasicParams
 import dev.fritz2.styling.params.Style
@@ -53,7 +55,7 @@ class PopoverComponent {
                 variant { ghost }
                 icon{ fromTheme { close } }
                 build()
-            }.map { Unit } handledBy closeHandle
+            }.map { } handledBy closeHandle
         }
     }
 
@@ -84,13 +86,13 @@ class PopoverComponent {
         arrowPlacement = value
     }
 
-    var trigger: (RenderContext.() -> Unit)? = null
-    fun trigger(value: (RenderContext.() -> Unit)) {
+    var trigger: (Div.() -> Unit)? = null
+    fun trigger(value: (Div.() -> Unit)) {
         trigger = value
     }
 
-    var header: (RenderContext.() -> Unit)? = null
-    fun header(value: (RenderContext.() -> Unit)) {
+    var header: (Div.() -> Unit)? = null
+    fun header(value: (TextElement.() -> Unit)) {
         header = {
             (::header.styled(prefix = "popover-header") {
                 Theme().popover.header()
@@ -110,8 +112,8 @@ class PopoverComponent {
         }
     }
 
-    var footer: (RenderContext.() -> Unit)? = null
-    fun footer(value: (RenderContext.() -> Unit)) {
+    var footer: (Div.() -> Unit)? = null
+    fun footer(value: (TextElement.() -> Unit)) {
         footer = {
             (::footer.styled(prefix = "popover-footer") {
                 Theme().popover.footer()
@@ -131,12 +133,12 @@ class PopoverComponent {
         }
     }
 
-    var content: (RenderContext.() -> Unit)? = null
-    fun content(value: (RenderContext.() -> Unit)) {
+    var content: (Div.() -> Unit)? = null
+    fun content(value: (TextElement.() -> Unit)) {
         content = {
             (::section.styled(prefix = "popover-content") {
                 Theme().popover.section()
-            }){ value() }
+            }){ value(this) }
         }
     }
 
@@ -241,7 +243,7 @@ fun RenderContext.popover(
         (::div.styled(prefix = "popover-trigger") {
             Theme().popover.trigger()
         }) {
-            clicks.events.map { Unit } handledBy clickStore.toggle
+            clicks.events.map { } handledBy clickStore.toggle
             component.trigger?.invoke(this)
         }
         clickStore.data.render {
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/stack.kt b/components/src/jsMain/kotlin/dev/fritz2/components/stack.kt
index bd848bb6..b81dd101 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/stack.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/stack.kt
@@ -83,9 +83,9 @@ abstract class StackComponent {
         spacing = value
     }
 
-    var items: (RenderContext.() -> Unit)? = null
+    var items: (Div.() -> Unit)? = null
 
-    fun items(value: RenderContext.() -> Unit) {
+    fun items(value: Div.() -> Unit) {
         items = value
     }
 
diff --git a/core/src/jsMain/kotlin/dev/fritz2/dom/html/elements.kt b/core/src/jsMain/kotlin/dev/fritz2/dom/html/elements.kt
index e8c0c861..f4cc7638 100644
--- a/core/src/jsMain/kotlin/dev/fritz2/dom/html/elements.kt
+++ b/core/src/jsMain/kotlin/dev/fritz2/dom/html/elements.kt
@@ -1189,10 +1189,13 @@ open class Ul(id: String? = null, baseClass: String? = null, job: Job) : Tag<HTM
 open class TextElement(tagName: String, id: String? = null, baseClass: String? = null, job: Job) :
     Tag<HTMLElement>(tagName, id, baseClass, job), WithText<HTMLElement>
 
+// TODO: issue#228 uncomment
+//typealias RenderContext = Tag<HTMLElement>
 
 /**
  * Context for rendering dynamically DOM-nodes to your page.
  */
+// TODO: issue#228 Rename to ``HtmlElements``
 interface RenderContext : WithJob {
 
     /**