diff --git a/README.md b/README.md
index b20d9a7..bba3d71 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ In order to use these bindings within your Scala.js project, you need to add the
 ```scala
 resolvers += "jitpack" at "https://jitpack.io"
 
-// if using scala 2.13
+// if using scala 2.13 (see also warning section below)
 scalacOptions ++= List("-Ytasty-reader")
 
 libraryDependencies ++= List(
@@ -58,13 +58,31 @@ div(
     _.required := true,
     _.valueState := ValueState.Information,
     _.placeholder := "Enter your name",
-    _ => onChange.mapToValue --> Observer(println)
+    onChange.mapToValue --> Observer(println)
   )
 )
 ```
 
 This will be rendered as an input as documented [here](https://sap.github.io/ui5-webcomponents/playground/components/Input/).
 
+### Remark for Scala 2.13 users
+
+In order to achieve the highest ergonomics possible, the `apply` method of components uses a union type as argument. But this only would completely sacrifice the ability of Scala 2.13 users to use the library.
+
+That is why all components also have an `of` method, only accepting mod functions (as opposed to accepting both mods and mod functions). This reduces the ergonomics a bit for Scala 2.13, but it allows us to move forward.
+
+For you, concretely, instead of having, for example,
+
+```scala
+Input(_.required := true, onChange.mapToValue --> Observer(println))
+```
+
+you will have to write
+
+```scala
+Input.of(_.required := true, _ => onChange.mapToValue --> Observer(println))
+```
+
 ### Running the Demo
 
 The project contains a demo file for each component. These examples are located in the `demo` sub-project.
@@ -165,15 +183,14 @@ Fill in the docstring for that object with the contents of the "Overview" sectio
 
 In the `object`, add the following things:
 
+- make the object extends `WebComponent`
 - create a trait `RawElement` extending `js.Object` and annotated with `@js.native`
 - add an object `RawImport` extending `js.Object` and annotated with both `@js.native` and `@JSImport`, specifying the correct import (available in the official docs), setting `JSImport.Default` as second argument
 - call `used(RawImport)` the line after (this is done to be sure that scala-js actually import the JS dependency)
 - define an alias `type Ref` as `dom.html.Element & RawElement`
-- define an alias `type ModFunction` as `YourObject.type => Mod[ReactiveHtmlElement[Ref]]`
-- define a private `tag` variable of type `HtmlTag[Ref]` specifying the ui5 tag name from the doc (for example, for the Button component, it's `private val tag: HtmlTag[Ref] = customHtmlTag("ui5-button")`). ⚠️: when copy-pasting from an existing component, this is usually the one we forget! When that happens, you will observe a component doing basically nothing. It's a sign you put the wrong import.
+- define the protected `tag` variable of type `HtmlTag[Ref]` specifying the ui5 tag name from the doc (for example, for the Button component, it's `protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-button")`). ⚠️: when copy-pasting from an existing component, this is usually the one we forget! When that happens, you will observe a component doing basically nothing. It's a sign you put the wrong import.
 - create an empty object `slots`
 - create an empty object `events`
-- define an apply method as `def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(YourObject)): _*)`
 - in the case where your component is linked to other components (for example a `TableCell` is always contained in `TableRow`, so the `TableRow` object will have a reference to the `TableCell` object)
 
 #### Filling the reactive attributes
@@ -257,3 +274,15 @@ object RawElement {
     def colour: Colour = Colour.fromString(rawElement.colourJS)
 }
 ```
+
+#### Making the demos
+
+The best way to make sure that your implementations work, and to also help future users at the same time, is to write a demo for the new component.
+
+In the `demo` subproject, in the `demo` package, create an object `MyComponentExample`, extending `Example` with the SAP name of the component.
+
+You will then need to fill the `component` def. You should make use of the `DemoPanel` and wrapping your example codes in `//-- Begin: name of your demo panel` and `//-- End`. Once your code will be merged on master, it will make the source code directly displayed beneath the examples.
+
+You then need to add your example in the list in the `EntryPoint` in the `demo` package.
+
+For the strucutre, you can take inspiration from the existing other examples. For the content of your demo, you can take inspiration from the official SAP docs.
diff --git a/demo/src/main/scala/demo/AvatarExample.scala b/demo/src/main/scala/demo/AvatarExample.scala
index 2f003ef..2f89d16 100644
--- a/demo/src/main/scala/demo/AvatarExample.scala
+++ b/demo/src/main/scala/demo/AvatarExample.scala
@@ -16,7 +16,7 @@ object AvatarExample extends Example("Avatar") {
   ): HtmlElement = div(
     DemoPanel("Basic examples") {
       //-- Begin: Basic examples
-      div(Avatar(_ => sherpal), Avatar(_.shape := AvatarShape.Square, _ => sherpal))
+      div(Avatar(sherpal), Avatar(_.shape := AvatarShape.Square, sherpal))
       //-- End
     },
     DemoPanel("Avatar sizes") {
@@ -24,7 +24,7 @@ object AvatarExample extends Example("Avatar") {
       div(
         AvatarSize.allValues
           .zip(MTG.manaSymbolsShortNames)
-          .map((size, mana) => Avatar(_.size := size, _ => manaSymbolImage(mana)))
+          .map((size, mana) => Avatar(_.size := size, manaSymbolImage(mana)))
       )
       //-- End
     },
diff --git a/demo/src/main/scala/demo/AvatarGroupExample.scala b/demo/src/main/scala/demo/AvatarGroupExample.scala
index 990e96b..dc77ee3 100644
--- a/demo/src/main/scala/demo/AvatarGroupExample.scala
+++ b/demo/src/main/scala/demo/AvatarGroupExample.scala
@@ -13,7 +13,7 @@ object AvatarGroupExample extends Example("AvatarGroup") {
       //-- Begin: Avatar Group - type 'Individual'
       AvatarGroup(
         _.tpe := AvatarGroupType.Individual,
-        _ => IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
+        IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
       )
       //-- End
     },
@@ -21,7 +21,7 @@ object AvatarGroupExample extends Example("AvatarGroup") {
       //-- Begin: Avatar Group - type 'Group'
       AvatarGroup(
         _.tpe := AvatarGroupType.Group,
-        _ => IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
+        IconName.allValues.take(5).map(icon => Avatar(_.icon := icon, _.size := AvatarSize.M))
       )
       //-- End
     },
@@ -35,14 +35,14 @@ object AvatarGroupExample extends Example("AvatarGroup") {
       div(
         AvatarGroup(
           _.tpe := AvatarGroupType.Individual,
-          _ => allAvatars,
-          _ => width := "400px",
+          allAvatars,
+          width := "400px",
           _.events.onClick.map(_.target.hiddenItems.length).map(allAvatars.takeRight) --> avatarsForPopoverBus.writer,
           _.events.onClick.filter(_.detail.overflowButtonClicked).map(_.detail.targetRef) --> popoverOpenerBus.writer
         ),
         Popover(
           _.showAtFromEvents(popoverOpenerBus.events),
-          _ => children <-- avatarsForPopoverBus
+          children <-- avatarsForPopoverBus
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/BadgeExample.scala b/demo/src/main/scala/demo/BadgeExample.scala
index cdd6a2c..bc225a6 100644
--- a/demo/src/main/scala/demo/BadgeExample.scala
+++ b/demo/src/main/scala/demo/BadgeExample.scala
@@ -28,15 +28,15 @@ object BadgeExample extends Example("Badge") {
       div(
         ColourScheme.allValues
           .zip(someTexts)
-          .map((colourScheme, text) => Badge(_.colourScheme := colourScheme, _ => text)),
-        Badge(_ => width := "200px", _ => "This text is very long and it will be truncated with ellipsis")
+          .map((colourScheme, text) => Badge(_.colourScheme := colourScheme, text)),
+        Badge(width := "200px", "This text is very long and it will be truncated with ellipsis")
       )
       //-- End
     ),
     DemoPanel("Badge with icon")(
       //-- Begin: Badge with icon
       div(
-        Badge(_.colourScheme := ColourScheme._1, _.slots.icon := Icon(_.name := IconName.add), _ => "Add"),
+        Badge(_.colourScheme := ColourScheme._1, _.slots.icon := Icon(_.name := IconName.add), "Add"),
         Badge(_.colourScheme := ColourScheme._2, _.slots.icon := Icon(_.name := IconName.customer))
       )
       //-- End
diff --git a/demo/src/main/scala/demo/BarExample.scala b/demo/src/main/scala/demo/BarExample.scala
index c6f9b77..ebe28d0 100644
--- a/demo/src/main/scala/demo/BarExample.scala
+++ b/demo/src/main/scala/demo/BarExample.scala
@@ -13,14 +13,14 @@ object BarExample extends Example("Bar") {
       _.tooltip := "Go home",
       _.design := ButtonDesign.Transparent
     ),
-    _ => Label(_ => title),
+    _ => Label(title),
     _.slots.endContent := Button(_.icon := IconName.`action-settings`, _.tooltip := "Go to settings")
   )
 
   private def footerBarContent = List[Bar.ModFunction](
-    _.slots.endContent := Button(_.design := ButtonDesign.Positive, _ => "Agree"),
-    _.slots.endContent := Button(_.design := ButtonDesign.Negative, _ => "Decline"),
-    _.slots.endContent := Button(_.design := ButtonDesign.Transparent, _ => "Cancel")
+    _.slots.endContent := Button(_.design := ButtonDesign.Positive, "Agree"),
+    _.slots.endContent := Button(_.design := ButtonDesign.Negative, "Decline"),
+    _.slots.endContent := Button(_.design := ButtonDesign.Transparent, "Cancel")
   )
 
   def component(using
diff --git a/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala b/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala
index e71052e..7f376e6 100644
--- a/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala
+++ b/demo/src/main/scala/demo/BarcodeScannerDialogExample.scala
@@ -32,15 +32,15 @@ object BarcodeScannerDialogExample extends Example("BarcodeScannerDialog") {
           _.events.onScanSuccess.map(_.detail) --> barcodeScanSuccessBus.writer,
           _.events.onScanError.map(_.detail) --> barcodeScanFailedBus.writer
         ),
-        Title.h3(_ => "Click on the button below and show a QR code to the camera:"),
+        Title.h3("Click on the button below and show a QR code to the camera:"),
         Button(
           _.icon := IconName.camera,
           _.tooltip := "Start Camera",
-          _ => "Scan",
+          "Scan",
           _.events.onClick.mapTo(()) --> openScannerBus.writer
         ),
-        div(Label(_ => child.text <-- barcodeScanSuccessBus.events.map(_.text))),
-        div(Label(_ => child.text <-- barcodeScanFailedBus.events.map(_.message)))
+        div(Label(child.text <-- barcodeScanSuccessBus.events.map(_.text))),
+        div(Label(child.text <-- barcodeScanFailedBus.events.map(_.message)))
       )
       //-- End
     }
diff --git a/demo/src/main/scala/demo/BreadcrumbsExample.scala b/demo/src/main/scala/demo/BreadcrumbsExample.scala
index 8d26eb0..8cc8b42 100644
--- a/demo/src/main/scala/demo/BreadcrumbsExample.scala
+++ b/demo/src/main/scala/demo/BreadcrumbsExample.scala
@@ -15,10 +15,10 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
         _.Item(
           _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
           _.target := LinkTarget._blank,
-          _ => "Root page"
+          "Root page"
         ),
-        _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _ => "Parent page"),
-        _.Item(_ => "Current page"),
+        _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", "Parent page"),
+        _.Item("Current page"),
         _.events.onItemClick.map(_.detail.item) --> Observer(x => org.scalajs.dom.console.log(x))
       )
       //-- End
@@ -30,9 +30,9 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
         _.Item(
           _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
           _.target := LinkTarget._blank,
-          _ => "Root page"
+          "Root page"
         ),
-        _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _ => "Parent page")
+        _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", "Parent page")
       )
       //-- End
     ),
@@ -45,10 +45,10 @@ object BreadcrumbsExample extends Example("Breadcrumbs") {
             _.Item(
               _.href := "https://github.com/sherpal/LaminarSAPUI5Bindings",
               _.target := LinkTarget._blank,
-              _ => "Root page"
+              "Root page"
             ),
-            _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", _ => "Parent page"),
-            _.Item(_ => "Current page")
+            _.Item(_.href := "https://github.com/sherpal/LaminarSAPUI5Bindings", "Parent page"),
+            _.Item("Current page")
           )
         )
       )
