Improve overlay package

- Add toast overlays
- Add a way to color overlay containers and menus
- Add d3c-button-transparent CSS class
- Update overlay example page

components/input/button.vugu

@@ -27,7 +27,7 @@
 		flex-direction: column;
 	}
 
-	.d3c-1633357633-sidebar .d3c-1633424238, .d3c-1633357633-menu .d3c-1633424238 {
+	.d3c-1633424238.d3c-button-transparent, .d3c-1633357633-sidebar .d3c-1633424238, .d3c-1633357633-menu .d3c-1633424238 {
 		border: none;
 		background-color: transparent;
 	}

components/input/button_vgen.go

@@ -55,7 +55,7 @@ func (c *Button) 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-1633424238 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-1633424238.d3c-button-vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-1633357633-sidebar .d3c-1633424238, .d3c-1633357633-menu .d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-clicked);\n\t}\n\n\t.d3c-1633424238-selected {\n\t\tbackground-color: var(--d3c-color-selected) !important;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
+		vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-1633424238.d3c-button-vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-1633424238.d3c-button-transparent, .d3c-1633357633-sidebar .d3c-1633424238, .d3c-1633357633-menu .d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-clicked);\n\t}\n\n\t.d3c-1633424238-selected {\n\t\tbackground-color: var(--d3c-color-selected) !important;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/overlay/container.go

@@ -3,12 +3,24 @@ package overlay
 import (
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/navigation"
 	"github.com/vugu/vugu"
+	"golang.org/x/exp/slices"
 )
 
 // 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
+	modal                 vugu.Builder `vugu:"data"`
+	modalTitle            string       `vugu:"data"`
+	modalSignalClasses    string       // Additional classes that are applied to the modal menu bar.
+	modalContainerClasses string       // Additional classes that are applied to the whole modal body.
+
+	toasts []ContainerToast `vugu:"data"`
+}
+
+type ContainerToast struct {
+	body vugu.Builder `vugu:"data"`
+
+	signalClasses    string // Additional classes that are applied to the small bar to the left.
+	containerClasses string // Additional classes that are applied to the whole toast.
 }
 
 func (c *Container) handleModalClose(event vugu.DOMEvent) {
@@ -19,10 +31,43 @@ func (c *Container) SetModal(component vugu.Builder) {
 	c.modal = component
 
 	c.modalTitle = ""
+	c.modalContainerClasses = ""
+	c.modalSignalClasses = "d3c-color-accent"
 	// Retrieve title from component if it implements the PageTitleGetter interface.
 	if pageInfo, ok := component.(navigation.PageTitleGetter); ok {
 		c.modalTitle, _, _ = pageInfo.PageTitle()
 	}
+	// Retrieve additional CSS classes from component.
+	if overlayClassesGetter, ok := component.(OverlayClassesGetter); ok {
+		c.modalSignalClasses, c.modalContainerClasses = overlayClassesGetter.OverlayClasses()
+	}
+}
+
+func (c *Container) handleToastClose(event vugu.DOMEvent, toast vugu.Builder) {
+	c.CloseToast(toast)
+}
+
+func (c *Container) AddToast(component vugu.Builder) {
+	toast := ContainerToast{
+		body:          component,
+		signalClasses: "d3c-color-accent",
+	}
+
+	// Retrieve additional classes.
+	if overlayClassesGetter, ok := component.(OverlayClassesGetter); ok {
+		toast.signalClasses, toast.containerClasses = overlayClassesGetter.OverlayClasses()
+	}
+
+	c.toasts = append(c.toasts, toast)
+}
+
+func (c *Container) CloseToast(component vugu.Builder) {
+	for i, toast := range c.toasts {
+		if toast.body == component {
+			c.toasts = slices.Delete(c.toasts, i, i+1)
+			break
+		}
+	}
 }
 
 type OverlayContainerRef struct {

components/overlay/container.vugu

@@ -1,13 +1,22 @@
 <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 :class='c.modalContainerClasses'>
+			<div :class='"d3c-1684423938-modal-menu " + c.modalSignalClasses'>
+				<h3 class="d3c-1684423938-modal-title" style="flex-grow:1" vg-content="c.modalTitle"></h3>
+				<input:Button @Click="c.handleModalClose(event)" class="d3c-button-transparent"><vg-slot name="SymbolSlot"><icons:LCancel></icons:LCancel></vg-slot></input:Button>
 			</div>
 			<vg-comp expr="c.modal"></vg-comp>
 		</div>
 	</div>
+	<div class="d3c-1684423938-toast-container">
+		<div :class='"d3c-1684423938-toast " + toast.containerClasses' vg-for="_, toast := range c.toasts">
+			<div :class='"d3c-1684423938-toast-signal " + toast.signalClasses '></div>
+			<div class="d3c-1684423938-toast-body"><vg-comp expr="toast.body"></vg-comp></div>
+			<div class="d3c-1684423938-toast-menu">
+				<input:Button @Click="c.handleToastClose(event, toast.body)" class="d3c-button-transparent"><vg-slot name="SymbolSlot"><icons:LCancel></icons:LCancel></vg-slot></input:Button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <style>
@@ -37,7 +46,7 @@
 		box-shadow: 0 1em 3em var(--d3c-color-shadow);
 	}
 
-	.d3c-1684423938-menu {
+	.d3c-1684423938-modal-menu {
 		padding: 0.5em;
 		display: flex;
 		gap: 0.5em;
@@ -47,13 +56,49 @@
 		color: var(--d3c-color-text);
 	}
 
-	.d3c-1684423938-menu > * {
+	.d3c-1684423938-modal-menu > * {
 		margin: 0 !important;
 	}
 
-	.d3c-1684423938-title {
+	.d3c-1684423938-modal-title {
 		text-align: center;
 	}
+
+	.d3c-1684423938-toast-container {
+		padding: 1em;
+		pointer-events: none;
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 1em;
+		box-sizing: border-box;
+	}
+
+	.d3c-1684423938-toast {
+		pointer-events: auto;
+		display: flex;
+		background-color: var(--d3c-color-background);
+		border-radius: 4px;
+		overflow: hidden;
+		color: var(--d3c-color-text);
+		box-shadow: 0 1em 2em var(--d3c-color-shadow);
+	}
+
+	.d3c-1684423938-toast-signal {
+		width: 0.5em;
+		height: 100%;
+		background-color: var(--d3c-color-background);
+		color: var(--d3c-color-text);
+	}
+
+	.d3c-1684423938-toast-menu {
+		padding-right: 0.5em;
+	}
 </style>
 
 <script type="application/x-go">
@@ -61,4 +106,4 @@
 		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 	)
-</script>
+</script>

components/overlay/container_vgen.go

@@ -37,19 +37,21 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgparent.AppendChild(vgn)
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 				vgparent.AppendChild(vgn)
+				vgn.AddAttrInterface("class", c.modalContainerClasses)
 				{
 					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"}}}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
 					vgparent.AppendChild(vgn)
+					vgn.AddAttrInterface("class", "d3c-1684423938-modal-menu "+c.modalSignalClasses)
 					{
 						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"}}}
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-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"}
@@ -64,6 +66,8 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgin.BuildEnv.WireComponent(vgcomp)
 							}
 							vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+							vgcomp.AttrMap = make(map[string]interface{}, 8)
+							vgcomp.AttrMap["class"] = "d3c-button-transparent"
 							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)}
@@ -113,12 +117,113 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgparent.AppendChild(vgn)
 			}
 		}
