Add new className parameter to all DSL builder functions.

26 files changed, 169 insertions, 54 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt b/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
index 10e8e82f..e21b4f85 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Bold.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *b*.
@@ -57,10 +58,11 @@ fun Container.bold(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Bold.() -> Unit)? = null
 ): Bold {
-    val bold = Bold(content, rich, align, classes).apply { init?.invoke(this) }
+    val bold = Bold(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(bold)
     return bold
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
index 44a9a8f3..65527f94 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt
@@ -28,6 +28,7 @@ import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Button styles.
@@ -88,30 +89,37 @@ open class Button(
      * Button label.
      */
     var text by refreshOnUpdate(text)
+
     /**
      * Button icon.
      */
     var icon by refreshOnUpdate(icon)
+
     /**
      * Button style.
      */
     var style by refreshOnUpdate(style)
+
     /**
      * Button types.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * Determines if button is disabled.
      */
     var disabled by refreshOnUpdate(disabled)
+
     /**
      * Button image.
      */
     var image: ResString? by refreshOnUpdate()
+
     /**
      * Button size.
      */
     var size: ButtonSize? by refreshOnUpdate()
+
     /**
      * Determines if the button takes all the space horizontally.
      */
@@ -155,6 +163,7 @@ open class Button(
         }
         return this
     }
+
     /**
      * Makes the button focused.
      */
@@ -181,10 +190,11 @@ fun Container.button(
     style: ButtonStyle = ButtonStyle.PRIMARY,
     type: ButtonType = ButtonType.BUTTON,
     disabled: Boolean = false,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Button.() -> Unit)? = null
 ): Button {
-    val button = Button(text, icon, style, type, disabled, classes).apply { init?.invoke(this) }
+    val button = Button(text, icon, style, type, disabled, classes ?: className.set).apply { init?.invoke(this) }
     this.add(button)
     return button
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
index 840d5dc7..6d3943ca 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Canvas.kt
@@ -27,6 +27,7 @@ import org.w3c.dom.HTMLCanvasElement
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Canvas component.
@@ -43,6 +44,7 @@ open class Canvas(
      * The width of the canvas.
      */
     var canvasWidth by refreshOnUpdate(canvasWidth)
+
     /**
      * The height of the canvas.
      */
@@ -84,11 +86,13 @@ open class Canvas(
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.canvas(
-    canvasWidth: Int? = null, canvasHeight: Int? = null, classes: Set<String> = setOf(),
+    canvasWidth: Int? = null, canvasHeight: Int? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Canvas.() -> Unit)? = null
 ): Canvas {
     val canvas =
-        Canvas(canvasWidth, canvasHeight, classes).apply { init?.invoke(this) }
+        Canvas(canvasWidth, canvasHeight, classes ?: className.set).apply { init?.invoke(this) }
     this.add(canvas)
     return canvas
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt b/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
index 34910205..f922d0e0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/CustomTag.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.html
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML custom tag component.
@@ -71,11 +72,13 @@ fun Container.customTag(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     attributes: Map<String, String> = mapOf(),
     init: (CustomTag.() -> Unit)? = null
 ): CustomTag {
-    val customTag = CustomTag(elementName, content, rich, align, classes, attributes).apply { init?.invoke(this) }
+    val customTag =
+        CustomTag(elementName, content, rich, align, classes ?: className.set, attributes).apply { init?.invoke(this) }
     this.add(customTag)
     return customTag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Div.kt b/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
index 2ffabe49..e43043e4 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Div.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *div*.
@@ -57,10 +58,11 @@ fun Container.div(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Div.() -> Unit)? = null
 ): Div {
-    val div = Div(content, rich, align, classes).apply { init?.invoke(this) }
+    val div = Div(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(div)
     return div
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
index c71e346f..87e6e43a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *footer*.
@@ -57,10 +58,11 @@ fun Container.footer(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Footer.() -> Unit)? = null
 ): Footer {
-    val footer = Footer(content, rich, align, classes).apply { init?.invoke(this) }
+    val footer = Footer(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(footer)
     return footer
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H1.kt b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
index 6a3ac9cc..dbffb628 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h1*.
@@ -57,10 +58,11 @@ fun Container.h1(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H1.() -> Unit)? = null
 ): H1 {
-    val h1 = H1(content, rich, align, classes).apply { init?.invoke(this) }
+    val h1 = H1(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h1)
     return h1
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H2.kt b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
index 7bdd3473..ad6fd793 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h2*.
@@ -57,10 +58,11 @@ fun Container.h2(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H2.() -> Unit)? = null
 ): H2 {
-    val h2 = H2(content, rich, align, classes).apply { init?.invoke(this) }
+    val h2 = H2(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h2)
     return h2
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H3.kt b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
index 1a2efdbb..c21dcb33 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h3*.
@@ -57,10 +58,11 @@ fun Container.h3(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H3.() -> Unit)? = null
 ): H3 {
-    val h3 = H3(content, rich, align, classes).apply { init?.invoke(this) }
+    val h3 = H3(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h3)
     return h3
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H4.kt b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
index ae00b8a7..903c53ae 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h4*.
@@ -57,10 +58,11 @@ fun Container.h4(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H4.() -> Unit)? = null
 ): H4 {
-    val h4 = H4(content, rich, align, classes).apply { init?.invoke(this) }
+    val h4 = H4(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h4)
     return h4
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H5.kt b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
index c40a0658..f7f268d3 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h5*.
@@ -57,10 +58,11 @@ fun Container.h5(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H5.() -> Unit)? = null
 ): H5 {
-    val h5 = H5(content, rich, align, classes).apply { init?.invoke(this) }
+    val h5 = H5(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h5)
     return h5
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H6.kt b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
index 048ab5df..1d9d3429 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *h6*.
@@ -57,10 +58,11 @@ fun Container.h6(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (H6.() -> Unit)? = null
 ): H6 {
-    val h6 = H6(content, rich, align, classes).apply { init?.invoke(this) }
+    val h6 = H6(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(h6)
     return h6
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Header.kt b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
index e62e884e..4f71a669 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *header*.
@@ -57,10 +58,11 @@ fun Container.header(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Header.() -> Unit)? = null
 ): Header {
-    val header = Header(content, rich, align, classes).apply { init?.invoke(this) }
+    val header = Header(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(header)
     return header
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt b/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
index dad33ed4..f164f87d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Iframe.kt
@@ -26,6 +26,7 @@ import org.w3c.dom.Window
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Iframe sandbox options.
@@ -59,26 +60,32 @@ open class Iframe(
      * The iframe document address.
      */
     var src by refreshOnUpdate(src)
+
     /**
      * The HTML content of the iframe.
      */
     var srcdoc by refreshOnUpdate(srcdoc)
+
     /**
      * The name of the iframe.
      */
     var name by refreshOnUpdate(name)
+
     /**
      * The width of the iframe.
      */
     var iframeWidth by refreshOnUpdate(iframeWidth)
+
     /**
      * The height of the iframe.
      */
     var iframeHeight by refreshOnUpdate(iframeHeight)
+
     /**
      * A set of Sandbox options.
      */
     var sandbox by refreshOnUpdate(sandbox)
+
     /**
      * A current location URL of the iframe.
      */
@@ -141,11 +148,17 @@ open class Iframe(
  */
 fun Container.iframe(
     src: String? = null, srcdoc: String? = null, name: String? = null, iframeWidth: Int? = null,
-    iframeHeight: Int? = null, sandbox: Set<Sandbox>? = null, classes: Set<String> = setOf(),
+    iframeHeight: Int? = null, sandbox: Set<Sandbox>? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Iframe.() -> Unit)? = null
 ): Iframe {
     val iframe =
-        Iframe(src, srcdoc, name, iframeWidth, iframeHeight, sandbox, classes).apply { init?.invoke(this) }
+        Iframe(src, srcdoc, name, iframeWidth, iframeHeight, sandbox, classes ?: className.set).apply {
+            init?.invoke(
+                this
+            )
+        }
     this.add(iframe)
     return iframe
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
index 6496b042..f21d515f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Image.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.utils.set
 
 /**
  * Image shapes.
@@ -56,18 +57,22 @@ open class Image(
      * URL of the image.
      */
     var src by refreshOnUpdate(src)
+
     /**
      * The alternative text of the image.
      */
     var alt by refreshOnUpdate(alt)
+
     /**
      * Determines if the image is rendered as responsive.
      */
     var responsive by refreshOnUpdate(responsive)
+
     /**
      * The shape of the image.
      */
     var shape by refreshOnUpdate(shape)
+
     /**
      * Determines if the image is rendered as centered.
      */
@@ -108,9 +113,12 @@ open class Image(
  */
 fun Container.image(
     src: ResString, alt: String? = null, responsive: Boolean = false, shape: ImageShape? = null,
-    centered: Boolean = false, classes: Set<String> = setOf(), init: (Image.() -> Unit)? = null
+    centered: Boolean = false,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Image.() -> Unit)? = null
 ): Image {
-    val image = Image(src, alt, responsive, shape, centered, classes).apply { init?.invoke(this) }
+    val image = Image(src, alt, responsive, shape, centered, classes ?: className.set).apply { init?.invoke(this) }
     this.add(image)
     return image
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Li.kt b/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
index 75157d60..d9886acd 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Li.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *li*.
@@ -57,10 +58,11 @@ fun Container.li(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Li.() -> Unit)? = null
 ): Li {
-    val li = Li(content, rich, align, classes).apply { init?.invoke(this) }
+    val li = Li(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(li)
     return li
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
index 2c2f1723..819a8aae 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Link.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.ResString
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * Link component.
@@ -36,32 +37,52 @@ import pl.treksoft.kvision.panel.SimplePanel
  * @param url link URL address
  * @param icon link icon
  * @param image link image
+ * @param separator a separator between label and icon/image (defaults to space)
+ * @param labelFirst determines if the label is put before children elements (defaults to true)
  * @param classes a set of CSS class names
  */
 open class Link(
     label: String, url: String? = null, icon: String? = null, image: ResString? = null,
+    separator: String? = null, labelFirst: Boolean = true,
     classes: Set<String> = setOf()
 ) : SimplePanel(classes) {
     /**
      * Link label.
      */
     var label by refreshOnUpdate(label)
+
     /**
      * Link URL address.
      */
     var url by refreshOnUpdate(url)
+
     /**
      * Link icon.
      */
     var icon by refreshOnUpdate(icon)
+
     /**
      * Link image.
      */
     var image by refreshOnUpdate(image)
 
+    /**
+     * A separator between label and icon/image.
+     */
+    var separator by refreshOnUpdate(separator)
+
+    /**
+     * Determines if the label is put before children elements.
+     */
+    var labelFirst by refreshOnUpdate(labelFirst)
+
     override fun render(): VNode {
-        val t = createLabelWithIcon(label, icon, image)
-        return render("a", t + childrenVNodes())
+        val t = createLabelWithIcon(label, icon, image, separator)
+        return if (labelFirst) {
+            render("a", t + childrenVNodes())
+        } else {
+            render("a", childrenVNodes() + t)
+        }
     }
 
     override fun getSnAttrs(): List<StringPair> {
@@ -92,9 +113,13 @@ open class Link(
  */
 fun Container.link(
     label: String, url: String? = null, icon: String? = null, image: ResString? = null,
-    classes: Set<String> = setOf(), init: (Link.() -> Unit)? = null
+    separator: String? = null, labelFirst: Boolean = true,
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Link.() -> Unit)? = null
 ): Link {
-    val link = Link(label, url, icon, image, classes).apply { init?.invoke(this) }
+    val link =
+        Link(label, url, icon, image, separator, labelFirst, classes ?: className.set).apply { init?.invoke(this) }
     this.add(link)
     return link
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt b/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
index cdd18cfc..7484a667 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/ListTag.kt
@@ -28,6 +28,7 @@ import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
 
@@ -64,10 +65,12 @@ open class ListTag(
      * List type.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * List of elements.
      */
     var elements by refreshOnUpdate(elements)
+
     /**
      * Determines if [elements] can contain HTML code.
      */
@@ -158,9 +161,11 @@ open class ListTag(
  */
 fun Container.listTag(
     type: ListType, elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (ListTag.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (ListTag.() -> Unit)? = null
 ): ListTag {
-    val listTag = ListTag(type, elements, rich, classes, init)
+    val listTag = ListTag(type, elements, rich, classes ?: className.set, init)
     this.add(listTag)
     return listTag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Main.kt b/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
index 631e58a9..54c214b0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Main.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *main*.
@@ -57,10 +58,11 @@ fun Container.main(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Main.() -> Unit)? = null
 ): Main {
-    val main = Main(content, rich, align, classes).apply { init?.invoke(this) }
+    val main = Main(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(main)
     return main
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt b/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
index 31addd95..5a774cf8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Nav.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *nav*.
@@ -57,10 +58,11 @@ fun Container.nav(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Nav.() -> Unit)? = null
 ): Nav {
-    val nav = Nav(content, rich, align, classes).apply { init?.invoke(this) }
+    val nav = Nav(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(nav)
     return nav
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt b/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
index 79aa93fb..76370d08 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Ol.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *ol*.
@@ -51,9 +52,11 @@ open class Ol(
  */
 fun Container.ol(
     elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (Ol.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Ol.() -> Unit)? = null
 ): Ol {
-    val ol = Ol(elements, rich, classes).apply { init?.invoke(this) }
+    val ol = Ol(elements, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(ol)
     return ol
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/P.kt b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
index d5bb2c4d..c6daaa98 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/P.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *p*.
@@ -57,10 +58,11 @@ fun Container.p(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (P.() -> Unit)? = null
 ): P {
-    val p = P(content, rich, align, classes).apply { init?.invoke(this) }
+    val p = P(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(p)
     return p
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Section.kt b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
index 43dd8fcf..b880e2fe 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *section*.
@@ -57,10 +58,11 @@ fun Container.section(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Section.() -> Unit)? = null
 ): Section {
-    val section = Section(content, rich, align, classes).apply { init?.invoke(this) }
+    val section = Section(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(section)
     return section
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Span.kt b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
index 862d0b2f..c762824f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *span*.
@@ -57,10 +58,11 @@ fun Container.span(
     content: String? = null,
     rich: Boolean = false,
     align: Align? = null,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (Span.() -> Unit)? = null
 ): Span {
-    val span = Span(content, rich, align, classes).apply { init?.invoke(this) }
+    val span = Span(content, rich, align, classes ?: className.set).apply { init?.invoke(this) }
     this.add(span)
     return span
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
index 95445ece..f133401d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.i18n.I18n
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * HTML tags.
@@ -131,27 +132,33 @@ open class Tag(
      * Tag type.
      */
     var type by refreshOnUpdate(type)
+
     /**
      * Text content of the tag.
      */
     override var content by refreshOnUpdate(content)
+
     /**
      * Determines if [content] can contain HTML code.
      */
     override var rich by refreshOnUpdate(rich)
+
     /**
      * Text align.
      */
     var align by refreshOnUpdate(align)
+
     /**
      * @suppress
      * Internal property
      */
     override var templateDataObj: Any? = null
+
     /**
      * Handlebars template.
      */
     override var template: ((Any?) -> String)? by refreshOnUpdate()
+
     /**
      * Handlebars templates for i18n.
      */
@@ -207,10 +214,12 @@ open class Tag(
  */
 fun Container.tag(
     type: TAG, content: String? = null, rich: Boolean = false, align: Align? = null,
-    classes: Set<String> = setOf(), attributes: Map<String, String> = mapOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
+    attributes: Map<String, String> = mapOf(),
     init: (Tag.() -> Unit)? = null
 ): Tag {
-    val tag = Tag(type, content, rich, align, classes, attributes, init)
+    val tag = Tag(type, content, rich, align, classes ?: className.set, attributes, init)
     this.add(tag)
     return tag
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt b/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
index 9673f56d..21e548c8 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Ul.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.html
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * Simple component rendered as *ul*.
@@ -51,9 +52,11 @@ open class Ul(
  */
 fun Container.ul(
     elements: List<String>? = null, rich: Boolean = false,
-    classes: Set<String> = setOf(), init: (Ul.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Ul.() -> Unit)? = null
 ): Ul {
-    val ul = Ul(elements, rich, classes).apply { init?.invoke(this) }
+    val ul = Ul(elements, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(ul)
     return ul
 }