diff --git a/demo/src/main/scala/demo/BusyIndicatorExample.scala b/demo/src/main/scala/demo/BusyIndicatorExample.scala
index 6a56704..0b52c49 100644
--- a/demo/src/main/scala/demo/BusyIndicatorExample.scala
+++ b/demo/src/main/scala/demo/BusyIndicatorExample.scala
@@ -33,20 +33,19 @@ object BusyIndicatorExample extends Example("BusyIndicator") {
       val fetchedData                      = numberOfDataToFetch.map(allData.take)
       val busyStates = EventStream
         .merge(
-          fetchListDataBus.events.map(_ => 1),
-          numberOfDataToFetch.changes.map(_ => -1)
+          fetchListDataBus.events.mapTo(1),
+          numberOfDataToFetch.changes.mapTo(-1)
         )
         .foldLeft(0)(_ + _)
         .map(_ > 0)
       div(
-        div(Button(_ => "Fetch list data", _.events.onClick.mapTo(()) --> fetchListDataBus.writer)),
+        div(Button("Fetch list data", _.events.onClick.mapTo(()) --> fetchListDataBus.writer)),
         div(
           BusyIndicator(
             _.active <-- busyStates,
-            _ =>
-              UList(
-                _ => width := "400px",
-                _ => children <-- fetchedData.map(data => data.map(pieceOfData => UList.item(_ => pieceOfData))),
+            UList(
+                width := "400px",
+                children <-- fetchedData.map(data => data.map(pieceOfData => UList.item(pieceOfData))),
                 _.noDataText := "No Data"
               )
           )
diff --git a/demo/src/main/scala/demo/ButtonExample.scala b/demo/src/main/scala/demo/ButtonExample.scala
index 045a9bb..f471aa8 100644
--- a/demo/src/main/scala/demo/ButtonExample.scala
+++ b/demo/src/main/scala/demo/ButtonExample.scala
@@ -22,13 +22,13 @@ object ButtonExample extends Example("Button") {
         //-- Begin: Basic Button
         div(
           className := exampleButtonContainerClass,
-          Button(_.design := ButtonDesign.Default, _ => "Default"),
-          Button(_.disabled := true, _ => "Disabled"),
-          Button(_.design := ButtonDesign.Transparent, _ => "Cancel"),
-          Button(_.design := ButtonDesign.Positive, _ => "Approve"),
-          Button(_.design := ButtonDesign.Negative, _ => "Decline"),
-          Button(_.design := ButtonDesign.Attention, _ => "Warning"),
-          Button(_.design := ButtonDesign.Emphasized, _ => "Subscribe")
+          Button(_.design := ButtonDesign.Default, "Default"),
+          Button(_.disabled := true, "Disabled"),
+          Button(_.design := ButtonDesign.Transparent, "Cancel"),
+          Button(_.design := ButtonDesign.Positive, "Approve"),
+          Button(_.design := ButtonDesign.Negative, "Decline"),
+          Button(_.design := ButtonDesign.Attention, "Warning"),
+          Button(_.design := ButtonDesign.Emphasized, "Subscribe")
         )
         //-- End
       ),
@@ -36,12 +36,12 @@ object ButtonExample extends Example("Button") {
         //-- Begin: Button with Icon
         div(
           className := exampleButtonContainerClass,
-          Button(_.icon := IconName.employee, _ => "Add"),
-          Button(_.icon := IconName.download, _ => "Download"),
-          Button(_.design := ButtonDesign.Positive, _.icon := IconName.add, _ => "Add"),
-          Button(_.design := ButtonDesign.Negative, _.icon := IconName.delete, _ => "Remove"),
-          Button(_.design := ButtonDesign.Attention, _.icon := IconName.`message-warning`, _ => "Warning"),
-          Button(_.design := ButtonDesign.Transparent, _.icon := IconName.accept, _ => "Transparent")
+          Button(_.icon := IconName.employee, "Add"),
+          Button(_.icon := IconName.download, "Download"),
+          Button(_.design := ButtonDesign.Positive, _.icon := IconName.add, "Add"),
+          Button(_.design := ButtonDesign.Negative, _.icon := IconName.delete, "Remove"),
+          Button(_.design := ButtonDesign.Attention, _.icon := IconName.`message-warning`, "Warning"),
+          Button(_.design := ButtonDesign.Transparent, _.icon := IconName.accept, "Transparent")
         )
         //-- End
       ),
diff --git a/demo/src/main/scala/demo/CalendarExample.scala b/demo/src/main/scala/demo/CalendarExample.scala
index 5d743ba..1345934 100644
--- a/demo/src/main/scala/demo/CalendarExample.scala
+++ b/demo/src/main/scala/demo/CalendarExample.scala
@@ -12,8 +12,7 @@ object CalendarExample extends Example("Calendar") {
       //-- Begin: Basic Calendar
       val maybeSelectedDateVar: Var[Option[Calendar.events.SelectedDatesChangeInfo]] = Var(None)
       div(
-        Label(_ =>
-          child.text <-- maybeSelectedDateVar.signal.map {
+        Label(          child.text <-- maybeSelectedDateVar.signal.map {
             case None       => "No selected date yet."
             case Some(info) => s"Selected dates: ${info.values.zip(info.dates).mkString(", ")}."
           }
@@ -51,7 +50,7 @@ object CalendarExample extends Example("Calendar") {
         // (for example where your application starts, or the first place you use this calendar type)
         calendarType.importObject
         div(
-          Title.h3(_ => s"Type of calendar: ${calendarType.value}"),
+          Title.h3(s"Type of calendar: ${calendarType.value}"),
           Calendar(_.primaryCalendarType := calendarType)
         )
       })
diff --git a/demo/src/main/scala/demo/CardExample.scala b/demo/src/main/scala/demo/CardExample.scala
index 3033d40..83df2cd 100644
--- a/demo/src/main/scala/demo/CardExample.scala
+++ b/demo/src/main/scala/demo/CardExample.scala
@@ -39,33 +39,31 @@ object CardExample extends Example("Card") {
                 |}
                 |""".stripMargin),
         Card(
-          _ => className := medium,
+          className := medium,
           _.slots.header := Card.header(
             _.titleText := "Magic Mana Symbols",
             _.subtitleText := "All of them",
             _.status := "3 of 6",
             _.slots.avatar := Icon(_.name := IconName.group),
-            _.slots.action := Button(_.design := ButtonDesign.Transparent, _ => "View All")
+            _.slots.action := Button(_.design := ButtonDesign.Transparent, "View All")
           ),
-          _ =>
-            div(
-              className := cardContentClassName,
-              UList(
-                _.separators := ListSeparator.None,
-                _ => width := "100%",
-                _ => marginBottom := "0.75rem",
-                _ =>
-                  MTG.manaSymbolsNames
-                    .zip(MTG.manaSymbolsShortNames)
-                    .take(3)
-                    .map((name, shortName) =>
-                      UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, _ => name)
-                    )
-              )
+          div(
+            className := cardContentClassName,
+            UList(
+              _.separators := ListSeparator.None,
+              width := "100%",
+              marginBottom := "0.75rem",
+              MTG.manaSymbolsNames
+                .zip(MTG.manaSymbolsShortNames)
+                .take(3)
+                .map((name, shortName) =>
+                  UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name)
+                )
             )
+          )
         ),
         Card(
-          _ => className := medium,
+          className := medium,
           _.slots.header := Card.header(
             _.titleText := "This header is interactive",
             _.interactive := true,
@@ -73,22 +71,20 @@ object CardExample extends Example("Card") {
             _.status := "3 of 6",
             _.slots.avatar := Icon(_.name := IconName.group)
           ),
-          _ =>
-            div(
-              className := cardContentClassName,
-              UList(
-                _.separators := ListSeparator.None,
-                _ => width := "100%",
-                _ => marginBottom := "0.75rem",
-                _ =>
-                  MTG.manaSymbolsNames
-                    .zip(MTG.manaSymbolsShortNames)
-                    .drop(3)
-                    .map((name, shortName) =>
-                      UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, _ => name)
-                    )
-              )
+          div(
+            className := cardContentClassName,
+            UList(
+              _.separators := ListSeparator.None,
+              width := "100%",
+              marginBottom := "0.75rem",
+              MTG.manaSymbolsNames
+                .zip(MTG.manaSymbolsShortNames)
+                .drop(3)
+                .map((name, shortName) =>
+                  UList.item(_.image := MTG.manaSymbolsRefs(shortName), _.description := name, name)
+                )
             )
+          )
         )
       )
       //-- End
@@ -104,40 +100,36 @@ object CardExample extends Example("Card") {
         Card(
           _.slots.header := Card
             .header(_.titleText := "New Purchase Orders", _.subtitleText := "Today", _.status := "3 of 15"),
-          _ =>
-            Table(
-              _ => className := contentPadding,
-              _.slots.columns := TableColumn(_ => Label(_ => "Sales Order")),
-              _.slots.columns := TableColumn(_ => Label(_ => "Customer")),
-              _.slots.columns := TableColumn(_ => Label(_ => "Net Amount")),
-              _.slots.columns := TableColumn(
-                _.minWidth := 450,
-                _.popinText := "Status",
-                _.demandPopin := true,
-                _ => Label(_ => "Status")
-              ),
-              _ =>
-                TableRow(
-                  _.cell(_ => Label(_ => "5000010050")),
-                  _.cell(_ => Label(_ => "Entertainment Argentinia")),
-                  _.cell(_ => Label(_ => "6k USD")),
-                  _.cell(_ => className := statusSuccess, _ => "Approved")
-                ),
-              _ =>
-                TableRow(
-                  _.cell(_ => Label(_ => "5000010051")),
-                  _.cell(_ => Label(_ => "Brazil Technologies")),
-                  _.cell(_ => Label(_ => "2k USD")),
-                  _.cell(_ => className := statusError, _ => "Rejected")
-                ),
-              _ =>
-                TableRow(
-                  _.cell(_ => Label(_ => "5000010052")),
-                  _.cell(_ => Label(_ => "Robert Brown Ent.")),
-                  _.cell(_ => Label(_ => "17k USD")),
-                  _.cell(_ => className := statusWarning, _ => "Pending")
-                ),
+          Table(
+            className := contentPadding,
+            _.slots.columns := TableColumn(Label("Sales Order")),
+            _.slots.columns := TableColumn(Label("Customer")),
+            _.slots.columns := TableColumn(Label("Net Amount")),
+            _.slots.columns := TableColumn(
+              _.minWidth := 450,
+              _.popinText := "Status",
+              _.demandPopin := true,
+              Label("Status")
+            ),
+            TableRow(
+              _.cell(Label("5000010050")),
+              _.cell(Label("Entertainment Argentinia")),
+              _.cell(Label("6k USD")),
+              _.cell(className := statusSuccess, "Approved")
+            ),
+            TableRow(
+              _.cell(Label("5000010051")),
+              _.cell(Label("Brazil Technologies")),
+              _.cell(Label("2k USD")),
+              _.cell(className := statusError, "Rejected")
+            ),
+            TableRow(
+              _.cell(Label("5000010052")),
+              _.cell(Label("Robert Brown Ent.")),
+              _.cell(Label("17k USD")),
+              _.cell(className := statusWarning, "Pending")
             )
+          )
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/CarouselExample.scala b/demo/src/main/scala/demo/CarouselExample.scala
index 07570cb..a6336ad 100644
--- a/demo/src/main/scala/demo/CarouselExample.scala
+++ b/demo/src/main/scala/demo/CarouselExample.scala
@@ -8,16 +8,14 @@ import demo.helpers.{DemoPanel, Example, FetchDemoPanelFromGithub, MTG}
 object CarouselExample extends Example("Carousel") {
 
   //-- Begin Common
-  private def threeMagicWallpapers: List[Carousel.ModFunction] = List(
-    _ =>
-      img(
-        src := "https://media.magic.wizards.com/images/wallpaper/senseis-divining-top-2x2-background-1280x960.jpg"
-      ),
-    _ => img(src := "https://media.magic.wizards.com/images/wallpaper/mana-vault-2x2-background-1280x960.jpg"),
-    _ =>
-      img(
-        src := "https://media.magic.wizards.com/images/wallpaper/sparas_headquarters_kieran_yanner_1280x960_poozxbqpcw.jpg"
-      )
+  private def threeMagicWallpapers = List(
+    img(
+      src := "https://media.magic.wizards.com/images/wallpaper/senseis-divining-top-2x2-background-1280x960.jpg"
+    ),
+    img(src := "https://media.magic.wizards.com/images/wallpaper/mana-vault-2x2-background-1280x960.jpg"),
+    img(
+      src := "https://media.magic.wizards.com/images/wallpaper/sparas_headquarters_kieran_yanner_1280x960_poozxbqpcw.jpg"
+    )
   )
   //-- End Common
 
@@ -40,7 +38,7 @@ object CarouselExample extends Example("Carousel") {
         _.itemsPerPageS := 1,
         _.itemsPerPageM := 2,
         _.itemsPerPageL := 2,
-        _ => MTG.manaSymbolsShortNames.map(name => img(src := MTG.manaSymbolsRefs(name), alt := name))
+        MTG.manaSymbolsShortNames.map(name => img(src := MTG.manaSymbolsRefs(name), alt := name))
       )
       //-- End
     ),
diff --git a/demo/src/main/scala/demo/CheckBoxExample.scala b/demo/src/main/scala/demo/CheckBoxExample.scala
index 7e982f0..9715e3a 100644
--- a/demo/src/main/scala/demo/CheckBoxExample.scala
+++ b/demo/src/main/scala/demo/CheckBoxExample.scala
@@ -50,12 +50,12 @@ object CheckBoxExample extends Example("CheckBox") {
         CheckBox(
           _.text := "ui5-checkbox with 'wrapping-type=Normal' set and some long text.",
           _.wrappingType := WrappingType.Normal,
-          _ => width := "200px"
+          width := "200px"
         ),
         CheckBox(
           _.text := "Another ui5-checkbox with very long text here",
           _.wrappingType := WrappingType.Normal,
-          _ => width := "200px"
+          width := "200px"
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/ColourPaletteExample.scala b/demo/src/main/scala/demo/ColourPaletteExample.scala
index 4a982cb..a6b94a9 100644
--- a/demo/src/main/scala/demo/ColourPaletteExample.scala
+++ b/demo/src/main/scala/demo/ColourPaletteExample.scala
@@ -30,7 +30,7 @@ object ColourPaletteExample extends Example("ColourPalette") {
   ): HtmlElement = div(
     DemoPanel("Colour Palette")(
       //-- Begin: Colour Palette
-      ColourPalette(_ => someColourPaletteItems)
+      ColourPalette(someColourPaletteItems)
       //-- End
     )
   )
diff --git a/demo/src/main/scala/demo/ColourPalettePopoverExample.scala b/demo/src/main/scala/demo/ColourPalettePopoverExample.scala
index e1b2a02..0d739ce 100644
--- a/demo/src/main/scala/demo/ColourPalettePopoverExample.scala
+++ b/demo/src/main/scala/demo/ColourPalettePopoverExample.scala
@@ -18,12 +18,12 @@ object ColourPalettePopoverExample extends Example("ColourPalettePopover") {
       val openPopoverBus: EventBus[HTMLElement] = new EventBus
       div(
         Button(
-          _ => "Open ColourPalettePopover",
+          "Open ColourPalettePopover",
           _.events.onClick.mapToEvent.map(_.target) --> openPopoverBus.writer
         ),
         ColourPalettePopover(
           _.showAtFromEvents(openPopoverBus.events),
-          _ => ColourPaletteExample.someColourPaletteItems,
+          ColourPaletteExample.someColourPaletteItems,
           _.showRecentColours := true,
           _.showMoreColours := true,
           _.showDefaultColour := true,
@@ -37,12 +37,12 @@ object ColourPalettePopoverExample extends Example("ColourPalettePopover") {
       val openPopoverBus: EventBus[HTMLElement] = new EventBus
       div(
         Button(
-          _ => "Open ColourPalettePopover",
+          "Open ColourPalettePopover",
           _.events.onClick.mapToEvent.map(_.target) --> openPopoverBus.writer
         ),
         ColourPalettePopover(
           _.showAtFromEvents(openPopoverBus.events),
-          _ => ColourPaletteExample.someColourPaletteItems,
+          ColourPaletteExample.someColourPaletteItems,
           _.defaultColour := Colour.green
         )
       )
diff --git a/demo/src/main/scala/demo/ComboBoxExample.scala b/demo/src/main/scala/demo/ComboBoxExample.scala
index 3fbab56..f7ea8ff 100644
--- a/demo/src/main/scala/demo/ComboBoxExample.scala
+++ b/demo/src/main/scala/demo/ComboBoxExample.scala
@@ -46,7 +46,7 @@ object ComboBoxExample extends Example("ComboBox") {
           ComboBox(
             _.filter := filter,
             _.placeholder := s"Filter is: ${filter.value}",
-            _ => someCountries.map(country => ComboBox.item(_.text := country))
+            someCountries.map(country => ComboBox.item(_.text := country))
           )
         )
       )
@@ -56,8 +56,7 @@ object ComboBoxExample extends Example("ComboBox") {
       //-- Begin: ComboBox with Two-Column Layout Items
       ComboBox(
         _.placeholder := "Two-column layout",
-        _ =>
-          someCountries
+                  someCountries
             .zip(someCountryCodes)
             .map((country, code) =>
               ComboBox.item(
@@ -72,8 +71,7 @@ object ComboBoxExample extends Example("ComboBox") {
       //-- Begin: ComboBox with Grouping of Items
       ComboBox(
         _.placeholder := "ComboBox with grouping of suggestions",
-        _ =>
-          someOtherCountries
+                  someOtherCountries
             .groupBy(_.head)
             .toList
             .flatMap((firstLetter, countries) =>
diff --git a/demo/src/main/scala/demo/DatePickerExample.scala b/demo/src/main/scala/demo/DatePickerExample.scala
index 5e949a0..e97d1b5 100644
--- a/demo/src/main/scala/demo/DatePickerExample.scala
+++ b/demo/src/main/scala/demo/DatePickerExample.scala
@@ -13,8 +13,7 @@ object DatePickerExample extends Example("DatePicker") {
   ): HtmlElement = div(
     MessageStrip(
       _.design := MessageStripDesign.Warning,
-      _ =>
-        "Note: you must provide an implementation for java.time classes in order to use the DatePicker. " +
+              "Note: you must provide an implementation for java.time classes in order to use the DatePicker. " +
           "For example using the scala-java-time library."
     ),
     DemoPanel("Basic DatePicker")(
diff --git a/demo/src/main/scala/demo/DateTimePickerExample.scala b/demo/src/main/scala/demo/DateTimePickerExample.scala
index 2648eae..eb485cd 100644
--- a/demo/src/main/scala/demo/DateTimePickerExample.scala
+++ b/demo/src/main/scala/demo/DateTimePickerExample.scala
@@ -18,8 +18,7 @@ object DateTimePickerExample extends Example("DateTimePicker") {
       val localDateTimeFormatter                  = DateTimeFormatter.ofPattern("d MMM y, HH:mm:ss")
       val valueUpdateBus: EventBus[LocalDateTime] = new EventBus
       div(
-        Label(_ =>
-          child.text <-- valueUpdateBus.events.startWithNone.map {
+        Label(          child.text <-- valueUpdateBus.events.startWithNone.map {
             case None           => "No value selected yet"
             case Some(dateTime) => s"Selected value: $dateTime"
           }
diff --git a/demo/src/main/scala/demo/DialogExample.scala b/demo/src/main/scala/demo/DialogExample.scala
index 3b53268..cdb5aa7 100644
--- a/demo/src/main/scala/demo/DialogExample.scala
+++ b/demo/src/main/scala/demo/DialogExample.scala
@@ -17,14 +17,13 @@ object DialogExample extends Example("Dialog") {
         styleTagForLoginFormClass,
         Button(
           _.design := ButtonDesign.Emphasized,
-          _ => "Open Dialog",
+          "Open Dialog",
           _.events.onClick.mapTo(true) --> openDialogBus.writer
         ),
         div(
           MessageStrip(
             _.design := MessageStripDesign.Information,
-            _ =>
-              "The opening of this dialog works using an `EventBus`. " +
+                          "The opening of this dialog works using an `EventBus`. " +
                 "Clicking on the 'Open Dialog' button writes to the bus, and the Dialog listens to it."
           )
         ),
@@ -32,19 +31,18 @@ object DialogExample extends Example("Dialog") {
           _.showFromEvents(openDialogBus.events.filter(identity).mapTo(())),
           _.closeFromEvents(openDialogBus.events.map(!_).filter(identity).mapTo(())),
           _.headerText := "Register Form",
-          _ =>
-            section(
+                      section(
               className := loginFormClass,
               div(
-                Label(_.forId := "username", _.required := true, _ => "Username:"),
+                Label(_.forId := "username", _.required := true, "Username:"),
                 Input(_.id := "username")
               ),
               div(
-                Label(_.forId := "password", _.required := true, _ => "Password:"),
+                Label(_.forId := "password", _.required := true, "Password:"),
                 Input(_.id := "password", _.tpe := InputType.Password, _.valueState := ValueState.Error)
               ),
               div(
-                Label(_.forId := "email", _.required := true, _ => "Email:"),
+                Label(_.forId := "email", _.required := true, "Email:"),
                 Input(_.id := "email", _.tpe := InputType.Email)
               )
             ),
@@ -52,7 +50,7 @@ object DialogExample extends Example("Dialog") {
             div(flex := "1"),
             Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Register",
+              "Register",
               _.events.onClick.mapTo(false) --> openDialogBus.writer
             )
           )
@@ -65,7 +63,7 @@ object DialogExample extends Example("Dialog") {
       val dialogId = "the-dialog-id"
       div(
         Button(
-          _ => "Open Draggable/Resizable dialog",
+          "Open Draggable/Resizable dialog",
           _.events.onClick.mapTo(Dialog.getDialogById(dialogId)) --> Observer[Option[Dialog.Ref]] {
             case Some(dialog) => dialog.show()
             case None         => throw new IllegalStateException(s"The Dialog with id $dialogId does not exist.")
@@ -73,13 +71,12 @@ object DialogExample extends Example("Dialog") {
         ),
         MessageStrip(
           _.design := MessageStripDesign.Information,
-          _ => "The opening of this dialog works by finding the dialog by id (with `Dialog.getDialogById`)."
+          "The opening of this dialog works by finding the dialog by id (with `Dialog.getDialogById`)."
         ),
         Dialog(
           _.id := dialogId,
           _.headerText := "Draggable/Resizable dialog",
-          _ =>
-            section(
+                      section(
               "Resize this dialog by dragging it by its resize handle.",
               br(),
               "This feature is available only on Desktop",
@@ -92,7 +89,7 @@ object DialogExample extends Example("Dialog") {
             div(flex := "1"),
             Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Close",
+              "Close",
               _.events.onClick.mapTo(Dialog.getDialogById(dialogId)) --> Observer[Option[Dialog.Ref]] {
                 case Some(dialog) => dialog.close()
                 case None         => throw new IllegalStateException(s"Dialog with id $dialogId does not exist.")
diff --git a/demo/src/main/scala/demo/DynamicSideContentExample.scala b/demo/src/main/scala/demo/DynamicSideContentExample.scala
index 162fcc9..4b65561 100644
--- a/demo/src/main/scala/demo/DynamicSideContentExample.scala
+++ b/demo/src/main/scala/demo/DynamicSideContentExample.scala
@@ -34,7 +34,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
     DemoPanel("Dynamic Side Content with default properties") {
       //-- Begin: Dynamic Side Content with default properties
       DynamicSideContent(
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -43,7 +43,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with hideMainContent set
       DynamicSideContent(
         _.hideMainContent := true,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -52,7 +52,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with hideSideContent set
       DynamicSideContent(
         _.hideSideContent := true,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -61,7 +61,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with equalSplit set
       DynamicSideContent(
         _.equalSplit := true,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -70,7 +70,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with sideContentPosition='Start'
       DynamicSideContent(
         _.sideContentPosition := SideContentPosition.Start,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -79,7 +79,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with sideContentFallDown='BelowXL'
       DynamicSideContent(
         _.sideContentFallDown := SideContentFallDown.BelowXL,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -88,7 +88,7 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       //-- Begin: Dynamic Side Content with sideContentVisibility='ShowAboveM'
       DynamicSideContent(
         _.sideContentVisibility := SideContentVisibility.ShowAboveM,
-        _ => div(h1("Main Content"), p(mainContent)),
+        div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
@@ -98,22 +98,21 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       val toggleContentsBus: EventBus[Unit] = new EventBus
 
       Page(
-        _ => height := "500px",
-        _ => maxWidth := "360px",
+        height := "500px",
+        maxWidth := "360px",
         _.floatingFooter := true,
         _.hideFooter := false,
-        //_ => maxWidth := "360px",
-        _ =>
-          DynamicSideContent(
-            _ => inContext(el => toggleContentsBus.events --> Observer[Any](_ => el.ref.toggleContents())),
-            _ => div(h1("Main Content"), p(mainContent)),
+        //maxWidth := "360px",
+                  DynamicSideContent(
+            inContext(el => toggleContentsBus.events --> Observer[Any](_ => el.ref.toggleContents())),
+            div(h1("Main Content"), p(mainContent)),
             _.slots.sideContent := div(h1("Side Content"), p(sideContent))
           ),
         _.slots.footer := Bar(
           _.design := BarDesign.FloatingFooter,
           _.slots.endContent := Button(
             _.design := ButtonDesign.Positive,
-            _ => "Toggle Contents",
+            "Toggle Contents",
             _.events.onClick.mapTo(()) --> toggleContentsBus.writer
           )
         )
diff --git a/demo/src/main/scala/demo/EntryPoint.scala b/demo/src/main/scala/demo/EntryPoint.scala
index f00cb6b..8b1adda 100644
--- a/demo/src/main/scala/demo/EntryPoint.scala
+++ b/demo/src/main/scala/demo/EntryPoint.scala
@@ -85,7 +85,7 @@ object EntryPoint {
         div(
           h1("Please chose one of the following component below:"),
           ul(
-            componentsDemo.map(_.name).map(componentName => li(Link(_ => componentName, _.href := s"/$componentName")))
+            componentsDemo.map(_.name).map(componentName => li(Link(componentName, _.href := s"/$componentName")))
           )
         )
       else
@@ -98,17 +98,16 @@ object EntryPoint {
                 case Some(componentName) => dom.document.location.href = s"/$componentName"
                 case None => throw new IllegalArgumentException(s"This item did not have data 'componentName'.")
               },
-              _ =>
-                componentsDemo.map(example =>
-                  SideNavigation.item(
-                    _.text := example.name,
-                    _ => width := "200px",
-                    _ => dataAttr("component-name") := example.name,
-                    _.selected := (example.name == componentName)
-                  )
-                ),
-              _ => height := "100vh",
-              _ => overflowY := "auto"
+              componentsDemo.map(example =>
+                SideNavigation.item(
+                  _.text := example.name,
+                  width := "200px",
+                  dataAttr("component-name") := example.name,
+                  _.selected := (example.name == componentName)
+                )
+              ),
+              height := "100vh",
+              overflowY := "auto"
             )
           ),
           div(
diff --git a/demo/src/main/scala/demo/FileUploaderExample.scala b/demo/src/main/scala/demo/FileUploaderExample.scala
index 8f9ed82..b5b4e0f 100644
--- a/demo/src/main/scala/demo/FileUploaderExample.scala
+++ b/demo/src/main/scala/demo/FileUploaderExample.scala
@@ -22,7 +22,7 @@ object FileUploaderExample extends Example("FileUploader") {
             _.accept := List("image/*"),
             _.multiple := true,
             _.events.onChange.map(_.target.files) --> selectedImagesVar.writer.contramapSome,
-            _ => Button(_ => "Upload Images", _.icon := IconName.upload)
+            Button("Upload Images", _.icon := IconName.upload)
           )
         ),
         div(
@@ -50,23 +50,23 @@ object FileUploaderExample extends Example("FileUploader") {
     },
     DemoPanel("File Uploader With No Input") {
       //-- Begin: File Uploader With No Input
-      FileUploader(_.hideInput := true, _ => Button(_ => "Upload File"))
+      FileUploader(_.hideInput := true, Button("Upload File"))
       //-- End
     },
     DemoPanel("Custom File Uploaders") {
       //-- Begin: Custom File Uploaders
       div(
-        FileUploader(_.hideInput := true, _ => Avatar(_.icon := IconName.upload)),
-        FileUploader(_.hideInput := true, _ => Badge(_ => "Upload File"))
+        FileUploader(_.hideInput := true, Avatar(_.icon := IconName.upload)),
+        FileUploader(_.hideInput := true, Badge("Upload File"))
       )
       //-- End
     },
     DemoPanel("Button With Icon File Uploader") {
       //-- Begin: Button With Icon File Uploader
       div(
-        FileUploader(_ => Button(_.icon := IconName.upload, _ => "Upload")),
-        FileUploader(_ => Button(_.icon := IconName.upload, _.iconEnd := true, _ => "Upload")),
-        FileUploader(_ => Button(_.icon := IconName.upload, _.iconOnly := true))
+        FileUploader(Button(_.icon := IconName.upload, "Upload")),
+        FileUploader(Button(_.icon := IconName.upload, _.iconEnd := true, "Upload")),
+        FileUploader(Button(_.icon := IconName.upload, _.iconOnly := true))
       )
       //-- End
     }
diff --git a/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala b/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala
index 6a114ff..ed650f0 100644
--- a/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala
+++ b/demo/src/main/scala/demo/FlexibleColumnLayoutExample.scala
@@ -21,12 +21,12 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") {
       val maybeSelectedCardVar = Var(Option.empty[Card])
 
       def startColumnListItem(card: Card): HtmlElement = UList.item(
-        _ => card.name,
+        card.name,
         _.description := card.tpe,
         _.additionalText := s"Cost: ${card.cost}",
         _.iconEnd := true,
         _.icon := IconName.`slim-arrow-right`,
-        _ => dataAttr("card-name") := card.name
+        dataAttr("card-name") := card.name
       )
 
       def cardFromName(name: String): Option[Card] = cards.find(_.name == name)
@@ -52,9 +52,9 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") {
           _.slots.startColumn := div(
             ShellBar(_.primaryTitle := "Magic"),
             UList(
-              _ => height := "500px",
+              height := "500px",
               _.headerText := "Power Nine",
-              _ => cards.filter(_.comment == "Power Nine").map(startColumnListItem),
+              cards.filter(_.comment == "Power Nine").map(startColumnListItem),
               _.events.onItemClick
                 .map(event =>
                   for {
@@ -72,7 +72,7 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") {
                 Button(
                   _.icon := IconName.`slim-arrow-left`,
                   _.events.onClick.mapTo(Option.empty[Card]) --> maybeSelectedCardVar.writer,
-                  _ => marginRight := "1em",
+                  marginRight := "1em",
                   _.design := ButtonDesign.Transparent
                 ),
                 h1(card.name)
@@ -80,8 +80,7 @@ object FlexibleColumnLayoutExample extends Example("FlexibleColumnLayout") {
               img(src := MTG.cardImages(card.name))
             )
           },
-          _ =>
-            maybeSelectedCardVar.signal.changes.map(maybeCard =>
+                      maybeSelectedCardVar.signal.changes.map(maybeCard =>
               if maybeCard.isDefined then FCLLayout.TwoColumnsMidExpanded else FCLLayout.OneColumn
             ) --> layoutBus.writer
         )
diff --git a/demo/src/main/scala/demo/IconExample.scala b/demo/src/main/scala/demo/IconExample.scala
index e00f8ab..697c787 100644
--- a/demo/src/main/scala/demo/IconExample.scala
+++ b/demo/src/main/scala/demo/IconExample.scala
@@ -12,7 +12,7 @@ object IconExample extends Example("Icon") {
   ): HtmlElement = div(
     DemoPanel("Basic Icons")(
       //-- Begin: Basic Icons
-      div(IconName.allValues.take(10).map(name => Icon(_.name := name, _ => marginRight := "5px")))
+      div(IconName.allValues.take(10).map(name => Icon(_.name := name, marginRight := "5px")))
       //-- End
     ),
     DemoPanel("Customized Icons")(
@@ -23,15 +23,14 @@ object IconExample extends Example("Icon") {
           .map(name =>
             Icon(
               _.name := name,
-              _ => marginRight := "1em",
-              _ =>
-                List(
-                  width := "3rem",
-                  height := "3rem",
-                  fontSize := "1.5rem",
-                  color := "crimson",
-                  backgroundColor := "#fafafa"
-                )
+              marginRight := "1em",
+              List(
+                width := "3rem",
+                height := "3rem",
+                fontSize := "1.5rem",
+                color := "crimson",
+                backgroundColor := "#fafafa"
+              )
             )
           )
       )
diff --git a/demo/src/main/scala/demo/IllustratedMessageExample.scala b/demo/src/main/scala/demo/IllustratedMessageExample.scala
index 2cb1942..076f65e 100644
--- a/demo/src/main/scala/demo/IllustratedMessageExample.scala
+++ b/demo/src/main/scala/demo/IllustratedMessageExample.scala
@@ -14,10 +14,9 @@ object IllustratedMessageExample extends Example("IllustratedMessage") {
       //-- Begin: Illustrated Message
       IllustratedMessage(
         _.name := IllustrationMessageType.PageNotFound,
-        _ =>
-          List(
-            Button(_.design := ButtonDesign.Emphasized, _ => "Action 1"),
-            Button(_ => "Action 2")
+                  List(
+            Button(_.design := ButtonDesign.Emphasized, "Action 1"),
+            Button("Action 2")
           )
       )
       //-- End
@@ -26,19 +25,18 @@ object IllustratedMessageExample extends Example("IllustratedMessage") {
       //-- Begin: Illustrated Message in dialog
       val dialogShowActionBus: EventBus[Boolean] = new EventBus
       div(
-        Button(_ => "Open Dialog", _.events.onClick.mapTo(true) --> dialogShowActionBus.writer),
+        Button("Open Dialog", _.events.onClick.mapTo(true) --> dialogShowActionBus.writer),
         Dialog(
           _.headerText := "Error",
-          _ =>
-            inContext(el =>
+                      inContext(el =>
               dialogShowActionBus.events --> Observer[Boolean](if _ then el.ref.show() else el.ref.close())
             ),
-          _ => IllustratedMessage(_.name := IllustrationMessageType.ErrorScreen),
+          IllustratedMessage(_.name := IllustrationMessageType.ErrorScreen),
           _.slots.footer := Bar(
             _.design := BarDesign.Footer,
             _.slots.endContent := Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Close",
+              "Close",
               _.events.onClick.mapTo(false) --> dialogShowActionBus.writer
             )
           )
@@ -52,8 +50,8 @@ object IllustratedMessageExample extends Example("IllustratedMessage") {
     //   IllustratedMessage(
     //     _.name := IllustrationMessageType.TntUnsuccessfulAuth,
     //     _.titleText := "Something wen wrong...",
-    //     _.slots.subtitle := div("Please try again or contact us at ", Link(_ => "example@example.com"), "."),
-    //     _ => Button(_.icon := IconName.refresh, _ => "Try again")
+    //     _.slots.subtitle := div("Please try again or contact us at ", Link("example@example.com"), "."),
+    //     Button(_.icon := IconName.refresh, "Try again")
     //   )
     // )
   )
diff --git a/demo/src/main/scala/demo/InputExample.scala b/demo/src/main/scala/demo/InputExample.scala
index 1e99e80..e159325 100644
--- a/demo/src/main/scala/demo/InputExample.scala
+++ b/demo/src/main/scala/demo/InputExample.scala
@@ -49,7 +49,7 @@ object InputExample extends Example("Input") {
         _.showSuggestions := true,
         _.showClearIcon := true,
         _.placeholder := "Start typing country name",
-        _ => children <-- suggestions,
+        children <-- suggestions,
         _.events.onInput.mapToValue --> filterValueBus.writer
       )
       //-- End
@@ -66,7 +66,7 @@ object InputExample extends Example("Input") {
           _.placeholder := "Choose content density",
           _.showSuggestions := true,
           _.slots.valueStateMessage := div("This is an error message. Extra long text used as an error message."),
-          _ => List("Cozy", "Compact", "Condensed").map(item => UList.item(_ => item))
+          List("Cozy", "Compact", "Condensed").map(item => UList.item(item))
         )
       )
       //-- End
@@ -81,29 +81,27 @@ object InputExample extends Example("Input") {
       div(
         Input(
           _.placeholder := "Enter search criteria",
-          _ => width := "100%",
+          width := "100%",
           _.events.onInput.mapToValue --> searchCriteriaVar.writer,
-          _.slots.icon := Icon(_.name := IconName.search, _ => onClick.mapTo(()) --> showSearchResultBus.writer)
+          _.slots.icon := Icon(_.name := IconName.search, onClick.mapTo(()) --> showSearchResultBus.writer)
         ),
         Dialog(
           _.headerText := "Search result",
-          _ =>
-            child <-- showSearchResultBus.events
-              .sample(searchCriteriaVar.signal)
-              .map(searchCriteria => div(s"Here would go the results of search for '$searchCriteria'.")),
+          child <-- showSearchResultBus.events
+            .sample(searchCriteriaVar.signal)
+            .map(searchCriteria => div(s"Here would go the results of search for '$searchCriteria'.")),
           _.slots.footer := div(
             Bar(
-              _.slots.endContent := Button(_ => "Close", _.events.onClick.mapTo(()) --> closeSearchResultBus.writer),
+              _.slots.endContent := Button("Close", _.events.onClick.mapTo(()) --> closeSearchResultBus.writer),
               _.design := BarDesign.Footer
             )
           ),
-          _ =>
-            inContext(el =>
-              showSearchResultBus.events.sample(searchCriteriaVar.signal).filter(_.nonEmpty).mapTo(()) --> Observer(_ =>
-                el.ref.show()
-              )
-            ),
-          _ => inContext(el => closeSearchResultBus.events --> Observer(_ => el.ref.close()))
+          inContext(el =>
+            showSearchResultBus.events.sample(searchCriteriaVar.signal).filter(_.nonEmpty).mapTo(()) --> Observer(_ =>
+              el.ref.show()
+            )
+          ),
+          inContext(el => closeSearchResultBus.events --> Observer(_ => el.ref.close()))
         )
       )
       //-- End
@@ -114,11 +112,11 @@ object InputExample extends Example("Input") {
         className := loginFormClass,
         styleTagForLoginFormClass,
         div(
-          Label(_.forId := "myInput", _.required := true, _.showColon := true, _ => "Name"),
+          Label(_.forId := "myInput", _.required := true, _.showColon := true, "Name"),
           Input(_.id := "myInput", _.placeholder := "Enter your Name", _.required := true)
         ),
         div(
-          Label(_.forId := "myPassword", _.required := true, _.showColon := true, _ => "Secret Code"),
+          Label(_.forId := "myPassword", _.required := true, _.showColon := true, "Secret Code"),
           Input(
             _.id := "myPassword",
             _.tpe := InputType.Password,
diff --git a/demo/src/main/scala/demo/LabelExample.scala b/demo/src/main/scala/demo/LabelExample.scala
index bb72db6..1f946aa 100644
--- a/demo/src/main/scala/demo/LabelExample.scala
+++ b/demo/src/main/scala/demo/LabelExample.scala
@@ -12,22 +12,22 @@ object LabelExample extends Example("Label") {
   ): HtmlElement = div(
     DemoPanel("Basic Label")(
       //-- Begin: Basic label
-      Label(_ => "Simple Label")
+      Label("Simple Label")
       //-- End
     ),
     DemoPanel("Required Label")(
       //-- Begin: Required Label
-      Label(_ => "Required Label", _.required := true)
+      Label("Required Label", _.required := true)
       //-- End
     ),
     DemoPanel("Required Label With Colon")(
       //-- Begin: Required Label With Colon
-      Label(_ => "Required Label", _.required := true, _.showColon := true)
+      Label("Required Label", _.required := true, _.showColon := true)
       //-- End
     ),
     DemoPanel("Truncated Label")(
       //-- Begin: Truncated Label
-      Label(_ => width := "200px", _ => "Long labels are truncated by default.")
+      Label(width := "200px", "Long labels are truncated by default.")
       //-- End
     ),
     DemoPanel("Label 'for'")(
@@ -36,27 +36,27 @@ object LabelExample extends Example("Label") {
         className := loginFormClass,
         styleTagForLoginFormClass,
         div(
-          Label(_.id := "myLabel", _.forId := "myInput", _.required := true, _.showColon := true, _ => "First name"),
+          Label(_.id := "myLabel", _.forId := "myInput", _.required := true, _.showColon := true, "First name"),
           Input(
             _.id := "myInput",
-            _ => aria.required := true,
+            aria.required := true,
             _.accessibleNameRef := "myLabel",
             _.placeholder := "Enter your name"
           )
         ),
         div(
-          Label(_.id := "myLabel2", _.forId := "myDP", _.required := true, _.showColon := true, _ => "Date of birth"),
-          DatePicker(_.id := "myDP", _.accessibleNameRef := "myLabel2", _ => aria.required := true)
+          Label(_.id := "myLabel2", _.forId := "myDP", _.required := true, _.showColon := true, "Date of birth"),
+          DatePicker(_.id := "myDP", _.accessibleNameRef := "myLabel2", aria.required := true)
         ),
         div(
-          Label(_.id := "myLabel3", _.forId := "mySelect", _.required := true, _.showColon := true, _ => "Job"),
+          Label(_.id := "myLabel3", _.forId := "mySelect", _.required := true, _.showColon := true, "Job"),
           Select(
             _.id := "mySelect",
-            _ => aria.required := true,
+            aria.required := true,
             _.accessibleNameRef := "myLabel3",
-            _.option(_ => "Manager"),
-            _.option(_ => "Sales"),
-            _.option(_.selected := true, _ => "Developer")
+            _.option("Manager"),
+            _.option("Sales"),
+            _.option(_.selected := true, "Developer")
           )
         ),
         div(
@@ -65,22 +65,22 @@ object LabelExample extends Example("Label") {
             _.forId := "myTextArea",
             _.required := true,
             _.showColon := true,
-            _ => "Description label test"
+            "Description label test"
           ),
           TextArea(
             _.id := "myTextArea",
             _.accessibleNameRef := "myLabel4",
-            _ => aria.required := true,
+            aria.required := true,
             _.placeholder := "Type as much text as you wish."
           )
         ),
         div(
-          Label(_.forId := "myRB", _.required := true, _.showColon := true, _ => "Gender"),
+          Label(_.forId := "myRB", _.required := true, _.showColon := true, "Gender"),
           RadioButton(_.id := "myRB", _.name := "a", _.text := "Choice 1"),
           RadioButton(_.id := "myRB2", _.name := "a", _.checked := true, _.text := "Choice 2")
         ),
         div(
-          Label(_.forId := "myCB", _.required := true, _.showColon := true, _ => "Accept terms of use"),
+          Label(_.forId := "myCB", _.required := true, _.showColon := true, "Accept terms of use"),
           CheckBox(_.id := "myCB")
         )
       )
diff --git a/demo/src/main/scala/demo/LinkExample.scala b/demo/src/main/scala/demo/LinkExample.scala
index 1193894..fb76bb3 100644
--- a/demo/src/main/scala/demo/LinkExample.scala
+++ b/demo/src/main/scala/demo/LinkExample.scala
@@ -18,11 +18,11 @@ object LinkExample extends Example("Link") {
             _.href := "https://www.scala-js.org/",
             _.target := LinkTarget._blank,
             _.design := design,
-            _ => s"$design Link",
-            _ => marginRight := "3em"
+            s"$design Link",
+            marginRight := "3em"
           )
         ),
-        Link(_.href := "https://www.scala-js.org/", _.target := LinkTarget._blank, _.disabled := true, _ => "Disabled")
+        Link(_.href := "https://www.scala-js.org/", _.target := LinkTarget._blank, _.disabled := true, "Disabled")
       )
       //-- End
     )
diff --git a/demo/src/main/scala/demo/ListExample.scala b/demo/src/main/scala/demo/ListExample.scala
index e489458..ede01b4 100644
--- a/demo/src/main/scala/demo/ListExample.scala
+++ b/demo/src/main/scala/demo/ListExample.scala
@@ -15,34 +15,34 @@ object ListExample extends Example("List") {
     DemoPanel("Basic List")(
       //-- Begin: Basic List
       UList(
-        _ => width := "100%",
+        width := "100%",
         _.item(
           _.icon := IconName.`nutrition-activity`,
           _.description := "Tropical plant with an edible fruit",
           _.additionalText := "In-stock",
           _.additionalTextState := ValueState.Success,
-          _ => "Pineapple"
+          "Pineapple"
         ),
         _.item(
           _.icon := IconName.`nutrition-activity`,
           _.description := "Occurs between red and yellow",
           _.additionalText := "Expires",
           _.additionalTextState := ValueState.Warning,
-          _ => "Orange"
+          "Orange"
         ),
         _.item(
           _.icon := IconName.`nutrition-activity`,
           _.description := "The yellow lengthy fruit",
           _.additionalText := "Re-stock",
           _.additionalTextState := ValueState.Information,
-          _ => "Blueberry"
+          "Blueberry"
         ),
         _.item(
           _.icon := IconName.`nutrition-activity`,
           _.description := "The tropical stone fruit",
           _.additionalText := "Re-stock",
           _.additionalTextState := ValueState.Error,
-          _ => "Mango"
+          "Mango"
         )
       )
       //-- End
@@ -56,7 +56,7 @@ object ListExample extends Example("List") {
           _.description := s"This is the description of fruit $fruitIndex",
           _.additionalText := additionalTextState.value,
           _.additionalTextState := additionalTextState,
-          _ => s"Fruit $fruitIndex"
+          s"Fruit $fruitIndex"
         )
       }
 
@@ -67,8 +67,8 @@ object ListExample extends Example("List") {
 
       UList(
         _.events.onLoadMore.mapTo(()) --> listGrowingBus.writer,
-        _ => children <-- fruitsToDisplaySignal,
-        _ => height := "300px",
+        children <-- fruitsToDisplaySignal,
+        height := "300px",
         _.growing := ListGrowingMode.Scroll,
         _.headerText <-- numberOfFruitsToDisplaySignal.map(numberOfFruits =>
           s"List of fruits (currently $numberOfFruits displayed)."
@@ -87,12 +87,11 @@ object ListExample extends Example("List") {
         ),
         _.events.onSelectionChange
           .map(_.detail.maybeSelectedItem.flatMap(_.dataset.get("countryName"))) --> maybeSelectedCountryVar.writer,
-        _ =>
-          countries.map { country =>
+                  countries.map { country =>
             val isInactive = country == countries.last
             UList.item(
-              _ => country ++ (if isInactive then " (Item with 'type' set to 'Inactive')" else ""),
-              _ => dataAttr("country-name") := country,
+              country ++ (if isInactive then " (Item with 'type' set to 'Inactive')" else ""),
+              dataAttr("country-name") := country,
               _.tpe.maybe(Option.when(isInactive)(ListItemType.Inactive))
             )
           }
@@ -112,7 +111,7 @@ object ListExample extends Example("List") {
         _.headerText <-- selectedItemsInfoSignal.map(selectedItems =>
           s"Multiple selection is possible: ($selectedItems)"
         ),
-        _ => countries.map(country => UList.item(_ => country, _ => dataAttr("country-name") := country)),
+        countries.map(country => UList.item(country, dataAttr("country-name") := country)),
         _.events.onSelectionChange.map(
           _.detail.selectedItems.flatMap(_.dataset.get("countryName"))
         ) --> selectedItemsVar.writer
@@ -129,20 +128,20 @@ object ListExample extends Example("List") {
       def expansionListItem(expansion: String) = (_: UList.type).item(
         _.iconEnd := true,
         _.icon := IconName.`slim-arrow-right`,
-        _ => expansion
+        expansion
       )
       UList(
         _.mode := ListMode.MultiSelect,
         _.headerText := "Expansion list",
-        _.group(_ => "Mirrodin Block"),
+        _.group("Mirrodin Block"),
         expansionListItem("Mirrodin"),
         expansionListItem("Darksteel"),
         expansionListItem("Fifth Dawn"),
-        _.group(_ => "Kamigawa Block"),
+        _.group("Kamigawa Block"),
         expansionListItem("Champions of Kamigawa"),
         expansionListItem("Betrayers of Kamigawa"),
         expansionListItem("Saviors of Kamigawa"),
-        _.group(_ => "Ravnica Block"),
+        _.group("Ravnica Block"),
         expansionListItem("Ravnica: City of Guilds"),
         expansionListItem("Guildpact"),
         expansionListItem("Dissension")
@@ -154,7 +153,7 @@ object ListExample extends Example("List") {
       UList(
         _.mode := ListMode.Delete,
         _.headerText := "Note: The list items removal is up to application developers",
-        _ => countries.map(country => UList.item(_ => country))
+        countries.map(country => UList.item(country))
       )
       //-- End
     ),
@@ -169,12 +168,12 @@ object ListExample extends Example("List") {
         UList(
           _.headerText := "No separators",
           _.separators := ListSeparator.None,
-          _ => countries.take(3).map(country => UList.item(_ => country, _.icon := IconName.world))
+          countries.take(3).map(country => UList.item(country, _.icon := IconName.world))
         ),
         UList(
           _.headerText := "Inner separators",
           _.separators := ListSeparator.Inner,
-          _ => countries.drop(3).take(3).map(country => UList.item(_ => country, _.icon := IconName.`hello-world`))
+          countries.drop(3).take(3).map(country => UList.item(country, _.icon := IconName.`hello-world`))
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/MediaGalleryExample.scala b/demo/src/main/scala/demo/MediaGalleryExample.scala
index 0b20315..7f02bd5 100644
--- a/demo/src/main/scala/demo/MediaGalleryExample.scala
+++ b/demo/src/main/scala/demo/MediaGalleryExample.scala
@@ -14,7 +14,7 @@ object MediaGalleryExample extends Example("MediaGallery") {
     "https://media.magic.wizards.com/images/wallpaper/sparas_headquarters_kieran_yanner_1280x960_poozxbqpcw.jpg",
     "https://media.magic.wizards.com/images/wallpaper/baldurs-gate-clb-background-1280x960.jpg",
     "https://media.magic.wizards.com/images/wallpaper/1280x960-neo-ukiyo-e-plains.jpg"
-  ).map(link => MediaGallery.item(_ => img(src := link)))
+  ).map(link => MediaGallery.item(img(src := link)))
   //-- End Common
 
   def component(using
@@ -22,14 +22,14 @@ object MediaGalleryExample extends Example("MediaGallery") {
   ): HtmlElement = div(
     DemoPanel("Usage") {
       //-- Begin: Usage
-      div(width := "800px", MediaGallery(_.showAllThumbnails := true, _ => fiveMagicWallpapers))
+      div(width := "800px", MediaGallery(_.showAllThumbnails := true, fiveMagicWallpapers))
       //-- End
     },
     DemoPanel("MediaGallery with vertical layout") {
       //-- Begin: MediaGallery with vertical layout
       div(
         width := "800px",
-        MediaGallery(_.layout := MediaGalleryLayout.Vertical, _.showAllThumbnails := true, _ => fiveMagicWallpapers)
+        MediaGallery(_.layout := MediaGalleryLayout.Vertical, _.showAllThumbnails := true, fiveMagicWallpapers)
       )
       //-- End
     },
@@ -41,7 +41,7 @@ object MediaGalleryExample extends Example("MediaGallery") {
           _.layout := MediaGalleryLayout.Horizontal,
           _.menuHorizontalAlign := MediaGalleryMenuHorizontalAlign.Right,
           _.showAllThumbnails := true,
-          _ => fiveMagicWallpapers
+          fiveMagicWallpapers
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/MenuExample.scala b/demo/src/main/scala/demo/MenuExample.scala
index fd2d257..a488ba5 100644
--- a/demo/src/main/scala/demo/MenuExample.scala
+++ b/demo/src/main/scala/demo/MenuExample.scala
@@ -17,9 +17,9 @@ object MenuExample extends Example("Menu") {
       val openMenuBus: EventBus[HTMLElement] = new EventBus
 
       div(
-        Button(_ => "Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
+        Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
         Menu(
-          _ => inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
+          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
           _.item(_.text := "New File", _.icon := IconName.`add-document`),
           _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled := true),
           _.item(_.text := "Open", _.icon := IconName.`open-folder`, _.startsSection := true),
@@ -36,9 +36,9 @@ object MenuExample extends Example("Menu") {
       val openMenuBus: EventBus[HTMLElement] = new EventBus
 
       div(
-        Button(_ => "Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
+        Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
         Menu(
-          _ => inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
+          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
           _.item(_.text := "New File", _.icon := IconName.`add-document`),
           _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled := true),
           _.item(
diff --git a/demo/src/main/scala/demo/MessageStripExample.scala b/demo/src/main/scala/demo/MessageStripExample.scala
index 60f4d57..8f3e366 100644
--- a/demo/src/main/scala/demo/MessageStripExample.scala
+++ b/demo/src/main/scala/demo/MessageStripExample.scala
@@ -22,7 +22,7 @@ object MessageStripExample extends Example("MessageStrip") {
               .startWith(
                 MessageStrip(
                   _.design := design,
-                  _ => s"${design.value} MessageStrip",
+                  s"${design.value} MessageStrip",
                   _.events.onClose.mapTo(()) --> closeBus.writer
                 )
               )
@@ -38,7 +38,7 @@ object MessageStripExample extends Example("MessageStrip") {
           MessageStrip(
             _.hideCloseButton := true,
             _.design := design,
-            _ => s"${design.value} MessageStrip with No Close Button"
+            s"${design.value} MessageStrip with No Close Button"
           )
         )
       )
@@ -55,7 +55,7 @@ object MessageStripExample extends Example("MessageStrip") {
               .startWith(
                 MessageStrip(
                   _.design := design,
-                  _ => s"${design.value} MessageStrip",
+                  s"${design.value} MessageStrip",
                   _.events.onClose.mapTo(()) --> closeBus.writer,
                   _.hideIcon := true
                 )
@@ -70,11 +70,11 @@ object MessageStripExample extends Example("MessageStrip") {
       val clickedBus: EventBus[Unit] = new EventBus
       val numberOfClicks             = clickedBus.events.mapTo(1).foldLeft(0)(_ + _).changes
       div(
-        Button(_ => "Generate MessageStrip", _.events.onClick.mapTo(()) --> clickedBus.writer),
+        Button("Generate MessageStrip", _.events.onClick.mapTo(()) --> clickedBus.writer),
         child <-- numberOfClicks.map(count =>
           MessageStrip(
             _.design := MessageStripDesign.allValues(count % MessageStripDesign.allValues.size),
-            _ => s"You clicked $count times.",
+            s"You clicked $count times.",
             _.hideCloseButton := true
           )
         )
@@ -86,34 +86,34 @@ object MessageStripExample extends Example("MessageStrip") {
       div(
         MessageStrip(
           _.design := MessageStripDesign.Information,
-          _ => width := "300px",
+          width := "300px",
           _.hideIcon := true,
           _.hideCloseButton := true,
-          _ => "You have new message"
+          "You have new message"
         ),
         MessageStrip(
           _.design := MessageStripDesign.Positive,
-          _ => width := "300px",
+          width := "300px",
           _.hideCloseButton := true,
-          _ => "Successful login!"
+          "Successful login!"
         ),
         MessageStrip(
           _.design := MessageStripDesign.Negative,
-          _ => width := "300px",
+          width := "300px",
           _.hideIcon := true,
-          _ => "Access denied!"
+          "Access denied!"
         ),
-        MessageStrip(_.design := MessageStripDesign.Warning, _ => width := "300px", _ => "Update is required"),
+        MessageStrip(_.design := MessageStripDesign.Warning, width := "300px", "Update is required"),
         MessageStrip(
           _.design := MessageStripDesign.Warning,
-          _ => width := "300px",
+          width := "300px",
           _.slots.icon := Icon(_.name := IconName.palette),
-          _ => "Custom Icon"
+          "Custom Icon"
         ),
         MessageStrip(
           _.design := MessageStripDesign.Positive,
-          _ => width := "300px",
-          _ => "Custom animated icon",
+          width := "300px",
+          "Custom animated icon",
           _.slots.icon := img(
             src := "https://sap.github.io/ui5-webcomponents/assets/images/loading.gif",
             width := "16px",
diff --git a/demo/src/main/scala/demo/MultiComboBoxExample.scala b/demo/src/main/scala/demo/MultiComboBoxExample.scala
index 1d41b79..7a4dc43 100644
--- a/demo/src/main/scala/demo/MultiComboBoxExample.scala
+++ b/demo/src/main/scala/demo/MultiComboBoxExample.scala
@@ -25,9 +25,8 @@ object MultiComboBoxExample extends Example("MultiComboBox") {
       //-- Begin: MultiComboBox with items
       MultiComboBox(
         _.placeholder := "Choose your countries",
-        _ => width := "500px",
-        _ =>
-          countries.zipWithIndex.map((country, index) =>
+        width := "500px",
+                  countries.zipWithIndex.map((country, index) =>
             MultiComboBox.item(_.text := country, _.selected := (index == 0))
           )
       )
@@ -37,10 +36,9 @@ object MultiComboBoxExample extends Example("MultiComboBox") {
       //-- Begin: MultiComboBox with free text input
       MultiComboBox(
         _.placeholder := "Choose your countries",
-        _ => width := "500px",
+        width := "500px",
         _.allowCustomValues := true,
-        _ =>
-          countries.zipWithIndex.map((country, index) =>
+                  countries.zipWithIndex.map((country, index) =>
             MultiComboBox.item(_.text := country, _.selected := (index % 3 == 0))
           )
       )
@@ -53,7 +51,7 @@ object MultiComboBoxExample extends Example("MultiComboBox") {
           (valueState, index) =>
             MultiComboBox(
               _.valueState := valueState,
-              _ => countries.drop(index * 3).take(3).map(country => MultiComboBox.item(_.text := country))
+              countries.drop(index * 3).take(3).map(country => MultiComboBox.item(_.text := country))
             )
         }
       )
diff --git a/demo/src/main/scala/demo/MultiInputExample.scala b/demo/src/main/scala/demo/MultiInputExample.scala
index d5b836e..52a1d68 100644
--- a/demo/src/main/scala/demo/MultiInputExample.scala
+++ b/demo/src/main/scala/demo/MultiInputExample.scala
@@ -25,9 +25,9 @@ object MultiInputExample extends Example("MultiInput") {
         div(
           Label(
             _.wrappingType := WrappingType.Normal,
-            _ => width := "200px",
-            _ => "MultiInput",
-            _ => child.text <-- firstValueVar.signal.map(value => s" (current value is $value)")
+            width := "200px",
+            "MultiInput",
+            child.text <-- firstValueVar.signal.map(value => s" (current value is $value)")
           ),
           MultiInput(
             _.value <-- firstValueVar,
@@ -38,9 +38,9 @@ object MultiInputExample extends Example("MultiInput") {
         div(
           Label(
             _.wrappingType := WrappingType.Normal,
-            _ => width := "200px",
-            _ => "MultiInput",
-            _ => child.text <-- secondValueVar.signal.map(value => s" (current value is $value)")
+            width := "200px",
+            "MultiInput",
+            child.text <-- secondValueVar.signal.map(value => s" (current value is $value)")
           ),
           MultiInput(
             _.showValueHelpIcon := true,
@@ -61,7 +61,7 @@ object MultiInputExample extends Example("MultiInput") {
         ),
         MessageStrip(
           _.design := MessageStripDesign.Information,
-          _ => "These input are only there for display. They won't add tokens dynamically. See below for such example."
+          "These input are only there for display. They won't add tokens dynamically. See below for such example."
         )
       )
       //-- End
@@ -91,12 +91,12 @@ object MultiInputExample extends Example("MultiInput") {
       MultiInput(
         _.showSuggestions := true,
         _.valueState <-- valueStateChanges,
-        _ => width := "50%",
+        width := "50%",
         _.slots.valueStateMessage := div("Token is already in the list"),
-        _ => countries.map(country => MultiInput.suggestion(_.text := country)),
+        countries.map(country => MultiInput.suggestion(_.text := country)),
         _.slots.tokens <-- tokenValuesVar.signal.map(_.map(tokenValue => MultiInput.token(_.text := tokenValue))),
         _.events.onChange.map(_.target.value) --> changeBus.writer,
-        _ => newValuesChanges --> tokenValuesVar.writer,
+        newValuesChanges --> tokenValuesVar.writer,
         _.events.onTokenDelete.map(_.detail.token.text) --> tokenValuesVar.updater((values, toRemove) =>
           values.filterNot(_ == toRemove)
         )
diff --git a/demo/src/main/scala/demo/NotificationListItemExample.scala b/demo/src/main/scala/demo/NotificationListItemExample.scala
index 2355abe..53a696e 100644
--- a/demo/src/main/scala/demo/NotificationListItemExample.scala
+++ b/demo/src/main/scala/demo/NotificationListItemExample.scala
@@ -47,9 +47,8 @@ object NotificationListItemExample extends Example("NotificationListItem") {
           _.showClose := true,
           _.titleText := "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
           _.priority := Priority.High,
-          _ =>
-            "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-          _.slots.avatar := Avatar(_.size := AvatarSize.XS, _ => img(src := MTG.manaSymbolsRefs("W"))),
+          "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+          _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))),
           _.slots.footnotes := span("Monique Legrand"),
           _.slots.footnotes := span("2 Days")
         ),
@@ -58,9 +57,8 @@ object NotificationListItemExample extends Example("NotificationListItem") {
           _.showClose := true,
           _.titleText := "New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
           _.priority := Priority.High,
-          _ =>
-            "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-          _.slots.avatar := Avatar(_.size := AvatarSize.XS, _ => img(src := MTG.manaSymbolsRefs("B"))),
+          "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+          _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))),
           _.slots.footnotes := span("Alain Chevalier"),
           _.slots.footnotes := span("2 Days")
         )
@@ -79,36 +77,35 @@ object NotificationListItemExample extends Example("NotificationListItem") {
           _.events.onNotificationsClick.map(_.detail.targetRef) --> openNotifPopoverBus.writer
         ),
         Popover(
-          _ => inContext(el => openNotifPopoverBus.events.map(el.ref -> _) --> Popover.showAtObserver),
-          _ => maxWidth := "600px",
+          inContext(el => openNotifPopoverBus.events.map(el.ref -> _) --> Popover.showAtObserver),
+          maxWidth := "600px",
           _.placementType := PopoverPlacementType.Bottom,
           _.horizontalAlign := PopoverHorizontalAlign.Right,
-          _ =>
-            UList(
-              _.headerText := "Notifications",
-              _.events.onItemClose.map(_.detail.item) --> closeItemsBus.writer,
-              _.notificationItem(
-                notifWithId("notif-shellbar-1"),
-                _.showClose := true,
-                _.titleText := "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-                _.priority := Priority.High,
-                _ => "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-                _.slots.avatar := Avatar(_.size := AvatarSize.XS, _ => img(src := MTG.manaSymbolsRefs("W"))),
-                _.slots.footnotes := span("Monique Legrand"),
-                _.slots.footnotes := span("2 Days"),
-                _.slots.actions := NotificationListItem.action(_.icon := IconName.accept, _.text := "Accept")
-              ),
-              _.notificationItem(
-                notifWithId("notif-shellbar-2"),
-                _.showClose := true,
-                _.titleText := "New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-                _.priority := Priority.High,
-                _ => "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
-                _.slots.avatar := Avatar(_.size := AvatarSize.XS, _ => img(src := MTG.manaSymbolsRefs("B"))),
-                _.slots.footnotes := span("Alain Chevalier"),
-                _.slots.footnotes := span("2 Days")
-              )
+          UList(
+            _.headerText := "Notifications",
+            _.events.onItemClose.map(_.detail.item) --> closeItemsBus.writer,
+            _.notificationItem(
+              notifWithId("notif-shellbar-1"),
+              _.showClose := true,
+              _.titleText := "New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+              _.priority := Priority.High,
+              "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+              _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("W"))),
+              _.slots.footnotes := span("Monique Legrand"),
+              _.slots.footnotes := span("2 Days"),
+              _.slots.actions := NotificationListItem.action(_.icon := IconName.accept, _.text := "Accept")
+            ),
+            _.notificationItem(
+              notifWithId("notif-shellbar-2"),
+              _.showClose := true,
+              _.titleText := "New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+              _.priority := Priority.High,
+              "And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.",
+              _.slots.avatar := Avatar(_.size := AvatarSize.XS, img(src := MTG.manaSymbolsRefs("B"))),
+              _.slots.footnotes := span("Alain Chevalier"),
+              _.slots.footnotes := span("2 Days")
             )
+          )
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/PageExample.scala b/demo/src/main/scala/demo/PageExample.scala
index f259305..91e712e 100644
--- a/demo/src/main/scala/demo/PageExample.scala
+++ b/demo/src/main/scala/demo/PageExample.scala
@@ -14,16 +14,15 @@ object PageExample extends Example("Page") {
       //-- Begin: Page with floating footer
       Page(
         _.floatingFooter := true,
-        _ => height := "500px",
-        _ => width := "500px",
+        height := "500px",
+        width := "500px",
         _.slots.header := Bar(
           _.design := BarDesign.Header,
           _.slots.startContent := Button(_.tooltip := "Go Home", _.icon := IconName.home),
           _.slots.endContent := Button(_.tooltip := "Settings", _.icon := IconName.`action-settings`),
-          _ => "Page Title"
+          "Page Title"
         ),
-        _ =>
-          div(
+                  div(
             overflowY := "auto",
             p(
               "103.3. Each player begins the game with a starting life total of 20. Some variant games have different starting life totals."
@@ -41,9 +40,9 @@ object PageExample extends Example("Page") {
         _.slots.footer := Bar(
           _.design := BarDesign.FloatingFooter,
           _.slots.startContent := Button(_.design := ButtonDesign.Transparent, _.icon := IconName.home),
-          _.slots.endContent := Button(_.design := ButtonDesign.Positive, _ => "Accept"),
-          _.slots.endContent := Button(_.design := ButtonDesign.Negative, _ => "Reject"),
-          _.slots.endContent := Button(_.design := ButtonDesign.Transparent, _ => "Cancel")
+          _.slots.endContent := Button(_.design := ButtonDesign.Positive, "Accept"),
+          _.slots.endContent := Button(_.design := ButtonDesign.Negative, "Reject"),
+          _.slots.endContent := Button(_.design := ButtonDesign.Transparent, "Cancel")
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/PanelExample.scala b/demo/src/main/scala/demo/PanelExample.scala
index b4a4a5f..0d83695 100644
--- a/demo/src/main/scala/demo/PanelExample.scala
+++ b/demo/src/main/scala/demo/PanelExample.scala
@@ -15,14 +15,13 @@ object PanelExample extends Example("Panel") {
     DemoPanel("Basic Panel")(
       //-- Begin: Basic Panel
       Panel(
-        _ => width := "100%",
+        width := "100%",
         _.headerText := "Both expandable and expanded",
-        _ => h1("I am a native heading!"),
-        _ => Label(_.wrappingType := WrappingType.Normal, _ => "Short text."),
-        _ => br(),
-        _ => Label(_.wrappingType := WrappingType.Normal, _ => "Another text."),
-        _ =>
-          p(
+        h1("I am a native heading!"),
+        Label(_.wrappingType := WrappingType.Normal, "Short text."),
+        br(),
+        Label(_.wrappingType := WrappingType.Normal, "Another text."),
+                  p(
             "Aute ullamco officia fugiat culpa do tempor tempor aute excepteur magna. Quis velit adipisicing excepteur " +
               "do eu duis elit. Sunt ea pariatur nulla est laborum proident sunt labore commodo Lorem laboris nisi Lorem."
           )
@@ -33,11 +32,10 @@ object PanelExample extends Example("Panel") {
       //-- Begin: Panel with List
       Panel(
         _.headerText := "Select your country",
-        _ => width := "100%",
-        _ =>
-          UList(
+        width := "100%",
+                  UList(
             _.mode := ListMode.MultiSelect,
-            _ => countries.map(country => UList.item(_ => country))
+            countries.map(country => UList.item(country))
           )
       )
       //-- End
@@ -47,10 +45,9 @@ object PanelExample extends Example("Panel") {
       Panel(
         _.fixed := true,
         _.headerText := "Country Of Birth",
-        _ =>
-          UList(
+                  UList(
             _.mode := ListMode.SingleSelectBegin,
-            _ => countries.map(country => UList.item(_ => country))
+            countries.map(country => UList.item(country))
           )
       )
       //-- End
@@ -67,20 +64,19 @@ object PanelExample extends Example("Panel") {
       |}
       |""".stripMargin),
         Panel(
-          _ => width := "100%",
+          width := "100%",
           _.slots.header := div(
             className := "header",
             h1("Countries"),
             div(
-              Button(_ => "Edit"),
-              Button(_.design := ButtonDesign.Emphasized, _ => "Add"),
-              Button(_.design := ButtonDesign.Negative, _ => "Remove")
+              Button("Edit"),
+              Button(_.design := ButtonDesign.Emphasized, "Add"),
+              Button(_.design := ButtonDesign.Negative, "Remove")
             )
           ),
-          _ =>
-            UList(
+                      UList(
               _.mode := ListMode.MultiSelect,
-              _ => countries.map(country => UList.item(_ => country))
+              countries.map(country => UList.item(country))
             )
         )
       )
diff --git a/demo/src/main/scala/demo/PopoverExample.scala b/demo/src/main/scala/demo/PopoverExample.scala
index 38b65b8..6b7e6da 100644
--- a/demo/src/main/scala/demo/PopoverExample.scala
+++ b/demo/src/main/scala/demo/PopoverExample.scala
@@ -17,7 +17,7 @@ object PopoverExample extends Example("Popover") {
 
       div(
         Button(
-          _ => "Open Popover",
+          "Open Popover",
           _.design := ButtonDesign.Emphasized,
           _.events.onClick.map(_.target).map(Some(_)) --> openPopoverBus.writer
         ),
@@ -25,12 +25,11 @@ object PopoverExample extends Example("Popover") {
           _.showAtFromEvents(openPopoverBus.events.collect { case Some(opener) => opener }),
           _.closeFromEvents(openPopoverBus.events.collect { case None => () }),
           _.headerText := "Newsletter subscription",
-          _ =>
-            div(
+                      div(
               className := loginFormClass,
               styleTagForLoginFormClass,
               div(
-                Label(_.forId := "emailInput", _.required := true, _ => "Email"),
+                Label(_.forId := "emailInput", _.required := true, "Email"),
                 Input(_.id := "emailInput", _.placeholder := "Enter Email", _.tpe := InputType.Email)
               )
             ),
@@ -38,7 +37,7 @@ object PopoverExample extends Example("Popover") {
             div(flex := "1"),
             Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Subscribe",
+              "Subscribe",
               _.events.onClick.mapTo(None) --> openPopoverBus.writer
             )
           )
diff --git a/demo/src/main/scala/demo/ProductSwitchExample.scala b/demo/src/main/scala/demo/ProductSwitchExample.scala
index 0987044..bb95ace 100644
--- a/demo/src/main/scala/demo/ProductSwitchExample.scala
+++ b/demo/src/main/scala/demo/ProductSwitchExample.scala
@@ -46,16 +46,14 @@ object ProductSwitchExample extends Example("ProductSwitch") {
           _.events.onProductSwitchClick.map(_.detail.targetRef) --> togglePopoverOpeningEventBus.writer
         ),
         Popover(
-          _ =>
-            inContext(el =>
+                      inContext(el =>
               togglePopoverOpeningEvents --> Observer[Option[HTMLElement]] {
                 case Some(element) => el.ref.showAt(element)
                 case None          => el.ref.close()
               }
             ),
           _.placementType := PopoverPlacementType.Bottom,
-          _ =>
-            ProductSwitch(
+                      ProductSwitch(
               _.item(_.titleText := "Home", _.subtitleText := "Central Home", _.icon := IconName.home),
               _.item(
                 _.titleText := "Analytics Cloud",
diff --git a/demo/src/main/scala/demo/ProgressIndicatorExample.scala b/demo/src/main/scala/demo/ProgressIndicatorExample.scala
index 0ec0a96..71dc2ad 100644
--- a/demo/src/main/scala/demo/ProgressIndicatorExample.scala
+++ b/demo/src/main/scala/demo/ProgressIndicatorExample.scala
@@ -40,8 +40,8 @@ object ProgressIndicatorExample extends Example("ProgressIndicator") {
     DemoPanel("Progress Indicator With Custom Sizes")(
       //-- Begin: Progress Indicator With Custom Sizes
       div(
-        ProgressIndicator(_.value := 25, _ => height := "50px", _ => width := "200px"),
-        ProgressIndicator(_.value := 75, _ => height := "50px", _ => width := "200px")
+        ProgressIndicator(_.value := 25, height := "50px", width := "200px"),
+        ProgressIndicator(_.value := 75, height := "50px", width := "200px")
       )
       //-- End
     )
diff --git a/demo/src/main/scala/demo/RadioButtonExample.scala b/demo/src/main/scala/demo/RadioButtonExample.scala
index bb4d79d..3c2d8df 100644
--- a/demo/src/main/scala/demo/RadioButtonExample.scala
+++ b/demo/src/main/scala/demo/RadioButtonExample.scala
@@ -30,7 +30,7 @@ object RadioButtonExample extends Example("RadioButton") {
 
       div(
         h1("Group of states"),
-        Label(_ => child.text <-- selectedValueVar.signal.map(state => s"Selected radio: $state")),
+        Label(child.text <-- selectedValueVar.signal.map(state => s"Selected radio: $state")),
         div(
           display := "flex",
           flexDirection := "column",
@@ -51,13 +51,13 @@ object RadioButtonExample extends Example("RadioButton") {
       //-- Begin: RadioButton with Text Wrapping
       div(
         RadioButton(
-          _ => width := "300px",
+          width := "300px",
           _.text := "ui5-radio-button with 'wrapping-type=Normal' set and some long text",
           _.wrappingType := WrappingType.Normal,
           _.name := "GroupD"
         ),
         RadioButton(
-          _ => width := "200px",
+          width := "200px",
           _.text := "Another ui5-radio-button with very long text here",
           _.wrappingType := WrappingType.Normal,
           _.name := "GroupD"
diff --git a/demo/src/main/scala/demo/RangeSliderExample.scala b/demo/src/main/scala/demo/RangeSliderExample.scala
index 2b3970e..7e4f57a 100644
--- a/demo/src/main/scala/demo/RangeSliderExample.scala
+++ b/demo/src/main/scala/demo/RangeSliderExample.scala
@@ -16,8 +16,7 @@ object RangeSliderExample extends Example("RangeSlider") {
       val endValueVar: Var[Double]   = Var(20)
 
       div(
-        Label(_ =>
-          child.text <-- startValueVar.signal
+        Label(          child.text <-- startValueVar.signal
             .combineWith(endValueVar.signal)
             .map((start, end) => s"Currently selected range: ($start, $end)")
         ),
diff --git a/demo/src/main/scala/demo/ResponsivePopoverExample.scala b/demo/src/main/scala/demo/ResponsivePopoverExample.scala
index 6d49226..7a39ca9 100644
--- a/demo/src/main/scala/demo/ResponsivePopoverExample.scala
+++ b/demo/src/main/scala/demo/ResponsivePopoverExample.scala
@@ -19,19 +19,18 @@ object ResponsivePopoverExample extends Example("ResponsivePopover") {
       div(
         Button(
           _.design := ButtonDesign.Emphasized,
-          _ => "Open Popover",
+          "Open Popover",
           _.events.onClick.map(_.target) --> openPopoverBus.writer
         ),
         ResponsivePopover(
           _.showAtFromEvents(openPopoverBus.events),
           _.closeFromEvents(closePopoverBus.events),
           _.headerText := "Newsletter subscription",
-          _ =>
-            div(
+                      div(
               className := loginFormClass,
               styleTagForLoginFormClass,
               div(
-                Label(_.forId := "emailInput", _.required := true, _ => "Email"),
+                Label(_.forId := "emailInput", _.required := true, "Email"),
                 Input(_.id := "emailInput", _.placeholder := "Enter Email", _.tpe := InputType.Email)
               )
             ),
@@ -39,7 +38,7 @@ object ResponsivePopoverExample extends Example("ResponsivePopover") {
             div(flex := "1"),
             Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Subscribe",
+              "Subscribe",
               _.events.onClick.mapTo(()) --> closePopoverBus.writer
             )
           )
diff --git a/demo/src/main/scala/demo/SegmentedButtonExample.scala b/demo/src/main/scala/demo/SegmentedButtonExample.scala
index c886c30..101f29a 100644
--- a/demo/src/main/scala/demo/SegmentedButtonExample.scala
+++ b/demo/src/main/scala/demo/SegmentedButtonExample.scala
@@ -14,9 +14,9 @@ object SegmentedButtonExample extends Example("SegmentedButton") {
       //-- Begin: Basic SegmentedButton
       SegmentedButton(
         _.accessibleName := "Geographic location",
-        _.item(_ => "Map"),
-        _.item(_ => "Satellite", _.pressed := true),
-        _.item(_ => "Terrain")
+        _.item("Map"),
+        _.item("Satellite", _.pressed := true),
+        _.item("Terrain")
       )
       //-- End
     ),
@@ -32,11 +32,11 @@ object SegmentedButtonExample extends Example("SegmentedButton") {
     DemoPanel("SegmentedButton with 5 SegmentedButtonItems")(
       //-- Begin: SegmentedButton with 5 SegmentedButtonItems
       SegmentedButton(
-        _.item(_ => "Item"),
-        _.item(_ => "Pressed SegmentedButtonItem With Bigger Text", _.pressed := true),
-        _.item(_ => "Item"),
-        _.item(_ => "SegmentedButtonItem"),
-        _.item(_ => "Press me")
+        _.item("Item"),
+        _.item("Pressed SegmentedButtonItem With Bigger Text", _.pressed := true),
+        _.item("Item"),
+        _.item("SegmentedButtonItem"),
+        _.item("Press me")
       )
       //-- End
     )
diff --git a/demo/src/main/scala/demo/SelectExample.scala b/demo/src/main/scala/demo/SelectExample.scala
index bfd5d83..dadf569 100644
--- a/demo/src/main/scala/demo/SelectExample.scala
+++ b/demo/src/main/scala/demo/SelectExample.scala
@@ -17,27 +17,26 @@ object SelectExample extends Example("SelectExample") {
       //-- Begin: Basic Select
       div(
         Select(
-          _.option(_.icon := IconName.iphone, _ => "Phone"),
-          _.option(_.icon := IconName.ipad, _ => "Tablet"),
-          _.option(_.icon := IconName.laptop, _ => "Desktop", _.selected := true)
+          _.option(_.icon := IconName.iphone, "Phone"),
+          _.option(_.icon := IconName.ipad, "Tablet"),
+          _.option(_.icon := IconName.laptop, "Desktop", _.selected := true)
         ),
         span(padding := "1em"),
         Select(
           _.disabled := true,
-          _.option(_.icon := IconName.iphone, _ => "Phone")
+          _.option(_.icon := IconName.iphone, "Phone")
         )
       )
       //-- End
     ),
     DemoPanel("Select with Two-Column Layout Items")(
       //-- Begin: Select with Two-Column Layout Items
-      Select(_ =>
-        someCountries
+      Select(        someCountries
           .zip(someCountryCodes)
           .map((country, code) =>
             Select.option(
               _.additionalText := code,
-              _ => country
+              country
             )
           )
       )
diff --git a/demo/src/main/scala/demo/ShellBarExample.scala b/demo/src/main/scala/demo/ShellBarExample.scala
index aeffb96..d53675e 100644
--- a/demo/src/main/scala/demo/ShellBarExample.scala
+++ b/demo/src/main/scala/demo/ShellBarExample.scala
@@ -22,32 +22,31 @@ object ShellBarExample extends Example("ShellBar") {
           _.showNotifications := true,
           _.showProductSwitch := true,
           _.showCoPilot := true,
-          _.slots.profile := Avatar(_ => img(src := "/images/avatars/sherpal.png")),
+          _.slots.profile := Avatar(img(src := "/images/avatars/sherpal.png")),
           _.slots.logo := img(src := "/images/avatars/scala-logo.png"),
           _.slots.startButton := Button(_.icon := IconName.`nav-back`),
           _.item(_.icon := IconName.disconnected, _.text := "Disconnected"),
           _.item(_.icon := IconName.`incoming-call`, _.text := "Incoming Calls", _.count := "4"),
           _.slots.searchField := Input(),
-          _.slots.menuItems := UList.item(_ => "Application 1"),
-          _.slots.menuItems := UList.item(_ => "Application 2"),
-          _.slots.menuItems := UList.item(_ => "Application 3"),
-          _.slots.menuItems := UList.item(_ => "Application 4"),
-          _.slots.menuItems := UList.item(_ => "Application 5"),
+          _.slots.menuItems := UList.item("Application 1"),
+          _.slots.menuItems := UList.item("Application 2"),
+          _.slots.menuItems := UList.item("Application 3"),
+          _.slots.menuItems := UList.item("Application 4"),
+          _.slots.menuItems := UList.item("Application 5"),
           _.events.onProfileClick.map(_.detail.targetRef) --> openPopoverBus.writer
         ),
         Popover(
-          _ => inContext(el => openPopoverBus.events --> Observer[HTMLElement](el.ref.showAt)),
+          inContext(el => openPopoverBus.events --> Observer[HTMLElement](el.ref.showAt)),
           _.placementType := PopoverPlacementType.Bottom,
-          _ => div(Title(_ => padding := "0.25rem 1rem 0rem 1rem", _ => "sherpal")),
-          _ =>
-            div(
+          div(Title(padding := "0.25rem 1rem 0rem 1rem", "sherpal")),
+                      div(
               UList(
                 _.separators := ListSeparator.None,
-                _.item(_.icon := IconName.`sys-find`, _ => "App Finder"),
-                _.item(_.icon := IconName.settings, _ => "Settings"),
-                _.item(_.icon := IconName.edit, _ => "Edit Home Page"),
-                _.item(_.icon := IconName.`sys-help`, _ => "Help"),
-                _.item(_.icon := IconName.log, _ => "Sign out")
+                _.item(_.icon := IconName.`sys-find`, "App Finder"),
+                _.item(_.icon := IconName.settings, "Settings"),
+                _.item(_.icon := IconName.edit, "Edit Home Page"),
+                _.item(_.icon := IconName.`sys-help`, "Help"),
+                _.item(_.icon := IconName.log, "Sign out")
               )
             )
         )
diff --git a/demo/src/main/scala/demo/SliderExample.scala b/demo/src/main/scala/demo/SliderExample.scala
index 7f20172..e81d136 100644
--- a/demo/src/main/scala/demo/SliderExample.scala
+++ b/demo/src/main/scala/demo/SliderExample.scala
@@ -14,7 +14,7 @@ object SliderExample extends Example("Slider") {
       //-- Begin: Basic Slider
       val selectedValueVar: Var[Double] = Var(0)
       div(
-        Label(_ => child.text <-- selectedValueVar.signal.map(value => s"Selected value: $value")),
+        Label(child.text <-- selectedValueVar.signal.map(value => s"Selected value: $value")),
         br(),
         Slider(_.value <-- selectedValueVar.signal, _.events.onInput.map(_.target.value) --> selectedValueVar.writer)
       )
diff --git a/demo/src/main/scala/demo/SplitButtonExample.scala b/demo/src/main/scala/demo/SplitButtonExample.scala
index 72ebd52..d77d457 100644
--- a/demo/src/main/scala/demo/SplitButtonExample.scala
+++ b/demo/src/main/scala/demo/SplitButtonExample.scala
@@ -13,19 +13,19 @@ object SplitButtonExample extends Example("SplitButton") {
   ): HtmlElement = div(
     DemoPanel("Default SplitButton") {
       //-- Begin: Default SplitButton
-      div(SplitButton(_ => "Default"), SplitButton(_.disabled := true, _ => "Default"))
+      div(SplitButton("Default"), SplitButton(_.disabled := true, "Default"))
       //-- End
     },
     DemoPanel("SplitButton with Design") {
       //-- Begin: SplitButton with Design
-      div(ButtonDesign.allValues.map(design => SplitButton(_.design := design, _ => design.value)))
+      div(ButtonDesign.allValues.map(design => SplitButton(_.design := design, design.value)))
       //-- End
     },
     DemoPanel("SplitButton with Icons") {
       //-- Begin: SplitButton with Icons
       div(
-        SplitButton(_ => "Icon", _.icon := IconName.add),
-        SplitButton(_ => "Icon + Active Icon", _.icon := IconName.add, _.activeIcon := IconName.accept)
+        SplitButton("Icon", _.icon := IconName.add),
+        SplitButton("Icon + Active Icon", _.icon := IconName.add, _.activeIcon := IconName.accept)
       )
       //-- End
     },
@@ -36,10 +36,10 @@ object SplitButtonExample extends Example("SplitButton") {
       div(
         Popover(
           _.showAtFromEvents(arrowClickBus.events),
-          _ => "Put whatever you want do show on arrow-click."
+          "Put whatever you want do show on arrow-click."
         ),
         SplitButton(
-          _ => "Expand ->",
+          "Expand ->",
           _.events.onArrowClick.map(_.target) --> arrowClickBus.writer
         )
       )
diff --git a/demo/src/main/scala/demo/StepInputExample.scala b/demo/src/main/scala/demo/StepInputExample.scala
index f21d533..5047092 100644
--- a/demo/src/main/scala/demo/StepInputExample.scala
+++ b/demo/src/main/scala/demo/StepInputExample.scala
@@ -33,8 +33,8 @@ object StepInputExample extends Example("StepInput") {
       div(
         className := "shorter",
         StepInput(_.value := 5),
-        StepInput(_.value := 5, _ => textAlign := "center"),
-        StepInput(_.value := 5, _ => textAlign := "right")
+        StepInput(_.value := 5, textAlign := "center"),
+        StepInput(_.value := 5, textAlign := "right")
       )
       //-- End
     },
@@ -52,7 +52,7 @@ object StepInputExample extends Example("StepInput") {
       //-- Begin: Step Input with Value State
       div(
         className := "shorter",
-        ValueState.allValues.map(state => StepInput(_.valueState := state, _ => marginTop := "0.5rem"))
+        ValueState.allValues.map(state => StepInput(_.valueState := state, marginTop := "0.5rem"))
       )
       //-- End
     }
diff --git a/demo/src/main/scala/demo/TabContainerExample.scala b/demo/src/main/scala/demo/TabContainerExample.scala
index afad086..d169037 100644
--- a/demo/src/main/scala/demo/TabContainerExample.scala
+++ b/demo/src/main/scala/demo/TabContainerExample.scala
@@ -13,35 +13,29 @@ object TabContainerExample extends Example("TabContainer") {
     DemoPanel("Basic TabContainer")(
       //-- Begin: Basic TabContainer
       TabContainer(
-        _ => width := "100%",
+        width := "100%",
         _.tab(
           _.text := "Tab 1",
-          _ =>
-            Label(_ =>
-              "100.1. These Magic rules apply to any Magic game with two or more players, including two-player games and multiplayer games."
+                      Label(              "100.1. These Magic rules apply to any Magic game with two or more players, including two-player games and multiplayer games."
             )
         ),
         _.tab(
           _.text := "Tab 2",
           _.icon := IconName.activities,
           _.selected := true,
-          _ => Label(_ => "100.1a A two-player game is a game that begins with only two players.")
+          Label("100.1a A two-player game is a game that begins with only two players.")
         ),
         _.tab(
           _.text := "Tab 3",
           _.icon := IconName.add,
-          _ =>
-            Label(_ =>
-              "100.1b A multiplayer game is a game that begins with more than two players. See section 8, " +
+                      Label(              "100.1b A multiplayer game is a game that begins with more than two players. See section 8, " +
                 "“Multiplayer Rules.”"
             )
         ),
         _.tab(
           _.text := "Tab 4",
           _.icon := IconName.calendar,
-          _ =>
-            Label(_ =>
-              "100.2. To play, each player needs their own deck of traditional Magic cards, small items to represent" +
+                      Label(              "100.2. To play, each player needs their own deck of traditional Magic cards, small items to represent" +
                 " any tokens and counters, and some way to clearly track life totals."
             )
         ),
@@ -49,9 +43,7 @@ object TabContainerExample extends Example("TabContainer") {
         _.tab(
           _.text := "Tab 5",
           _.icon := IconName.`action-settings`,
-          _ =>
-            Label(_ =>
-              "100.2a In constructed play (a way of playing in which each player creates their own deck ahead of " +
+                      Label(              "100.2a In constructed play (a way of playing in which each player creates their own deck ahead of " +
                 "time), each deck has a minimum deck size of 60 cards. A constructed deck may contain any number of " +
                 "basic land cards and no more than four of any card with a particular English name other than basic " +
                 "land cards. For the purposes of deck construction, cards with interchangeable names have the same " +
@@ -77,21 +69,21 @@ object TabContainerExample extends Example("TabContainer") {
     DemoPanel("Text only End Overflow")(
       //-- Begin: Text only End Overflow
       TabContainer(
-        _ => width := "100%",
+        width := "100%",
         _.collapsed := true,
         _.fixed := true,
-        _ => (1 to 23).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 13)))
+        (1 to 23).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 13)))
       )
       //-- End
     ),
     DemoPanel("Text only Start and End Overflow")(
       //-- Begin: Text only Start and End Overflow
       TabContainer(
-        _ => width := "100%",
+        width := "100%",
         _.collapsed := true,
         _.fixed := true,
         _.tabsOverflowMode := TabsOverflowMode.StartAndEnd,
-        _ => (1 to 33).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 17)))
+        (1 to 33).toList.map(index => TabContainer.tab(_.text := s"Tab $index", _.selected := (index == 17)))
       )
       //-- End
     ),
@@ -112,26 +104,26 @@ object TabContainerExample extends Example("TabContainer") {
       //-- Begin: TabContainer with nested tabs
       TabContainer(
         _.collapsed := true,
-        _.tab(_.text := "Nodes", _ => "Notes go here ..."),
+        _.tab(_.text := "Nodes", "Notes go here ..."),
         _.tab(
           _.text := "Products",
-          _ => "Products go here ...",
+          "Products go here ...",
           _.slots.subTabs := TabContainer.tab(
             _.text := "Computers",
-            _ => "Computers go here ...",
-            _.slots.subTabs := TabContainer.tab(_.text := "Laptops", _ => "Laptops go here ..."),
+            "Computers go here ...",
+            _.slots.subTabs := TabContainer.tab(_.text := "Laptops", "Laptops go here ..."),
             _.slots.subTabs := TabContainer.tab(
               _.text := "Desktops",
-              _.slots.subTabs := TabContainer.tab(_.text := "Work Stations", _ => "Work Stations go here ..."),
-              _.slots.subTabs := TabContainer.tab(_.text := "Game Stations", _ => "Game Stations to here"),
-              _ => "Desktops go here ..."
+              _.slots.subTabs := TabContainer.tab(_.text := "Work Stations", "Work Stations go here ..."),
+              _.slots.subTabs := TabContainer.tab(_.text := "Game Stations", "Game Stations to here"),
+              "Desktops go here ..."
             )
           )
         ),
         _.tab(
           _.text := "Orders",
-          _ => "Orders go here ...",
-          _.slots.subTabs := TabContainer.tab(_.text := "Attachments", _ => "Attachments go here ...")
+          "Orders go here ...",
+          _.slots.subTabs := TabContainer.tab(_.text := "Attachments", "Attachments go here ...")
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/TableExample.scala b/demo/src/main/scala/demo/TableExample.scala
index 4c7b9f8..8b263cb 100644
--- a/demo/src/main/scala/demo/TableExample.scala
+++ b/demo/src/main/scala/demo/TableExample.scala
@@ -31,26 +31,25 @@ object TableExample extends Example("Table") {
         div(
           className := "header",
           span("Cards table - resize your browser to make some columns pop-in"),
-          Button(_.events.onClick.mapTo(()) --> toggleStickyHeaderBus, _ => "Toggle Sticky Column Header")
+          Button(_.events.onClick.mapTo(()) --> toggleStickyHeaderBus, "Toggle Sticky Column Header")
         ),
         Table(
           _.stickyColumnHeader <-- stickyHeaderSignal,
-          _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-          _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+          _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+          _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
           _.slots.columns := Table.column(
             _.minWidth := 600,
             _.popinText := "Comment",
             _.demandPopin := true,
-            _ => span(lineHeight := "1.4rem", "Comment")
+            span(lineHeight := "1.4rem", "Comment")
           ),
-          _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost")),
-          _ =>
-            MTG.cards.map(card =>
+          _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+                      MTG.cards.map(card =>
               Table.row(
-                _.cell(_ => card.name),
-                _.cell(_ => card.tpe),
-                _.cell(_ => card.comment),
-                _.cell(_ => card.cost)
+                _.cell(card.name),
+                _.cell(card.tpe),
+                _.cell(card.comment),
+                _.cell(card.cost)
               )
             )
         )
@@ -61,22 +60,21 @@ object TableExample extends Example("Table") {
       //-- Begin: Table in SingleSelect-mode
       Table(
         _.mode := TableMode.SingleSelect,
-        _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-        _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+        _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+        _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
         _.slots.columns := Table.column(
           _.minWidth := 600,
           _.popinText := "Comment",
           _.demandPopin := true,
-          _ => span(lineHeight := "1.4rem", "Comment")
+          span(lineHeight := "1.4rem", "Comment")
         ),
-        _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost")),
-        _ =>
-          MTG.cards.map(card =>
+        _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+                  MTG.cards.map(card =>
             Table.row(
-              _.cell(_ => card.name),
-              _.cell(_ => card.tpe),
-              _.cell(_ => card.comment),
-              _.cell(_ => card.cost)
+              _.cell(card.name),
+              _.cell(card.tpe),
+              _.cell(card.comment),
+              _.cell(card.cost)
             )
           )
       )
@@ -87,23 +85,22 @@ object TableExample extends Example("Table") {
       Table(
         _.events.onSelectionChange.map(_.detail.selectedRows.map(_.dataset.toMap)) --> Observer(println),
         _.mode := TableMode.MultiSelect,
-        _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-        _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+        _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+        _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
         _.slots.columns := Table.column(
           _.minWidth := 600,
           _.popinText := "Comment",
           _.demandPopin := true,
-          _ => span(lineHeight := "1.4rem", "Comment")
+          span(lineHeight := "1.4rem", "Comment")
         ),
-        _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost")),
-        _ =>
-          MTG.cards.map(card =>
+        _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+                  MTG.cards.map(card =>
             Table.row(
-              _ => dataAttr("card-name") := card.name,
-              _.cell(_ => card.name),
-              _.cell(_ => card.tpe),
-              _.cell(_ => card.comment),
-              _.cell(_ => card.cost)
+              dataAttr("card-name") := card.name,
+              _.cell(card.name),
+              _.cell(card.tpe),
+              _.cell(card.comment),
+              _.cell(card.cost)
             )
           )
       )
@@ -113,15 +110,15 @@ object TableExample extends Example("Table") {
       //-- Begin: Table with No Data
       Table(
         _.noDataText := "No Data",
-        _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-        _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+        _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+        _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
         _.slots.columns := Table.column(
           _.minWidth := 600,
           _.popinText := "Comment",
           _.demandPopin := true,
-          _ => span(lineHeight := "1.4rem", "Comment")
+          span(lineHeight := "1.4rem", "Comment")
         ),
-        _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost"))
+        _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost"))
       )
       //-- End
     ),
@@ -148,24 +145,23 @@ object TableExample extends Example("Table") {
           .map(_ min totalNumberOfCards)
           .map(n => s"[$n / $totalNumberOfCards]"),
         _.events.onLoadMore.mapTo(()) --> loadMoreBus,
-        _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-        _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+        _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+        _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
         _.slots.columns := Table.column(
           _.minWidth := 600,
           _.popinText := "Comment",
           _.demandPopin := true,
-          _ => span(lineHeight := "1.4rem", "Comment")
+          span(lineHeight := "1.4rem", "Comment")
         ),
-        _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost")),
-        _ =>
-          children <-- cardsToDisplay.map(
+        _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+                  children <-- cardsToDisplay.map(
             _.map(card =>
               Table.row(
-                _ => dataAttr("card-name") := card.name,
-                _.cell(_ => card.name),
-                _.cell(_ => card.tpe),
-                _.cell(_ => card.comment),
-                _.cell(_ => card.cost)
+                dataAttr("card-name") := card.name,
+                _.cell(card.name),
+                _.cell(card.tpe),
+                _.cell(card.comment),
+                _.cell(card.cost)
               )
             )
           )
@@ -195,24 +191,23 @@ object TableExample extends Example("Table") {
           _.busy <-- busyState,
           _.growing := TableGrowingMode.Scroll,
           _.events.onLoadMore.mapTo(()) --> loadMoreBus,
-          _.slots.columns := Table.column(_ => width := "12rem", _ => span(lineHeight := "1.4rem", "Card")),
-          _.slots.columns := Table.column(_.minWidth := 800, _ => span(lineHeight := "1.4rem", "Type")),
+          _.slots.columns := Table.column(width := "12rem", span(lineHeight := "1.4rem", "Card")),
+          _.slots.columns := Table.column(_.minWidth := 800, span(lineHeight := "1.4rem", "Type")),
           _.slots.columns := Table.column(
             _.minWidth := 600,
             _.popinText := "Comment",
             _.demandPopin := true,
-            _ => span(lineHeight := "1.4rem", "Comment")
+            span(lineHeight := "1.4rem", "Comment")
           ),
-          _.slots.columns := Table.column(_ => span(lineHeight := "1.4rem", "Cost")),
-          _ =>
-            children <-- cardsToDisplay.map(
+          _.slots.columns := Table.column(span(lineHeight := "1.4rem", "Cost")),
+                      children <-- cardsToDisplay.map(
               _.map(card =>
                 Table.row(
-                  _ => dataAttr("card-name") := card.name,
-                  _.cell(_ => card.name),
-                  _.cell(_ => card.tpe),
-                  _.cell(_ => card.comment),
-                  _.cell(_ => card.cost)
+                  dataAttr("card-name") := card.name,
+                  _.cell(card.name),
+                  _.cell(card.tpe),
+                  _.cell(card.comment),
+                  _.cell(card.cost)
                 )
               )
             )
@@ -224,15 +219,15 @@ object TableExample extends Example("Table") {
       //-- Begin: Table with grouping (SingleSelect)
       Table(
         _.mode := TableMode.SingleSelect,
-        _.slots.columns := Table.column(_ => Label(_ => "City")),
-        _.slots.columns := Table.column(_ => Label(_ => "Population")),
-        _.slots.columns := Table.column(_ => Label(_ => "Country")),
+        _.slots.columns := Table.column(Label("City")),
+        _.slots.columns := Table.column(Label("Population")),
+        _.slots.columns := Table.column(Label("Country")),
         _.groupRow("Country: Belgium"),
-        _.row(_.cell(_ => "Brussels"), _.cell(_ => "1.2 millions"), _.cell(_ => "Belgium")),
-        _.row(_.cell(_ => "Antwerp"), _.cell(_ => "500,000"), _.cell(_ => "Belgium")),
+        _.row(_.cell("Brussels"), _.cell("1.2 millions"), _.cell("Belgium")),
+        _.row(_.cell("Antwerp"), _.cell("500,000"), _.cell("Belgium")),
         _.groupRow("Country: France"),
-        _.row(_.cell(_ => "Paris"), _.cell(_ => "10 millions"), _.cell(_ => "France")),
-        _.row(_.cell(_ => "Lille"), _.cell(_ => "1 million"), _.cell(_ => "France"))
+        _.row(_.cell("Paris"), _.cell("10 millions"), _.cell("France")),
+        _.row(_.cell("Lille"), _.cell("1 million"), _.cell("France"))
       )
       //-- End
     )
diff --git a/demo/src/main/scala/demo/TimePickerExample.scala b/demo/src/main/scala/demo/TimePickerExample.scala
index 4afa174..137c7f2 100644
--- a/demo/src/main/scala/demo/TimePickerExample.scala
+++ b/demo/src/main/scala/demo/TimePickerExample.scala
@@ -14,7 +14,7 @@ object TimePickerExample extends Example("TimePicker") {
       //-- Begin: Basic TimePicker
       val selectedValueBus: EventBus[String] = new EventBus
       div(
-        Label(_ => child.text <-- selectedValueBus.events.map(value => s"Currently selected: $value")),
+        Label(child.text <-- selectedValueBus.events.map(value => s"Currently selected: $value")),
         br(),
         TimePicker(
           _.events.onChange.map(_.target.value) --> selectedValueBus
@@ -26,7 +26,7 @@ object TimePickerExample extends Example("TimePicker") {
       //-- Begin: TimePicker in twelve hours format
       val selectedValueBus: EventBus[String] = new EventBus
       div(
-        Label(_ => child.text <-- selectedValueBus.events.map(value => s"Currently selected: $value")),
+        Label(child.text <-- selectedValueBus.events.map(value => s"Currently selected: $value")),
         br(),
         TimePicker(
           _.formatPattern := "hh:mm:ss a",
diff --git a/demo/src/main/scala/demo/TimelineExample.scala b/demo/src/main/scala/demo/TimelineExample.scala
index cb95116..7717d48 100644
--- a/demo/src/main/scala/demo/TimelineExample.scala
+++ b/demo/src/main/scala/demo/TimelineExample.scala
@@ -25,13 +25,13 @@ object TimelineExample extends Example("Timeline") {
           _.titleText := "Weekly Sync - CP Design",
           _.subtitleText := "27.07.2022 (11:00 - 12:30)",
           _.icon := IconName.calendar,
-          _ => div("MR SOF02 2.43")
+          div("MR SOF02 2.43")
         ),
         _.item(
           _.titleText := "Video Converence Call - UI5",
           _.subtitleText := "31.01.2023 (12:00 - 13:00)",
           _.icon := IconName.calendar,
-          _ => div("Online meeting")
+          div("Online meeting")
         )
       )
       //-- End
@@ -51,13 +51,13 @@ object TimelineExample extends Example("Timeline") {
           _.titleText := "Weekly Sync - CP Design",
           _.subtitleText := "27.07.2022 (11:00 - 12:30)",
           _.icon := IconName.calendar,
-          _ => div("MR SOF02 2.43")
+          div("MR SOF02 2.43")
         ),
         _.item(
           _.titleText := "Video Converence Call - UI5",
           _.subtitleText := "31.01.2023 (12:00 - 13:00)",
           _.icon := IconName.calendar,
-          _ => div("Online meeting")
+          div("Online meeting")
         )
       )
       //-- End
diff --git a/demo/src/main/scala/demo/TitleExample.scala b/demo/src/main/scala/demo/TitleExample.scala
index 01be82f..9b00a3a 100644
--- a/demo/src/main/scala/demo/TitleExample.scala
+++ b/demo/src/main/scala/demo/TitleExample.scala
@@ -12,7 +12,7 @@ object TitleExample extends Example("Title") {
   ): HtmlElement = div(
     DemoPanel("Title in All Available Levels")(
       //-- Begin: Title in All Available Levels
-      div(TitleLevel.allValues.map(level => Title(_.level := level, _ => s"Title level ${level.value.tail}")))
+      div(TitleLevel.allValues.map(level => Title(_.level := level, s"Title level ${level.value.tail}")))
       //-- End
     )
   )
diff --git a/demo/src/main/scala/demo/ToastExample.scala b/demo/src/main/scala/demo/ToastExample.scala
index 5fe9987..ab8e3a6 100644
--- a/demo/src/main/scala/demo/ToastExample.scala
+++ b/demo/src/main/scala/demo/ToastExample.scala
@@ -17,14 +17,14 @@ object ToastExample extends Example("Toast") {
       val toastBus: EventBus[Unit] = new EventBus
 
       div(
-        Button(_ => "Basic Toast", _.events.onClick.mapTo(()) --> toastBus.writer),
+        Button("Basic Toast", _.events.onClick.mapTo(()) --> toastBus.writer),
         Toast(
-          _ => inContext(el => toastBus.events.mapTo(()) --> Observer[Unit](_ => el.ref.show())),
-          _ => "Basic Toast"
+          inContext(el => toastBus.events.mapTo(()) --> Observer[Unit](_ => el.ref.show())),
+          "Basic Toast"
         ),
         MessageStrip(
           _.design := MessageStripDesign.Information,
-          _ => "This toast pops up thanks to the click event going through an EventBus."
+          "This toast pops up thanks to the click event going through an EventBus."
         )
       )
       //-- End
@@ -36,7 +36,7 @@ object ToastExample extends Example("Toast") {
 
       div(
         Button(
-          _ => "Short Toast",
+          "Short Toast",
           _.events.onClick.mapTo(Toast.getToastById(shortToastId)) --> Observer[Option[Toast.Ref]] {
             case Some(toast) => toast.show()
             case None => throw new IllegalStateException(s"The dom does not contain any toast with id $shortToastId")
@@ -46,10 +46,10 @@ object ToastExample extends Example("Toast") {
           _.id := shortToastId,
           _.duration := 1500.millis,
           _.placement := ToastPlacement.BottomStart,
-          _ => "Short Toast"
+          "Short Toast"
         ),
         Button(
-          _ => "Long Toast",
+          "Long Toast",
           _.events.onClick.mapTo(Toast.getToastById(longToastId)) --> Observer[Option[Toast.Ref]] {
             case Some(toast) => toast.show()
             case None => throw new IllegalStateException(s"The dom does not contain any toast with id $longToastId")
@@ -59,11 +59,11 @@ object ToastExample extends Example("Toast") {
           _.id := longToastId,
           _.duration := 4500.millis,
           _.placement := ToastPlacement.BottomEnd,
-          _ => "Long Toast"
+          "Long Toast"
         ),
         MessageStrip(
           _.design := MessageStripDesign.Information,
-          _ => "These toasts pops up by grabbing their reference using the Toast.getToastById function."
+          "These toasts pops up by grabbing their reference using the Toast.getToastById function."
         )
       )
       //-- End
@@ -75,11 +75,11 @@ object ToastExample extends Example("Toast") {
           val toastBus: EventBus[Unit] = new EventBus
 
           List(
-            Button(_ => placement.value, _.events.onClick.mapTo(()) --> toastBus.writer),
+            Button(placement.value, _.events.onClick.mapTo(()) --> toastBus.writer),
             Toast(
               _.placement := placement,
-              _ => inContext(el => toastBus.events.mapTo(()) --> Observer[Unit](_ => el.ref.show())),
-              _ => placement.value
+              inContext(el => toastBus.events.mapTo(()) --> Observer[Unit](_ => el.ref.show())),
+              placement.value
             )
           )
         }
diff --git a/demo/src/main/scala/demo/ToggleButtonExample.scala b/demo/src/main/scala/demo/ToggleButtonExample.scala
index dffc13a..ee56297 100644
--- a/demo/src/main/scala/demo/ToggleButtonExample.scala
+++ b/demo/src/main/scala/demo/ToggleButtonExample.scala
@@ -18,27 +18,27 @@ object ToggleButtonExample extends Example("ToggleButton") {
     DemoPanel("ToggleButton States") {
       //-- Begin: ToggleButton States
       div(
-        ToggleButton(_ => "ToggleButton"),
-        ToggleButton(_.pressed := true, _ => "Pressed ToggleButton"),
-        ToggleButton(_.disabled := true, _ => "Disabled ToggleButton"),
-        ToggleButton(_.disabled := true, _.pressed := true, _ => "Disabled pressed ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Positive, _ => "Accept ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Positive, _.pressed := true, _ => "Accept pressed ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Negative, _ => "Reject ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Negative, _.pressed := true, _ => "Reject pressed ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Transparent, _ => "Transparent ToggleButton"),
-        ToggleButton(_.design := ButtonDesign.Transparent, _.pressed := true, _ => "Transparent pressed ToggleButton")
+        ToggleButton("ToggleButton"),
+        ToggleButton(_.pressed := true, "Pressed ToggleButton"),
+        ToggleButton(_.disabled := true, "Disabled ToggleButton"),
+        ToggleButton(_.disabled := true, _.pressed := true, "Disabled pressed ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Positive, "Accept ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Positive, _.pressed := true, "Accept pressed ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Negative, "Reject ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Negative, _.pressed := true, "Reject pressed ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Transparent, "Transparent ToggleButton"),
+        ToggleButton(_.design := ButtonDesign.Transparent, _.pressed := true, "Transparent pressed ToggleButton")
       )
       //-- End
     },
     DemoPanel("ToggleButton with Icon") {
       //-- Begin: ToggleButton with Icon
       div(
-        ToggleButton(_.icon := IconName.menu, _ => "Menu"),
-        ToggleButton(_.design := ButtonDesign.Emphasized, _.icon := IconName.add, _ => "Add"),
-        ToggleButton(_.design := ButtonDesign.Default, _.icon := IconName.`nav-back`, _ => "Back"),
-        ToggleButton(_.design := ButtonDesign.Positive, _.icon := IconName.accept, _ => "Accept"),
-        ToggleButton(_.design := ButtonDesign.Negative, _.icon := IconName.`sys-cancel`, _ => "Deny")
+        ToggleButton(_.icon := IconName.menu, "Menu"),
+        ToggleButton(_.design := ButtonDesign.Emphasized, _.icon := IconName.add, "Add"),
+        ToggleButton(_.design := ButtonDesign.Default, _.icon := IconName.`nav-back`, "Back"),
+        ToggleButton(_.design := ButtonDesign.Positive, _.icon := IconName.accept, "Accept"),
+        ToggleButton(_.design := ButtonDesign.Negative, _.icon := IconName.`sys-cancel`, "Deny")
       )
       //-- End
     },
diff --git a/demo/src/main/scala/demo/TreeExample.scala b/demo/src/main/scala/demo/TreeExample.scala
index 0d0ac6c..6892da9 100644
--- a/demo/src/main/scala/demo/TreeExample.scala
+++ b/demo/src/main/scala/demo/TreeExample.scala
@@ -14,7 +14,7 @@ object TreeExample extends Example("Tree") {
     DemoPanel("Basic Tree")(
       //-- Begin: Basic Tree
       Tree(
-        _ => width := "100%",
+        width := "100%",
         _.item(
           _.expanded := true,
           _.text := "Tree 1",
@@ -34,7 +34,7 @@ object TreeExample extends Example("Tree") {
           _.item(
             _.text := "Tree 2.1",
             _.item(_.text := "Tree 2.1.1"),
-            _.item(_.text := "Tree 2.1.2", _ => (1 to 4).toList.map(j => Tree.item(_.text := s"Tree 2.1.2.$j")))
+            _.item(_.text := "Tree 2.1.2", (1 to 4).toList.map(j => Tree.item(_.text := s"Tree 2.1.2.$j")))
           )
         ),
         _.item(
@@ -50,7 +50,7 @@ object TreeExample extends Example("Tree") {
         _.mode := ListMode.MultiSelect,
         _.events.onSelectionChange
           .map(_.detail.selectedItems) --> Observer[List[TreeItem.Ref]](_.foreach(dom.console.log(_))),
-        _ => width := "100%",
+        width := "100%",
         _.item(
           _.expanded := true,
           _.text := "Tree 1",
@@ -70,7 +70,7 @@ object TreeExample extends Example("Tree") {
           _.item(
             _.text := "Tree 2.1",
             _.item(_.text := "Tree 2.1.1"),
-            _.item(_.text := "Tree 2.1.2", _ => (1 to 4).toList.map(j => Tree.item(_.text := s"Tree 2.1.2.$j")))
+            _.item(_.text := "Tree 2.1.2", (1 to 4).toList.map(j => Tree.item(_.text := s"Tree 2.1.2.$j")))
           )
         ),
         _.item(
diff --git a/demo/src/main/scala/demo/UploadCollectionExample.scala b/demo/src/main/scala/demo/UploadCollectionExample.scala
index 8ff628b..f6d7352 100644
--- a/demo/src/main/scala/demo/UploadCollectionExample.scala
+++ b/demo/src/main/scala/demo/UploadCollectionExample.scala
@@ -24,42 +24,40 @@ object UploadCollectionExample extends Example("UploadCollection") {
 
       UploadCollection(
         _.slots.header := div(
-          Title.h2(_ => child.text <-- stagedFilesCount.map(count => s"Uploaded ($count)")),
-          Label(_ => "Add new files and press to start uploading pending files:"),
+          Title.h2(child.text <-- stagedFilesCount.map(count => s"Uploaded ($count)")),
+          Label("Add new files and press to start uploading pending files:"),
           child <-- allStagedFilesVar.signal.mapTo(
             // Note that we need to re-create a new file uploader each time, otherwise there is a glitch preventing
             // from adding twice the same group of file in a row. (The glitch actually exists on their official docs)
             FileUploader(
               _.hideInput := true,
               _.multiple := true,
-              _ => Button(_.icon := IconName.add, _.design := ButtonDesign.Transparent),
+              Button(_.icon := IconName.add, _.design := ButtonDesign.Transparent),
               _.events.onChange.map(_.target.files.map(_ -> new js.Date())) --> newFilesArrivedObserver
             )
           ),
-          Button(_ => "Upload all", _.events.onClick.mapTo(()) --> uploadAllBus.writer)
+          Button("Upload all", _.events.onClick.mapTo(()) --> uploadAllBus.writer)
         ),
         _.mode := ListMode.Delete,
         _.events.onItemDelete.map(_.detail.item.dataset("index").toInt) --> allStagedFilesVar.updater[Int](
           _.patch(_, Nil, 1)
         ),
-        _ =>
-          // This is where the logic of actually uploading files should live
-          uploadAllBus.events.sample(allStagedFilesVar.signal) --> Observer[List[(dom.File, js.Date)]](files =>
-            files.foreach((file, date) => dom.console.log(file, date))
-          ),
-        _ =>
-          children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) =>
-            UploadCollection.item(
-              _.fileName := file.name,
-              _.fileNameClickable := true,
-              _ => s"Selected at: $selectedAt",
-              _ => dataAttr("index") := index.toString,
-              _.slots.thumbnail := img(
-                src := dom.URL.createObjectURL(file),
-                inContext(el => onLoad --> Observer[Any](_ => dom.URL.revokeObjectURL(el.ref.src)))
-              )
+        // This is where the logic of actually uploading files should live
+        uploadAllBus.events.sample(allStagedFilesVar.signal) --> Observer[List[(dom.File, js.Date)]](files =>
+          files.foreach((file, date) => dom.console.log(file, date))
+        ),
+        children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) =>
+          UploadCollection.item(
+            _.fileName := file.name,
+            _.fileNameClickable := true,
+            s"Selected at: $selectedAt",
+            dataAttr("index") := index.toString,
+            _.slots.thumbnail := img(
+              src := dom.URL.createObjectURL(file),
+              inContext(el => onLoad --> Observer[Any](_ => dom.URL.revokeObjectURL(el.ref.src)))
             )
-          }),
+          )
+        }),
         _.events.onDrop.preventDefault.map(
           _.dataTransfer.files.toList.map(_ -> new js.Date)
         ) --> newFilesArrivedObserver
@@ -73,23 +71,22 @@ object UploadCollectionExample extends Example("UploadCollection") {
       val newFilesArrivedObserver = allStagedFilesVar.updater[List[(dom.File, js.Date)]](_ ++ _)
 
       UploadCollection(
-        _.slots.header := div(Title.h2(_ => "Attachments")),
+        _.slots.header := div(Title.h2("Attachments")),
         _.events.onDrop.preventDefault.map(
           _.dataTransfer.files.toList.map(_ -> new js.Date)
         ) --> newFilesArrivedObserver,
-        _ =>
-          children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) =>
-            UploadCollection.item(
-              _.fileName := file.name,
-              _.fileNameClickable := true,
-              _ => s"Selected at: $selectedAt",
-              _ => dataAttr("index") := index.toString,
-              _.slots.thumbnail := img(
-                src := dom.URL.createObjectURL(file),
-                inContext(el => onLoad --> Observer[Any](_ => dom.URL.revokeObjectURL(el.ref.src)))
-              )
+        children <-- allStagedFilesVar.signal.map(_.zipWithIndex.map { case ((file, selectedAt), index) =>
+          UploadCollection.item(
+            _.fileName := file.name,
+            _.fileNameClickable := true,
+            s"Selected at: $selectedAt",
+            dataAttr("index") := index.toString,
+            _.slots.thumbnail := img(
+              src := dom.URL.createObjectURL(file),
+              inContext(el => onLoad --> Observer[Any](_ => dom.URL.revokeObjectURL(el.ref.src)))
             )
-          })
+          )
+        })
       )
       //-- End
     }
diff --git a/demo/src/main/scala/demo/ViewSettingsDialogExample.scala b/demo/src/main/scala/demo/ViewSettingsDialogExample.scala
index 55d3a12..05c3899 100644
--- a/demo/src/main/scala/demo/ViewSettingsDialogExample.scala
+++ b/demo/src/main/scala/demo/ViewSettingsDialogExample.scala
@@ -13,8 +13,7 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") {
   ): HtmlElement = div(
     MessageStrip(
       _.design := MessageStripDesign.Information,
-      _ =>
-        "Using the ViewSettingsDialog is straightforward on paper as shown below. However, don't be fooled. You still" +
+              "Using the ViewSettingsDialog is straightforward on paper as shown below. However, don't be fooled. You still" +
           " need to process by hand whatever it spits out. Given it's dynamic nature, it's not as trivial as it " +
           "may seem. (But perhaps adding some magic on top would make it more delightful to use.)"
     ),
@@ -23,7 +22,7 @@ object ViewSettingsDialogExample extends Example("ViewSettingsDialog") {
       val settingsBus: EventBus[ViewSettingsDialog.ViewSettings] = new EventBus
       val showSettingsDialogBus: EventBus[Unit]                  = new EventBus
       div(
-        Button(_ => "Open ViewSettingsDialog", _.events.onClick.mapTo(()) --> showSettingsDialogBus.writer),
+        Button("Open ViewSettingsDialog", _.events.onClick.mapTo(()) --> showSettingsDialogBus.writer),
         ViewSettingsDialog(
           _.showFromEvents(showSettingsDialogBus.events),
           _.events.onCancel.map(_.detail) --> settingsBus.writer,
diff --git a/demo/src/main/scala/demo/WizardExample.scala b/demo/src/main/scala/demo/WizardExample.scala
index e3c5471..8acf04f 100644
--- a/demo/src/main/scala/demo/WizardExample.scala
+++ b/demo/src/main/scala/demo/WizardExample.scala
@@ -32,9 +32,9 @@ object WizardExample extends Example("Wizard") {
       // Creates a button that, when clicking, go to the specified step. Can be hidden temporarily with the observable
       def goToStepButton(goTo: Int, hiddenObservable: Observable[Boolean] = Val(false)) = Button(
         _.design := ButtonDesign.Emphasized,
-        _ => s"Go to step $goTo",
+        s"Go to step $goTo",
         _.events.onClick.mapTo(goTo) --> currentStepVar.writer,
-        _ => hidden <-- hiddenObservable
+        hidden <-- hiddenObservable
       )
 
       // User will not be able to go to step 3 before this is filled.
@@ -50,42 +50,37 @@ object WizardExample extends Example("Wizard") {
           _.step(
             _.icon := IconName.home,
             _.titleText := "Greeting",
-            _ => commonModifiers(1),
-            _ => Title.h3(_ => "1. Greeting"),
-            _ =>
-              MessageStrip(
+            commonModifiers(1),
+            Title.h3("1. Greeting"),
+                          MessageStrip(
                 _.hideCloseButton := true,
                 _.design := MessageStripDesign.Information,
-                _ =>
-                  "The Wizard control is supposed to break down large tasks, into smaller steps, easier for the " +
+                                  "The Wizard control is supposed to break down large tasks, into smaller steps, easier for the " +
                     "user to work with."
               ),
-            _ =>
-              div(
+                          div(
                 "This document is the ultimate authority for Magic: The Gathering® competitive game play. It " +
                   "consists of a series of numbered rules followed by a glossary. Many of the numbered rules are " +
                   "divided into subrules, and each separate rule and subrule of the game has its own number. (Note " +
                   "that subrules skip the letters “l” and “o” due to potential confusion with the numbers “1” and “0”;" +
                   " subrule 704.5k is followed by 704.5m, then 704.5n, then 704.5p, for example.)"
               ),
-            _ => goToStepButton(2)
+            goToStepButton(2)
           ),
           _.step(
             _.icon := IconName.employee,
             _.titleText := "2. User name",
-            _ => commonModifiers(2),
-            _ => Title.h3(_ => "2. User name"),
-            _ =>
-              div(
+            commonModifiers(2),
+            Title.h3("2. User name"),
+                          div(
                 "Changes may have been made to this document since its publication. You can download the most " +
                   "recent version from the Magic rules website at Magic.Wizards.com/Rules. If you have questions, " +
                   "you can get the answers from us at Support.Wizards.com."
               ),
-            _ =>
-              div(
+                          div(
                 className := loginFormClass,
                 div(
-                  Label(_ => "Fill in your name to continue:", _.required := true),
+                  Label("Fill in your name to continue:", _.required := true),
                   Input(
                     _.events.onChange
                       .map(_.target.value)
@@ -93,31 +88,28 @@ object WizardExample extends Example("Wizard") {
                   )
                 )
               ),
-            _ => goToStepButton(3, maybeInfoForStepThreeVar.signal.map(_.isEmpty))
+            goToStepButton(3, maybeInfoForStepThreeVar.signal.map(_.isEmpty))
           ),
           _.step(
             _.icon := IconName.`action-settings`,
             _.titleText := "3. User profile",
-            _ => commonModifiers(3),
-            _ =>
-              Title.h3(_ =>
-                child.text <-- maybeInfoForStepThreeVar.signal.changes
+            commonModifiers(3),
+                          Title.h3(                child.text <-- maybeInfoForStepThreeVar.signal.changes
                   .collect { case Some(name) => name }
                   .map(name => s"3. User profile: $name")
               ),
-            _ => div("Here the user could fill some optional settings for their profile..."),
-            _ => goToStepButton(4)
+            div("Here the user could fill some optional settings for their profile..."),
+            goToStepButton(4)
           ),
           _.step(
             _.icon := IconName.`chart-table-view`,
             _.titleText := "4. Last Details",
-            _ => commonModifiers(4),
-            _ => Title.h4(_ => "4. Last Details"),
-            _ => div("Here we ask a few last things and then move along with their lives."),
-            _ =>
-              Button(
+            commonModifiers(4),
+            Title.h4("4. Last Details"),
+            div("Here we ask a few last things and then move along with their lives."),
+                          Button(
                 _.design := ButtonDesign.Positive,
-                _ => "Finish!",
+                "Finish!",
                 _.events.onClick.mapTo(()) --> finishDialogBus.writer
               )
           )
@@ -125,11 +117,10 @@ object WizardExample extends Example("Wizard") {
         Dialog(
           _.showFromEvents(finishDialogBus.events),
           _.closeFromEvents(finishDialogCloseBus.events),
-          _ => div("Process finished!"),
-          _ =>
-            Button(
+          div("Process finished!"),
+                      Button(
               _.design := ButtonDesign.Emphasized,
-              _ => "Done",
+              "Done",
               _.events.onClick.mapTo(()) --> finishDialogCloseBus.writer
             )
         )
diff --git a/demo/src/main/scala/demo/helpers/DemoPanel.scala b/demo/src/main/scala/demo/helpers/DemoPanel.scala
index e81c954..5c7ba2b 100644
--- a/demo/src/main/scala/demo/helpers/DemoPanel.scala
+++ b/demo/src/main/scala/demo/helpers/DemoPanel.scala
@@ -28,7 +28,7 @@ object DemoPanel {
           border := "0.0625rem solid #C1C1C1",
           backgroundColor := "#f5f6fa",
           padding := "1rem",
-          Title.h3(_ => "Source code"),
+          Title.h3("Source code"),
           pre(
             code(
               className := "language-scala",
diff --git a/demo/src/main/scala/demo/helpers/Example.scala b/demo/src/main/scala/demo/helpers/Example.scala
index fcfcc4f..6ccba37 100644
--- a/demo/src/main/scala/demo/helpers/Example.scala
+++ b/demo/src/main/scala/demo/helpers/Example.scala
@@ -14,11 +14,11 @@ trait Example(val name: String) {
   ): HtmlElement
 
   def completeComponent = div(
-    Title(_.level := TitleLevel.H1, _ => name),
+    Title(_.level := TitleLevel.H1, name),
     div(
       "You can see the source code ",
       Link(
-        _ => "here",
+        "here",
         _.href := s"https://github.com/sherpal/LaminarSAPUI5Bindings/tree/master/demo/src/main/scala/demo/${name}Example.scala",
         _.target := LinkTarget._blank
       ),
@@ -33,7 +33,7 @@ trait Example(val name: String) {
   )
 
   def missing: HtmlElement = MessageStrip(
-    _ => s"$name is currently missing. Don't hesitate to contribue!",
+    s"$name is currently missing. Don't hesitate to contribue!",
     _.design := MessageStripDesign.Negative,
     _.hideCloseButton := true
   )
@@ -50,7 +50,7 @@ trait Example(val name: String) {
 
   def mtgImageWarning = MessageStrip(
     _.design := MessageStripDesign.Warning,
-    _ => "All images displayed on this page are the property of Wizard of the Coast."
+    "All images displayed on this page are the property of Wizard of the Coast."
   )
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/WebComponent.scala b/web-components/src/main/scala/be/doeraene/webcomponents/WebComponent.scala
index a657e8d..490dc06 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/WebComponent.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/WebComponent.scala
@@ -1,7 +1,11 @@
 package be.doeraene.webcomponents
 
 import com.raquo.laminar.api.L.*
+import com.raquo.laminar.builders.HtmlTag
 import com.raquo.laminar.keys.ReactiveProp
+import com.raquo.laminar.nodes.ReactiveHtmlElement
+
+import org.scalajs.dom
 
 /** Marker trait that all web components inherit.
   *
@@ -9,4 +13,32 @@ import com.raquo.laminar.keys.ReactiveProp
   */
 trait WebComponent {
   val id: ReactiveProp[String, String] = idAttr
+
+  type Ref <: dom.HTMLElement
+
+  type ModFunction = this.type => Mod[ReactiveHtmlElement[Ref]]
+
+  protected def tag: HtmlTag[Ref]
+
+  /** Instantiate this component using the specified modifiers.
+    *
+    * Modifiers can be the usual Laminar modifiers, or they can be functions from this component to a modifier. Allowing
+    * these functions is very practical to access the reactive attributes of the component, with the `_.reactiveAttr`
+    * syntax.
+    */
+  final def apply(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = tag(
+    mods
+      .map {
+        case mod: Mod[_ >: ReactiveHtmlElement[Ref]]                      => (_: this.type) => mod
+        case mod: Function[_ >: this.type, _ <: ReactiveHtmlElement[Ref]] => mod
+      }
+      .map(_(this)): _*
+  )
+
+  /** Same as [[apply]], but accept only [[ModFunction]]s.
+    *
+    * This function is only there for people using the library with Scala 2.13.
+    */
+  final def of(mods: ModFunction*): HtmlElement = tag(mods.map(_(this)): _*)
+
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Avatar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Avatar.scala
index f6c50ec..ceca129 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Avatar.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Avatar.scala
@@ -31,10 +31,9 @@ object Avatar extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Avatar.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-avatar")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-avatar")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -55,6 +54,6 @@ object Avatar extends WebComponent with HasIcon {
 
   lazy val size: ReactiveHtmlAttr[AvatarSize] = customHtmlAttr("size", AvatarSize.AsStringCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Avatar)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/AvatarGroup.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/AvatarGroup.scala
index a447d14..5ac0cd2 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/AvatarGroup.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/AvatarGroup.scala
@@ -47,10 +47,9 @@ object AvatarGroup extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = AvatarGroup.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-avatar-group")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-avatar-group")
 
   lazy val tpe: ReactiveHtmlAttr[AvatarGroupType] = customHtmlAttr("type", AvatarGroupType.AsStringCodec)
 
@@ -69,7 +68,7 @@ object AvatarGroup extends WebComponent {
     val onOverflow: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("overflow")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(AvatarGroup)): _*)
+  
 
   def avatar: Avatar.type = Avatar
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala
index 260bf02..f9fd131 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala
@@ -32,10 +32,9 @@ object Badge extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Badge.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-badge")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-badge")
 
   lazy val colourScheme: ReactiveHtmlAttr[ColourScheme] = customHtmlAttr("color-scheme", ColourScheme.AsStringCodec)
 
@@ -47,6 +46,6 @@ object Badge extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Badge)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala
index fd0e889..b4e676b 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala
@@ -33,10 +33,9 @@ object Bar extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Bar.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-bar")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-bar")
 
   lazy val design: ReactiveHtmlAttr[BarDesign] = customHtmlAttr("design", BarDesign.AsStringCodec)
 
@@ -45,6 +44,6 @@ object Bar extends WebComponent {
     val startContent: Slot = new Slot("startContent")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Bar)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala
index a50d74e..433e3de 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala
@@ -37,10 +37,9 @@ object BarcodeScannerDialog extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = BarcodeScannerDialog.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-barcode-scanner-dialog")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-barcode-scanner-dialog")
 
   object slots {}
 
@@ -59,7 +58,7 @@ object BarcodeScannerDialog extends WebComponent {
     val onScanSuccess: EventProp[EventWithPreciseTarget[Ref] & HasDetail[SuccessInfo]] = new EventProp("scan-success")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(BarcodeScannerDialog)): _*)
+  
 
   /** You can feed this [[Observer]] with a barcode scanner [[Ref]]s in order to close it. */
   val closeObserver: Observer[Ref] = Observer(_.close())
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala
index 27822a5..295257b 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala
@@ -33,8 +33,7 @@ object Breadcrumbs extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = this.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
   opaque type Breadcrumbs = HtmlElement
   object Breadcrumbs {
@@ -43,7 +42,7 @@ object Breadcrumbs extends WebComponent with HasIcon {
     }
   }
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-breadcrumbs")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-breadcrumbs")
 
   lazy val separatorStyle: ReactiveHtmlAttr[BreadcrumbsSeparatorStyle] =
     customHtmlAttr("separator-style", BreadcrumbsSeparatorStyle.AsStringCodec)
@@ -57,8 +56,6 @@ object Breadcrumbs extends WebComponent with HasIcon {
     val onItemClick: EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[Item.Ref]]] = new EventProp("item-click")
   }
 
-  def apply(mods: ModFunction*): Breadcrumbs = tag(mods.map(_(this)): _*)
-
   def Item: BreadcrumbsItem.type = BreadcrumbsItem
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BreadcrumbsItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BreadcrumbsItem.scala
index 0c017ca..9d88c8a 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BreadcrumbsItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BreadcrumbsItem.scala
@@ -30,10 +30,9 @@ object BreadcrumbsItem extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = BreadcrumbsItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-breadcrumbs-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-breadcrumbs-item")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] =
     customHtmlAttr("accessible-name", StringAsIsCodec)
@@ -42,6 +41,6 @@ object BreadcrumbsItem extends WebComponent with HasIcon {
 
   lazy val target: ReactiveHtmlAttr[LinkTarget] = customHtmlAttr("target", LinkTarget.AsStringCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(BreadcrumbsItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BusyIndicator.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BusyIndicator.scala
index e1ba5df..8423065 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BusyIndicator.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/BusyIndicator.scala
@@ -34,10 +34,9 @@ object BusyIndicator extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = BusyIndicator.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-busy-indicator")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-busy-indicator")
 
   lazy val active: ReactiveHtmlAttr[Boolean] = customHtmlAttr[Boolean]("active", BooleanAsAttrPresenceCodec)
 
@@ -46,6 +45,6 @@ object BusyIndicator extends WebComponent with HasText {
   lazy val size: ReactiveHtmlAttr[BusyIndicatorSize] =
     customHtmlAttr[BusyIndicatorSize]("size", BusyIndicatorSize.AsStringCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(BusyIndicator)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala
index 7ab2fe6..042d90c 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala
@@ -31,10 +31,9 @@ object Button extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element & RawElement
-  type ModFunction = Button.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element & RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-button")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-button")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
@@ -57,6 +56,6 @@ object Button extends WebComponent with HasIcon {
     val onClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Button)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala
index 840f290..aa30e85 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala
@@ -39,10 +39,9 @@ object Calendar extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Calendar.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-calendar")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-calendar")
 
   lazy val hideWeekNumbers: ReactiveHtmlAttr[Boolean] = customHtmlAttr("hide-week-numbers", BooleanAsAttrPresenceCodec)
 
@@ -84,7 +83,7 @@ object Calendar extends WebComponent {
       )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Calendar)): _*)
+  
 
   def date: CalendarDate.type = CalendarDate
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDate.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDate.scala
index 5dc9661..c28c78a 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDate.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDate.scala
@@ -25,15 +25,14 @@ object CalendarDate extends WebComponent with HasValue {
     def value: String = js.native
   }
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = CalendarDate.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-date")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-date")
 
   object slots {}
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(CalendarDate)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Card.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Card.scala
index 17a766a..ed010fb 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Card.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Card.scala
@@ -31,10 +31,9 @@ object Card extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Card.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-card")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-card")
 
   object slots {
 
@@ -42,7 +41,7 @@ object Card extends WebComponent with HasAccessibleName {
     val header: Slot = new Slot("header")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Card)): _*)
+  
 
   def header: CardHeader.type = CardHeader
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala
index f1e6c0b..2d508a1 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala
@@ -30,10 +30,9 @@ object CardHeader extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = CardHeader.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-card-header")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-card-header")
 
   lazy val interactive: ReactiveHtmlAttr[Boolean] = customHtmlAttr("interactive", BooleanAsAttrPresenceCodec)
 
@@ -53,6 +52,6 @@ object CardHeader extends WebComponent {
     val onClick: EventProp[dom.MouseEvent] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(CardHeader)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala
index 8a8c63e..edd8485 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala
@@ -36,10 +36,9 @@ object Carousel extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Carousel.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-carousel")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-carousel")
 
   lazy val arrowsPlacement: ReactiveHtmlAttr[CarouselArrowsPlacement] =
     customHtmlAttr("arrows-placement", CarouselArrowsPlacement.AsStringCodec)
@@ -62,7 +61,7 @@ object Carousel extends WebComponent {
     val onNavigate: EventProp[dom.Event & HasDetail[HasSelectedIndex]] = new EventProp("navigate")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Carousel)): _*)
+  
 
   def getCarouselById(carouselId: String): Option[dom.HTMLElement & RawElement] =
     Option(dom.document.getElementById(carouselId)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala
index 41070a7..1655bdc 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala
@@ -33,10 +33,9 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = CheckBox.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-checkbox")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-checkbox")
 
   lazy val checked: ReactiveHtmlAttr[Boolean]       = customHtmlAttr("checked", BooleanAsAttrPresenceCodec)
   lazy val disabled: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -54,6 +53,6 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
     val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(CheckBox)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalette.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalette.scala
index baa2b52..6e158e7 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalette.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalette.scala
@@ -33,10 +33,9 @@ object ColourPalette extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ColourPalette.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette")
 
   object slots {}
 
@@ -44,7 +43,7 @@ object ColourPalette extends WebComponent {
     val onItemClick: EventProp[dom.Event & HasDetail[HasColor]] = new EventProp("item-click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ColourPalette)): _*)
+  
 
   def item: ColourPaletteItem.type = ColourPaletteItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPaletteItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPaletteItem.scala
index 288f131..3d684a7 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPaletteItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPaletteItem.scala
@@ -32,10 +32,9 @@ object ColourPaletteItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ColourPaletteItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette-item")
 
   lazy val value: ReactiveHtmlAttr[Colour] = customHtmlAttr("value", Colour.AsStringCodec)
 
@@ -43,6 +42,4 @@ object ColourPaletteItem extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ColourPaletteItem)): _*)
-
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala
index 1b41b54..2bbe002 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPalettePopover.scala
@@ -40,10 +40,9 @@ object ColourPalettePopover extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ColourPalettePopover.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette-popover")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-palette-popover")
 
   lazy val defaultColour: ReactiveHtmlAttr[Colour] = customHtmlAttr("default-color", Colour.AsStringCodec)
 
@@ -69,8 +68,6 @@ object ColourPalettePopover extends WebComponent {
     val onItemClick: EventProp[dom.Event & HasDetail[HasColor]] = new EventProp("item-click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ColourPalettePopover)): _*)
-
   def item: ColourPaletteItem.type = ColourPaletteItem
 
   def getColourPalettePopoverById(id: String): Option[Ref] =
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala
index 524cd99..6cbfa51 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ColourPicker.scala
@@ -44,10 +44,9 @@ object ColourPicker extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ColourPicker.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-picker")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-color-picker")
 
   lazy val colour: ReactiveHtmlAttr[Colour] = customHtmlAttr("color", Colour.AsStringCodec)
 
@@ -57,6 +56,6 @@ object ColourPicker extends WebComponent {
     val onChange: EventProp[EventWithPreciseTarget[dom.HTMLElement & RawElement]] = new EventProp("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ColourPicker)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBox.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBox.scala
index b0b31e3..8def543 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBox.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBox.scala
@@ -33,10 +33,9 @@ object ComboBox extends WebComponent with HasAccessibleName with HasValue {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ComboBox.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-combobox")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-combobox")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val filter: ReactiveHtmlAttr[ComboBoxFilter] = customHtmlAttr("filter", ComboBoxFilter.AsStringCodec)
@@ -60,7 +59,7 @@ object ComboBox extends WebComponent with HasAccessibleName with HasValue {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ComboBox)): _*)
+  
 
   def item: ComboBoxItem.type       = ComboBoxItem
   def group: ComboBoxGroupItem.type = ComboBoxGroupItem
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala
index 58ac700..80a4dab 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxGroupItem.scala
@@ -35,15 +35,14 @@ object ComboBoxGroupItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ComboBoxGroupItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-cb-group-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-cb-group-item")
 
   object slots {}
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ComboBoxGroupItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxItem.scala
index a3fef41..8915455 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ComboBoxItem.scala
@@ -34,10 +34,9 @@ object ComboBoxItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ComboBoxItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-cb-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-cb-item")
 
   lazy val text: ReactiveHtmlAttr[String]           = customHtmlAttr("text", StringAsIsCodec)
   lazy val additionalText: ReactiveHtmlAttr[String] = customHtmlAttr("additional-text", StringAsIsCodec)
@@ -46,6 +45,6 @@ object ComboBoxItem extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ComboBoxItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala
index f0bf51f..a0ee428 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/CustomListItem.scala
@@ -33,10 +33,9 @@ object CustomListItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = CustomListItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-custom")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-custom")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -50,6 +49,6 @@ object CustomListItem extends WebComponent {
     val onDetailClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("detail-click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(CustomListItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala
index 075eee3..7ec502f 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DatePicker.scala
@@ -60,10 +60,9 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with
   used(RawImport)
   used(Localization)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = DatePicker.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-date-picker")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-date-picker")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean]        = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val hideWeekNumbers: ReactiveHtmlAttr[Boolean] = customHtmlAttr("hide-week-numbers", BooleanAsAttrPresenceCodec)
@@ -108,7 +107,7 @@ object DatePicker extends WebComponent with HasAccessibleName with HasName with
       onInput.map(_.detail).filter(_.valid).map(_.value).map(stringToLocalDate)
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(DatePicker)): _*)
+  
 
   // var so that someone can use a different format if they like
   var format: java.time.format.DateTimeFormatter = java.time.format.DateTimeFormatter.ISO_LOCAL_DATE
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala
index b9561d1..495e21e 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateRangePicker.scala
@@ -52,10 +52,9 @@ object DateRangePicker extends WebComponent with HasAccessibleName with HasName
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = DateRangePicker.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-daterange-picker")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-daterange-picker")
 
   lazy val delimiter: ReactiveHtmlAttr[String] = customHtmlAttr("delimiter", StringAsIsCodec)
 
@@ -93,7 +92,7 @@ object DateRangePicker extends WebComponent with HasAccessibleName with HasName
     val onInput  = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DateEventData]]("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(DateRangePicker)): _*)
+  
 
   /** You can feed [[DateRangePicker]] refs to this observer in order to close them. */
   val closePickerObserver: Observer[Ref] = Observer(_.closePicker())
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala
index ef38c6c..1daf41c 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DateTimePicker.scala
@@ -49,10 +49,9 @@ object DateTimePicker extends WebComponent with HasAccessibleName with HasName w
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = DateTimePicker.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-datetime-picker")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-datetime-picker")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
@@ -88,7 +87,7 @@ object DateTimePicker extends WebComponent with HasAccessibleName with HasName w
     val onInput  = new EventProp[EventWithPreciseTarget[Ref] & HasDetail[DateEventData]]("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(DateTimePicker)): _*)
+  
 
   /** You can feed [[DateTimePicker]] refs to this observer in order to close them. */
   val closePickerObserver: Observer[Ref] = Observer(_.closePicker())
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala
index 4ef33ac..dcce26c 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Dialog.scala
@@ -39,10 +39,9 @@ object Dialog extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Dialog.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-dialog")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-dialog")
 
   lazy val headerText: ReactiveHtmlAttr[String] = customHtmlAttr("header-text", StringAsIsCodec)
 
@@ -60,8 +59,6 @@ object Dialog extends WebComponent {
     val header: Slot = new Slot("header")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Dialog)): _*)
-
   def getDialogById(id: String): Option[Ref] =
     Option(dom.document.getElementById(id)).map(_.asInstanceOf[Ref])
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DynamicSideContent.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DynamicSideContent.scala
index 776aab4..ec720f3 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DynamicSideContent.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/DynamicSideContent.scala
@@ -39,10 +39,9 @@ object DynamicSideContent extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = DynamicSideContent.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-dynamic-side-content")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-dynamic-side-content")
 
   lazy val equalSplit: ReactiveHtmlAttr[Boolean] = customHtmlAttr("equal-split", BooleanAsAttrPresenceCodec)
 
@@ -76,6 +75,6 @@ object DynamicSideContent extends WebComponent {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(DynamicSideContent)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FileUploader.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FileUploader.scala
index 43ad34f..f6b38b5 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FileUploader.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FileUploader.scala
@@ -47,10 +47,9 @@ object FileUploader extends WebComponent with HasName with HasValue {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = FileUploader.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-file-uploader")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-file-uploader")
 
   lazy val accept: ReactiveHtmlAttr[List[String]] = customHtmlAttr("accept", ListCodec(StringAsIsCodec))
 
@@ -82,6 +81,6 @@ object FileUploader extends WebComponent with HasName with HasValue {
     val onChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasFiles]] = new EventProp("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(FileUploader)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItem.scala
index 33bcb51..e0be9ad 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItem.scala
@@ -30,10 +30,9 @@ object FilterItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = FilterItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-filter-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-filter-item")
 
   object slots {
     val values: Slot = Slot("values")
@@ -41,7 +40,7 @@ object FilterItem extends WebComponent with HasText {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(FilterItem)): _*)
+  
 
   def option: FilterItemOption.type = FilterItemOption
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItemOption.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItemOption.scala
index b1f3453..c3f017f 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItemOption.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FilterItemOption.scala
@@ -30,10 +30,9 @@ object FilterItemOption extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = FilterItemOption.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-filter-item-option")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-filter-item-option")
 
   lazy val selected: ReactiveHtmlAttr[Boolean] = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
 
@@ -41,6 +40,6 @@ object FilterItemOption extends WebComponent with HasText {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(FilterItemOption)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala
index 58fa8ab..dfd25d9 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/FlexibleColumnLayout.scala
@@ -50,10 +50,9 @@ object FlexibleColumnLayout extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = FlexibleColumnLayout.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-flexible-column-layout")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-flexible-column-layout")
 
   lazy val hideArrows: ReactiveHtmlAttr[Boolean] = customHtmlAttr("hide-arrows", BooleanAsAttrPresenceCodec)
 
@@ -67,6 +66,6 @@ object FlexibleColumnLayout extends WebComponent {
     val startColumn: Slot = new Slot("startColumn")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(FlexibleColumnLayout)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala
index 0f78b0c..a8512ae 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Icon.scala
@@ -31,10 +31,9 @@ object Icon extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Icon.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-icon")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-icon")
 
   lazy val name: ReactiveHtmlAttr[IconName] = customHtmlAttr("name", IconName.AsStringCodec)
 
@@ -44,6 +43,6 @@ object Icon extends WebComponent with HasAccessibleName {
   lazy val showTooltip: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("show-tooltip", BooleanAsAttrPresenceCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Icon)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala
index 37b7db7..d30ef91 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/IllustratedMessage.scala
@@ -35,10 +35,9 @@ object IllustratedMessage extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = IllustratedMessage.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-illustrated-message")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-illustrated-message")
 
   lazy val name: ReactiveHtmlAttr[IllustrationMessageType] =
     customHtmlAttr("name", IllustrationMessageType.AsStringCodec)
@@ -51,6 +50,6 @@ object IllustratedMessage extends WebComponent with HasIcon {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(IllustratedMessage)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala
index b0b1622..742e738 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Input.scala
@@ -38,10 +38,9 @@ object Input extends WebComponent with HasValue with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Input.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-input")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-input")
 
   lazy val placeholder: ReactiveHtmlAttr[String] = customHtmlAttr("placeholder", StringAsIsCodec)
 
@@ -77,7 +76,7 @@ object Input extends WebComponent with HasValue with HasAccessibleName {
       new EventProp[dom.Event & HasDetail[HasItem[SuggestionItem.RawElement]]]("suggestion-item-select")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Input)): _*)
+  
 
   def suggestion: SuggestionItem.type           = SuggestionItem
   def suggestionGroup: SuggestionGroupItem.type = SuggestionGroupItem
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Label.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Label.scala
index c550371..da5de87 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Label.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Label.scala
@@ -29,10 +29,9 @@ object Label extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Label.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-label")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-label")
 
   lazy val required: ReactiveHtmlAttr[Boolean]          = customHtmlAttr("required", BooleanAsAttrPresenceCodec)
   lazy val showColon: ReactiveHtmlAttr[Boolean]         = customHtmlAttr("show-colon", BooleanAsAttrPresenceCodec)
@@ -41,6 +40,6 @@ object Label extends WebComponent with HasIcon {
 
   val isRequired: Setter[HtmlElement] = required := true
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Label)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala
index 61f3ecd..f718290 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Link.scala
@@ -31,10 +31,9 @@ object Link extends WebComponent with HasIcon with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Link.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-link")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-link")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -52,6 +51,6 @@ object Link extends WebComponent with HasIcon with HasAccessibleName {
     val onClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Link)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala
index b165d5d..458fc5e 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ListItem.scala
@@ -30,10 +30,9 @@ object ListItem extends WebComponent with HasIcon with HasDescription with HasAd
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ListItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-li")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-li")
 
   lazy val additionalTextState: ReactiveHtmlAttr[ValueState] =
     customHtmlAttr("additional-text-state", ValueState.AsStringCodec)
@@ -45,6 +44,6 @@ object ListItem extends WebComponent with HasIcon with HasDescription with HasAd
 
   lazy val selected: ReactiveHtmlAttr[Boolean] = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ListItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGallery.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGallery.scala
index 5f32814..2e42889 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGallery.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGallery.scala
@@ -44,10 +44,9 @@ object MediaGallery extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MediaGallery.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-media-gallery")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-media-gallery")
 
   lazy val interactiveDisplayArea: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("interactive-display-area", BooleanAsAttrPresenceCodec)
@@ -74,7 +73,7 @@ object MediaGallery extends WebComponent {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MediaGallery)): _*)
+  
 
   def item: MediaGalleryItem.type = MediaGalleryItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGalleryItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGalleryItem.scala
index 2f324db..9a00f60 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGalleryItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MediaGalleryItem.scala
@@ -35,10 +35,9 @@ object MediaGalleryItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MediaGalleryItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-media-gallery-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-media-gallery-item")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
@@ -53,6 +52,6 @@ object MediaGalleryItem extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MediaGalleryItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala
index f9ccf00..bb18b0c 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Menu.scala
@@ -34,10 +34,9 @@ object Menu extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Menu.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-menu")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-menu")
 
   lazy val headerText: ReactiveHtmlAttr[String] = customHtmlAttr("headerText", StringAsIsCodec)
 
@@ -51,7 +50,7 @@ object Menu extends WebComponent {
     val onItemClick = new EventProp[dom.Event & HasDetail[ItemClickDetail]]("item-click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Menu)): _*)
+  
 
   def getMenuById(menuId: String): Option[dom.HTMLElement & RawElement] =
     Option(dom.document.getElementById(menuId)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala
index 58fe312..06550b9 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MenuItem.scala
@@ -29,16 +29,15 @@ object MenuItem extends WebComponent with HasIcon with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MenuItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-menu-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-menu-item")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
   lazy val startsSection: ReactiveHtmlAttr[Boolean] = customHtmlAttr("starts-section", BooleanAsAttrPresenceCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MenuItem)): _*)
+  
 
   // reference to itself, useful for sub-menus
   def item: MenuItem.type = this
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MessageStrip.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MessageStrip.scala
index c3752a0..760dd07 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MessageStrip.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MessageStrip.scala
@@ -33,10 +33,9 @@ object MessageStrip extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MessageStrip.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-message-strip")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-message-strip")
 
   lazy val design: ReactiveHtmlAttr[MessageStripDesign] = customHtmlAttr("design", MessageStripDesign.AsStringCodec)
 
@@ -52,6 +51,6 @@ object MessageStrip extends WebComponent {
     val onClose: EventProp[dom.Event] = new EventProp("close")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MessageStrip)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala
index b0447e2..12bd602 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBox.scala
@@ -33,10 +33,9 @@ object MultiComboBox extends WebComponent with HasAccessibleName with HasValue {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MultiComboBox.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-multi-combobox")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-multi-combobox")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val filter: ReactiveHtmlAttr[ComboBoxFilter] = customHtmlAttr("filter", ComboBoxFilter.AsStringCodec)
@@ -61,7 +60,7 @@ object MultiComboBox extends WebComponent with HasAccessibleName with HasValue {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MultiComboBox)): _*)
+  
 
   def item: MultiComboBoxItem.type       = MultiComboBoxItem
   def group: MultiComboBoxGroupItem.type = MultiComboBoxGroupItem
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala
index 7519b2d..5328dbb 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxGroupItem.scala
@@ -25,15 +25,14 @@ object MultiComboBoxGroupItem extends WebComponent with HasText {
   @js.native
   trait RawElement extends js.Object {}
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MultiComboBoxGroupItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-mcb-group-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-mcb-group-item")
 
   object slots {}
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MultiComboBoxGroupItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxItem.scala
index 6baa268..4ad5eda 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiComboBoxItem.scala
@@ -34,10 +34,9 @@ object MultiComboBoxItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MultiComboBoxItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-mcb-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-mcb-item")
 
   lazy val selected: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
   lazy val text: ReactiveHtmlAttr[String]           = customHtmlAttr("text", StringAsIsCodec)
@@ -47,6 +46,6 @@ object MultiComboBoxItem extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MultiComboBoxItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiInput.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiInput.scala
index 6672fa1..c4c983d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiInput.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/MultiInput.scala
@@ -53,10 +53,9 @@ object MultiInput extends WebComponent with HasAccessibleName with HasName with
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = MultiInput.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-multi-input")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-multi-input")
 
   lazy val showValueHelpIcon: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("show-value-help-icon", BooleanAsAttrPresenceCodec)
@@ -117,7 +116,7 @@ object MultiInput extends WebComponent with HasAccessibleName with HasName with
       new EventProp("suggestion-item-select")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(MultiInput)): _*)
+  
 
   def suggestion: SuggestionItem.type = SuggestionItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala
index ba6071c..a4d69fc 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationAction.scala
@@ -32,10 +32,9 @@ object NotificationAction extends WebComponent with HasText with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = NotificationAction.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-notification-action")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-notification-action")
 
   lazy val design: ReactiveHtmlAttr[ButtonDesign] = customHtmlAttr("design", ButtonDesign.AsStringCodec)
 
@@ -45,6 +44,4 @@ object NotificationAction extends WebComponent with HasText with HasIcon {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(NotificationAction)): _*)
-
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala
index 31fd801..895c9a3 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListGroupItem.scala
@@ -35,10 +35,9 @@ object NotificationListGroupItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = NotificationListGroupItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-notification-group")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-notification-group")
 
   lazy val collapsed: ReactiveHtmlAttr[Boolean] = customHtmlAttr("collapsed", BooleanAsAttrPresenceCodec)
 
@@ -65,7 +64,7 @@ object NotificationListGroupItem extends WebComponent {
     val onClose: EventProp[EventWithPreciseTarget[Ref]]  = new EventProp("close")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(NotificationListGroupItem)): _*)
+  
 
   def item: NotificationListItem.type = NotificationListItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala
index 70871d0..4bac6df 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/NotificationListItem.scala
@@ -37,10 +37,9 @@ object NotificationListItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = NotificationListItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-notification")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-notification")
 
   lazy val wrappingType: ReactiveHtmlAttr[WrappingType] = customHtmlAttr("wrapping-type", WrappingType.AsStringCodec)
 
@@ -66,7 +65,7 @@ object NotificationListItem extends WebComponent {
     val onClose: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("close")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(NotificationListItem)): _*)
+  
 
   def action: NotificationAction.type = NotificationAction
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala
index 6dd22a0..83ce97d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Page.scala
@@ -31,10 +31,9 @@ object Page extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Page.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-page")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-page")
 
   lazy val backgroundDesign: ReactiveHtmlAttr[PageBackgroundDesign] =
     customHtmlAttr("background-design", PageBackgroundDesign.AsStringCodec)
@@ -55,6 +54,6 @@ object Page extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Page)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Panel.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Panel.scala
index 33356e2..f42e317 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Panel.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Panel.scala
@@ -34,10 +34,9 @@ object Panel extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Panel.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-panel")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-panel")
 
   lazy val accessibleRole: ReactiveHtmlAttr[PanelAccessibleRole] =
     customHtmlAttr("accessible-role", PanelAccessibleRole.AsStringCodec)
@@ -58,6 +57,6 @@ object Panel extends WebComponent with HasAccessibleName {
     val onToggle: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("toggle")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Panel)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala
index 54cf1de..eb7de14 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Popover.scala
@@ -41,10 +41,9 @@ object Popover extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Popover.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-popover")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-popover")
 
   lazy val allowTargetOverlap: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("allow-target-overlap", BooleanAsAttrPresenceCodec)
@@ -95,7 +94,7 @@ object Popover extends WebComponent with HasAccessibleName {
     val onBeforeOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("before-open")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Popover)): _*)
+  
 
   def getPopoverById(id: String): Option[Ref] =
     Option(dom.document.getElementById(id)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitch.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitch.scala
index 524eb22..d6cda35 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitch.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitch.scala
@@ -32,16 +32,15 @@ object ProductSwitch extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ProductSwitch.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-product-switch")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-product-switch")
 
   object slots {}
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ProductSwitch)): _*)
+  
 
   def item: ProductSwitchItem.type = ProductSwitchItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitchItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitchItem.scala
index e033f30..09eb24d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitchItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProductSwitchItem.scala
@@ -34,10 +34,9 @@ object ProductSwitchItem extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ProductSwitchItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-product-switch-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-product-switch-item")
 
   lazy val subtitleText: ReactiveHtmlAttr[String] = customHtmlAttr[String]("subtitle-text", StringAsIsCodec)
 
@@ -53,6 +52,4 @@ object ProductSwitchItem extends WebComponent with HasIcon {
     val onClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ProductSwitchItem)): _*)
-
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala
index 85c584f..704b45e 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ProgressIndicator.scala
@@ -33,10 +33,9 @@ object ProgressIndicator extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ProgressIndicator.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-progress-indicator")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-progress-indicator")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -52,6 +51,6 @@ object ProgressIndicator extends WebComponent {
   lazy val valueState: ReactiveHtmlAttr[ValueState] =
     customHtmlAttr("value-state", ValueState.AsStringCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ProgressIndicator)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala
index 5fb1df4..018abb6 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RadioButton.scala
@@ -36,10 +36,9 @@ object RadioButton extends WebComponent with HasAccessibleName with HasName with
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element & RawElement
-  type ModFunction = RadioButton.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element & RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-radio-button")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-radio-button")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val checked: ReactiveHtmlAttr[Boolean]  = customHtmlAttr("checked", BooleanAsAttrPresenceCodec)
@@ -55,6 +54,4 @@ object RadioButton extends WebComponent with HasAccessibleName with HasName with
     val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(RadioButton)): _*)
-
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RangeSlider.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RangeSlider.scala
index aa55050..69020d6 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RangeSlider.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RangeSlider.scala
@@ -38,10 +38,9 @@ object RangeSlider extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = RangeSlider.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-range-slider")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-range-slider")
 
   lazy val endValue: ReactiveHtmlAttr[Double] = customHtmlAttr("end-value", DoubleAsStringCodec)
 
@@ -70,6 +69,6 @@ object RangeSlider extends WebComponent {
     val onInput: EventProp[EventWithPreciseTarget[Ref]]  = new EventProp("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(RangeSlider)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RatingIndicator.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RatingIndicator.scala
index d29365b..0970ec9 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RatingIndicator.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/RatingIndicator.scala
@@ -37,10 +37,9 @@ object RatingIndicator extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = RatingIndicator.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-rating-indicator")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-rating-indicator")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
   lazy val disabled: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -54,6 +53,6 @@ object RatingIndicator extends WebComponent {
     val onChange = new EventProp[EventWithPreciseTarget[Ref]]("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(RatingIndicator)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ResponsivePopover.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ResponsivePopover.scala
index 2f307b6..bf5d22d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ResponsivePopover.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ResponsivePopover.scala
@@ -42,10 +42,9 @@ object ResponsivePopover extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ResponsivePopover.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-responsive-popover")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-responsive-popover")
 
   lazy val allowTargetOverlap: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("allow-target-overlap", BooleanAsAttrPresenceCodec)
@@ -96,7 +95,7 @@ object ResponsivePopover extends WebComponent with HasAccessibleName {
     val onBeforeOpen: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("before-open")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ResponsivePopover)): _*)
+  
 
   def getResponsivePopoverById(id: String): Option[Ref] =
     Option(dom.document.getElementById(id)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala
index 95918b3..f0ae4c4 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButton.scala
@@ -36,10 +36,9 @@ object SegmentedButton extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SegmentedButton.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-segmented-button")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-segmented-button")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -50,7 +49,7 @@ object SegmentedButton extends WebComponent {
       new EventProp("selection-change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SegmentedButton)): _*)
+  
 
   def item: SegmentedButtonItem.type = SegmentedButtonItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala
index 9f4ef43..4361793 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SegmentedButtonItem.scala
@@ -32,10 +32,9 @@ object SegmentedButtonItem extends WebComponent with HasAccessibleName with HasI
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SegmentedButtonItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-segmented-button-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-segmented-button-item")
 
   lazy val design: ReactiveHtmlAttr[ButtonDesign] = customHtmlAttr("design", ButtonDesign.AsStringCodec)
 
@@ -57,6 +56,6 @@ object SegmentedButtonItem extends WebComponent with HasAccessibleName with HasI
     val onClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SegmentedButtonItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala
index 5300445..52dfa70 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Select.scala
@@ -34,10 +34,9 @@ object Select extends WebComponent with HasIcon with HasAccessibleName with HasN
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Select.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-select")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-select")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val required: ReactiveHtmlAttr[Boolean] = customHtmlAttr("required", BooleanAsAttrPresenceCodec)
@@ -58,7 +57,7 @@ object Select extends WebComponent with HasIcon with HasAccessibleName with HasN
     val onChange = new EventProp[dom.Event & HasDetail[HasSelectedOption]]("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Select)): _*)
+  
 
   def option: SelectOption.type = SelectOption
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala
index 42bd004..f6e105c 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SelectOption.scala
@@ -32,14 +32,13 @@ object SelectOption extends WebComponent with HasIcon with HasAdditionalText wit
     }
   }
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SelectOption.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-option")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-option")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val selected: ReactiveHtmlAttr[Boolean] = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SelectOption)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala
index aafd7ec..d5ac4e2 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBar.scala
@@ -36,10 +36,9 @@ object ShellBar extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ShellBar.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-shellbar")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-shellbar")
 
   lazy val primaryTitle: ReactiveHtmlAttr[String] =
     customHtmlAttr("primary-title", StringAsIsCodec)
@@ -81,7 +80,7 @@ object ShellBar extends WebComponent with HasIcon {
     def startButton: Slot = new Slot("startButton")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ShellBar)): _*)
+  
 
   def item: ShellBarItem.type = ShellBarItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBarItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBarItem.scala
index b230267..99176ed 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBarItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ShellBarItem.scala
@@ -32,10 +32,9 @@ object ShellBarItem extends WebComponent with HasIcon with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ShellBarItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-shellbar-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-shellbar-item")
 
   lazy val count: HtmlAttr[String] = customHtmlAttr("count", StringAsIsCodec)
 
@@ -46,6 +45,6 @@ object ShellBarItem extends WebComponent with HasIcon with HasText {
       new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ShellBarItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigation.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigation.scala
index 7ae5042..1e1cf2e 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigation.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigation.scala
@@ -33,10 +33,9 @@ object SideNavigation extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SideNavigation.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation")
 
   lazy val collapsed: ReactiveHtmlAttr[Boolean] = customHtmlAttr[Boolean]("collapsed", BooleanAsAttrPresenceCodec)
 
@@ -58,7 +57,7 @@ object SideNavigation extends WebComponent {
 
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SideNavigation)): _*)
+  
 
   def item: SideNavigationItem.type = SideNavigationItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala
index ea6ddc7..44f42a8 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationItem.scala
@@ -32,10 +32,9 @@ object SideNavigationItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SideNavigationItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation-item")
 
   lazy val expanded: ReactiveHtmlAttr[Boolean] = customHtmlAttr("expanded", BooleanAsAttrPresenceCodec)
 
@@ -50,7 +49,7 @@ object SideNavigationItem extends WebComponent with HasText {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SideNavigationItem)): _*)
+  
 
   def subItem: SideNavigationSubItem.type = SideNavigationSubItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationSubItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationSubItem.scala
index c7b88c3..187b243 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationSubItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SideNavigationSubItem.scala
@@ -32,10 +32,9 @@ object SideNavigationSubItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SideNavigationSubItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation-sub-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-side-navigation-sub-item")
 
   lazy val icon: ReactiveHtmlAttr[IconName] = customHtmlAttr("icon", IconName.AsStringCodec)
 
@@ -45,6 +44,6 @@ object SideNavigationSubItem extends WebComponent with HasText {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SideNavigationSubItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Slider.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Slider.scala
index 327c672..f2d7bce 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Slider.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Slider.scala
@@ -36,10 +36,9 @@ object Slider extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Slider.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-slider")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-slider")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -66,6 +65,6 @@ object Slider extends WebComponent {
     val onInput: EventProp[EventWithPreciseTarget[Ref]]  = new EventProp("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Slider)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SortItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SortItem.scala
index 7b4eb79..31ab81d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SortItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SortItem.scala
@@ -30,10 +30,9 @@ object SortItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SortItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-sort-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-sort-item")
 
   lazy val selected: ReactiveHtmlAttr[Boolean] = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
 
@@ -41,6 +40,6 @@ object SortItem extends WebComponent with HasText {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SortItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala
index f8f0695..282a2aa 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SplitButton.scala
@@ -34,10 +34,9 @@ object SplitButton extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SplitButton.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-split-button")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-split-button")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -54,6 +53,6 @@ object SplitButton extends WebComponent with HasIcon {
     val onClick: EventProp[EventWithPreciseTarget[Ref]]                  = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SplitButton)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/StepInput.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/StepInput.scala
index 3432051..c4593d0 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/StepInput.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/StepInput.scala
@@ -42,10 +42,9 @@ object StepInput extends WebComponent with HasAccessibleName with HasName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = StepInput.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-step-input")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-step-input")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
@@ -75,6 +74,6 @@ object StepInput extends WebComponent with HasAccessibleName with HasName {
     val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(StepInput)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala
index 6c49052..d74fd61 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionGroupItem.scala
@@ -30,15 +30,12 @@ object SuggestionGroupItem extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SuggestionGroupItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-ui5-suggestion-group-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-ui5-suggestion-group-item")
 
   object slots {}
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SuggestionGroupItem)): _*)
-
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionItem.scala
index 3ad593e..44ddb50 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/SuggestionItem.scala
@@ -32,10 +32,9 @@ object SuggestionItem extends WebComponent with HasIcon with HasDescription with
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = SuggestionItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-suggestion-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-suggestion-item")
 
   lazy val iconEnd: ReactiveHtmlAttr[Boolean] = customHtmlAttr("icon-end", BooleanAsAttrPresenceCodec)
 
@@ -46,6 +45,6 @@ object SuggestionItem extends WebComponent with HasIcon with HasDescription with
   lazy val additionalTextState: ReactiveHtmlAttr[ValueState] =
     customHtmlAttr("additional-text-state", ValueState.AsStringCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(SuggestionItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Switch.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Switch.scala
index 7431889..4310946 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Switch.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Switch.scala
@@ -33,10 +33,9 @@ object Switch extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Switch.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-switch")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-switch")
 
   lazy val textOn: ReactiveHtmlAttr[String]  = customHtmlAttr("text-on", StringAsIsCodec)
   lazy val textOff: ReactiveHtmlAttr[String] = customHtmlAttr("text-off", StringAsIsCodec)
@@ -53,6 +52,6 @@ object Switch extends WebComponent with HasAccessibleName {
     val onCheckedChange: EventProcessor[EventWithPreciseTarget[Ref], Boolean] = onChange.map(_.target.checked)
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Switch)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala
index 237bd49..783b2d3 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tab.scala
@@ -33,10 +33,9 @@ object Tab extends WebComponent with HasIcon with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Tab.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-tab")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-tab")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val selected: ReactiveHtmlAttr[Boolean] = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
@@ -49,6 +48,6 @@ object Tab extends WebComponent with HasIcon with HasText {
     val subTabs: Slot = new Slot("subTabs")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Tab)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala
index 89b1d25..c508b88 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TabContainer.scala
@@ -32,10 +32,9 @@ object TabContainer extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TabContainer.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-tabcontainer")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-tabcontainer")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean]     = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
   lazy val collapsed: ReactiveHtmlAttr[Boolean]    = customHtmlAttr("collapsed", BooleanAsAttrPresenceCodec)
@@ -61,7 +60,7 @@ object TabContainer extends WebComponent {
     val onTabSelect: EventProp[dom.Event & HasDetail[TabSelectDetail]] = new EventProp("tab-select")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TabContainer)): _*)
+  
 
   def tab: Tab.type = Tab
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala
index aec60dd..b9c5228 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Table.scala
@@ -29,10 +29,9 @@ object Table extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Table.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-table")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-table")
 
   lazy val busy: ReactiveHtmlAttr[Boolean]                = customHtmlAttr("busy", BooleanAsAttrPresenceCodec)
   lazy val busyDelay: ReactiveHtmlAttr[FiniteDuration]    = customHtmlAttr("busy-delay", FiniteDurationCodec)
@@ -62,8 +61,6 @@ object Table extends WebComponent {
     val onSelectionChange = new EventProp[dom.Event & HasDetail[TableSelectionChangeDetail]]("selection-change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Table)): _*)
-
   def column: TableColumn.type = TableColumn
   def row: TableRow.type       = TableRow
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala
index 2f89bf7..20d1138 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableCell.scala
@@ -21,11 +21,10 @@ object TableCell extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TableCell.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-cell")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-cell")
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TableCell)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala
index 1ec5dde..6253ced 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableColumn.scala
@@ -26,15 +26,14 @@ object TableColumn extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TableColumn.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-column")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-column")
 
   lazy val demandPopin: ReactiveHtmlAttr[Boolean] = customHtmlAttr("demand-popin", BooleanAsAttrPresenceCodec)
   lazy val minWidth: ReactiveHtmlAttr[Int]        = customHtmlAttr("min-width", IntAsStringCodec)
   lazy val popinText: ReactiveHtmlAttr[String]    = customHtmlAttr("popin-text", StringAsIsCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TableColumn)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala
index 26f108f..b7c2595 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TableRow.scala
@@ -21,12 +21,11 @@ object TableRow extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TableRow.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-row")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-table-row")
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TableRow)): _*)
+  
 
   //noinspection TypeAnnotation
   val cell = TableCell
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala
index fe396b7..350ed94 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TextArea.scala
@@ -33,10 +33,9 @@ object TextArea extends WebComponent with HasValue with HasAccessibleName with H
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TextArea.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-textarea")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-textarea")
 
   lazy val required: ReactiveHtmlAttr[Boolean] = customHtmlAttr("required", BooleanAsAttrPresenceCodec)
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -60,6 +59,6 @@ object TextArea extends WebComponent with HasValue with HasAccessibleName with H
     val onInput: EventProp[EventWithPreciseTarget[Ref]]  = new EventProp("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TextArea)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimePicker.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimePicker.scala
index cc984d0..8a80844 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimePicker.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimePicker.scala
@@ -49,10 +49,9 @@ object TimePicker extends WebComponent with HasValue {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TimePicker.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-time-picker")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-time-picker")
 
   lazy val disabled: ReactiveHtmlAttr[Boolean] = customHtmlAttr("disabled", BooleanAsAttrPresenceCodec)
 
@@ -73,6 +72,6 @@ object TimePicker extends WebComponent with HasValue {
     val onInput: EventProp[EventWithPreciseTarget[Ref]]  = new EventProp("input")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TimePicker)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Timeline.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Timeline.scala
index e7921e6..cebc3c1 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Timeline.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Timeline.scala
@@ -36,10 +36,9 @@ object Timeline extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Timeline.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-timeline")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-timeline")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -49,7 +48,7 @@ object Timeline extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Timeline)): _*)
+  
 
   //noinspection TypeAnnotation
   def item = TimelineItem
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimelineItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimelineItem.scala
index 729a76c..f4bbc63 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimelineItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TimelineItem.scala
@@ -40,10 +40,9 @@ object TimelineItem extends WebComponent with HasIcon with HasName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TimelineItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-timeline-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-timeline-item")
 
   lazy val nameClickable: ReactiveHtmlAttr[Boolean] = customHtmlAttr("name-clickable", BooleanAsAttrPresenceCodec)
 
@@ -57,6 +56,6 @@ object TimelineItem extends WebComponent with HasIcon with HasName {
     val onNameClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("name-click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TimelineItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Title.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Title.scala
index 1a523e7..f7f2c32 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Title.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Title.scala
@@ -33,10 +33,9 @@ object Title extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Title.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-title")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-title")
 
   lazy val level: ReactiveHtmlAttr[TitleLevel]          = customHtmlAttr("level", TitleLevel.AsStringCodec)
   lazy val wrappingType: ReactiveHtmlAttr[WrappingType] = customHtmlAttr("wrapping-type", WrappingType.AsStringCodec)
@@ -45,24 +44,34 @@ object Title extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Title)): _*)
-
   /** Creates Title of H1 level. */
-  def h1(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H1): _*)
+  def h1(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H1): _*
+  )
 
   /** Creates Title of H2 level. */
