From ca5431332e7743e54fd35062d9094296deaa8fc4 Mon Sep 17 00:00:00 2001
From: "Ahmad K. Bawaneh" <ahmad.bawaneh@dominokit.com>
Date: Sun, 24 Nov 2024 14:34:56 +0300
Subject: [PATCH] fix #977 Performance enhancements

---
 .../dominokit/domino/ui/style/CssClass.java   |   4 +-
 .../dominokit/domino/ui/style/GenericCss.java |   2 +
 .../ui/animations/TransitionListeners.java    | 220 ++++++++++------
 .../domino/ui/datatable/TableRow.java         |  98 +++++---
 .../domino/ui/utils/AsyncRunnable.java        |  21 ++
 .../domino/ui/utils/BaseDominoElement.java    | 125 +++++++---
 .../domino/ui/utils/BaseLazyInitializer.java  |  41 ++-
 .../org/dominokit/domino/ui/utils/Domino.java | 234 ++++++++++--------
 .../dui-components/domino-ui-datatable.css    |  12 +-
 .../dui-components/domino-ui-forms.css        |  16 ++
 10 files changed, 517 insertions(+), 256 deletions(-)
 create mode 100644 domino-ui/src/main/java/org/dominokit/domino/ui/utils/AsyncRunnable.java

diff --git a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/CssClass.java b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/CssClass.java
index 3d7cfeeac..8aeaea5f6 100644
--- a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/CssClass.java
+++ b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/CssClass.java
@@ -58,9 +58,7 @@ default void apply(IsElement<?> element) {
    * @param element The DOM element to which the CSS class will be applied.
    */
   default void apply(Element element) {
-    if (!element.classList.contains(getCssClass())) {
-      element.classList.add(getCssClass());
-    }
+    element.classList.add(getCssClass());
   }
 
   /**
diff --git a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
index 5a53b3d4e..87a5f59a7 100644
--- a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
+++ b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
@@ -27,6 +27,8 @@ public interface GenericCss {
 
   CssClass dui_even = ReplaceCssClass.of(() -> "dui-odd").replaceWith(() -> "dui-even");
 
+  CssClass dui_disable_transition = () -> "dui-disable-transition";
+
   CssClass dui_primary =
       new ReplaceCssClass(
               CompositeCssClass.of(
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/animations/TransitionListeners.java b/domino-ui/src/main/java/org/dominokit/domino/ui/animations/TransitionListeners.java
index ff958b2ee..06a76ccc3 100644
--- a/domino-ui/src/main/java/org/dominokit/domino/ui/animations/TransitionListeners.java
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/animations/TransitionListeners.java
@@ -15,6 +15,7 @@
  */
 package org.dominokit.domino.ui.animations;
 
+import static java.util.Objects.isNull;
 import static org.dominokit.domino.ui.utils.Domino.*;
 import static org.dominokit.domino.ui.utils.ElementsFactory.elements;
 
@@ -29,11 +30,14 @@
 public class TransitionListeners<E extends Element, T extends IsElement<E>> {
 
   private final T target;
-  private final Set<TransitionListener<? super T>> startListeners = new HashSet<>();
-  private final Set<TransitionListener<? super T>> cancelListeners = new HashSet<>();
-  private final Set<TransitionListener<? super T>> endListeners = new HashSet<>();
+  private EventListener startListener;
+  private EventListener cancelListener;
+  private EventListener endListener;
+  private Set<TransitionListener<? super T>> startListeners;
+  private Set<TransitionListener<? super T>> cancelListeners;
+  private Set<TransitionListener<? super T>> endListeners;
 
-  private final LazyInitializer eventsLazyInitializer;
+  private LazyInitializer eventsLazyInitializer;
 
   public static <E extends Element, T extends IsElement<E>> TransitionListeners<E, T> of(T target) {
     return new TransitionListeners<>(target);
@@ -41,106 +45,168 @@ public static <E extends Element, T extends IsElement<E>> TransitionListeners<E,
 
   public TransitionListeners(T target) {
     this.target = target;
-    EventListener startListener =
-        evt -> {
-          startListeners.forEach(
-              listener -> {
-                if (evt.target.equals(this.target.element())) {
-                  listener.onTransitionEvent(target);
-                }
+  }
+
+  private LazyInitializer getEventsLazyInitializer() {
+    if (isNull(this.eventsLazyInitializer)) {
+      this.eventsLazyInitializer =
+          new LazyInitializer(
+              () -> {
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "webkitTransitionStart",
+                        getStartListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "oTransitionStart",
+                        getStartListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "transitionstart",
+                        getStartListener(target),
+                        EventOptions.of().setCapture(false));
+
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "webkitTransitionCancel",
+                        getCancelListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "oTransitionCancel",
+                        getCancelListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "transitioncancel",
+                        getCancelListener(target),
+                        EventOptions.of().setCapture(false));
+
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "webkitTransitionEnd",
+                        getEndListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "oTransitionEnd",
+                        getEndListener(target),
+                        EventOptions.of().setCapture(false));
+                elements
+                    .elementOf(target)
+                    .addEventListener(
+                        "transitionend",
+                        getEndListener(target),
+                        EventOptions.of().setCapture(false));
               });
-        };
-    EventListener cancelListener =
-        evt -> {
-          if (evt.target.equals(this.target.element())) {
-            cancelListeners.forEach(listener -> listener.onTransitionEvent(target));
-          }
-        };
-    EventListener endListener =
-        evt -> {
-          if (evt.target.equals(this.target.element())) {
-            endListeners.forEach(listener -> listener.onTransitionEvent(target));
-          }
-        };
-    this.eventsLazyInitializer =
-        new LazyInitializer(
-            () -> {
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "webkitTransitionStart", startListener, EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "oTransitionStart", startListener, EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "transitionstart", startListener, EventOptions.of().setCapture(false));
-
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "webkitTransitionCancel",
-                      cancelListener,
-                      EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "oTransitionCancel", cancelListener, EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "transitioncancel", cancelListener, EventOptions.of().setCapture(false));
-
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "webkitTransitionEnd", endListener, EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "oTransitionEnd", endListener, EventOptions.of().setCapture(false));
-              elements
-                  .elementOf(target)
-                  .addEventListener(
-                      "transitionend", endListener, EventOptions.of().setCapture(false));
-            });
+    }
+    return this.eventsLazyInitializer;
+  }
+
+  private EventListener getEndListener(T target) {
+    if (isNull(this.endListener)) {
+      this.endListener =
+          evt -> {
+            if (evt.target.equals(this.target.element())) {
+              getEndListeners().forEach(listener -> listener.onTransitionEvent(target));
+            }
+          };
+    }
+    return this.endListener;
+  }
+
+  private EventListener getStartListener(T target) {
+    if (isNull(startListener)) {
+      startListener =
+          evt -> {
+            getStartListeners()
+                .forEach(
+                    listener -> {
+                      if (evt.target.equals(this.target.element())) {
+                        listener.onTransitionEvent(target);
+                      }
+                    });
+          };
+    }
+    return startListener;
+  }
+
+  private EventListener getCancelListener(T target) {
+    if (isNull(cancelListener)) {
+      this.cancelListener =
+          evt -> {
+            if (evt.target.equals(this.target.element())) {
+              getCancelListeners().forEach(listener -> listener.onTransitionEvent(target));
+            }
+          };
+    }
+    return this.cancelListener;
+  }
+
+  private Set<TransitionListener<? super T>> getEndListeners() {
+    if (isNull(endListeners)) {
+      this.endListeners = new HashSet<>();
+    }
+    return endListeners;
+  }
+
+  private Set<TransitionListener<? super T>> getCancelListeners() {
+    if (isNull(cancelListeners)) {
+      this.cancelListeners = new HashSet<>();
+    }
+    return cancelListeners;
+  }
+
+  private Set<TransitionListener<? super T>> getStartListeners() {
+    if (isNull(this.startListeners)) {
+      this.startListeners = new HashSet<>();
+    }
+    return startListeners;
   }
 
   public TransitionListeners<E, T> onTransitionStart(TransitionListener<? super T> listener) {
-    eventsLazyInitializer.apply();
-    startListeners.add(listener);
+    getEventsLazyInitializer().apply();
+    getStartListeners().add(listener);
     return this;
   }
 
   public TransitionListeners<E, T> removeTransitionStartListener(
       TransitionListener<? super T> listener) {
-    startListeners.remove(listener);
+    getStartListeners().remove(listener);
     return this;
   }
 
   public TransitionListeners<E, T> onTransitionCancel(TransitionListener<? super T> listener) {
-    eventsLazyInitializer.apply();
-    cancelListeners.add(listener);
+    getEventsLazyInitializer().apply();
+    getCancelListeners().add(listener);
     return this;
   }
 
   public TransitionListeners<E, T> removeTransitionCancelListener(
       TransitionListener<? super T> listener) {
-    cancelListeners.remove(listener);
+    getCancelListeners().remove(listener);
     return this;
   }
 
   public TransitionListeners<E, T> onTransitionEnd(TransitionListener<? super T> listener) {
-    eventsLazyInitializer.apply();
-    endListeners.add(listener);
+    getEventsLazyInitializer().apply();
+    getEndListeners().add(listener);
     return this;
   }
 
   public TransitionListeners<E, T> removeTransitionEndListener(
       TransitionListener<? super T> listener) {
-    endListeners.remove(listener);
+    getEndListeners().remove(listener);
     return this;
   }
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableRow.java b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableRow.java
index a168631b8..5ced3cc84 100644
--- a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableRow.java
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableRow.java
@@ -46,25 +46,23 @@ public class TableRow<T> extends BaseDominoElement<HTMLTableRowElement, TableRow
   private boolean selected = false;
   private final int index;
   private DataTable<T> dataTable;
