Add overlay package

- Add overlay container that shows any kind of overlay
- Add modals and a basic implementation of a requester
- Add page with overlay examples
- Add shadow color as CSS variable
- Remove background color from layout container

components/layout/container.vugu

@@ -5,8 +5,6 @@
 <style>
 	.d3c-1634593574 {
 		margin: 1em;
-		background-color: var(--d3c-color-background);
-		color: var(--d3c-color-text);
 	}
 </style>
 

components/layout/container_vgen.go

@@ -47,7 +47,7 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 	}
 	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
 	{
-		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1634593574 {\n\t\tmargin: 1em;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1634593574 {\n\t\tmargin: 1em;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/overlay/container.go

@@ -0,0 +1,40 @@
+package overlay
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
+	"github.com/vugu/vugu"
+)
+
+// Container can be embedded in your root component and provides a way to show overlays like modals and toasts.
+type Container struct {
+	modal      vugu.Builder `vugu:"data"`
+	modalTitle string
+}
+
+func (c *Container) handleModalClose(event vugu.DOMEvent) {
+	c.modal = nil
+}
+
+func (c *Container) SetModal(component vugu.Builder) {
+	c.modal = component
+
+	c.modalTitle = ""
+	// Retrieve title from component if it implements the PageTitleGetter interface.
+	if pageInfo, ok := component.(navigation.PageTitleGetter); ok {
+		c.modalTitle, _, _ = pageInfo.PageTitle()
+	}
+}
+
+type OverlayContainerRef struct {
+	*Container
+}
+
+func (p *OverlayContainerRef) OverlayContainerSet(container *Container) {
+	p.Container = container
+}
+
+type OverlayContainerSetter interface {
+	OverlayContainerSet(*Container)
+}
+
+var _ OverlayContainerSetter = &OverlayContainerRef{}

components/overlay/container.vugu

@@ -0,0 +1,64 @@
+<div class="d3c-1684423938">
+	<div vg-if="c.modal != nil" class="d3c-1684423938-modal-container">
+		<div>
+			<div class="d3c-1684423938-menu d3c-color-accent">
+				<h3 class="d3c-1684423938-title" style="flex-grow:1" vg-content="c.modalTitle"></h3>
+				<input:Button @Click="c.handleModalClose(event)"><vg-slot name="SymbolSlot"><icons:LCancel></icons:LCancel></vg-slot></input:Button>
+			</div>
+			<vg-comp expr="c.modal"></vg-comp>
+		</div>
+	</div>
+</div>
+
+<style>
+	.d3c-1684423938 {
+		position: fixed;
+		z-index: 2;
+	}
+
+	.d3c-1684423938-modal-container {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		backdrop-filter: blur(1px) brightness(80%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1;
+	}
+
+	.d3c-1684423938-modal-container > div {
+		background-color: var(--d3c-color-background);
+		color: var(--d3c-color-text);
+		border-radius: 4px;
+		max-width: 100%;
+		max-height: 100%;
+		overflow: auto;
+		box-shadow: 0 1em 3em var(--d3c-color-shadow);
+	}
+
+	.d3c-1684423938-menu {
+		padding: 0.5em;
+		display: flex;
+		gap: 0.5em;
+		justify-content: flex-end;
+		align-items: baseline;
+		background-color: var(--d3c-color-background);
+		color: var(--d3c-color-text);
+	}
+
+	.d3c-1684423938-menu > * {
+		margin: 0 !important;
+	}
+
+	.d3c-1684423938-title {
+		text-align: center;
+	}
+</style>
+
+<script type="application/x-go">
+	import (
+		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	)
+</script>

components/overlay/container_vgen.go

@@ -0,0 +1,131 @@
+package overlay
+
+// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vjson"
+import "github.com/vugu/vugu"
+import js "github.com/vugu/vugu/js"
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+)
+
+func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+
+	vgout = &vugu.BuildOut{}
+
+	var vgiterkey interface{}
+	_ = vgiterkey
+	var vgn *vugu.VGNode
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938"}}}
+	vgout.Out = append(vgout.Out, vgn)	// root for output
+	{
+		vgparent := vgn
+		_ = vgparent
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+		vgparent.AppendChild(vgn)
+		if c.modal != nil {
+			vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-container"}}}
+			vgparent.AppendChild(vgn)
+			{
+				vgparent := vgn
+				_ = vgparent
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				{
+					vgparent := vgn
+					_ = vgparent
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-menu d3c-color-accent"}}}
+					vgparent.AppendChild(vgn)
+					{
+						vgparent := vgn
+						_ = vgparent
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-title"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "flex-grow:1"}}}
+						vgparent.AppendChild(vgn)
+						vgn.SetInnerHTML(c.modalTitle)
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						{
+							vgcompKey := vugu.MakeCompKey(0x2DDBBBB22E2345CF^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(input.Button)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleModalClose(event) })
+							vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								{
+									vgcompKey := vugu.MakeCompKey(0xC5A4AEF7F17F2072^vgin.CurrentPositionHash(), vgiterkey)
+									// ask BuildEnv for prior instance of this specific component
+									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCancel)
+									if vgcomp == nil {
+										// create new one if needed
+										vgcomp = new(icons.LCancel)
+										vgin.BuildEnv.WireComponent(vgcomp)
+									}
+									vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+									vgout.Components = append(vgout.Components, vgcomp)
+									vgn = &vugu.VGNode{Component: vgcomp}
+									vgparent.AppendChild(vgn)
+								}
+								return
+							})
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+						vgparent.AppendChild(vgn)
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					{
+						var vgcomp vugu.Builder = c.modal
+						if vgcomp != nil {
+							vgin.BuildEnv.WireComponent(vgcomp)
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+				vgparent.AppendChild(vgn)
+			}
+		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
+		vgparent.AppendChild(vgn)
+	}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
+	{
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684423938 {\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t}\n\n\t.d3c-1684423938-modal-container {\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tbackdrop-filter: blur(1px) brightness(80%);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1684423938-modal-container > div {\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tborder-radius: 4px;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\toverflow: auto;\n\t\tbox-shadow: 0 1em 3em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-menu {\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tjustify-content: flex-end;\n\t\talign-items: baseline;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-menu > * {\n\t\tmargin: 0 !important;\n\t}\n\n\t.d3c-1684423938-title {\n\t\ttext-align: center;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+	}
+	vgout.AppendCSS(vgn)
+	return vgout
+}
+
+// 'fix' unused imports
+var _ fmt.Stringer
+var _ reflect.Type
+var _ vjson.RawMessage
+var _ js.Value

components/overlay/generate.go

@@ -0,0 +1,3 @@
+package overlay
+
+//go:generate vugugen

components/overlay/modal-requester.go

@@ -0,0 +1,37 @@
+package overlay
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"github.com/vugu/vugu"
+)
+
+type ModalRequester struct {
+	OverlayContainerRef
+
+	SymbolSlot vugu.Builder `vugu:"data"` // Slot for the symbol.
+
+	Title   string `vugu:"data"`
+	Message string `vugu:"data"`
+
+	ClickAbort input.ClickHandler
+	ClickYes   input.ClickHandler
+}
+
+func (c *ModalRequester) handleClickAbort(event vugu.DOMEvent) {
+	if c.ClickAbort != nil {
+		c.ClickAbort.ClickHandle(input.ClickEvent{DOMEvent: event})
+	}
+	c.SetModal(nil)
+}
+
+func (c *ModalRequester) handleClickYes(event vugu.DOMEvent) {
+	if c.ClickYes != nil {
+		c.ClickYes.ClickHandle(input.ClickEvent{DOMEvent: event})
+	}
+	c.SetModal(nil)
+}
+
+// PageTitle implements PageTitleGetter which is used by PageInfo.
+func (c *ModalRequester) PageTitle() (title, longTitle, shortTitle string) {
+	return c.Title, c.Title, c.Title
+}

components/overlay/modal-requester.vugu

@@ -0,0 +1,31 @@
+<div>
+	<layout:Container>
+		<div class="d3c-1684441516-flex">
+			<vg-comp expr="c.SymbolSlot"></vg-comp>
+			<p vg-content="c.Message" style="white-space: pre-wrap;"></p>
+		</div>
+		<div class="d3c-1684441516-flex" style="justify-content: flex-end; align-items: baseline;">
+			<input:Button vg-if="c.ClickAbort != nil" @Click="c.handleClickAbort(event)">Abort</input:Button>
+			<input:Button vg-if="c.ClickYes != nil" @Click="c.handleClickYes(event)">Yes</input:Button>
+		</div>
+	</layout:Container>
+</div>
+
+<style>
+	.d3c-1684441516-flex {
+		margin: 0.5em 0;
+		display: flex;
+		gap: 0.5em;
+	}
+
+	.d3c-1684441516-flex > * {
+		margin: 0;
+	}
+</style>
+
+<script type="application/x-go">
+	import (
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
+	)
+</script>

components/overlay/modal-requester_vgen.go

@@ -0,0 +1,166 @@
+package overlay
+
+// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vjson"
+import "github.com/vugu/vugu"
+import js "github.com/vugu/vugu/js"
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
+)
+
+func (c *ModalRequester) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+
+	vgout = &vugu.BuildOut{}
+
+	var vgiterkey interface{}
+	_ = vgiterkey
+	var vgn *vugu.VGNode
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+	vgout.Out = append(vgout.Out, vgn)	// root for output
+	{
+		vgparent := vgn
+		_ = vgparent
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+		vgparent.AppendChild(vgn)
+		{
+			vgcompKey := vugu.MakeCompKey(0xF4C6D34297449643^vgin.CurrentPositionHash(), vgiterkey)
+			// ask BuildEnv for prior instance of this specific component
+			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
+			if vgcomp == nil {
+				// create new one if needed
+				vgcomp = new(layout.Container)
+				vgin.BuildEnv.WireComponent(vgcomp)
+			}
+			vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+			vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+				vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+				vgout = &vugu.BuildOut{}
+				vgout.Out = append(vgout.Out, vgn)
+				vgparent := vgn
+				_ = vgparent
+
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}}}
+				vgparent.AppendChild(vgn)
+				{
+					vgparent := vgn
+					_ = vgparent
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					{
+						var vgcomp vugu.Builder = c.SymbolSlot
+						if vgcomp != nil {
+							vgin.BuildEnv.WireComponent(vgcomp)
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "white-space: pre-wrap;"}}}
+					vgparent.AppendChild(vgn)
+					vgn.SetInnerHTML(c.Message)
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684441516-flex"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "justify-content: flex-end; align-items: baseline;"}}}
+				vgparent.AppendChild(vgn)
+				{
+					vgparent := vgn
+					_ = vgparent
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					if c.ClickAbort != nil {
+						{
+							vgcompKey := vugu.MakeCompKey(0xB665D650E0EEB461^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(input.Button)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickAbort(event) })
+							vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Abort"}
+								vgparent.AppendChild(vgn)
+								return
+							})
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+					vgparent.AppendChild(vgn)
+					if c.ClickYes != nil {
+						{
+							vgcompKey := vugu.MakeCompKey(0xA272879670486BAE^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(input.Button)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleClickYes(event) })
+							vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Yes"}
+								vgparent.AppendChild(vgn)
+								return
+							})
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+				vgparent.AppendChild(vgn)
+				return
+			})
+			vgout.Components = append(vgout.Components, vgcomp)
+			vgn = &vugu.VGNode{Component: vgcomp}
+			vgparent.AppendChild(vgn)
+		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
+		vgparent.AppendChild(vgn)
+	}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
+	{
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684441516-flex {\n\t\tmargin: 0.5em 0;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n\n\t.d3c-1684441516-flex > * {\n\t\tmargin: 0;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+	}
+	vgout.AppendCSS(vgn)
+	return vgout
+}
+
+// 'fix' unused imports
+var _ fmt.Stringer
+var _ reflect.Type
+var _ vjson.RawMessage
+var _ js.Value

page-overlays.go

@@ -0,0 +1,22 @@
+package main
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
+	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
+	"github.com/vugu/vugu"
+)
+
+type PageOverlays struct {
+	overlay.OverlayContainerRef
+}
+
+func (c *PageOverlays) handleButton(event vugu.DOMEvent) {
+	c.SetModal(&overlay.ModalRequester{
+		SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}},
+		Title:      "Simple requester",
+		Message:    "This is a simple modal requester, are you happy with it?\nIt also supports multi line text!",
+		ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),
+		ClickYes:   input.ClickFunc(func(event input.ClickEvent) {}),
+	})
+}