+		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\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-toast-container"}}}
+		vgparent.AppendChild(vgn)
+		{
+			vgparent := vgn
+			_ = vgparent
+			vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+			vgparent.AppendChild(vgn)
+			for vgiterkeyt, toast := range c.toasts {
+				var vgiterkey interface{} = vgiterkeyt
+				_ = vgiterkey
+				toast := toast
+				_ = toast
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.AddAttrInterface("class", "d3c-1684423938-toast "+toast.containerClasses)
+				{
+					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(nil)}
+					vgparent.AppendChild(vgn)
+					vgn.AddAttrInterface("class", "d3c-1684423938-toast-signal "+toast.signalClasses)
+					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-toast-body"}}}
+					vgparent.AppendChild(vgn)
+					{
+						vgparent := vgn
+						_ = vgparent
+						{
+							var vgcomp vugu.Builder = toast.body
+							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: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-toast-menu"}}}
+					vgparent.AppendChild(vgn)
+					{
+						vgparent := vgn
+						_ = vgparent
+						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
+						vgparent.AppendChild(vgn)
+						{
+							vgcompKey := vugu.MakeCompKey(0xA4C000EAE5DBC775^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.AttrMap = make(map[string]interface{}, 8)
+							vgcomp.AttrMap["class"] = "d3c-button-transparent"
+							vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleToastClose(event, toast.body) })
+							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(0x552899AFEF0EE902^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"}
+					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)})
+		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-modal-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-modal-menu > * {\n\t\tmargin: 0 !important;\n\t}\n\n\t.d3c-1684423938-modal-title {\n\t\ttext-align: center;\n\t}\n\n\t.d3c-1684423938-toast-container {\n\t\tpadding: 1em;\n\t\tpointer-events: none;\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tgap: 1em;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.d3c-1684423938-toast {\n\t\tpointer-events: auto;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tborder-radius: 4px;\n\t\toverflow: hidden;\n\t\tcolor: var(--d3c-color-text);\n\t\tbox-shadow: 0 1em 2em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-toast-signal {\n\t\twidth: 0.5em;\n\t\theight: 100%;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-toast-menu {\n\t\tpadding-right: 0.5em;\n\t}\n", Attr: []vugu.VGAttribute(nil)})
 	}
 	vgout.AppendCSS(vgn)
 	return vgout

components/overlay/modal-requester.go

@@ -13,6 +13,8 @@ type ModalRequester struct {
 	Title   string `vugu:"data"`
 	Message string `vugu:"data"`
 
+	SignalColor string // A d3c CSS class for the color scheme of the small bar.
+
 	ClickAbort input.ClickHandler
 	ClickYes   input.ClickHandler
 }
@@ -31,6 +33,11 @@ func (c *ModalRequester) handleClickYes(event vugu.DOMEvent) {
 	c.SetModal(nil)
 }
 
+// OverlayClasses implements OverlayClassesGetter which is used by the overlay package to add classes to overlay elements.
+func (c *ModalRequester) OverlayClasses() (signalClasses, containerClasses string) {
+	return c.SignalColor, ""
+}
+
 // 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

@@ -28,4 +28,4 @@
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 		"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
 	)
-</script>
+</script>

components/overlay/overlay-classes.go

@@ -0,0 +1,8 @@
+package overlay
+
+// OverlayClassesGetter can be implemented by components that are used in overlays.
+// With this mechanic these components can set additional CSS classes to the modal or toast container.
+// One use case is to give a toast or modal some other color with the `d3c-color-*` classes.
+type OverlayClassesGetter interface {
+	OverlayClasses() (signalClasses, containerClasses string)
+}

components/overlay/toast-simple.go

@@ -0,0 +1,19 @@
+package overlay
+
+import (
+	"github.com/vugu/vugu"
+)
+
+type ToastSimple struct {
+	OverlayContainerRef
+
+	SymbolSlot vugu.Builder `vugu:"data"` // Slot for the symbol.
+
+	Message string `vugu:"data"`
+
+	SignalColor string // A d3c CSS class for the color scheme of the small bar.
+}
+
+func (c *ToastSimple) OverlayClasses() (signalClasses, containerClasses string) {
+	return c.SignalColor, ""
+}

components/overlay/toast-simple.vugu

@@ -0,0 +1,26 @@
+<div>
+	<layout:Container>
+		<div class="d3c-1684524720-flex">
+			<vg-comp expr="c.SymbolSlot"></vg-comp>
+			<p vg-content="c.Message" style="white-space: pre-wrap;"></p>
+		</div>
+	</layout:Container>
+</div>
+
+<style>
+	.d3c-1684524720-flex {
+		margin: 0.5em 0;
+		display: flex;
+		gap: 0.5em;
+	}
+
+	.d3c-1684524720-flex > * {
+		margin: 0;
+	}
+</style>
+
+<script type="application/x-go">
+	import (
+		"git.d3nexus.de/Dadido3/D3vugu-components/components/layout"
+	)
+</script>

components/overlay/toast-simple_vgen.go

@@ -0,0 +1,95 @@
+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/layout"
+)
+
+func (c *ToastSimple) 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(0xB9D9A7518285E51F^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-1684524720-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"}
+				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-1684524720-flex {\n\t\tmargin: 0.5em 0;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t}\n\n\t.d3c-1684524720-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

go.mod

@@ -6,6 +6,7 @@ require (
 	github.com/vugu/vgrouter v0.0.0-20200725205318-eeb478c42e5d
 	github.com/vugu/vjson v0.0.0-20200505061711-f9cbed27d3d9
 	github.com/vugu/vugu v0.3.5
+	golang.org/x/exp v0.0.0-20230519143937-03e91628a987
 )
 
 require (

go.sum

@@ -34,6 +34,8 @@ github.com/vugu/vugu v0.3.5/go.mod h1:E0NT8+F8KDmLDKzYTNySlcvljJdfOpBHzcMJ/0bYLf
 github.com/vugu/xxhash v0.0.0-20191111030615-ed24d0179019 h1:8NGiD5gWbVGObr+lnqcbM2rcOQBO6mr+m19BIblCdho=
 github.com/vugu/xxhash v0.0.0-20191111030615-ed24d0179019/go.mod h1:PrBK6+LJXwb+3EnJTHo43Uh4FhjFFwvN4jKk4Zc5zZ8=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/exp v0.0.0-20230519143937-03e91628a987 h1:3xJIFvzUFbu4ls0BTBYcgbCGhA63eAOEMxIHugyXJqA=
+golang.org/x/exp v0.0.0-20230519143937-03e91628a987/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
 golang.org/x/net v0.0.0-20190912160710-24e19bdeb0f2/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/sys v0.0.0-20181031143558-9b800f95dbbc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=

page-colors_vgen.go

@@ -73,7 +73,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x96098CB0B573182A^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x58C38B75AA03AA2E^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -108,7 +108,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x64AD217412230CF^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x80935F5D48DA9F6F^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -141,7 +141,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0xC21BBA903E4FBD23^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x3D2E77D1AA05141^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -174,7 +174,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x736F3EA9E22840DE^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x7590A8285D972FC0^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -207,7 +207,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x7318852D6FF7E225^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x9FA0389941803E7E^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -240,7 +240,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x590B193DE45D2365^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x5DE60228BFA6DC05^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -273,7 +273,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0xBE20635692AF75FB^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x81E6C783DCB222D^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -306,7 +306,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x8F69D506A2B46324^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xEBA4FA16CD695FAC^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -339,7 +339,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x44391F7A18EA68E5^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xD1F22BE520A4D2F1^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -372,7 +372,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0xB3F8269A2D0CCA09^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xF4C97B100AC05156^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -405,7 +405,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x12A4FDCC9B76A6AE^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x2D43E866AD32186A^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -438,7 +438,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgparent := vgn
 						_ = vgparent
 						{
-							vgcompKey := vugu.MakeCompKey(0x67EC49FACA72611D^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x3685F67B1DFF3548^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 							if vgcomp == nil {
@@ -474,7 +474,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x1ABC1BE7C11DEA69^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x3E3BBC1D6D9BB70B^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -516,7 +516,7 @@ func (c *PageColors) 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(0x5B207EA0E767EDAE^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x91799A6A8DB835DC^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -535,7 +535,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0x5776C7EF91365193^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0x97759048726CA018^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LPlus)
 								if vgcomp == nil {
@@ -568,7 +568,7 @@ func (c *PageColors) 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(0xE8DDC80FB1C7BF9A^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x4D56D72CFA7DA1E8^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -620,7 +620,7 @@ func (c *PageColors) 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(0xAE754A121081FB0D^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xD9371741E9BC60EA^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -639,7 +639,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0xD0BA5A84A185DE3B^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0xAFCD2F9B58831CA8^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 								if vgcomp == nil {
@@ -672,7 +672,7 @@ func (c *PageColors) 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(0x2BF23163554B3B6F^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xDC6B84DB1A33BBC1^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -691,7 +691,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0xA8804557FBADAC48^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0xFDACB4A397260016^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LWarning)
 								if vgcomp == nil {
@@ -734,7 +734,7 @@ func (c *PageColors) 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(0x562CBF41D8CE4335^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x82BB143FBA0084FD^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -753,7 +753,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0x9756F4936414E367^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0x2723A1A51826F7EC^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LPlus)
 								if vgcomp == nil {
@@ -786,7 +786,7 @@ func (c *PageColors) 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(0x19470952BBFFB5AF^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xB2E2141C5B44A686^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -838,7 +838,7 @@ func (c *PageColors) 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(0xB6DE95B63367A1F4^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xBEF82AEE9691EC62^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -857,7 +857,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0x81E3F61F5CB00F77^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0xB22C5A6E93C7AC9^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 								if vgcomp == nil {
@@ -890,7 +890,7 @@ func (c *PageColors) 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(0x4661BE319F4A24D5^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x7777775ABAD873ED^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 						if vgcomp == nil {
@@ -909,7 +909,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							_ = vgparent
 
 							{
-								vgcompKey := vugu.MakeCompKey(0xC3E2DEA30EDAAF09^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0x7B260ACC53894132^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LWarning)
 								if vgcomp == nil {
@@ -950,7 +950,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x66CD01C2F9A51315^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x4DC92E263044DAE8^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -1246,7 +1246,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Icons will use the text color by default, if you need to change their stroke/fill coloring, use the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x9A717945C584C892^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x9C302FDE8EE7681^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -1276,7 +1276,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x9EDF37F927354A52^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x2D6DA5E326EE8AC9^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -1315,7 +1315,7 @@ func (c *PageColors) 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(0xAFCD2F9B58831CA8^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xA6E519A5CDC25E68^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 						if vgcomp == nil {
@@ -1333,7 +1333,7 @@ func (c *PageColors) 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(0x81EDE092A6ECA4BE^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x32DB6F58BFDFE6FD^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LWarning)
 						if vgcomp == nil {
@@ -1359,7 +1359,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x4765275A22B050DB^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x80A6F9D5787BE518^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.LayerContainer)
 					if vgcomp == nil {
@@ -1387,7 +1387,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 							vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "This container uses the "}
 							vgparent.AppendChild(vgn)
 							{
-								vgcompKey := vugu.MakeCompKey(0xC07B110D2BA21341^vgin.CurrentPositionHash(), vgiterkey)
+								vgcompKey := vugu.MakeCompKey(0x7793B4B81AE55595^vgin.CurrentPositionHash(), vgiterkey)
 								// ask BuildEnv for prior instance of this specific component
 								vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 								if vgcomp == nil {
@@ -1419,7 +1419,7 @@ func (c *PageColors) 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(0x2884ECF9CF6F9896^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x35407C776AEDFA2^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -1436,7 +1436,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x88AAFA98B3078878^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x170C1E72F015DBBE^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LPlus)
 									if vgcomp == nil {
@@ -1469,7 +1469,7 @@ func (c *PageColors) 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(0x4CDA282D533E2C70^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xAF0BB57570FA91AF^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -1488,7 +1488,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xD83B41FB3807972D^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x66385E7ADD163FB1^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LPlus)
 									if vgcomp == nil {
@@ -1529,7 +1529,7 @@ func (c *PageColors) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x13CD951865998F92^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x92E6E708166BE47E^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.LayerContainer)
 					if vgcomp == nil {
@@ -1550,7 +1550,7 @@ func (c *PageColors) 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(0xB45B7C9CDA346D29^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xFB49BCCB77EF69A0^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LWarning)
 							if vgcomp == nil {

page-overlays.go

@@ -1,6 +1,8 @@
 package main
 
 import (
+	"time"
+
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
 	"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
 	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
@@ -11,12 +13,29 @@ type PageOverlays struct {
 	overlay.OverlayContainerRef
 }
 
-func (c *PageOverlays) handleButton(event vugu.DOMEvent) {
+func (c *PageOverlays) handleSimpleModalButton(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) {}),
+		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!",
+		SignalColor: "d3c-color-accent",
+		ClickAbort:  input.ClickFunc(func(event input.ClickEvent) {}),
+		ClickYes:    input.ClickFunc(func(event input.ClickEvent) {}),
+	})
+}
+
+func (c *PageOverlays) handleSimpleToastButton(event vugu.DOMEvent) {
+	c.AddToast(&overlay.ToastSimple{
+		SymbolSlot:  &icons.LInfoCircle{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}},
+		Message:     "This is a simple toast!\nIt supports multiple lines and has an icon slot.\nThere also can be multiple of it at the same time, this one was opened at " + time.Now().Format(time.TimeOnly) + ".",
+		SignalColor: "d3c-color-accent",
+	})
+}
+
+func (c *PageOverlays) handleWarningToastButton(event vugu.DOMEvent) {
+	c.AddToast(&overlay.ToastSimple{
+		SymbolSlot:  &icons.LWarning{AttrMap: vugu.AttrMap{"style": "font-size: 2em;", "class": "d3c-color-caution d3c-icon-use-color"}},
+		Message:     "This is a warning, be careful!",
+		SignalColor: "d3c-color-caution",
 	})
 }

page-overlays.vugu

@@ -1,20 +1,38 @@
 <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>
+		<h1>Overlays</h1>
+		<p>Overlays are handled by the <view:CodeInline>overlay.Container</view:CodeInline> component which has to be embedded into your root component.</p>
+		<p>Every page or component that creates overlays has to embed the <view:CodeInline>overlay.OverlayContainerRef</view:CodeInline> structure. Your wiring function also needs to set the reference to your <view:CodeInline>overlay.Container</view:CodeInline> that you have placed in your root component.</p>
+
+		<h2>Modals</h2>
 		<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) {" +
+			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
 							"	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" +
+							"		SignalColor: \"d3c-color-accent\",\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.handleSimpleModalButton(event)">Open simple modal</input:Button>
+
+		<h2>Toasts</h2>
+		<p>A simple text and icon containing toast is already contained in the overlay package. Use it with:</p>
+		<view:Code>
+			<pre vg-content='"func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
+							"	c.AddToast(&overlay.ToastSimple{\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" +
+							"		Message:     \"This is a simple toast!\\nIt supports multiple lines and has an icon slot.\\nThere also can be multiple of it at the same time, this one was opened at \" + time.Now().Format(time.TimeOnly) + \".\",\n" +
+							"		SignalColor: \"d3c-color-accent\",\n" +
 							"	})\n" +
 							"}"' style="margin: 0;"></pre>
 		</view:Code>
-		<input:Button @Click="c.handleButton(event)">Open simple modal</input:Button>
+		<input:Button @Click="c.handleSimpleToastButton(event)">Open simple toast</input:Button>
+		<input:Button @Click="c.handleWarningToastButton(event)">Open warning toast</input:Button>
 	</layout:Container>
 </div>
 

page-overlays_vgen.go

@@ -29,7 +29,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
 		vgparent.AppendChild(vgn)
 		{
-			vgcompKey := vugu.MakeCompKey(0x8B32FC019648006^vgin.CurrentPositionHash(), vgiterkey)
+			vgcompKey := vugu.MakeCompKey(0x52AAFCFE6AA27B67^vgin.CurrentPositionHash(), vgiterkey)
 			// ask BuildEnv for prior instance of this specific component
 			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
 			if vgcomp == nil {
@@ -49,7 +49,44 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				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.SetInnerHTML(vugu.HTML("Overlays"))
+				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: "Overlays are handles by the "}
+					vgparent.AppendChild(vgn)
+					{
+						vgcompKey := vugu.MakeCompKey(0x98FA206D4A8EB1A5^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.Container"}
+							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: " component which has to be embedded into your root component."}
+					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)}
@@ -57,10 +94,10 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				{
 					vgparent := vgn
 					_ = vgparent
-					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "If you component or page contains "}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Every page or component that creates overlays has to embed the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x1B9CC39770823BF5^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x12EDAAD1660231D4^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -84,9 +121,41 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						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."}
+					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " structure. Your wiring function also needs to set the reference to your "}
+					vgparent.AppendChild(vgn)
+					{
+						vgcompKey := vugu.MakeCompKey(0x6BE202C38EAC2939^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.Container"}
+							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: " that you have placed in your root component."}
 					vgparent.AppendChild(vgn)
 				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h2", 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)}
@@ -95,7 +164,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x9C5F61CA0305F660^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x5565E66B9FF31A10^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -115,13 +184,14 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						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) {" +
+						vgn.SetInnerHTML("func (c *PageOverlays) handleButton(event vugu.DOMEvent) {\n" +
 							"	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" +
+							"		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" +
+							"		SignalColor: \"d3c-color-accent\",\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"}
@@ -135,7 +205,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x5A0135D77FE2347F^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x7C62485D3D2933F^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -144,7 +214,7 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						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.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleSimpleModalButton(event) })
 					vgcomp.DefaultSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)}
 						vgout = &vugu.BuildOut{}
@@ -160,6 +230,110 @@ func (c *PageOverlays) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Component: vgcomp}
 					vgparent.AppendChild(vgn)
 				}
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h2", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Toasts"))
+				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 text and icon containing toast 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(0x11C56611B2245D6B^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) {\n" +
+							"	c.AddToast(&overlay.ToastSimple{\n" +
+							"		SymbolSlot: &icons.LInfoCircle{AttrMap: vugu.AttrMap{\"style\": \"font-size: 2em;\"}},\n" +
+							"		Message:     \"This is a simple toast!\\nIt supports multiple lines and has an icon slot.\\nThere also can be multiple of it at the same time, this one was opened at \" + time.Now().Format(time.TimeOnly) + \".\",\n" +
+							"		SignalColor: \"d3c-color-accent\",\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(0x172E92B73BA79BEE^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.handleSimpleToastButton(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 toast"}
+						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(0x7EA3FB75145AFEBD^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.handleWarningToastButton(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 warning toast"}
+						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

root_vgen.go

@@ -57,7 +57,7 @@ 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(0x961FC23E1D0E2B0D^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x13D2A66973251153^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.Sidebar)
 					if vgcomp == nil {
@@ -76,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(0xB9941BB3060B0608^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xE938629831D22C73^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.ButtonFullscreen)
 							if vgcomp == nil {
@@ -103,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(0x9BCC66709F5B5FC4^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x512C516F370EBA81^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -121,7 +121,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x2888A7DC96618E2B^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xE60BDC191D489035^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LHome)
 									if vgcomp == nil {
@@ -160,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(0x23321930E313B763^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xEF681D2FC420491E^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -178,7 +178,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x50779F17FE66AB6A^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x9422483909AB3545^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LStar)
 									if vgcomp == nil {
@@ -217,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(0x6358DCE5F06DD9C5^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x5A9A5FC2B82656D3^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -235,7 +235,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x1392BD562D0DC520^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xA158CCD6344C8F14^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LInfoCircle)
 									if vgcomp == nil {
@@ -274,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(0x55C1CF2617845DEB^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x7A43D1F40A5008FA^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -292,7 +292,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xFBA2AAE0C18A3D58^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x647FEAD3011C9D78^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LCustomize)
 									if vgcomp == nil {
@@ -331,7 +331,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(0x236DDCBADDD06C42^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xC8F3C6E3C21BB663^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -349,7 +349,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x72B82E58E2F7EA80^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x21CE96F5EEBC0DE0^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument)
 									if vgcomp == nil {
@@ -399,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(0x4C3861E4C90B286D^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x2D42CEB753CF5843^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -417,7 +417,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0x193E99FC3B0535F1^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xF93E9305192E8C81^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 									if vgcomp == nil {
@@ -456,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(0xB388BDAC5D1B95AC^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x305B37D58E5D5A08^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*navigation.SidebarEntry)
 							if vgcomp == nil {
@@ -474,7 +474,7 @@ func (c *Root) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								_ = vgparent
 
 								{
-									vgcompKey := vugu.MakeCompKey(0xFE7C9C5BB6C1F6F7^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0x269733CB3FD93BD4^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LSettings)
 									if vgcomp == nil {