-  def h2(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H2): _*)
+  def h2(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H2): _*
+  )
 
   /** Creates Title of H3 level. */
-  def h3(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H3): _*)
+  def h3(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H3): _*
+  )
 
   /** Creates Title of H4 level. */
-  def h4(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H4): _*)
+  def h4(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H4): _*
+  )
 
   /** Creates Title of H4 level. */
-  def h5(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H5): _*)
+  def h5(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H5): _*
+  )
 
   /** Creates Title of H6 level. */
-  def h6(mods: ModFunction*): HtmlElement = apply(mods :+ (_.level := TitleLevel.H6): _*)
+  def h6(mods: (ModFunction | Mod[ReactiveHtmlElement[Ref]])*): HtmlElement = apply(
+    mods :+ (_.level := TitleLevel.H6): _*
+  )
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala
index c20d6c2..807ccd5 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Toast.scala
@@ -32,10 +32,9 @@ object Toast extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Toast.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-toast")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-toast")
 
   lazy val placement: ReactiveHtmlAttr[ToastPlacement] = customHtmlAttr("placement", ToastPlacement.AsStringCodec)
 
@@ -45,7 +44,7 @@ object Toast extends WebComponent with HasIcon {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Toast)): _*)
+  
 
   def getToastById(id: String): Option[dom.HTMLElement & RawElement] =
     Option(dom.document.getElementById(id)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala
index 20fdabe..ee729a6 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ToggleButton.scala
@@ -36,10 +36,9 @@ object ToggleButton extends WebComponent with HasAccessibleName with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ToggleButton.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-toggle-button")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-toggle-button")
 
   lazy val pressed: ReactiveHtmlAttr[Boolean] = customHtmlAttr("pressed", BooleanAsAttrPresenceCodec)
 