page-overlays.vugu

@@ -0,0 +1,30 @@
+<div>
+	<layout:Container>
+		<h1>Modals</h1>
+		<p>If you component or page contains <view:CodeInline>overlay.OverlayContainerRef</view:CodeInline> and is wired correctly, you can create modals very easily.</p>
+		<p>A simple requester modal is already contained in the overlay package. Use it with:</p>
+		<view:Code>
+			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {" +
+							"	c.SetModal(&overlay.ModalRequester{\n" +
+							"		SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
+							"		Title:      \"Simple requester\",\n" +
+							"		Message:    \"This is a simple modal requester, are you happy with it?\\nIt also supports multi line text!\",\n" +
+							"		ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
+							"		ClickYes:   input.ClickFunc(func(event input.ClickEvent) {}),\n" +
+							"	})\n" +
+							"}"' style="margin: 0;"></pre>
+		</view:Code>
+		<input:Button @Click="c.handleButton(event)">Open simple modal</input:Button>
+	</layout:Container>
+</div>
+
+<style>
+</style>
+
+<script type="application/x-go">
+	import (
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
+	)
+</script>

page-overlays_vgen.go

@@ -0,0 +1,186 @@
+package main
+
+// Code generated by vugu via vugugen. Please regenerate instead of editing or add additional code in a separate file. DO NOT EDIT.
+
+import "fmt"
+import "reflect"
+import "github.com/vugu/vjson"
+import "github.com/vugu/vugu"
+import js "github.com/vugu/vugu/js"
+
+import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/view"
+)
+
+func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+
+	vgout = &vugu.BuildOut{}
+
+	var vgiterkey interface{}
+	_ = vgiterkey
+	var vgn *vugu.VGNode
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+	vgout.Out = append(vgout.Out, vgn)	// root for output
+	{
+		vgparent := vgn
+		_ = vgparent
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+		vgparent.AppendChild(vgn)
+		{
+			vgcompKey := vugu.MakeCompKey(0x8B32FC019648006^vgin.CurrentPositionHash(), vgiterkey)
+			// ask BuildEnv for prior instance of this specific component
+			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
+			if vgcomp == nil {
+				// create new one if needed
+				vgcomp = new(layout.Container)
+				vgin.BuildEnv.WireComponent(vgcomp)
+			}
+			vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+			vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+				vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+				vgout = &vugu.BuildOut{}
+				vgout.Out = append(vgout.Out, vgn)
+				vgparent := vgn
+				_ = vgparent
+
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h1", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Modals"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				{
+					vgparent := vgn
+					_ = vgparent
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "If you component or page contains "}
+					vgparent.AppendChild(vgn)
+					{
+						vgcompKey := vugu.MakeCompKey(0x1B9CC39770823BF5^vgin.CurrentPositionHash(), vgiterkey)
+						// ask BuildEnv for prior instance of this specific component
+						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
+						if vgcomp == nil {
+							// create new one if needed
+							vgcomp = new(view.CodeInline)
+							vgin.BuildEnv.WireComponent(vgcomp)
+						}
+						vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+						vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+							vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+							vgout = &vugu.BuildOut{}
+							vgout.Out = append(vgout.Out, vgn)
+							vgparent := vgn
+							_ = vgparent
+
+							vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "overlay.OverlayContainerRef"}
+							vgparent.AppendChild(vgn)
+							return
+						})
+						vgout.Components = append(vgout.Components, vgcomp)
+						vgn = &vugu.VGNode{Component: vgcomp}
+						vgparent.AppendChild(vgn)
+					}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " and is wired correctly, you can create modals very easily."}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("A simple requester modal is already contained in the overlay package. Use it with:"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x9C5F61CA0305F660^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(view.Code)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+						vgout = &vugu.BuildOut{}
+						vgout.Out = append(vgout.Out, vgn)
+						vgparent := vgn
+						_ = vgparent
+
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+						vgparent.AppendChild(vgn)
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "pre", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "style", Val: "margin: 0;"}}}
+						vgparent.AppendChild(vgn)
+						vgn.SetInnerHTML("func (c *PageOverlays) handleButton(event vugu.DOMEvent) {" +
+							"	c.SetModal(&overlay.ModalRequester{\n" +
+							"		SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
+							"		Title:      \"Simple requester\",\n" +
+							"		Message:    \"This is a simple modal requester, are you happy with it?\\nIt also supports multi line text!\",\n" +
+							"		ClickAbort: input.ClickFunc(func(event input.ClickEvent) {}),\n" +
+							"		ClickYes:   input.ClickFunc(func(event input.ClickEvent) {}),\n" +
+							"	})\n" +
+							"}")
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+						vgparent.AppendChild(vgn)
+						return
+					})
+					vgout.Components = append(vgout.Components, vgcomp)
+					vgn = &vugu.VGNode{Component: vgcomp}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x5A0135D77FE2347F^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(input.Button)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleButton(event) })
+					vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+						vgout = &vugu.BuildOut{}
+						vgout.Out = append(vgout.Out, vgn)
+						vgparent := vgn
+						_ = vgparent
+
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Open simple modal"}
+						vgparent.AppendChild(vgn)
+						return
+					})
+					vgout.Components = append(vgout.Components, vgcomp)
+					vgn = &vugu.VGNode{Component: vgcomp}
+					vgparent.AppendChild(vgn)
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
+				vgparent.AppendChild(vgn)
+				return
+			})
+			vgout.Components = append(vgout.Components, vgcomp)
+			vgn = &vugu.VGNode{Component: vgcomp}
+			vgparent.AppendChild(vgn)
+		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n"}
+		vgparent.AppendChild(vgn)
+	}
+	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}
+	{
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n", Attr: []vugu.VGAttribute(nil)})
+	}
+	vgout.AppendCSS(vgn)
+	return vgout
+}
+
+// 'fix' unused imports
+var _ fmt.Stringer
+var _ reflect.Type
+var _ vjson.RawMessage
+var _ js.Value