-  private final Map<String, RowCell<T>> rowCells = new HashMap<>();
+  private Map<String, RowCell<T>> rowCells;
 
-  private Map<String, String> flags = new HashMap<>();
+  private Map<String, String> flags;
 
   private HTMLTableRowElement element = tr().element();
 
-  private List<RowListener<T>> listeners = new ArrayList<>();
+  private List<RowListener<T>> listeners;
   private boolean editable = false;
-  private RowRenderer<T> rowRenderer = new DefaultRowRenderer<>();
+  private RowRenderer<T> rowRenderer;
   private TableRow<T> parent;
-  private List<TableRow<T>> children = new ArrayList<>();
+  private List<TableRow<T>> children;
   private boolean selectionListenersPaused = false;
-  private Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>> selectionListeners =
-      new HashSet<>();
-  private Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>> deselectionListeners =
-      new HashSet<>();
+  private Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>> selectionListeners;
+  private Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>> deselectionListeners;
   private boolean selectable;
 
-  private FieldsGrouping rowFieldsGroup = FieldsGrouping.create();
+  private FieldsGrouping rowFieldsGroup;
   private boolean draggable = true;
 
   /**
@@ -213,6 +211,9 @@ public TableRow<T> togglePauseSelectionListeners(boolean toggle) {
    */
   @Override
   public Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>> getSelectionListeners() {
+    if (isNull(this.selectionListeners)) {
+      this.selectionListeners = new HashSet<>();
+    }
     return this.selectionListeners;
   }
 