@@ -64,6 +63,6 @@ object ToggleButton extends WebComponent with HasAccessibleName with HasIcon {
     val onClick: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("click")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ToggleButton)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Token.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Token.scala
index fd1f3ef..0057bfb 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Token.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Token.scala
@@ -35,10 +35,9 @@ object Token extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Token.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-token")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-token")
 
   lazy val readonly: ReactiveHtmlAttr[Boolean] = customHtmlAttr("readonly", BooleanAsAttrPresenceCodec)
 
@@ -52,6 +51,6 @@ object Token extends WebComponent with HasText {
     val onSelect: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("select")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Token)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala
index 300ea09..001e3f4 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Tree.scala
@@ -36,10 +36,9 @@ object Tree extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Tree.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-tree")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-tree")
 
   lazy val footerText: ReactiveHtmlAttr[String] = customHtmlAttr("footer-text", StringAsIsCodec)
   lazy val headerText: ReactiveHtmlAttr[String] = customHtmlAttr("header-text", StringAsIsCodec)
@@ -87,7 +86,7 @@ object Tree extends WebComponent {
     val header: Slot = new Slot("header")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Tree)): _*)
+  
 
   def item: TreeItem.type = TreeItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala
index 063fcde..3d60d38 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/TreeItem.scala
@@ -32,18 +32,15 @@ object TreeItem extends WebComponent with HasIcon with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = TreeItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-tree-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-tree-item")
 
   lazy val expanded: ReactiveHtmlAttr[Boolean]     = customHtmlAttr[Boolean]("expanded", BooleanAsAttrPresenceCodec)
   lazy val hasChildren: ReactiveHtmlAttr[Boolean]  = customHtmlAttr[Boolean]("has-children", BooleanAsAttrPresenceCodec)
   lazy val intermediate: ReactiveHtmlAttr[Boolean] = customHtmlAttr[Boolean]("intermediate", BooleanAsAttrPresenceCodec)
   lazy val selected: ReactiveHtmlAttr[Boolean]     = customHtmlAttr[Boolean]("selected", BooleanAsAttrPresenceCodec)
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(TreeItem)): _*)
-
   def item: TreeItem.type = this
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala
index 256c1cf..598b72a 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UList.scala
@@ -33,10 +33,9 @@ object UList extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = UList.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-list")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-list")
 
   lazy val accessibleRole: ReactiveHtmlAttr[String]    = customHtmlAttr("accessible-role", StringAsIsCodec)
   lazy val busy: ReactiveHtmlAttr[Boolean]             = customHtmlAttr("busy", BooleanAsAttrPresenceCodec)