root.go

@@ -1,9 +1,12 @@
 package main
 
 import (
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
 	"github.com/vugu/vugu"
 )
 
 type Root struct {
-	Body vugu.Builder
+	Body vugu.Builder `vugu:"data"`
+
+	OverlayContainer *overlay.Container `vugu:"data"`
 }

root.vugu

@@ -3,6 +3,7 @@
 	</head>
 	<body>
 		<div style="width: 100vw; height: 100wh;">
+			<vg-comp expr="c.OverlayContainer"></vg-comp>
 			<navigation:Sidebar>
 				<vg-slot name="MenuEntries">
 					<navigation:ButtonFullscreen></navigation:ButtonFullscreen>
@@ -24,6 +25,10 @@
 						<vg-slot name="SymbolSlot"><icons:LCustomize></icons:LCustomize></vg-slot>
 						<vg-slot name="DefaultSlot"><div>Colors</div></vg-slot>
 					</navigation:SidebarEntry>
+					<navigation:SidebarEntry URL="/overlays/">
+						<vg-slot name="SymbolSlot"><icons:LDocument></icons:LDocument></vg-slot>
+						<vg-slot name="DefaultSlot"><div>Overlays</div></vg-slot>
+					</navigation:SidebarEntry>
 				</vg-slot>
 				<vg-slot name="BottomEntries">
 					<navigation:SidebarEntry URL="/user/">

