diff --git a/components/input/button.go b/components/input/button.go index 902882f..83515fb 100644 --- a/components/input/button.go +++ b/components/input/button.go @@ -8,10 +8,25 @@ type Button struct { IconSlot vugu.Builder `vugu:"data"` // Slot for the symbol. DefaultSlot vugu.Builder `vugu:"data"` + Bind *bool `vugu:"data"` // A data binding with some bool variable. If this contains a reference, the button can be toggled. + Click ClickHandler // External handler that is called upon an event. + + classes string // Additional computed classes that are added to the component. +} + +func (c *Button) Compute(ctx vugu.ComputeCtx) { + if c.Bind != nil && *c.Bind { + c.classes = "d3c-color-accent" + } else { + c.classes = "" + } } func (c *Button) HandleClick(event vugu.DOMEvent) { + if c.Bind != nil { + *c.Bind = !*c.Bind + } if c.Click != nil { c.Click.ClickHandle(ClickEvent{DOMEvent: event}) } diff --git a/components/input/button.vugu b/components/input/button.vugu index 58ce72f..dc00d8c 100644 --- a/components/input/button.vugu +++ b/components/input/button.vugu @@ -1,4 +1,4 @@ - @@ -44,7 +44,7 @@ } .d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter { - background-color: var(--d3c-color-accent-highlighted) !important; + background-color: var(--d3c-color-accent) !important; } .d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) { @@ -60,7 +60,7 @@ } .d3c-1633424238:focus-visible { - outline: 1px solid var(--d3c-color-accent-focused); + outline: 1px solid var(--d3c-color-accent); } diff --git a/components/input/button_vgen.go b/components/input/button_vgen.go index 4cbbd31..9d16a28 100644 --- a/components/input/button_vgen.go +++ b/components/input/button_vgen.go @@ -21,7 +21,7 @@ func (c *Button) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { var vgn *vugu.VGNode vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "button", Attr: []vugu.VGAttribute(nil)} vgout.Out = append(vgout.Out, vgn) // root for output - vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238"}) + vgn.AddAttrList(utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1633424238 " + c.classes}) vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{ EventType: "click", Func: func(event vugu.DOMEvent) { c.HandleClick(event) }, @@ -58,7 +58,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\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\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-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1633424238, .d3c-button-transparent.d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent-highlighted) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\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-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\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-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1633424238, .d3c-button-transparent.d3c-1633424238 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\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-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/input/field.vugu b/components/input/field.vugu index adfbc57..cdd3080 100644 --- a/components/input/field.vugu +++ b/components/input/field.vugu @@ -39,7 +39,7 @@ } .d3c-1684925699:has(> input:focus) { - outline: 1px solid var(--d3c-color-accent-focused); + outline: 1px solid var(--d3c-color-accent); } diff --git a/components/input/field_vgen.go b/components/input/field_vgen.go index 0d2c503..11e132a 100644 --- a/components/input/field_vgen.go +++ b/components/input/field_vgen.go @@ -57,7 +57,7 @@ func (c *Field) 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-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\tmargin: 0.5em 0;\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\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\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699 > * {\n\t\tmargin: 0;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\tmargin: 0.5em 0;\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\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\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699 > * {\n\t\tmargin: 0;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/navigation/sidebar-entry.vugu b/components/navigation/sidebar-entry.vugu index 5081b80..f096a98 100644 --- a/components/navigation/sidebar-entry.vugu +++ b/components/navigation/sidebar-entry.vugu @@ -43,7 +43,7 @@ } .d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter { - background-color: var(--d3c-color-accent-highlighted) !important; + background-color: var(--d3c-color-accent) !important; } .d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) { @@ -59,7 +59,7 @@ } .d3c-1683622560:focus-visible { - outline: 1px solid var(--d3c-color-accent-focused); + outline: 1px solid var(--d3c-color-accent); } diff --git a/components/navigation/sidebar-entry_vgen.go b/components/navigation/sidebar-entry_vgen.go index e90fe3b..d5f6248 100644 --- a/components/navigation/sidebar-entry_vgen.go +++ b/components/navigation/sidebar-entry_vgen.go @@ -58,7 +58,7 @@ func (c *SidebarEntry) 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-1683622560 {\n\t\tposition: relative;\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-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1683622560, .d3c-button-transparent.d3c-1683622560 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent-highlighted) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent-focused);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tposition: relative;\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-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-transparent .d3c-1683622560, .d3c-button-transparent.d3c-1683622560 {\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 1px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/page-input.go b/page-input.go index d6a8132..0294f08 100644 --- a/page-input.go +++ b/page-input.go @@ -1,7 +1,8 @@ package main type PageInput struct { - button1Counter int `vugu:"data"` + button1Counter int `vugu:"data"` + button4Bool bool `vugu:"data"` input1String string `vugu:"data"` input2Int int `vugu:"data"` diff --git a/page-input.vugu b/page-input.vugu index 1a7b284..51dc1ec 100644 --- a/page-input.vugu +++ b/page-input.vugu @@ -37,6 +37,12 @@ Something +

Buttons can be bound to boolean variables, in this case they will function as a toggle:

+ + 

+		
+		Toggle me!
+		
 
 		
Input fields

 		
Input fields can be bound to data. They will automatically change their type based on the bound data type.

diff --git a/page-input_vgen.go b/page-input_vgen.go
index 079187b..15e20fb 100644
--- a/page-input_vgen.go
+++ b/page-input_vgen.go
@@ -31,7 +31,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
 		vgparent.AppendChild(vgn)
 		{
-			vgcompKey := vugu.MakeCompKey(0x2CD946D4B86DA23D^vgin.CurrentPositionHash(), vgiterkey)
+			vgcompKey := vugu.MakeCompKey(0xDF5D3F79949389E5^vgin.CurrentPositionHash(), vgiterkey)
 			// ask BuildEnv for prior instance of this specific component
 			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
 			if vgcomp == nil {
@@ -62,7 +62,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Clickable components support the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x6B340105B051F54F^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x8B4C45FD29FDFBBC^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -89,7 +89,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " event that handlers can be registered to with "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0xBB4D6C3CC3E35F46^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xB75B9AD43FA62FAC^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -117,7 +117,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x6C47BAC12EA7F971^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xA00EEDE2E930F00F^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -166,7 +166,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x3802F5A99C90269^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x2DBAE75227B0F529^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -198,7 +198,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x6718C2DF2385C49B^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xE19829F002BBD424^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -232,7 +232,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xFAA54896DE5321BD^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x3C96CB3EBB39445D^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -267,7 +267,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x70891725CFFFB1CC^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x8018CCE8E762AFA9^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -284,7 +284,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						_ = vgparent
 
 						{
-							vgcompKey := vugu.MakeCompKey(0xCB4B3B9B14DEC44D^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xBE684A63A3B94236^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument)
 							if vgcomp == nil {
@@ -330,7 +330,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Use the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x405469E963CD877^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x307BBC85FB56FDE5^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -360,7 +360,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xC756C1C3FF4866F2^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x2BE5347445C1EF5F^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -395,7 +395,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x73539CEA42E45AED^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x55177BCCED839985^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -414,7 +414,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						_ = vgparent
 
 						{
-							vgcompKey := vugu.MakeCompKey(0xA9BC87B39E303BAC^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xC688D04EC2EDF2AB^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 							if vgcomp == nil {
@@ -446,6 +446,76 @@ func (c *PageInput) 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"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Buttons can be bound to boolean variable, in this case they will function as a toggle:"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0x4F4F880E626F4F25^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("Toggle me!")
+						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(0x58D93F32F03504E1^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.Bind = &c.button4Bool
+					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: "Toggle me!"}
+						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(3), Namespace: "", Data: "span", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(fmt.Sprintf(`Boolean is set to %v.`, c.button4Bool))
 				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)}
@@ -459,7 +529,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x8CCA2FEA494180C4^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x8E059AF11DFD605^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -497,7 +567,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xD0084DE093F75708^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x756CB00237D8810^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -531,7 +601,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xA90B3646A25AD8FB^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x7C3A36DA5DCF3ED3^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -565,7 +635,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x134E1E287071FC6A^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xA262AF139BBC7695^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
diff --git a/static/css/d3c-theme-base.css b/static/css/d3c-theme-base.css
index cb7ca65..06a566e 100644
--- a/static/css/d3c-theme-base.css
+++ b/static/css/d3c-theme-base.css
@@ -8,14 +8,11 @@
 	--d3c-color-hovered: #dadada;		/*Elements being hovered by the input cursor.*/
 	--d3c-color-focused: #b7b7b7;		/*Elements being "pre" selected and can receive keyboard events.*/
 	--d3c-color-activated: #b7b7b7;	/*Elements being actively pressed or interacted with.*/
-	--d3c-color-highlighted: #b7b7b7;	/*Elements being highlighted for any other reason. This has mostly nothing to do with user interaction.*/
+	--d3c-color-highlighted: #b7b7b7;	/*Elements being highlighted for any other reason, like a selected or active element. But not due to user interaction.*/
 
 	/*The following special colors are meant for text and lines and must contrast well with --d3c-color-background.*/
 	/*Elements should only use the colors sparingly, otherwise it would cause too much visual clutter.*/
-	--d3c-color-accent-hovered: #1c6491;		/*Elements being hovered by the input cursor.*/
-	--d3c-color-accent-focused: #0071b7;		/*Elements being "pre" selected and can receive keyboard events.*/
-	--d3c-color-accent-activated: #0071b7;		/*Elements being actively pressed or interacted with.*/
-	--d3c-color-accent-highlighted: #0071b7;	/*Elements being highlighted for any other reason. This has mostly nothing to do with user interaction.*/
+	--d3c-color-accent: #0071b7;	/*General accent color.*/
 
 	--d3c-color-shadow: rgba(0, 0, 0, 0.2);
 }
@@ -30,6 +27,8 @@
 	--d3c-color-focused: #b7b7b7;
 	--d3c-color-activated: #b7b7b7;
 	--d3c-color-highlighted: #b7b7b7;
+
+	--d3c-color-accent: #0071b7;
 }
 
 .d3c-color-layer-2 {
@@ -42,6 +41,22 @@
 	--d3c-color-focused: #b7b7b7;
 	--d3c-color-activated: #b7b7b7;
 	--d3c-color-highlighted: #b7b7b7;
+
+	--d3c-color-accent: #0071b7;
+}
+
+.d3c-color-accent {
+	--d3c-color-background: #0063a1;
+	--d3c-color-text: white;
+
+	--d3c-color-border: #004671;
+
+	--d3c-color-hovered: #005285;
+	--d3c-color-focused: #004671;
+	--d3c-color-activated: #004671;
+	--d3c-color-highlighted: #004671;
+
+	--d3c-color-accent: #98c3ff;
 }
 
 .d3c-color-success {
@@ -54,6 +69,8 @@
 	--d3c-color-focused: #116700;
 	--d3c-color-activated: #116700;
 	--d3c-color-highlighted: #116700;
+
+	--d3c-color-accent: #006aff;
 }
 
 .d3c-color-success-faded {
@@ -66,6 +83,8 @@
 	--d3c-color-focused: #a3d599;
 	--d3c-color-activated: #a3d599;
 	--d3c-color-highlighted: #a3d599;
+
+	--d3c-color-accent: #0071b7;
 }
 
 .d3c-color-attention {
@@ -78,6 +97,8 @@
 	--d3c-color-focused: #004671;
 	--d3c-color-activated: #004671;
 	--d3c-color-highlighted: #004671;
+
+	--d3c-color-accent: #006aff;
 }
 
 .d3c-color-attention-faded {
@@ -90,6 +111,8 @@
 	--d3c-color-focused: #a1c5dc;
 	--d3c-color-activated: #a1c5dc;
 	--d3c-color-highlighted: #a1c5dc;
+
+	--d3c-color-accent: #0071b7;
 }
 
 .d3c-color-caution {
@@ -102,6 +125,8 @@
 	--d3c-color-focused: #7a6d00;
 	--d3c-color-activated: #7a6d00;
 	--d3c-color-highlighted: #7a6d00;
+
+	--d3c-color-accent: #006aff;
 }
 
 .d3c-color-caution-faded {
@@ -114,6 +139,8 @@
 	--d3c-color-focused: #dbd184;
 	--d3c-color-activated: #dbd184;
 	--d3c-color-highlighted: #dbd184;
+
+	--d3c-color-accent: #0071b7;
 }
 
 .d3c-color-critical {
@@ -126,6 +153,8 @@
 	--d3c-color-focused: #930000;
 	--d3c-color-activated: #930000;
 	--d3c-color-highlighted: #930000;
+
+	--d3c-color-accent: #006aff;
 }
 
 .d3c-color-critical-faded {
@@ -138,4 +167,6 @@
 	--d3c-color-focused: #d9b4b4;
 	--d3c-color-activated: #d9b4b4;
 	--d3c-color-highlighted: #d9b4b4;
+
+	--d3c-color-accent: #0071b7;
 }