@@ -85,7 +84,7 @@ object UList extends WebComponent with HasAccessibleName {
     val header: Slot = new Slot("header")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(UList)): _*)
+  
 
   @deprecated("Li was a badly designed name. Use `item` instead", "15/08/2022")
   def Li: ListItem.type = ListItem
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala
index 89e3f74..6a16cba 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UListGroupHeader.scala
@@ -30,10 +30,9 @@ object UListGroupHeader extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = UListGroupHeader.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-groupheader")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-li-groupheader")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
   lazy val selected: ReactiveHtmlAttr[Boolean]      = customHtmlAttr("selected", BooleanAsAttrPresenceCodec)
@@ -42,6 +41,6 @@ object UListGroupHeader extends WebComponent {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(UListGroupHeader)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala
index 6b0779b..85a47c7 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollection.scala
@@ -36,10 +36,9 @@ object UploadCollection extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = UploadCollection.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-upload-collection")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-upload-collection")
 
   lazy val accessibleName: ReactiveHtmlAttr[String] = customHtmlAttr("accessible-name", StringAsIsCodec)
 
@@ -80,7 +79,7 @@ object UploadCollection extends WebComponent {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(UploadCollection)): _*)
+  
 
   def item: UploadCollectionItem.type = UploadCollectionItem
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala
index a4dfa95..a55fb3d 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/UploadCollectionItem.scala
@@ -47,10 +47,9 @@ object UploadCollectionItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = UploadCollectionItem.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-upload-collection-item")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-upload-collection-item")
 
   lazy val disableDeleteButton: ReactiveHtmlAttr[Boolean] =
     customHtmlAttr("disable-delete-button", BooleanAsAttrPresenceCodec)