root_vgen.go

@@ -46,7 +46,18 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x13D2A66973251153^vgin.CurrentPositionHash(), vgiterkey)
+					var vgcomp vugu.Builder = c.OverlayContainer
+					if vgcomp != nil {
+						vgin.BuildEnv.WireComponent(vgcomp)
+						vgout.Components = append(vgout.Components, vgcomp)
+						vgn = &vugu.VGNode{Component: vgcomp}
+						vgparent.AppendChild(vgn)
+					}
+				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x961FC23E1D0E2B0D^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.Sidebar)
 					if vgcomp == nil {
@@ -65,7 +76,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xE938629831D22C73^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xB9941BB3060B0608^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.ButtonFullscreen)
 							if vgcomp == nil {
@@ -92,7 +103,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x4F2770B0440D3896^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x9BCC66709F5B5FC4^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -110,7 +121,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xE60BDC191D489035^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x2888A7DC96618E2B^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LHome)
 									if vgcomp == nil {
@@ -149,7 +160,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xD88B026382EDB995^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x23321930E313B763^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -167,7 +178,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x9422483909AB3545^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x50779F17FE66AB6A^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LStar)
 									if vgcomp == nil {
@@ -206,7 +217,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x804942A156C36E40^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x6358DCE5F06DD9C5^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -224,7 +235,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xA158CCD6344C8F14^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x1392BD562D0DC520^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 									if vgcomp == nil {
@@ -263,7 +274,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xFDEE0DA5229078F6^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x55C1CF2617845DEB^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -281,7 +292,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x647FEAD3011C9D78^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xFBA2AAE0C18A3D58^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCustomize)
 									if vgcomp == nil {
@@ -317,6 +328,63 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							vgn = &vugu.VGNode{Component: vgcomp}
 							vgparent.AppendChild(vgn)
 						}
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						{
+							vgcompKey := vugu.MakeCompKey(0x236DDCBADDD06C42^vgin.CurrentPositionHash(), vgiterkey)
+							// ask BuildEnv for prior instance of this specific component
+							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
+							if vgcomp == nil {
+								// create new one if needed
+								vgcomp = new(navigation.SidebarEntry)
+								vgin.BuildEnv.WireComponent(vgcomp)
+							}
+							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.URL = "/overlays/"
+							vgcomp.SymbolSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								{
+									vgcompKey := vugu.MakeCompKey(0x72B82E58E2F7EA80^vgin.CurrentPositionHash(), vgiterkey)
+									// ask BuildEnv for prior instance of this specific component
+									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument)
+									if vgcomp == nil {
+										// create new one if needed
+										vgcomp = new(icons.LDocument)
+										vgin.BuildEnv.WireComponent(vgcomp)
+									}
+									vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+									vgout.Components = append(vgout.Components, vgcomp)
+									vgn = &vugu.VGNode{Component: vgcomp}
+									vgparent.AppendChild(vgn)
+								}
+								return
+							})
+							vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
+								vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
+								vgout = &vugu.BuildOut{}
+								vgout.Out = append(vgout.Out, vgn)
+								vgparent := vgn
+								_ = vgparent
+
+								vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+								vgparent.AppendChild(vgn)
+								{
+									vgparent := vgn
+									_ = vgparent
+									vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Overlays"}
+									vgparent.AppendChild(vgn)
+								}
+								return
+							})
+							vgout.Components = append(vgout.Components, vgcomp)
+							vgn = &vugu.VGNode{Component: vgcomp}
+							vgparent.AppendChild(vgn)
+						}
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						return
@@ -331,7 +399,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xC9B4FB5D75895609^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x4C3861E4C90B286D^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -349,7 +417,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xF93E9305192E8C81^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x193E99FC3B0535F1^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 									if vgcomp == nil {
@@ -388,7 +456,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x7534CF12AA62BFDB^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xB388BDAC5D1B95AC^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -406,7 +474,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x269733CB3FD93BD4^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xFE7C9C5BB6C1F6F7^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LSettings)
 									if vgcomp == nil {

router.go

@@ -6,6 +6,7 @@ import (
 	"log"
 
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
 	"github.com/vugu/vgrouter"
 	"github.com/vugu/vugu"
 )
@@ -25,7 +26,9 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder {
 	router.SetPathPrefix(urlPathPrefix)
 
 	// Create root object.
-	root := &Root{}
+	root := &Root{
+		OverlayContainer: &overlay.Container{},
+	}
 
 	var pageInfo navigation.PageInfo
 
@@ -37,6 +40,9 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder {
 		if c, ok := b.(navigation.PageInfoSetter); ok {
 			c.PageInfoSet(&pageInfo)
 		}
+		if c, ok := b.(overlay.OverlayContainerSetter); ok {
+			c.OverlayContainerSet(root.OverlayContainer)
+		}
 	})
 
 	// Call wire function on root component.
@@ -59,6 +65,10 @@ func vuguSetup(buildEnv *vugu.BuildEnv, eventEnv vugu.EventEnv) vugu.Builder {
 		root.Body = &PageColors{}
 	}))
 
+	router.MustAddRouteExact("/overlays/", vgrouter.RouteHandlerFunc(func(rm *vgrouter.RouteMatch) {
+		root.Body = &PageOverlays{}
+	}))
+
 	router.MustAddRouteExact("/user/", vgrouter.RouteHandlerFunc(func(rm *vgrouter.RouteMatch) {
 		root.Body = &PageUser{}
 	}))

static/css/d3c-theme-base.css

@@ -9,10 +9,12 @@
 	--d3c-color-highlighted: #b7b7b7;
 	--d3c-color-selected: #b7b7b7;
 	--d3c-color-clicked: #b7b7b7;
+
+	--d3c-color-shadow: rgba(0, 0, 0, 0.2);
 }
 
 .d3c-color-layer-1 {
-	--d3c-color-background: rgb(232, 232, 232);
+	--d3c-color-background: #e8e8e8;
 	--d3c-color-text: black;
 
 	--d3c-color-border: #b7b7b7;
@@ -24,7 +26,7 @@
 }
 
 .d3c-color-layer-2 {
-	--d3c-color-background: rgb(207, 207, 207);
+	--d3c-color-background: #cfcfcf;
 	--d3c-color-text: black;
 
 	--d3c-color-border: #b7b7b7;