@@ -224,6 +225,9 @@ public TableRow<T> togglePauseSelectionListeners(boolean toggle) {
   @Override
   public Set<SelectionListener<? super TableRow<T>, ? super TableRow<T>>>
       getDeselectionListeners() {
+    if (isNull(this.deselectionListeners)) {
+      this.deselectionListeners = new HashSet<>();
+    }
     return this.deselectionListeners;
   }
 
@@ -247,7 +251,7 @@ public boolean isSelectionListenersPaused() {
   @Override
   public TableRow<T> triggerSelectionListeners(TableRow<T> source, TableRow<T> selection) {
     if (!this.selectionListenersPaused) {
-      new ArrayList<>(selectionListeners)
+      new ArrayList<>(getSelectionListeners())
           .forEach(
               listener -> {
                 listener.onSelectionChanged(Optional.ofNullable(source), selection);
@@ -266,7 +270,7 @@ public TableRow<T> triggerSelectionListeners(TableRow<T> source, TableRow<T> sel
   @Override
   public TableRow<T> triggerDeselectionListeners(TableRow<T> source, TableRow<T> selection) {
     if (!this.selectionListenersPaused) {
-      new ArrayList<>(deselectionListeners)
+      new ArrayList<>(getDeselectionListeners())
           .forEach(
               listener -> {
                 listener.onSelectionChanged(Optional.ofNullable(source), selection);
@@ -396,7 +400,14 @@ public DataTable<T> getDataTable() {
    * @param listener The listener to be added.
    */
   public void addRowListener(RowListener<T> listener) {
-    listeners.add(listener);
+    getListeners().add(listener);
+  }
+
+  private List<RowListener<T>> getListeners() {
+    if (isNull(this.listeners)) {
+      this.listeners = new ArrayList<>();
+    }
+    return listeners;
   }
 
   /**
@@ -405,12 +416,12 @@ public void addRowListener(RowListener<T> listener) {
    * @param listener The listener to be removed.
    */
   public void removeListener(RowListener<T> listener) {
-    listeners.remove(listener);
+    getListeners().remove(listener);
   }
 
   /** Notifies all listeners that the row data has been updated. */
   public void fireUpdate() {
-    listeners.forEach(listener -> listener.onChange(TableRow.this));
+    getListeners().forEach(listener -> listener.onChange(TableRow.this));
   }
 
   @Override
@@ -425,7 +436,14 @@ public HTMLTableRowElement element() {
    * @param value The value associated with the flag.
    */
   public void setFlag(String name, String value) {
-    flags.put(name, value);
+    flags().put(name, value);
+  }
+
+  private Map<String, String> flags() {
+    if (isNull(flags)) {
+      this.flags = new HashMap<>();
+    }
+    return flags;
   }
 
   /**
@@ -435,7 +453,7 @@ public void setFlag(String name, String value) {
    * @return The value associated with the flag, or null if the flag doesn't exist.
    */
   public String getFlag(String name) {
-    return flags.get(name);
+    return flags().get(name);
   }
 
   /**
@@ -444,7 +462,7 @@ public String getFlag(String name) {
    * @param name The name of the flag.
    */
   public void removeFlag(String name) {
-    flags.remove(name);
+    flags().remove(name);
   }
 
   /**
@@ -454,7 +472,7 @@ public void removeFlag(String name) {
    * @return true if the flag is set, false otherwise.
    */
   public boolean hasFlag(String name) {
-    return flags.containsKey(name);
+    return flags().containsKey(name);
   }
 
   /**
@@ -463,7 +481,7 @@ public boolean hasFlag(String name) {
    * @param rowCell The cell to be added.
    */
   public void addCell(RowCell<T> rowCell) {
-    rowCells.put(rowCell.getColumnConfig().getName(), rowCell);
+    getCells().put(rowCell.getColumnConfig().getName(), rowCell);
   }
 
   /**
@@ -473,7 +491,7 @@ public void addCell(RowCell<T> rowCell) {
    * @return The cell associated with the name, or null if the cell doesn't exist.
    */
   public RowCell<T> getCell(String name) {
-    return rowCells.get(name);
+    return getCells().get(name);
   }
 
   /**
@@ -497,7 +515,7 @@ public void updateRow() {
    */
   public void updateRow(T record) {
     this.record = record;
-    rowCells.values().forEach(RowCell::updateCell);
+    getCells().values().forEach(RowCell::updateCell);
     this.dataTable.fireTableEvent(new RowRecordUpdatedEvent<>(this));
     this.dataTable.fireTableEvent(
         new TableDataUpdatedEvent<>(
@@ -530,7 +548,14 @@ public ValidationResult validate() {
    * @return An unmodifiable map of {@link RowCell} objects.
    */
   public Map<String, RowCell<T>> getRowCells() {
-    return Collections.unmodifiableMap(rowCells);
+    return Collections.unmodifiableMap(getCells());
+  }
+
+  private Map<String, RowCell<T>> getCells() {
+    if (isNull(rowCells)) {
+      this.rowCells = new HashMap<>();
+    }
+    return rowCells;
   }
 
   /**
@@ -543,8 +568,15 @@ public void render() {
     if (rendererMeta.isPresent()) {
       rendererMeta.get().getRowRenderer().render(dataTable, this);
     } else {
-      rowRenderer.render(dataTable, this);
+      getRowRenderer().render(dataTable, this);
+    }
+  }
+
+  private RowRenderer<T> getRowRenderer() {
+    if (isNull(rowRenderer)) {
+      this.rowRenderer = new DefaultRowRenderer<>();
     }
+    return rowRenderer;
   }
 
   /**
@@ -569,7 +601,7 @@ public interface RowListener<T> {
    */
   public void edit() {
     setEditable(true);
-    this.rowFieldsGroup.removeAllFormElements();
+    getRowFieldsGroup().removeAllFormElements();
     updateRow();
     this.dataTable.getTableConfig().getOnRowEditHandler().accept(this);
   }
@@ -587,7 +619,7 @@ public void save() {
           .saveDirtyRecord(record, getDirtyRecord());
       this.setEditable(false);
       updateRow();
-      rowFieldsGroup.removeAllFormElements();
+      getRowFieldsGroup().removeAllFormElements();
       this.dataTable.getTableConfig().getOnRowFinishEditHandler().accept(this);
     }
   }
@@ -599,7 +631,7 @@ public void save() {
   public void cancelEditing() {
     this.setEditable(false);
     updateRow();
-    rowFieldsGroup.removeAllFormElements();
+    getRowFieldsGroup().removeAllFormElements();
     this.dataTable.getTableConfig().getOnRowFinishEditHandler().accept(this);
   }
 
@@ -643,7 +675,7 @@ public void renderCell(ColumnConfig<T> columnConfig) {
                                 .addCss(columnCssRule.getCssRule().getCssClass())));
 
     RowCell<T> rowCell =
-        new RowCell<>(new CellRenderer.CellInfo<>(this, cellElement), columnConfig);
+        new RowCell<>(new CellRenderer.CellInfo<>(this, columnConfig, cellElement), columnConfig);
     rowCell.updateCell();
     addCell(rowCell);
 
@@ -689,6 +721,13 @@ public void setParent(TableRow<T> parent) {
    * @return A list of child {@link TableRow}s.
    */
   public List<TableRow<T>> getChildren() {
+    return rowChildren();
+  }
+
+  private List<TableRow<T>> rowChildren() {
+    if (isNull(children)) {
+      this.children = new ArrayList<>();
+    }
     return children;
   }
 
@@ -725,6 +764,9 @@ public boolean isRoot() {
    * @return The default fields group for this row.
    */
   public FieldsGrouping getRowFieldsGroup() {
+    if (isNull(rowFieldsGroup)) {
+      rowFieldsGroup = FieldsGrouping.create();
+    }
     return rowFieldsGroup;
   }
 
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/AsyncRunnable.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/AsyncRunnable.java
new file mode 100644
index 000000000..c1b0d6ca7
--- /dev/null
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/AsyncRunnable.java
@@ -0,0 +1,21 @@
+/*
+ * Copyright © 2019 Dominokit
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.dominokit.domino.ui.utils;
+
+public interface AsyncRunnable {
+
+  void run(Runnable onComplete);
+}
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java
index 6ab2198cf..da65cca23 100644
--- a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java
@@ -37,7 +37,7 @@
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.HashMap;
-import java.util.LinkedHashSet;
+import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Optional;
@@ -147,19 +147,19 @@ public abstract class BaseDominoElement<E extends Element, T extends IsElement<E
   protected WavesSupport wavesSupport;
 
   /** A list of attach observers for this DOM element. */
-  private List<MutationObserverCallback> attachObservers = new ArrayList<>();
+  private List<MutationObserverCallback> attachObservers;
 
   /** A list of detach observers for this DOM element. */
-  private List<MutationObserverCallback> detachObservers = new ArrayList<>();
+  private List<MutationObserverCallback> detachObservers;
 
   /** A list of detach observers for this DOM element. */
-  private Map<String, List<MutationObserverCallback>> attributesObservers = new HashMap<>();
+  private Map<String, List<MutationObserverCallback>> attributesObservers;
 
   /** Optional ResizeObserver for this DOM element. */
   private Optional<ResizeObserver> resizeObserverOptional = Optional.empty();
 
   private LambdaFunction resizeInitializer;
-  private List<ResizeHandler<T>> resizeHandlers = new ArrayList<>();
+  private List<ResizeHandler<T>> resizeHandlers;
 
   /** The keyboard events for this DOM element. */
   private KeyboardEvents<E> keyboardEvents;
@@ -171,19 +171,19 @@ public abstract class BaseDominoElement<E extends Element, T extends IsElement<E
   private boolean closeListenersPaused = false;
 
   /** Set of collapse listeners for this DOM element. */
-  protected Set<CloseListener<? super T>> closeListeners = new LinkedHashSet<>();
+  protected Set<CloseListener<? super T>> closeListeners;
 
   /** Set of expand listeners for this DOM element. */
-  protected Set<OpenListener<? super T>> openListeners = new LinkedHashSet<>();
+  protected Set<OpenListener<? super T>> openListeners;
 
   private LambdaFunction dominoUuidInitializer;
 
   private EventListener attachEventListener;
   private EventListener detachEventListener;
   private EventListener attributeChangeEventListener;
-  private final List<Consumer<T>> onBeforeRemoveHandlers = new ArrayList<>();
-  private final List<Consumer<T>> onRemoveHandlers = new ArrayList<>();
-  private final Map<String, ComponentMeta> metaObjects = new HashMap<>();
+  private List<Consumer<T>> onBeforeRemoveHandlers;
+  private List<Consumer<T>> onRemoveHandlers;
+  private Map<String, ComponentMeta> metaObjects;
 
   private TransitionListeners<E, T> transitionListeners;
 
@@ -232,8 +232,8 @@ protected void init(T element) {
                         entries -> {
                           resizeObserverOptional.ifPresent(
                               observer -> {
-                                for (int index = 0; index < resizeHandlers.size(); index++) {
-                                  resizeHandlers
+                                for (int index = 0; index < getResizeHandlers().size(); index++) {
+                                  getResizeHandlers()
                                       .get(index)
                                       .onResize((T) BaseDominoElement.this, observer, entries);
                                 }
@@ -256,6 +256,13 @@ protected void init(T element) {
         };
   }
 
+  private List<ResizeHandler<T>> getResizeHandlers() {
+    if (isNull(this.resizeHandlers)) {
+      this.resizeHandlers = new ArrayList<>();
+    }
+    return resizeHandlers;
+  }
+
   /**
    * Checks if the DOM element has a "domino UUID" attribute.
    *
@@ -546,6 +553,13 @@ public T togglePauseCloseListeners(boolean toggle) {
    */
   @Override
   public Set<CloseListener<? super T>> getCloseListeners() {
+    return closeListeners();
+  }
+
+  private Set<CloseListener<? super T>> closeListeners() {
+    if (isNull(this.closeListeners)) {
+      this.closeListeners = new HashSet<>();
+    }
     return closeListeners;
   }
 
@@ -556,6 +570,13 @@ public Set<CloseListener<? super T>> getCloseListeners() {
    */
   @Override
   public Set<OpenListener<? super T>> getOpenListeners() {
+    return openListeners();
+  }
+
+  private Set<OpenListener<? super T>> openListeners() {
+    if (isNull(this.openListeners)) {
+      this.openListeners = new HashSet<>();
+    }
     return openListeners;
   }
 
@@ -673,18 +694,25 @@ public T onAttached(MutationObserverCallback mutationObserverCallback) {
       this.attachEventListener =
           evt -> {
             CustomEvent cevent = Js.uncheckedCast(evt);
-            attachObservers.forEach(
-                callback -> callback.onObserved(Js.uncheckedCast(cevent.detail)));
+            getAttachObservers()
+                .forEach(callback -> callback.onObserved(Js.uncheckedCast(cevent.detail)));
           };
       this.element
           .element()
           .addEventListener(ObserverEventType.attachedType(this), this.attachEventListener);
     }
-    attachObservers.add(mutationObserverCallback);
+    getAttachObservers().add(mutationObserverCallback);
     ElementUtil.startObserving();
     return element;
   }
 
+  private List<MutationObserverCallback> getAttachObservers() {
+    if (isNull(this.attachObservers)) {
+      this.attachObservers = new ArrayList<>();
+    }
+    return attachObservers;
+  }
+
   /**
    * Registers an observer to be notified when this element is attached to the DOM.
    *
@@ -713,14 +741,14 @@ public T onAttributeChange(String attribute, MutationObserverCallback mutationOb
             CustomEvent cevent = Js.uncheckedCast(evt);
             MutationRecord record = Js.uncheckedCast(cevent.detail);
 
-            Optional.ofNullable(attributesObservers.get("*"))
+            Optional.ofNullable(getAttributesObservers().get("*"))
                 .ifPresent(
                     mutationObserverCallbacks -> {
                       mutationObserverCallbacks.forEach(
                           callback -> callback.onObserved(Js.uncheckedCast(cevent.detail)));
                     });
 
-            Optional.ofNullable(attributesObservers.get(record.attributeName))
+            Optional.ofNullable(getAttributesObservers().get(record.attributeName))
                 .ifPresent(
                     mutationObserverCallbacks -> {
                       mutationObserverCallbacks.forEach(
@@ -730,14 +758,21 @@ public T onAttributeChange(String attribute, MutationObserverCallback mutationOb
       String type = ObserverEventType.attributeType(this);
       this.element.element().addEventListener(type, this.attributeChangeEventListener);
     }
-    if (!attributesObservers.containsKey(attribute)) {
-      attributesObservers.put(attribute, new ArrayList<>());
+    if (!getAttributesObservers().containsKey(attribute)) {
+      getAttributesObservers().put(attribute, new ArrayList<>());
     }
-    attributesObservers.get(attribute).add(mutationObserverCallback);
+    getAttributesObservers().get(attribute).add(mutationObserverCallback);
     ElementUtil.startObservingAttributes();
     return element;
   }
 
+  private Map<String, List<MutationObserverCallback>> getAttributesObservers() {
+    if (isNull(this.attributesObservers)) {
+      this.attributesObservers = new HashMap<>();
+    }
+    return attributesObservers;
+  }
+
   /**
    * Registers an observer to be notified when this element is detached from the DOM.
    *
@@ -753,18 +788,25 @@ public T onDetached(MutationObserverCallback callback) {
       this.detachEventListener =
           evt -> {
             CustomEvent cevent = Js.uncheckedCast(evt);
-            detachObservers.forEach(
-                observer -> observer.onObserved(Js.uncheckedCast(cevent.detail)));
+            getDetachObservers()
+                .forEach(observer -> observer.onObserved(Js.uncheckedCast(cevent.detail)));
           };
       this.element
           .element()
           .addEventListener(ObserverEventType.detachedType(this), this.detachEventListener);
     }
-    detachObservers.add(callback);
+    getDetachObservers().add(callback);
     ElementUtil.startObserving();
     return element;
   }
 
+  private List<MutationObserverCallback> getDetachObservers() {
+    if (isNull(this.detachObservers)) {
+      this.detachObservers = new ArrayList<>();
+    }
+    return detachObservers;
+  }
+
   /**
    * Removes an observer that was previously registered to be notified when this element is attached
    * to the DOM.
@@ -773,7 +815,7 @@ public T onDetached(MutationObserverCallback callback) {
    * @return The modified DOM element.
    */
   public T removeAttachObserver(MutationObserverCallback callback) {
-    attachObservers.remove(callback);
+    getAttachObservers().remove(callback);
     return element;
   }
 
@@ -785,7 +827,7 @@ public T removeAttachObserver(MutationObserverCallback callback) {
    * @return The modified DOM element.
    */
   public T removeDetachObserver(MutationObserverCallback callback) {
-    detachObservers.remove(callback);
+    getDetachObservers().remove(callback);
     return element;
   }
 
@@ -879,7 +921,7 @@ public T nowAndWhenDetached(Runnable handler) {
   @Editor.Ignore
   public T onResize(ResizeHandler<T> resizeHandler) {
     resizeInitializer.apply();
-    resizeHandlers.add(resizeHandler);
+    getResizeHandlers().add(resizeHandler);
     return (T) this;
   }
 
@@ -894,7 +936,7 @@ public T onResize(ResizeHandler<T> resizeHandler) {
   @Editor.Ignore
   public T onResize(ResizeHandler<T> resizeHandler, HandlerRecord record) {
     if (nonNull(record)) {
-      record.setRemover(() -> resizeHandlers.remove(resizeHandler));
+      record.setRemover(() -> getResizeHandlers().remove(resizeHandler));
     }
     return onResize(resizeHandler);
   }
@@ -1921,12 +1963,26 @@ public T setInnerHtml(SafeHtml html) {
    */
   @Editor.Ignore
   public T remove() {
-    onBeforeRemoveHandlers.forEach(h -> h.accept((T) this));
+    onBeforeRemoveHandlers().forEach(h -> h.accept((T) this));
     element().remove();
-    onRemoveHandlers.forEach(h -> h.accept((T) this));
+    onRemoveHandlers().forEach(h -> h.accept((T) this));
     return element;
   }
 
+  private List<Consumer<T>> onRemoveHandlers() {
+    if (isNull(this.onRemoveHandlers)) {
+      this.onRemoveHandlers = new ArrayList<>();
+    }
+    return onRemoveHandlers;
+  }
+
+  private List<Consumer<T>> onBeforeRemoveHandlers() {
+    if (isNull(this.onBeforeRemoveHandlers)) {
+      this.onBeforeRemoveHandlers = new ArrayList<>();
+    }
+    return onBeforeRemoveHandlers;
+  }
+
   /**
    * Adds an "onBeforeRemove" listener to this element. The listener will be invoked before the
    * element is removed.
@@ -1936,7 +1992,7 @@ public T remove() {
    */
   public T addOnBeforeRemoveListener(Consumer<T> handler) {
     if (nonNull(handler)) {
-      this.onBeforeRemoveHandlers.add(handler);
+      onBeforeRemoveHandlers().add(handler);
     }
     return (T) this;
   }
@@ -1949,7 +2005,7 @@ public T addOnBeforeRemoveListener(Consumer<T> handler) {
    */
   public T removeOnBeforeRemoveListener(Consumer<T> handler) {
     if (nonNull(handler)) {
-      this.onBeforeRemoveHandlers.remove(handler);
+      this.onBeforeRemoveHandlers().remove(handler);
     }
     return (T) this;
   }
@@ -4125,6 +4181,13 @@ protected UIConfig uiconfig() {
    */
   @Override
   public Map<String, ComponentMeta> getMetaObjects() {
+    return metaObjects();
+  }
+
+  private Map<String, ComponentMeta> metaObjects() {
+    if (isNull(this.metaObjects)) {
+      this.metaObjects = new HashMap<>();
+    }
     return metaObjects;
   }
 
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseLazyInitializer.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseLazyInitializer.java
index 6ce6b42e1..9a3956b90 100644
--- a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseLazyInitializer.java
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseLazyInitializer.java
@@ -15,6 +15,8 @@
  */
 package org.dominokit.domino.ui.utils;
 
+import static java.util.Objects.isNull;
+
 import java.util.Arrays;
 import java.util.HashSet;
 import java.util.Set;
@@ -30,9 +32,9 @@ public abstract class BaseLazyInitializer<T extends BaseLazyInitializer<T>> {
   private LambdaFunction originalFunction;
   private LambdaFunction doOnceFunction;
   private boolean initialized = false;
-  private Set<LambdaFunction> functions = new HashSet<>();
-  private Set<LambdaFunction> doOnce = new HashSet<>();
-  private Set<LambdaFunction> doOnReset = new HashSet<>();
+  private Set<LambdaFunction> functions;
+  private Set<LambdaFunction> doOnce;
+  private Set<LambdaFunction> doOnReset;
 
   /**
    * Constructs a BaseLazyInitializer with the given LambdaFunction.
@@ -48,13 +50,20 @@ public BaseLazyInitializer(LambdaFunction function) {
   private void initDoOnce() {
     this.doOnceFunction =
         () -> {
-          for (LambdaFunction func : doOnce) {
+          for (LambdaFunction func : getDoOnce()) {
             func.apply();
           }
           this.doOnceFunction = () -> {};
         };
   }
 
+  private Set<LambdaFunction> getDoOnce() {
+    if (isNull(doOnce)) {
+      this.doOnce = new HashSet<>();
+    }
+    return doOnce;
+  }
+
   /**
    * Applies the lazy initialization logic.
    *
@@ -65,7 +74,7 @@ public T apply() {
       function.apply();
       function = () -> {};
       this.doOnceFunction.apply();
-      for (LambdaFunction func : functions) {
+      for (LambdaFunction func : getFunctions()) {
         func.apply();
       }
       this.initialized = true;
@@ -73,6 +82,13 @@ public T apply() {
     return (T) this;
   }
 
+  private Set<LambdaFunction> getFunctions() {
+    if (isNull(this.functions)) {
+      this.functions = new HashSet<>();
+    }
+    return functions;
+  }
+
   /**
    * Executes the given LambdaFunction if the object has already been initialized.
    *
@@ -99,7 +115,7 @@ public T whenInitialized(LambdaFunction... functions) {
         func.apply();
       }
     } else {
-      this.functions.addAll(Arrays.asList(functions));
+      getFunctions().addAll(Arrays.asList(functions));
     }
     return (T) this;
   }
@@ -115,7 +131,7 @@ public T doOnce(LambdaFunction function) {
     if (isInitialized()) {
       function.apply();
     } else {
-      doOnce.add(function);
+      getDoOnce().add(function);
     }
     return (T) this;
   }
@@ -127,10 +143,17 @@ public T doOnce(LambdaFunction function) {
    * @return This BaseLazyInitializer instance.
    */
   public T onReset(LambdaFunction function) {
-    doOnReset.add(function);
+    getDoOnReset().add(function);
     return (T) this;
   }
 
+  private Set<LambdaFunction> getDoOnReset() {
+    if (isNull(doOnReset)) {
+      this.doOnReset = new HashSet<>();
+    }
+    return doOnReset;
+  }
+
   /**
    * Checks if the object has been initialized.
    *
@@ -149,7 +172,7 @@ public void reset() {
       this.function = this.originalFunction;
       initDoOnce();
       this.initialized = false;
-      for (LambdaFunction func : doOnReset) {
+      for (LambdaFunction func : getDoOnReset()) {
         func.apply();
       }
     }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/Domino.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/Domino.java
index 56f4a54ca..249db06b6 100644
--- a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/Domino.java
+++ b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/Domino.java
@@ -15,7 +15,6 @@
  */
 package org.dominokit.domino.ui.utils;
 
-import static org.dominokit.domino.ui.utils.ElementsFactory.elements;
 import static org.dominokit.domino.ui.utils.SVGFactory.svgElements;
 
 import elemental2.dom.Element;
@@ -31,8 +30,31 @@
 
 public class Domino implements DominoCss {
 
+  public static ElementsFactory factory = ElementsFactory.elements;
+
   private Domino() {}
 
+  public static void withFactory(ElementsFactory replacement, Runnable runnable) {
+    factory = replacement;
+    try {
+      runnable.run();
+    } finally {
+      factory = ElementsFactory.elements;
+    }
+  }
+
+  public static void withFactory(ElementsFactory replacement, AsyncRunnable runnable) {
+    factory = replacement;
+    try {
+      runnable.run(
+          () -> {
+            factory = ElementsFactory.elements;
+          });
+    } finally {
+      factory = ElementsFactory.elements;
+    }
+  }
+
   /**
    * Retrieves an element by its unique identifier.
    *
@@ -40,7 +62,7 @@ private Domino() {}
    * @return An optional containing the element, or empty if not found.
    */
   public static Optional<DominoElement<Element>> byId(String id) {
-    return elements.byId(id);
+    return factory.byId(id);
   }
 
   /**
@@ -52,7 +74,7 @@ public static Optional<DominoElement<Element>> byId(String id) {
    * @return A new instance of the specified element type.
    */
   public static <E extends Element> E create(String element, Class<E> type) {
-    return elements.create(element, type);
+    return factory.create(element, type);
   }
 
   /**
@@ -63,7 +85,7 @@ public static <E extends Element> E create(String element, Class<E> type) {
    * @return A DominoElement wrapping the existing element.
    */
   public static <E extends Element> DominoElement<E> elementOf(E element) {
-    return elements.elementOf(element);
+    return factory.elementOf(element);
   }
 
   /**
@@ -75,7 +97,7 @@ public static <E extends Element> DominoElement<E> elementOf(E element) {
    * @return A DominoElement wrapping the IsElement.
    */
   public static <T extends Element, E extends IsElement<T>> DominoElement<T> elementOf(E element) {
-    return elements.elementOf(element);
+    return factory.elementOf(element);
   }
 
   /**
@@ -84,7 +106,7 @@ public static <T extends Element, E extends IsElement<T>> DominoElement<T> eleme
    * @return A unique identifier.
    */
   public static String getUniqueId() {
-    return elements.getUniqueId();
+    return factory.getUniqueId();
   }
 
   /**
@@ -94,7 +116,7 @@ public static String getUniqueId() {
    * @return A unique identifier with the specified prefix.
    */
   public static String getUniqueId(String prefix) {
-    return elements.getUniqueId(prefix);
+    return factory.getUniqueId(prefix);
   }
 
   /**
@@ -103,7 +125,7 @@ public static String getUniqueId(String prefix) {
    * @return A new BodyElement.
    */
   public static BodyElement body() {
-    return elements.body();
+    return factory.body();
   }
 
   /**
@@ -112,7 +134,7 @@ public static BodyElement body() {
    * @return A new PictureElement.
    */
   public static PictureElement picture() {
-    return elements.picture();
+    return factory.picture();
   }
 
   /**
@@ -121,7 +143,7 @@ public static PictureElement picture() {
    * @return A new AddressElement.
    */
   public static AddressElement address() {
-    return elements.address();
+    return factory.address();
   }
 
   /**
@@ -130,7 +152,7 @@ public static AddressElement address() {
    * @return A new ArticleElement.
    */
   public static ArticleElement article() {
-    return elements.article();
+    return factory.article();
   }
 
   /**
@@ -139,7 +161,7 @@ public static ArticleElement article() {
    * @return A new AsideElement.
    */
   public static AsideElement aside() {
-    return elements.aside();
+    return factory.aside();
   }
 
   /**
@@ -148,7 +170,7 @@ public static AsideElement aside() {
    * @return A new FooterElement.
    */
   public static FooterElement footer() {
-    return elements.footer();
+    return factory.footer();
   }
 
   /**
@@ -158,7 +180,7 @@ public static FooterElement footer() {
    * @return A new HeadingElement with the specified level.
    */
   public static HeadingElement h(int n) {
-    return elements.h(n);
+    return factory.h(n);
   }
 
   /**
@@ -167,7 +189,7 @@ public static HeadingElement h(int n) {
    * @return A new HeaderElement.
    */
   public static HeaderElement header() {
-    return elements.header();
+    return factory.header();
   }
 
   /**
@@ -176,7 +198,7 @@ public static HeaderElement header() {
    * @return A new HGroupElement.
    */
   public static HGroupElement hgroup() {
-    return elements.hgroup();
+    return factory.hgroup();
   }
 
   /**
@@ -185,7 +207,7 @@ public static HGroupElement hgroup() {
    * @return A new NavElement.
    */
   public static NavElement nav() {
-    return elements.nav();
+    return factory.nav();
   }
 
   /**
@@ -194,7 +216,7 @@ public static NavElement nav() {
    * @return A new SectionElement.
    */
   public static SectionElement section() {
-    return elements.section();
+    return factory.section();
   }
 
   /**
@@ -203,7 +225,7 @@ public static SectionElement section() {
    * @return A new BlockquoteElement.
    */
   public static BlockquoteElement blockquote() {
-    return elements.blockquote();
+    return factory.blockquote();
   }
 
   /**
@@ -212,7 +234,7 @@ public static BlockquoteElement blockquote() {
    * @return A new DDElement.
    */
   public static DDElement dd() {
-    return elements.dd();
+    return factory.dd();
   }
 
   /**
@@ -221,7 +243,7 @@ public static DDElement dd() {
    * @return A new DivElement.
    */
   public static DivElement div() {
-    return elements.div();
+    return factory.div();
   }
 
   /**
@@ -230,7 +252,7 @@ public static DivElement div() {
    * @return A new DListElement.
    */
   public static DListElement dl() {
-    return elements.dl();
+    return factory.dl();
   }
 
   /**
@@ -239,7 +261,7 @@ public static DListElement dl() {
    * @return A new DTElement.
    */
   public static DTElement dt() {
-    return elements.dt();
+    return factory.dt();
   }
 
   /**
@@ -248,7 +270,7 @@ public static DTElement dt() {
    * @return A new FigCaptionElement.
    */
   public static FigCaptionElement figcaption() {
-    return elements.figcaption();
+    return factory.figcaption();
   }
 
   /**
@@ -257,7 +279,7 @@ public static FigCaptionElement figcaption() {
    * @return A new FigureElement.
    */
   public static FigureElement figure() {
-    return elements.figure();
+    return factory.figure();
   }
 
   /**
@@ -266,7 +288,7 @@ public static FigureElement figure() {
    * @return A new HRElement.
    */
   public static HRElement hr() {
-    return elements.hr();
+    return factory.hr();
   }
 
   /**
@@ -275,7 +297,7 @@ public static HRElement hr() {
    * @return A new LIElement.
    */
   public static LIElement li() {
-    return elements.li();
+    return factory.li();
   }
 
   /**
@@ -285,7 +307,7 @@ public static LIElement li() {
    */
   @SuppressWarnings("all")
   public static MainElement main() {
-    return elements.main();
+    return factory.main();
   }
 
   /**
@@ -294,7 +316,7 @@ public static MainElement main() {
    * @return A new OListElement.
    */
   public static OListElement ol() {
-    return elements.ol();
+    return factory.ol();
   }
 
   /**
@@ -303,7 +325,7 @@ public static OListElement ol() {
    * @return A new ParagraphElement.
    */
   public static ParagraphElement p() {
-    return elements.p();
+    return factory.p();
   }
 
   /**
@@ -313,7 +335,7 @@ public static ParagraphElement p() {
    * @return A new ParagraphElement with the specified text content.
    */
   public static ParagraphElement p(String text) {
-    return elements.p(text);
+    return factory.p(text);
   }
 
   /**
@@ -322,7 +344,7 @@ public static ParagraphElement p(String text) {
    * @return A new PreElement.
    */
   public static PreElement pre() {
-    return elements.pre();
+    return factory.pre();
   }
 
   /**
@@ -331,7 +353,7 @@ public static PreElement pre() {
    * @return A new UListElement.
    */
   public static UListElement ul() {
-    return elements.ul();
+    return factory.ul();
   }
 
   /**
@@ -340,7 +362,7 @@ public static UListElement ul() {
    * @return A new AnchorElement.
    */
   public static AnchorElement a() {
-    return elements.a();
+    return factory.a();
   }
 
   /**
@@ -350,7 +372,7 @@ public static AnchorElement a() {
    * @return A new AnchorElement with the specified href.
    */
   public static AnchorElement a(String href) {
-    return elements.a(href);
+    return factory.a(href);
   }
 
   /**
@@ -361,7 +383,7 @@ public static AnchorElement a(String href) {
    * @return A new AnchorElement with the specified href and target.
    */
   public static AnchorElement a(String href, String target) {
-    return elements.a(href, target);
+    return factory.a(href, target);
   }
 
   /**
@@ -370,7 +392,7 @@ public static AnchorElement a(String href, String target) {
    * @return A new ABBRElement.
    */
   public static ABBRElement abbr() {
-    return elements.abbr();
+    return factory.abbr();
   }
 
   /**
@@ -379,7 +401,7 @@ public static ABBRElement abbr() {
    * @return A new BElement.
    */
   public static BElement b() {
-    return elements.b();
+    return factory.b();
   }
 
   /**
@@ -388,7 +410,7 @@ public static BElement b() {
    * @return A new BRElement.
    */
   public static BRElement br() {
-    return elements.br();
+    return factory.br();
   }
 
   /**
@@ -397,7 +419,7 @@ public static BRElement br() {
    * @return A new CiteElement.
    */
   public static CiteElement cite() {
-    return elements.cite();
+    return factory.cite();
   }
 
   /**
@@ -406,7 +428,7 @@ public static CiteElement cite() {
    * @return A new CodeElement.
    */
   public static CodeElement code() {
-    return elements.code();
+    return factory.code();
   }
 
   /**
@@ -415,7 +437,7 @@ public static CodeElement code() {
    * @return A new DFNElement.
    */
   public static DFNElement dfn() {
-    return elements.dfn();
+    return factory.dfn();
   }
 
   /**
@@ -424,7 +446,7 @@ public static DFNElement dfn() {
    * @return A new EMElement.
    */
   public static EMElement em() {
-    return elements.em();
+    return factory.em();
   }
 
   /**
@@ -433,7 +455,7 @@ public static EMElement em() {
    * @return A new IElement.
    */
   public static IElement i() {
-    return elements.i();
+    return factory.i();
   }
 
   /**
@@ -442,7 +464,7 @@ public static IElement i() {
    * @return A new KBDElement.
    */
   public static KBDElement kbd() {
-    return elements.kbd();
+    return factory.kbd();
   }
 
   /**
@@ -451,7 +473,7 @@ public static KBDElement kbd() {
    * @return A new MarkElement.
    */
   public static MarkElement mark() {
-    return elements.mark();
+    return factory.mark();
   }
 
   /**
@@ -460,7 +482,7 @@ public static MarkElement mark() {
    * @return A new QuoteElement.
    */
   public static QuoteElement q() {
-    return elements.q();
+    return factory.q();
   }
 
   /**
@@ -469,7 +491,7 @@ public static QuoteElement q() {
    * @return A new SmallElement.
    */
   public static SmallElement small() {
-    return elements.small();
+    return factory.small();
   }
 
   /**
@@ -478,7 +500,7 @@ public static SmallElement small() {
    * @return A new SpanElement.
    */
   public static SpanElement span() {
-    return elements.span();
+    return factory.span();
   }
 
   /**
@@ -487,7 +509,7 @@ public static SpanElement span() {
    * @return A new StrongElement.
    */
   public static StrongElement strong() {
-    return elements.strong();
+    return factory.strong();
   }
 
   /**
@@ -496,7 +518,7 @@ public static StrongElement strong() {
    * @return A new SubElement.
    */
   public static SubElement sub() {
-    return elements.sub();
+    return factory.sub();
   }
 
   /**
@@ -505,7 +527,7 @@ public static SubElement sub() {
    * @return A new SupElement.
    */
   public static SupElement sup() {
-    return elements.sup();
+    return factory.sup();
   }
 
   /**
@@ -514,7 +536,7 @@ public static SupElement sup() {
    * @return A new TimeElement.
    */
   public static TimeElement time() {
-    return elements.time();
+    return factory.time();
   }
 
   /**
@@ -523,7 +545,7 @@ public static TimeElement time() {
    * @return A new UElement.
    */
   public static UElement u() {
-    return elements.u();
+    return factory.u();
   }
 
   /**
@@ -532,7 +554,7 @@ public static UElement u() {
    * @return A new VarElement.
    */
   public static VarElement var() {
-    return elements.var();
+    return factory.var();
   }
 
   /**
@@ -541,7 +563,7 @@ public static VarElement var() {
    * @return A new WBRElement.
    */
   public static WBRElement wbr() {
-    return elements.wbr();
+    return factory.wbr();
   }
 
   /**
@@ -550,7 +572,7 @@ public static WBRElement wbr() {
    * @return A new AreaElement.
    */
   public static AreaElement area() {
-    return elements.area();
+    return factory.area();
   }
 
   /**
@@ -559,7 +581,7 @@ public static AreaElement area() {
    * @return A new AudioElement.
    */
   public static AudioElement audio() {
-    return elements.audio();
+    return factory.audio();
   }
 
   /**
@@ -568,7 +590,7 @@ public static AudioElement audio() {
    * @return A new ImageElement.
    */
   public static ImageElement img() {
-    return elements.img();
+    return factory.img();
   }
 
   /**
@@ -578,7 +600,7 @@ public static ImageElement img() {
    * @return A new ImageElement with the specified source URL.
    */
   public static ImageElement img(String src) {
-    return elements.img(src);
+    return factory.img(src);
   }
 
   /**
@@ -587,7 +609,7 @@ public static ImageElement img(String src) {
    * @return A new MapElement.
    */
   public static MapElement map() {
-    return elements.map();
+    return factory.map();
   }
 
   /**
@@ -596,7 +618,7 @@ public static MapElement map() {
    * @return A new TrackElement.
    */
   public static TrackElement track() {
-    return elements.track();
+    return factory.track();
   }
 
   /**
@@ -605,7 +627,7 @@ public static TrackElement track() {
    * @return A new VideoElement.
    */
   public static VideoElement video() {
-    return elements.video();
+    return factory.video();
   }
 
   /**
@@ -614,7 +636,7 @@ public static VideoElement video() {
    * @return A new CanvasElement.
    */
   public static CanvasElement canvas() {
-    return elements.canvas();
+    return factory.canvas();
   }
 
   /**
@@ -623,7 +645,7 @@ public static CanvasElement canvas() {
    * @return A new EmbedElement.
    */
   public static EmbedElement embed() {
-    return elements.embed();
+    return factory.embed();
   }
 
   /**
@@ -632,7 +654,7 @@ public static EmbedElement embed() {
    * @return A new IFrameElement.
    */
   public static IFrameElement iframe() {
-    return elements.iframe();
+    return factory.iframe();
   }
 
   /**
@@ -642,7 +664,7 @@ public static IFrameElement iframe() {
    * @return A new IFrameElement with the specified source URL.
    */
   public static IFrameElement iframe(String src) {
-    return elements.iframe(src);
+    return factory.iframe(src);
   }
 
   /**
@@ -651,7 +673,7 @@ public static IFrameElement iframe(String src) {
    * @return A new ObjectElement.
    */
   public static ObjectElement object() {
-    return elements.object();
+    return factory.object();
   }
 
   /**
@@ -660,7 +682,7 @@ public static ObjectElement object() {
    * @return A new ParamElement.
    */
   public static ParamElement param() {
-    return elements.param();
+    return factory.param();
   }
 
   /**
@@ -669,7 +691,7 @@ public static ParamElement param() {
    * @return A new SourceElement.
    */
   public static SourceElement source() {
-    return elements.source();
+    return factory.source();
   }
 
   /**
@@ -678,7 +700,7 @@ public static SourceElement source() {
    * @return A new NoScriptElement.
    */
   public static NoScriptElement noscript() {
-    return elements.noscript();
+    return factory.noscript();
   }
 
   /**
@@ -687,7 +709,7 @@ public static NoScriptElement noscript() {
    * @return A new ScriptElement.
    */
   public static ScriptElement script() {
-    return elements.script();
+    return factory.script();
   }
 
   /**
@@ -696,7 +718,7 @@ public static ScriptElement script() {
    * @return A new DelElement.
    */
   public static DelElement del() {
-    return elements.del();
+    return factory.del();
   }
 
   /**
@@ -705,7 +727,7 @@ public static DelElement del() {
    * @return A new InsElement.
    */
   public static InsElement ins() {
-    return elements.ins();
+    return factory.ins();
   }
 
   /**
@@ -714,7 +736,7 @@ public static InsElement ins() {
    * @return A new TableCaptionElement.
    */
   public static TableCaptionElement caption() {
-    return elements.caption();
+    return factory.caption();
   }
 
   /**
@@ -723,7 +745,7 @@ public static TableCaptionElement caption() {
    * @return A new ColElement.
    */
   public static ColElement col() {
-    return elements.col();
+    return factory.col();
   }
 
   /**
@@ -732,7 +754,7 @@ public static ColElement col() {
    * @return A new ColGroupElement.
    */
   public static ColGroupElement colgroup() {
-    return elements.colgroup();
+    return factory.colgroup();
   }
 
   /**
@@ -741,7 +763,7 @@ public static ColGroupElement colgroup() {
    * @return A new TableElement.
    */
   public static TableElement table() {
-    return elements.table();
+    return factory.table();
   }
 
   /**
@@ -750,7 +772,7 @@ public static TableElement table() {
    * @return A new TBodyElement.
    */
   public static TBodyElement tbody() {
-    return elements.tbody();
+    return factory.tbody();
   }
 
   /**
@@ -759,7 +781,7 @@ public static TBodyElement tbody() {
    * @return A new TDElement.
    */
   public static TDElement td() {
-    return elements.td();
+    return factory.td();
   }
 
   /**
@@ -768,7 +790,7 @@ public static TDElement td() {
    * @return A new TFootElement.
    */
   public static TFootElement tfoot() {
-    return elements.tfoot();
+    return factory.tfoot();
   }
 
   /**
@@ -777,7 +799,7 @@ public static TFootElement tfoot() {
    * @return A new THElement.
    */
   public static THElement th() {
-    return elements.th();
+    return factory.th();
   }
 
   /**
@@ -786,7 +808,7 @@ public static THElement th() {
    * @return A new THeadElement.
    */
   public static THeadElement thead() {
-    return elements.thead();
+    return factory.thead();
   }
 
   /**
@@ -795,7 +817,7 @@ public static THeadElement thead() {
    * @return A new TableRowElement.
    */
   public static TableRowElement tr() {
-    return elements.tr();
+    return factory.tr();
   }
 
   /**
@@ -804,7 +826,7 @@ public static TableRowElement tr() {
    * @return A new ButtonElement.
    */
   public static ButtonElement button() {
-    return elements.button();
+    return factory.button();
   }
 
   /**
@@ -813,7 +835,7 @@ public static ButtonElement button() {
    * @return A new DataListElement.
    */
   public static DataListElement datalist() {
-    return elements.datalist();
+    return factory.datalist();
   }
 
   /**
@@ -822,7 +844,7 @@ public static DataListElement datalist() {
    * @return A new FieldSetElement.
    */
   public static FieldSetElement fieldset() {
-    return elements.fieldset();
+    return factory.fieldset();
   }
 
   /**
@@ -831,7 +853,7 @@ public static FieldSetElement fieldset() {
    * @return A new FormElement.
    */
   public static FormElement form() {
-    return elements.form();
+    return factory.form();
   }
 
   /**
@@ -841,7 +863,7 @@ public static FormElement form() {
    * @return A new InputElement with the specified input type.
    */
   public static InputElement input(InputType type) {
-    return elements.input(type);
+    return factory.input(type);
   }
 
   /**
@@ -851,7 +873,7 @@ public static InputElement input(InputType type) {
    * @return A new InputElement with the specified input type.
    */
   public static InputElement input(String type) {
-    return elements.input(type);
+    return factory.input(type);
   }
 
   /**
@@ -860,7 +882,7 @@ public static InputElement input(String type) {
    * @return A new LabelElement.
    */
   public static LabelElement label() {
-    return elements.label();
+    return factory.label();
   }
 
   /**
@@ -870,7 +892,7 @@ public static LabelElement label() {
    * @return A new LabelElement with the specified text content.
    */
   public static LabelElement label(String text) {
-    return elements.label(text);
+    return factory.label(text);
   }
 
   /**
@@ -879,7 +901,7 @@ public static LabelElement label(String text) {
    * @return A new LegendElement.
    */
   public static LegendElement legend() {
-    return elements.legend();
+    return factory.legend();
   }
 
   /**
@@ -888,7 +910,7 @@ public static LegendElement legend() {
    * @return A new MeterElement.
    */
   public static MeterElement meter() {
-    return elements.meter();
+    return factory.meter();
   }
 
   /**
@@ -897,7 +919,7 @@ public static MeterElement meter() {
    * @return A new OptGroupElement.
    */
   public static OptGroupElement optgroup() {
-    return elements.optgroup();
+    return factory.optgroup();
   }
 
   /**
@@ -906,7 +928,7 @@ public static OptGroupElement optgroup() {
    * @return A new OptionElement.
    */
   public static OptionElement option() {
-    return elements.option();
+    return factory.option();
   }
 
   /**
@@ -915,7 +937,7 @@ public static OptionElement option() {
    * @return A new OutputElement.
    */
   public static OutputElement output() {
-    return elements.output();
+    return factory.output();
   }
 
   /**
@@ -924,7 +946,7 @@ public static OutputElement output() {
    * @return A new ProgressElement.
    */
   public static ProgressElement progress() {
-    return elements.progress();
+    return factory.progress();
   }
 
   /**
@@ -933,7 +955,7 @@ public static ProgressElement progress() {
    * @return A new SelectElement.
    */
   public static SelectElement select_() {
-    return elements.select_();
+    return factory.select_();
   }
 
   /**
@@ -942,7 +964,7 @@ public static SelectElement select_() {
    * @return A new TextAreaElement.
    */
   public static TextAreaElement textarea() {
-    return elements.textarea();
+    return factory.textarea();
   }
 
   /**
@@ -951,7 +973,7 @@ public static TextAreaElement textarea() {
    * @return A new SvgElement.
    */
   public static SvgElement svg() {
-    return elements.svg();
+    return factory.svg();
   }
 
   /**
@@ -963,7 +985,7 @@ public static SvgElement svg() {
    * @return A new SvgElement of the specified type.
    */
   public static <T extends SVGElement> T svg(String tag, Class<T> type) {
-    return elements.svg(tag, type);
+    return factory.svg(tag, type);
   }
 
   /**
@@ -975,7 +997,7 @@ public static <T extends SVGElement> T svg(String tag, Class<T> type) {
    * @return A new CircleElement with the specified attributes.
    */
   public static CircleElement circle(double cx, double cy, double r) {
-    return elements.circle(cx, cy, r);
+    return factory.circle(cx, cy, r);
   }
 
   /**
@@ -988,7 +1010,7 @@ public static CircleElement circle(double cx, double cy, double r) {
    * @return A new LineElement with the specified attributes.
    */
   public static LineElement line(double x1, double y1, double x2, double y2) {
-    return elements.line(x1, y1, x2, y2);
+    return factory.line(x1, y1, x2, y2);
   }
 
   /**
@@ -997,7 +1019,7 @@ public static LineElement line(double x1, double y1, double x2, double y2) {
    * @return A new Text element.
    */
   public static Text text() {
-    return elements.text();
+    return factory.text();
   }
 
   /**
@@ -1007,7 +1029,7 @@ public static Text text() {
    * @return A new Text element with the specified content.
    */
   public static Text text(String content) {
-    return elements.text(content);
+    return factory.text(content);
   }
 
   /**
diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css
index aaf020a34..b70c40984 100644
--- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css
+++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css
@@ -56,11 +56,19 @@
     background-color: var(--dui-datatable-even-bg-color);
 }
 
-.dui-datatable-striped tbody .dui-datatable-row:nth-child(even) {
+.dui-datatable-striped tbody .dui-datatable-row:nth-child(even):not(.dui-odd):not(.dui-even) {
     background-color: var(--dui-datatable-even-bg-color);
 }
 
-.dui-datatable-striped tbody .dui-datatable-row:nth-child(odd) {
+.dui-datatable-striped tbody .dui-datatable-row:nth-child(odd):not(.dui-odd):not(.dui-even) {
+    background-color: var(--dui-datatable-odd-bg-color);
+}
+
+.dui-datatable-striped tbody .dui-datatable-row.dui-even {
+    background-color: var(--dui-datatable-even-bg-color);
+}
+
+.dui-datatable-striped tbody .dui-datatable-row.dui-odd {
     background-color: var(--dui-datatable-odd-bg-color);
 }
 
diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-forms.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-forms.css
index b70019e76..1d3a608b4 100644
--- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-forms.css
+++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-forms.css
@@ -388,6 +388,12 @@ textarea.dui-field-input {
     outline-offset: var(--dui-form-field-checkbox-outline-offset);
 }
 
+.dui-disable-transition .dui-form-checkbox .dui-checkbox-label:before,
+.dui-form-checkbox .dui-checkbox-label.dui-disable-transition :before,
+.dui-form-checkbox.dui-disable-transition  .dui-checkbox-label:before {
+    transition: none;
+}
+
 .dui-form-checkbox .dui-checkbox-label:before {
     content: '';
     position: absolute;
@@ -416,6 +422,16 @@ textarea.dui-field-input {
     background-color: var(--dui-accent, var(--dui-form-field-checkbox-square-filled-background));
 }
 
+.dui-disable-transition .dui-form-checkbox.dui-form-checkbox-filled .dui-checkbox-label:after,
+.dui-form-checkbox.dui-form-checkbox-filled.dui-disable-transition .dui-checkbox-label:after,
+.dui-form-checkbox.dui-form-checkbox-filled .dui-checkbox-label.dui-disable-transition:after,
+.dui-disable-transition .dui-form-checkbox .dui-checkbox-label:after,
+.dui-form-checkbox.dui-disable-transition .dui-checkbox-label:after,
+.dui-form-checkbox .dui-checkbox-label.dui-disable-transition :after {
+    transition: none;
+}
+
+
 .dui-form-checkbox.dui-form-checkbox-filled .dui-checkbox-label:after,
 .dui-form-checkbox .dui-checkbox-label:after {
     content: '';