@@ -83,6 +82,6 @@ object UploadCollectionItem extends WebComponent {
     val onTerminate: EventProp[EventWithPreciseTarget[Ref]]     = new EventProp("terminate")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(UploadCollectionItem)): _*)
+  
 
 }
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala
index 92badfe..1c05ab1 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/ViewSettingsDialog.scala
@@ -42,10 +42,9 @@ object ViewSettingsDialog extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = ViewSettingsDialog.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-view-settings-dialog")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-view-settings-dialog")
 
   lazy val sortDescending: ReactiveHtmlAttr[Boolean] = customHtmlAttr("sort-descending", BooleanAsAttrPresenceCodec)
 
@@ -86,7 +85,7 @@ object ViewSettingsDialog extends WebComponent {
     )
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(ViewSettingsDialog)): _*)
+  
 
   /** Feed an instance of [[ViewSettingsDialog]] ref to this observer in order to show it. */
   val showObserver: Observer[Ref] = Observer(_.show())
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala
index dd47d49..a33140e 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/Wizard.scala
@@ -33,10 +33,9 @@ object Wizard extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = Wizard.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-wizard")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-wizard")
 
   object slots {}
 
@@ -50,7 +49,7 @@ object Wizard extends WebComponent {
     val onStepChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[StepChangeInfo]] = new EventProp("step-change")
   }
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(Wizard)): _*)
+  
 
   def step: WizardStep.type = WizardStep
 
diff --git a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/WizardStep.scala b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/WizardStep.scala
index 9f3070e..01ee3e6 100644
--- a/web-components/src/main/scala/be/doeraene/webcomponents/ui5/WizardStep.scala
+++ b/web-components/src/main/scala/be/doeraene/webcomponents/ui5/WizardStep.scala
@@ -24,10 +24,9 @@ object WizardStep extends WebComponent with HasIcon {
   @js.native
   trait RawElement extends js.Object {}
 
-  type Ref         = dom.html.Element with RawElement
-  type ModFunction = WizardStep.type => Mod[ReactiveHtmlElement[Ref]]
+  type Ref = dom.html.Element with RawElement
 
-  private val tag: HtmlTag[Ref] = customHtmlTag("ui5-wizard-step")
+  protected val tag: HtmlTag[Ref] = customHtmlTag("ui5-wizard-step")
 
   lazy val branching: ReactiveHtmlAttr[Boolean] = customHtmlAttr("branching", BooleanAsAttrPresenceCodec)
 
@@ -43,6 +42,4 @@ object WizardStep extends WebComponent with HasIcon {
 
   object events {}
 
-  def apply(mods: ModFunction*): HtmlElement = tag(mods.map(_(WizardStep)): _*)
-
 }