feat(log): set direction

source/components/state/log.mjs

@@ -81,6 +81,8 @@ class Log extends CustomElement {
      * @property {string} templates.main Main template
      * @property {Object} labels Labels
      * @property {string} labels.nothingToReport Label for empty state
+     * @property {Object} classes Classes
+     * @property {string} classes.direction Direction of the log: ascending or descending
      * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
      */
     get defaults() {
@@ -93,8 +95,8 @@ class Log extends CustomElement {
                 nothingToReport: "There is nothing to report yet.",
             },
 
-            classes: {
-                direction: "vertical",
+            features: {
+                direction: "ascending",
             },
 
             updateFrequency: 10000,
@@ -123,8 +125,7 @@ class Log extends CustomElement {
      * @return {Log}
      */
     clear() {
-        this[logElementSymbol].innerHTML = "";
-        this[emptyStateElementSymbol].style.display = "block";
+        this[logElementSymbol].setOption("entries", []);
         return this;
     }
 
@@ -141,7 +142,11 @@ class Log extends CustomElement {
         }
 
         const entries = this.getOption("entries");
+        if (this.getOption("features.direction") === "ascending") {
+            entries.unshift(entry);
+        } else {
             entries.push(entry);
+        }
 
         /** this field is not used, but triggers a change event */
         this.setOption("length", entries.length - 1);

source/components/state/state.mjs

@@ -25,7 +25,7 @@ export { State };
 /**
  * A state component
  *
- * @fragments /fragments/components/state/state/
+ * @fragments /fragments/components/state/state
  *
  * @example /examples/components/state/state-simple
  *