@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/dist/elements/base.js

@@ -11,6 +11,7 @@ import { Events } from "../modules/events.js";
 import { Themes } from "../modules/themes.js";
 import { GradientType } from "../types/gradient.js";
 import { Statics } from "../modules/statics.js";
+import { register_element } from "./register_element.js";
 // Vars.
 const elements_with_width_attribute = [
     'canvas',
@@ -29,9 +30,6 @@ const element_href_descriptor = Object.getOwnPropertyDescriptor(HTMLAnchorElemen
 const element_src_descriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src'); // gives full URL
 const element_id_descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'id'); // instead of getAttribute("id")
 const element_value_descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-// @ts-ignore
-// export interface VBaseElementInterface extends HTMLElement, HTMLCanvasElement, HTMLFormElement, HTMLInputElement, HTMLImageElement, VElementExtensions {}
-// export interface VBaseElementInterface {}
 // Base element.
 // @note: this.tagName can not be used since they have different values on safari and other browsers.
 /*  @docs:
@@ -42,33 +40,80 @@ const element_value_descriptor = Object.getOwnPropertyDescriptor(HTMLInputElemen
 */
 // export class VElement extends (HTMLElement as {new(): VBaseElementInterface, prototype: VBaseElementInterface}) {
 export class VElement extends HTMLElement {
+    // ---------------------------------------------------------
+    // Attributes.
+    // @warning do not use default values since they will be put inside the constructor, which should remain empty, define them in _init_velement() instead.
+    __is_velement = true;
+    static element_tag = ""; // must also be static.
+    static default_style = {};
+    static default_attributes = {};
+    static default_events = {};
+    rendered;
+    element_name;
+    base_element_name;
+    remove_focus;
+    _v_children;
+    _element_display;
+    _is_connected;
+    _on_append_callback;
+    _assign_to_parent_as;
+    _parent;
+    _side_by_side_basis;
+    _animate_timeout;
+    _is_button_disabled;
+    _timeouts;
+    _on_window_resize_timer;
+    _abs_parent;
+    _pseudo_stylesheets;
+    _on_resize_rule_evals;
+    _observing_on_resize;
+    _observing_on_render;
+    _on_resize_callbacks;
+    _on_render_callbacks;
+    _on_theme_updates;
+    _on_mouse_leave_callback;
+    _on_mouse_enter_callback;
+    _on_shortcut_time;
+    _on_shortcut_key;
+    _on_shortcut_keycode;
+    _on_keypress_set;
+    _on_enter_callback;
+    _on_escape_callback;
+    _on_appear_callbacks;
+    // public _context_menu?: ContextMenuElement;
+    _media_queries;
+    _checked; // {get(x: any): void, set(x: any, y: any): void};
+    _disabled; // {get(x: any): void, set(x: any, y: any): void};
+    _selected; // {get(x: any): void, set(x: any, y: any): void};
+    _href; // {get(x: any): void, set(x: any, y: any): void};
+    _src; // {get(x: any): void, set(x: any, y: any): void};
+    _id; // {get(x: any): void, set(x: any, y: any): void};
+    _value; // {get(x: any): void, set(x: any, y: any): void};
     // ---------------------------------------------------------
     // Constructor.
     constructor() {
         // @warning do not use the constructor to define any member props, use _init_velement() instead.
         super();
-        // Macros
-        // ---------------------------------------------------------
-        // Attributes.
-        // @warning do not use default values since they will be put inside the constructor, which should remain empty, define them in _init_velement() instead.
-        this.__is_velement = true;
     }
-    // @warning this method should only be used by the direct types declared in this file e.g. VSpanElement.
-    _init_velement(args) {
+    /**
+     * @warning This method should only be used by the direct types declared in this file e.g. VSpanElement.
+     * @note This method is always called in the constructor of the base elements defined in VElementTagMap.
+     */
+    _init_sys_velement(args) {
         // Errs.
-        if (name == null && !args.derived.name.endsWith("Element")) {
-            throw new Error("Attribute 'args.name' should be defined when the derived class name does not end with 'Element'.");
-        }
-        else if (args.name == null) {
-            args.name = args.derived.name.slice(0, -7);
+        if (!args.derived || !args.derived.element_name) {
+            throw new Error("Static element attribute 'args.derived.element_name' should always be defined, create static attribute \"element_name: string\" and assign the name of the class to this attribute.");
         }
+        // if (!args.name) {
+        //     throw new Error("Attribute 'args.name' should always be defined.")
+        // }
         // Attributes.
         this._is_connected = false;
         // Defaults.
         this.__is_velement = true;
         this.rendered = false;
-        this.element_type = args.name;
-        this.base_element_type = args.name;
+        this.element_name = args.derived.element_name;
+        this.base_element_name = args.derived.element_name;
         this.remove_focus = super.blur;
         this._v_children = [];
         this._element_display = "block";
@@ -144,17 +189,24 @@ export class VElement extends HTMLElement {
             }
         }
     }
-    // @note: this function is for classes derived from StackElement for example, so for classes that are not directly derived from the types defined in this file, e.g. VSpanElement.
-    _init_derived(args) {
+    /**
+     * @warning Any VElement (a derived class of VElementTagMap) must call this method in its constructor.
+     */
+    _init(args) {
         // Set name.
-        if (args.name == null && !args.derived.name.endsWith("Element")) {
-            throw new Error("Attribute 'args.name' should be defined when the derived class name does not end with 'Element'.");
-        }
-        else if (args.name == null) {
-            args.name = args.derived.name.slice(0, -7);
+        if (!args.derived || !args.derived.element_name) {
+            throw new Error("Static element attribute 'args.derived.element_name' should always be defined, create static attribute \"element_name: string\" and assign the name of the class to this attribute.");
         }
+        // if (!args.name) {
+        //     throw new Error("Attribute 'args.name' should always be defined.")
+        // }
+        // if (args.name == null && !args.derived.name.endsWith("Element")) {
+        //     throw new Error("Attribute 'args.name' should be defined when the derived class name does not end with 'Element'.")
+        // } else if (args.name == null) {
+        //     args.name = args.derived.name.slice(0, -7);
+        // }
         // Set type/name, keep base type the same.
-        this.element_type = args.name;
+        this.element_name = args.derived.element_name;
         // Constructed by html code.
         if (this.hasAttribute !== undefined && this.hasAttribute("created_by_html")) {
         }
@@ -221,7 +273,7 @@ export class VElement extends HTMLElement {
     clone(clone_children = true) {
         // @ts-ignore
         const clone = new this.constructor();
-        if (clone.element_type !== undefined) {
+        if (clone.element_name != null) {
             clone.inner_html("");
         }
         const styles = window.getComputedStyle(this);
@@ -254,7 +306,7 @@ export class VElement extends HTMLElement {
         if (clone_children && this.childNodes != undefined) {
             for (let i = 0; i < this.childNodes.length; i++) {
                 const child = this.childNodes[i];
-                if (isVElement(child) && child.element_type !== undefined) {
+                if (isVElement(child) && child.element_name != null) {
                     clone.appendChild(child.clone());
                 }
                 else {
@@ -324,9 +376,10 @@ export class VElement extends HTMLElement {
      * @return:
      *     @description Returns the modified filter string or null if the input filter was null.
      */
-    edit_filter_wrapper(filter, type, to = null) {
+    edit_filter_wrapper(filter, type, to = undefined) {
+        const to_str = (typeof to === "number") ? to.toString() : (to ?? "");
         if (filter == null) {
-            return to ?? "";
+            return to_str;
         }
         const pattern = new RegExp(`${type}\\([^)]*\\)\\s*`, "g");
         if (pattern.test(filter)) {
@@ -334,11 +387,11 @@ export class VElement extends HTMLElement {
                 return pattern[1];
             }
             else {
-                return filter.replace(pattern, to);
+                return filter.replace(pattern, to_str);
             }
         }
         else if (to != null) {
-            return `${filter} ${to}`;
+            return `${filter} ${to_str}`;
         }
         return filter;
     }
@@ -421,10 +474,8 @@ export class VElement extends HTMLElement {
                     this.append(...child);
                 }
                 // VWeb element.
-                else if (isVElement(child) && child.element_type != null) {
-                    if (child.element_type == "ForEach" ||
-                        child.element_type == "If" ||
-                        child.element_type == "IfDeviceWith") {
+                else if (isVElement(child) && child.element_name != null) {
+                    if (child.element_name == "ForEachElement") {
                         child.append_children_to(this, this._on_append_callback);
                     }
                     else {
@@ -484,11 +535,9 @@ export class VElement extends HTMLElement {
                     this.zstack_append(...child);
                 }
                 // VWeb element.
-                else if (isVElement(child) && child.element_type != null) {
+                else if (isVElement(child) && child.element_name != null) {
                     child.style.gridArea = "1 / 1 / 2 / 2";
-                    if (child.element_type == "ForEach" ||
-                        child.element_type == "If" ||
-                        child.element_type == "IfDeviceWith") {
+                    if (child.element_name == "ForEachElement") {
                         child.append_children_to(this, this._on_append_callback);
                     }
                     else {
@@ -507,7 +556,7 @@ export class VElement extends HTMLElement {
                     this.append(child(this));
                 }
                 // Node element.
-                else if (child instanceof Node || child instanceof HTMLElement) {
+                else if ((child instanceof Node) || child instanceof HTMLElement) {
                     if (child instanceof HTMLElement) {
                         child.style.gridArea = "1 / 1 / 2 / 2";
                     }
@@ -566,7 +615,7 @@ export class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     append_children_to(parent, on_append_callback) {
-        if (isVElement(parent) && this.base_element_type === "VirtualScroller") {
+        if (isVElement(parent) && this.base_element_name === "VirtualScrollerElement") {
             for (let i = 0; i < parent.children.length; i++) {
                 parent._v_children.push(parent.children[i]);
             }
@@ -598,7 +647,7 @@ export class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     remove_child(child) {
-        if (isVElement(child) && child.element_type != null) {
+        if (isVElement(child) && child.element_name != null) {
             this.removeChild(child);
         }
         else if (child instanceof Node) {
@@ -686,6 +735,8 @@ export class VElement extends HTMLElement {
         }
         return this;
     }
+    /** Simple wrapper for .width("fit-content") */
+    fit_content() { return this.width("fit-content"); }
     fixed_width(value) {
         if (value == null) {
             return this._try_parse_float(this.style.width);
@@ -947,6 +998,54 @@ export class VElement extends HTMLElement {
         this.overflow(overflow);
         return response;
     }
+    // Sync height from another node.
+    sync_height_from(node, process) {
+        if (node._sync_height_info === undefined) {
+            node._sync_height_info = {
+                sync_to: [this],
+                on_resize(e) {
+                    for (const to_node of node._sync_height_info.sync_to) {
+                        to_node.height(process === undefined ? node.clientHeight : process(node.clientHeight));
+                    }
+                },
+            };
+            node.on_resize(node._sync_height_info.on_resize);
+        }
+        else {
+            node._sync_height_info.sync_to.push(this);
+        }
+        return this;
+    }
+    sync_height_to(node, process) {
+        if (Array.isArray(node)) {
+            for (const n of node) {
+                this.sync_height_to(n, process);
+            }
+            return this;
+        }
+        if (this._sync_height_info === undefined) {
+            this._sync_height_info = {
+                sync_to: [node],
+                on_resize: (e) => {
+                    for (const to_node of this._sync_height_info.sync_to) {
+                        to_node.height(process === undefined ? this.clientHeight : process(this.clientHeight));
+                    }
+                },
+            };
+            this.on_resize(this._sync_height_info.on_resize);
+        }
+        else {
+            this._sync_height_info.sync_to.push(this);
+        }
+        return this;
+    }
+    /**
+     * Set a square frame width and height.
+     */
+    square(size) {
+        this.flex(0).fixed_frame(size, size);
+        return this;
+    }
     // padding(...values: [] | [undefstrnr] | [undefstrnr, undefstrnr] | [undefstrnr, undefstrnr, undefstrnr, undefstrnr]): string | this {
     // padding(...values: any[]): string | this {
     padding(...values) {
@@ -1206,7 +1305,7 @@ export class VElement extends HTMLElement {
      */
     side_by_side(options) {
         const { columns = 2, hspacing = 10, vspacing = 10, stretch = true, hide_dividers = false, } = options;
-        if (this.element_type !== "HStack" && this.element_type !== "AnchorHStack") {
+        if (this.element_name !== "HStackElement" && this.element_name !== "AnchorHStackElement") {
             throw Error("This function is only supported for element \"HStackElement\".");
         }
         // Vars.
@@ -1256,7 +1355,7 @@ export class VElement extends HTMLElement {
             if (child.nextElementSibling == null) {
                 return true;
             }
-            else if (child.nextElementSibling.element_type !== "Divider") {
+            else if (child.nextElementSibling.element_name !== "DividerElement") {
                 return false;
             }
             else {
@@ -1266,7 +1365,7 @@ export class VElement extends HTMLElement {
         // Iterate children.
         this.iterate((child) => {
             // Divider element.
-            if (child.element_type === "Divider") {
+            if (child.element_name === "DividerElement") {
                 if (col_children.length > 0 && hide_dividers) {
                     child.hide();
                 }
@@ -1369,10 +1468,10 @@ export class VElement extends HTMLElement {
     }
     // @ts-ignore
     align(value) {
-        switch (this.base_element_type) {
-            case "HStack":
-            case "AnchorHStack":
-            case "ZStack":
+        switch (this.base_element_name) {
+            case "HStackElement":
+            case "AnchorHStackElement":
+            case "ZStackElement":
                 if (value == null) {
                     return this.style.justifyContent;
                 }
@@ -1383,14 +1482,14 @@ export class VElement extends HTMLElement {
                     this.style.justifyContent = value ?? "";
                 }
                 return this;
-            case "Frame":
+            case "FrameElement":
                 this.style.display = "flex";
                 this.style.flexDirection = "column";
             // fallthrough.
-            case "VStack":
-            case "AnchorVStack":
-            case "Scroller":
-            case "View":
+            case "VStackElement":
+            case "AnchorVStackElement":
+            case "ScrollerElement":
+            case "ViewElement":
                 if (value == null) {
                     return this.style.alignItems;
                 }
@@ -1445,10 +1544,10 @@ export class VElement extends HTMLElement {
         return this.align("end");
     }
     align_vertical(value) {
-        switch (this.base_element_type) {
-            case "HStack":
-            case "AnchorHStack":
-            case "ZStack":
+        switch (this.base_element_name) {
+            case "HStackElement":
+            case "AnchorHStackElement":
+            case "ZStackElement":
                 if (value == null) {
                     return this.style.alignItems;
                 }
@@ -1459,14 +1558,14 @@ export class VElement extends HTMLElement {
                     this.style.alignItems = value ?? "";
                 }
                 return this;
-            case "Frame":
+            case "FrameElement":
                 this.style.display = "flex";
                 this.style.flexDirection = "column";
             // fallthrough.
-            case "VStack":
-            case "AnchorVStack":
-            case "Scroller":
-            case "View":
+            case "VStackElement":
+            case "AnchorVStackElement":
+            case "ScrollerElement":
+            case "ViewElement":
                 if (value == null) {
                     return this.style.justifyContent;
                 }
@@ -1477,7 +1576,7 @@ export class VElement extends HTMLElement {
                     this.style.justifyContent = value ?? "";
                 }
                 return this;
-            case "Text":
+            case "TextElement":
                 if (value == null) {
                     return this.style.alignItems;
                 }
@@ -1783,8 +1882,8 @@ export class VElement extends HTMLElement {
         }
     }
     opacity(value) {
-        switch (this.base_element_type) {
-            case "Style":
+        switch (this.base_element_name) {
+            case "StyleElement":
                 if (value == null) {
                     return this._try_parse_float(this.filter(this.edit_filter_wrapper(this.style.filter, "opacity", value)), 1);
                 }
@@ -2100,7 +2199,7 @@ export class VElement extends HTMLElement {
                         }
                     }
                     // When the object is a style object it does not seem to work correctly.
-                    else if (this.element_type === "Style") {
+                    else if (this.element_name === "StyleElement") {
                         dict[property] = value;
                     }
                 }
@@ -2235,6 +2334,67 @@ export class VElement extends HTMLElement {
             return this.onmousedown != null;
         }
     }
+    /**
+     * Apply on hover transitions.
+     * @note This function also automatically sets the `transition` property for the target element. However, only when the transition attribute hasnt been set yet.
+     * @param target The target node of which to apply
+     * @param methods The methods to call and pass the `selected` value as arg to.
+     * @param selected The selected hover argument value of the selected `methods`.
+     * @param unselected The default non hover argument value of the selected `methods`.
+     * @param methods The methods to call and pass the `selected` value as arg to.
+     */
+    hover_transitions(items) {
+        // Set transitions.
+        for (let item of items) {
+            if (item.target === "this" || item.target === "self") {
+                item.target = this;
+            }
+            if (!item.target.transition()) {
+                let transition = "";
+                let transition_mask = false;
+                for (let m = 0; m < item.methods.length; m++) {
+                    let css_name = item.methods[m].replaceAll("_", "-");
+                    if (item.target.element_name.includes("ImageMask")) {
+                        if (css_name === "color") {
+                            // revert image mask css call to background color.
+                            css_name = "background";
+                        }
+                        transition_mask = true;
+                    }
+                    transition += `${css_name} ${item.duration || 300}ms ${item.easing || "ease-in-out"}${m < item.methods.length - 1 ? ", " : ""}`;
+                }
+                ;
+                if (transition_mask) {
+                    item.target.transition_mask(transition);
+                }
+                else {
+                    item.target.transition(transition);
+                }
+            }
+        }
+        // Set hover.
+        this.on_mouse_over(() => {
+            if (!this._is_button_disabled) {
+                for (let item of items) {
+                    for (const method of item.methods) {
+                        item.target[method](item.selected);
+                    }
+                    ;
+                }
+            }
+        });
+        this.on_mouse_out(() => {
+            if (!this._is_button_disabled) {
+                for (let item of items) {
+                    for (const method of item.methods) {
+                        item.target[method](item.unselected);
+                    }
+                    ;
+                }
+            }
+        });
+        return this;
+    }
     text_width(text) {
         const width_measurer = document.createElement("canvas").getContext("2d");
         if (width_measurer == null) {
@@ -2949,6 +3109,7 @@ export class VElement extends HTMLElement {
         clearTimeout(this._timeouts[id]);
         return this;
     }
+    _disabled_cursor;
     /**
      * @docs:
      * @title: Disable Button
@@ -2957,6 +3118,8 @@ export class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     disable() {
+        this._disabled_cursor = this.style.cursor;
+        this.style.cursor = "not-allowed";
         this._is_button_disabled = true;
         return this;
     }
@@ -2968,6 +3131,9 @@ export class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     enable() {
+        if (this._disabled_cursor) {
+            this.style.cursor = this._disabled_cursor;
+        }
         this._is_button_disabled = false;
         return this;
     }
@@ -3009,7 +3175,7 @@ export class VElement extends HTMLElement {
             }
         };
         // deprecated, buttons now use <button>
-        // if (this.element_type === "Button" || this.element_type === "LoaderButton" || this.element_type === "BorderButton") {
+        // if (this.element_name === "ButtonElement" || this.element_name === "LoaderButtonElement" || this.element_name === "BorderButtonElement") {
         //  this.attr("rel", "noopener noreferrer"); // for seo.
         // }
         return this;
@@ -4194,7 +4360,7 @@ export class VElement extends HTMLElement {
      *     @descr: The parent node from which to calculate the offset.
      * @return:
      *     @description Returns the accumulated vertical offset from the current node to the parent node, or null if the parent wasn't found.
-     *     @deprecated: This function may not work properly in all cases.
+     * @deprecated: true
      */
     get_y_offset_from_parent(parent) {
         let offset = 0;
@@ -7414,7 +7580,11 @@ export class VElement extends HTMLElement {
             return this.onmouseout ?? undefined;
         }
         const e = this;
-        this.onmouseout = (t) => callback(e, t);
+        this.onmouseout = (t) => {
+            if (!this._is_button_disabled) {
+                callback(e, t);
+            }
+        };
         return this;
     }
     on_mouse_over(callback) {
@@ -7422,7 +7592,11 @@ export class VElement extends HTMLElement {
             return this.onmouseover ?? undefined;
         }
         const e = this;
-        this.onmouseover = (t) => callback(e, t);
+        this.onmouseover = (t) => {
+            if (!this._is_button_disabled) {
+                callback(e, t);
+            }
+        };
         return this;
     }
     on_mouse_up(callback) {
@@ -7714,10 +7888,6 @@ export class VElement extends HTMLElement {
         return this;
     }
 }
-VElement.element_tag = ""; // must also be static.
-VElement.default_style = {};
-VElement.default_attributes = {};
-VElement.default_events = {};
 ;
 // @test
 // new VElement().myexect(); // should throw error.
@@ -7785,56 +7955,10 @@ export function extend(extension) {
     });
 }
 ;
-// type ExtendFunction = 
-//     ((this: VElement, ...args: any[]) => any) |
-//     ((this: VElement, ...args: any[]) => VElement) |
-//     any
-// export function extend<T extends Record<string, ExtendFunction>>(extension: T) {
-//     Object.assign(VElement.prototype, extension);
-//     mixed_classes.forEach(instance => {
-//         Object.assign(instance.prototype, extension);
-//     });
-// };
-// export function extend<T extends VElement>(extension: T) {
-//     Object.assign(VElement.prototype, extension);
-//     mixed_classes.forEach(instance => {
-//         Object.assign(instance.prototype, extension);
-//     });
-// };
-// export function extend<T extends Record<keyof T, (this: ThisType<VElement>, ...args: any[]) => any>>(extension: T) {
-//    Object.assign(VElement.prototype, extension);
-//    mixed_classes.forEach(instance => {
-//        Object.assign(instance.prototype, extension);
-//    });
-// };
-// export function extend<T extends Record<keyof T, (this: ThisType<VElement>, ...args: any[]) => ThisType<VElement>>>(extension: T) {
-//    Object.assign(VElement.prototype, extension);
-//    mixed_classes.forEach(instance => {
-//        Object.assign(instance.prototype, extension);
-//    });
-// };
-// export function extend<T extends Record<keyof T, (this: VElement & ThisType<VElement>, ...args: any[]) => any>>(extension: T) {
-//    Object.assign(VElement.prototype, extension);
-//    mixed_classes.forEach(instance => {
-//        Object.assign(instance.prototype, extension);
-//    });
-// };
-// Register element.
-function register_type(type, tag) {
-    type._is_registered = true;
-    // customElements.define(type.name, type, { extends: tag ?? (type as any).element_tag });
-    if (tag === null) {
-        customElements.define("v-" + type.name.toLowerCase(), type);
-    }
-    else {
-        customElements.define("v-" + type.name.toLowerCase(), type, { extends: tag ?? type.element_tag });
-    }
-}
-// register_type(VElement);
 // Post process velement.
-function postprocess(type, tag) {
+function postprocess(type) {
     mixin(type);
-    register_type(type, tag);
+    register_element(type);
 }
 // Create a constructor wrapper.
 export function wrapper(constructor) {
@@ -7850,905 +7974,1019 @@ export function create_null(target_class) {
         return instance;
     };
 }
+// type _SafeVBaseElement = typeof VElement & typeof HTMLElement & {
+//    new(): VElement & HTMLElement & VElementExtensions,
+//    prototype: VElement & HTMLElement & VElementExtensions,
+// }
 // ---
 // generated by dev/automate_types.js:
 // Base class VHTMLElement derived from HTMLElement.
 // @ts-ignore
 export class VHTMLElement extends HTMLElement {
+    static element_name = "VHTMLElement";
     constructor(args = {}) {
         super();
         args.derived ??= VHTMLElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-;
-postprocess(VHTMLElement, null);
+// @ts-ignore
+// export interface VHTMLElement extends HTMLElement, VElement, VElementExtensions {};
+postprocess(VHTMLElement);
 export const VHTML = wrapper(VHTMLElement);
 export const NullVHTML = create_null(VHTMLElement);
 // Base class VAnchorElement derived from HTMLAnchorElement.
 // @ts-ignore
 export class VAnchorElement extends HTMLAnchorElement {
+    static element_name = "VAnchorElement";
+    static element_tag = "a";
     constructor(args = {}) {
         super();
         args.derived ??= VAnchorElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VAnchorElement.element_tag = "a";
-;
+// @ts-ignore
+// export interface VAnchorElement extends HTMLAnchorElement, VElement, VElementExtensions {};
 postprocess(VAnchorElement);
 export const VAnchor = wrapper(VAnchorElement);
 export const NullVAnchor = create_null(VAnchorElement);
 // Base class VAreaElement derived from HTMLAreaElement.
 // @ts-ignore
 export class VAreaElement extends HTMLAreaElement {
+    static element_name = "VAreaElement";
+    static element_tag = "area";
     constructor(args = {}) {
         super();
         args.derived ??= VAreaElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VAreaElement.element_tag = "area";
-;
+// @ts-ignore
+// export interface VAreaElement extends HTMLAreaElement, VElement, VElementExtensions {};
 postprocess(VAreaElement);
 export const VArea = wrapper(VAreaElement);
 export const NullVArea = create_null(VAreaElement);
 // Base class VAudioElement derived from HTMLAudioElement.
 // @ts-ignore
 export class VAudioElement extends HTMLAudioElement {
+    static element_name = "VAudioElement";
+    static element_tag = "audio";
     constructor(args = {}) {
         super();
         args.derived ??= VAudioElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VAudioElement.element_tag = "audio";
-;
+// @ts-ignore
+// export interface VAudioElement extends HTMLAudioElement, VElement, VElementExtensions {};
 postprocess(VAudioElement);
 export const VAudio = wrapper(VAudioElement);
 export const NullVAudio = create_null(VAudioElement);
 // Base class VBlockQuoteElement derived from HTMLQuoteElement.
 // @ts-ignore
 export class VBlockQuoteElement extends HTMLQuoteElement {
+    static element_name = "VBlockQuoteElement";
+    static element_tag = "blockquote";
     constructor(args = {}) {
         super();
         args.derived ??= VBlockQuoteElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VBlockQuoteElement.element_tag = "blockquote";
-;
+// @ts-ignore
+// export interface VBlockQuoteElement extends HTMLQuoteElement, VElement, VElementExtensions {};
 postprocess(VBlockQuoteElement);
 export const VBlockQuote = wrapper(VBlockQuoteElement);
 export const NullVBlockQuote = create_null(VBlockQuoteElement);
 // Base class VBodyElement derived from HTMLBodyElement.
 // @ts-ignore
 export class VBodyElement extends HTMLBodyElement {
+    static element_name = "VBodyElement";
+    static element_tag = "body";
     constructor(args = {}) {
         super();
         args.derived ??= VBodyElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VBodyElement.element_tag = "body";
-;
+// @ts-ignore
+// export interface VBodyElement extends HTMLBodyElement, VElement, VElementExtensions {};
 postprocess(VBodyElement);
 export const VBody = wrapper(VBodyElement);
 export const NullVBody = create_null(VBodyElement);
 // Base class VBRElement derived from HTMLBRElement.
 // @ts-ignore
 export class VBRElement extends HTMLBRElement {
+    static element_name = "VBRElement";
+    static element_tag = "br";
     constructor(args = {}) {
         super();
         args.derived ??= VBRElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VBRElement.element_tag = "br";
-;
+// @ts-ignore
+// export interface VBRElement extends HTMLBRElement, VElement, VElementExtensions {};
 postprocess(VBRElement);
 export const VBR = wrapper(VBRElement);
 export const NullVBR = create_null(VBRElement);
 // Base class VButtonElement derived from HTMLButtonElement.
 // @ts-ignore
 export class VButtonElement extends HTMLButtonElement {
+    static element_name = "VButtonElement";
+    static element_tag = "button";
     constructor(args = {}) {
         super();
         args.derived ??= VButtonElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VButtonElement.element_tag = "button";
-;
+// @ts-ignore
+// export interface VButtonElement extends HTMLButtonElement, VElement, VElementExtensions {};
 postprocess(VButtonElement);
 export const VButton = wrapper(VButtonElement);
 export const NullVButton = create_null(VButtonElement);
 // Base class VCanvasElement derived from HTMLCanvasElement.
 // @ts-ignore
 export class VCanvasElement extends HTMLCanvasElement {
+    static element_name = "VCanvasElement";
+    static element_tag = "canvas";
     constructor(args = {}) {
         super();
         args.derived ??= VCanvasElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VCanvasElement.element_tag = "canvas";
-;
+// @ts-ignore
+// export interface VCanvasElement extends HTMLCanvasElement, VElement, VElementExtensions {};
 postprocess(VCanvasElement);
 export const VCanvas = wrapper(VCanvasElement);
 export const NullVCanvas = create_null(VCanvasElement);
 // Base class VTableCaptionElement derived from HTMLTableCaptionElement.
 // @ts-ignore
 export class VTableCaptionElement extends HTMLTableCaptionElement {
+    static element_name = "VTableCaptionElement";
+    static element_tag = "caption";
     constructor(args = {}) {
         super();
         args.derived ??= VTableCaptionElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTableCaptionElement.element_tag = "caption";
-;
+// @ts-ignore
+// export interface VTableCaptionElement extends HTMLTableCaptionElement, VElement, VElementExtensions {};
 postprocess(VTableCaptionElement);
 export const VTableCaption = wrapper(VTableCaptionElement);
 export const NullVTableCaption = create_null(VTableCaptionElement);
 // Base class VTableColElement derived from HTMLTableColElement.
 // @ts-ignore
 export class VTableColElement extends HTMLTableColElement {
+    static element_name = "VTableColElement";
+    static element_tag = "col";
     constructor(args = {}) {
         super();
         args.derived ??= VTableColElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTableColElement.element_tag = "col";
-;
+// @ts-ignore
+// export interface VTableColElement extends HTMLTableColElement, VElement, VElementExtensions {};
 postprocess(VTableColElement);
 export const VTableCol = wrapper(VTableColElement);
 export const NullVTableCol = create_null(VTableColElement);
 // Base class VDataElement derived from HTMLDataElement.
 // @ts-ignore
 export class VDataElement extends HTMLDataElement {
+    static element_name = "VDataElement";
+    static element_tag = "data";
     constructor(args = {}) {
         super();
         args.derived ??= VDataElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VDataElement.element_tag = "data";
-;
+// @ts-ignore
+// export interface VDataElement extends HTMLDataElement, VElement, VElementExtensions {};
 postprocess(VDataElement);
 export const VData = wrapper(VDataElement);
 export const NullVData = create_null(VDataElement);
 // Base class VDataListElement derived from HTMLDataListElement.
 // @ts-ignore
 export class VDataListElement extends HTMLDataListElement {
+    static element_name = "VDataListElement";
+    static element_tag = "datalist";
     constructor(args = {}) {
         super();
         args.derived ??= VDataListElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VDataListElement.element_tag = "datalist";
-;
+// @ts-ignore
+// export interface VDataListElement extends HTMLDataListElement, VElement, VElementExtensions {};
 postprocess(VDataListElement);
 export const VDataList = wrapper(VDataListElement);
 export const NullVDataList = create_null(VDataListElement);
 // Base class VDListElement derived from HTMLDListElement.
 // @ts-ignore
 export class VDListElement extends HTMLDListElement {
+    static element_name = "VDListElement";
+    static element_tag = "dl";
     constructor(args = {}) {
         super();
         args.derived ??= VDListElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VDListElement.element_tag = "dl";
-;
+// @ts-ignore
+// export interface VDListElement extends HTMLDListElement, VElement, VElementExtensions {};
 postprocess(VDListElement);
 export const VDList = wrapper(VDListElement);
 export const NullVDList = create_null(VDListElement);
 // Base class VDirectoryElement derived from HTMLDirectoryElement.
 // @ts-ignore
 export class VDirectoryElement extends HTMLDirectoryElement {
+    static element_name = "VDirectoryElement";
+    static element_tag = "dir";
     constructor(args = {}) {
         super();
         args.derived ??= VDirectoryElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VDirectoryElement.element_tag = "dir";
-;
+// @ts-ignore
+// export interface VDirectoryElement extends HTMLDirectoryElement, VElement, VElementExtensions {};
 postprocess(VDirectoryElement);
 export const VDirectory = wrapper(VDirectoryElement);
 export const NullVDirectory = create_null(VDirectoryElement);
 // Base class VDivElement derived from HTMLDivElement.
 // @ts-ignore
 export class VDivElement extends HTMLDivElement {
+    static element_name = "VDivElement";
+    static element_tag = "div";
     constructor(args = {}) {
         super();
         args.derived ??= VDivElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VDivElement.element_tag = "div";
-;
+// @ts-ignore
+// export interface VDivElement extends HTMLDivElement, VElement, VElementExtensions {};
 postprocess(VDivElement);
 export const VDiv = wrapper(VDivElement);
 export const NullVDiv = create_null(VDivElement);
 // Base class VEmbedElement derived from HTMLEmbedElement.
 // @ts-ignore
 export class VEmbedElement extends HTMLEmbedElement {
+    static element_name = "VEmbedElement";
+    static element_tag = "embed";
     constructor(args = {}) {
         super();
         args.derived ??= VEmbedElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VEmbedElement.element_tag = "embed";
-;
+// @ts-ignore
+// export interface VEmbedElement extends HTMLEmbedElement, VElement, VElementExtensions {};
 postprocess(VEmbedElement);
 export const VEmbed = wrapper(VEmbedElement);
 export const NullVEmbed = create_null(VEmbedElement);
 // Base class VFieldSetElement derived from HTMLFieldSetElement.
 // @ts-ignore
 export class VFieldSetElement extends HTMLFieldSetElement {
+    static element_name = "VFieldSetElement";
+    static element_tag = "fieldset";
     constructor(args = {}) {
         super();
         args.derived ??= VFieldSetElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VFieldSetElement.element_tag = "fieldset";
-;
+// @ts-ignore
+// export interface VFieldSetElement extends HTMLFieldSetElement, VElement, VElementExtensions {};
 postprocess(VFieldSetElement);
 export const VFieldSet = wrapper(VFieldSetElement);
 export const NullVFieldSet = create_null(VFieldSetElement);
 // Base class VFormElement derived from HTMLFormElement.
 // @ts-ignore
 export class VFormElement extends HTMLFormElement {
+    static element_name = "VFormElement";
+    static element_tag = "form";
     constructor(args = {}) {
         super();
         args.derived ??= VFormElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VFormElement.element_tag = "form";
-;
+// @ts-ignore
+// export interface VFormElement extends HTMLFormElement, VElement, VElementExtensions {};
 postprocess(VFormElement);
 export const VForm = wrapper(VFormElement);
 export const NullVForm = create_null(VFormElement);
 // Base class VHeadingElement derived from HTMLHeadingElement.
 // @ts-ignore
 export class VHeadingElement extends HTMLHeadingElement {
+    static element_name = "VHeadingElement";
+    static element_tag = "h1";
     constructor(args = {}) {
         super();
         args.derived ??= VHeadingElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VHeadingElement.element_tag = "h1";
-;
+// @ts-ignore
+// export interface VHeadingElement extends HTMLHeadingElement, VElement, VElementExtensions {};
 postprocess(VHeadingElement);
 export const VHeading = wrapper(VHeadingElement);
 export const NullVHeading = create_null(VHeadingElement);
 // Base class VHeadElement derived from HTMLHeadElement.
 // @ts-ignore
 export class VHeadElement extends HTMLHeadElement {
+    static element_name = "VHeadElement";
+    static element_tag = "head";
     constructor(args = {}) {
         super();
         args.derived ??= VHeadElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VHeadElement.element_tag = "head";
-;
+// @ts-ignore
+// export interface VHeadElement extends HTMLHeadElement, VElement, VElementExtensions {};
 postprocess(VHeadElement);
 export const VHead = wrapper(VHeadElement);
 export const NullVHead = create_null(VHeadElement);
 // Base class VHRElement derived from HTMLHRElement.
 // @ts-ignore
 export class VHRElement extends HTMLHRElement {
+    static element_name = "VHRElement";
+    static element_tag = "hr";
     constructor(args = {}) {
         super();
         args.derived ??= VHRElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VHRElement.element_tag = "hr";
-;
+// @ts-ignore
+// export interface VHRElement extends HTMLHRElement, VElement, VElementExtensions {};
 postprocess(VHRElement);
 export const VHR = wrapper(VHRElement);
 export const NullVHR = create_null(VHRElement);
 // Base class VImageElement derived from HTMLImageElement.
 // @ts-ignore
 export class VImageElement extends HTMLImageElement {
+    static element_name = "VImageElement";
+    static element_tag = "img";
     constructor(args = {}) {
         super();
         args.derived ??= VImageElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VImageElement.element_tag = "img";
-;
+// @ts-ignore
+// export interface VImageElement extends HTMLImageElement, VElement, VElementExtensions {};
 postprocess(VImageElement);
 export const VImage = wrapper(VImageElement);
 export const NullVImage = create_null(VImageElement);
 // Base class VInputElement derived from HTMLInputElement.
 // @ts-ignore
 export class VInputElement extends HTMLInputElement {
+    static element_name = "VInputElement";
+    static element_tag = "input";
     constructor(args = {}) {
         super();
         args.derived ??= VInputElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VInputElement.element_tag = "input";
-;
+// @ts-ignore
+// export interface VInputElement extends HTMLInputElement, VElement, VElementExtensions {};
 postprocess(VInputElement);
 export const VInput = wrapper(VInputElement);
 export const NullVInput = create_null(VInputElement);
 // Base class VModElement derived from HTMLModElement.
 // @ts-ignore
 export class VModElement extends HTMLModElement {
+    static element_name = "VModElement";
+    static element_tag = "ins";
     constructor(args = {}) {
         super();
         args.derived ??= VModElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VModElement.element_tag = "ins";
-;
+// @ts-ignore
+// export interface VModElement extends HTMLModElement, VElement, VElementExtensions {};
 postprocess(VModElement);
 export const VMod = wrapper(VModElement);
 export const NullVMod = create_null(VModElement);
 // Base class VLabelElement derived from HTMLLabelElement.
 // @ts-ignore
 export class VLabelElement extends HTMLLabelElement {
+    static element_name = "VLabelElement";
+    static element_tag = "label";
     constructor(args = {}) {
         super();
         args.derived ??= VLabelElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VLabelElement.element_tag = "label";
-;
+// @ts-ignore
+// export interface VLabelElement extends HTMLLabelElement, VElement, VElementExtensions {};
 postprocess(VLabelElement);
 export const VLabel = wrapper(VLabelElement);
 export const NullVLabel = create_null(VLabelElement);
 // Base class VLegendElement derived from HTMLLegendElement.
 // @ts-ignore
 export class VLegendElement extends HTMLLegendElement {
+    static element_name = "VLegendElement";
+    static element_tag = "legend";
     constructor(args = {}) {
         super();
         args.derived ??= VLegendElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VLegendElement.element_tag = "legend";
-;
+// @ts-ignore
+// export interface VLegendElement extends HTMLLegendElement, VElement, VElementExtensions {};
 postprocess(VLegendElement);
 export const VLegend = wrapper(VLegendElement);
 export const NullVLegend = create_null(VLegendElement);
 // Base class VLIElement derived from HTMLLIElement.
 // @ts-ignore
 export class VLIElement extends HTMLLIElement {
+    static element_name = "VLIElement";
+    static element_tag = "li";
     constructor(args = {}) {
         super();
         args.derived ??= VLIElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VLIElement.element_tag = "li";
-;
+// @ts-ignore
+// export interface VLIElement extends HTMLLIElement, VElement, VElementExtensions {};
 postprocess(VLIElement);
 export const VLI = wrapper(VLIElement);
 export const NullVLI = create_null(VLIElement);
 // Base class VLinkElement derived from HTMLLinkElement.
 // @ts-ignore
 export class VLinkElement extends HTMLLinkElement {
+    static element_name = "VLinkElement";
+    static element_tag = "link";
     constructor(args = {}) {
         super();
         args.derived ??= VLinkElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VLinkElement.element_tag = "link";
-;
+// @ts-ignore
+// export interface VLinkElement extends HTMLLinkElement, VElement, VElementExtensions {};
 postprocess(VLinkElement);
 export const VLink = wrapper(VLinkElement);
 export const NullVLink = create_null(VLinkElement);
 // Base class VMapElement derived from HTMLMapElement.
 // @ts-ignore
 export class VMapElement extends HTMLMapElement {
+    static element_name = "VMapElement";
+    static element_tag = "map";
     constructor(args = {}) {
         super();
         args.derived ??= VMapElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VMapElement.element_tag = "map";
-;
+// @ts-ignore
+// export interface VMapElement extends HTMLMapElement, VElement, VElementExtensions {};
 postprocess(VMapElement);
 export const VMap = wrapper(VMapElement);
 export const NullVMap = create_null(VMapElement);
 // Base class VMetaElement derived from HTMLMetaElement.
 // @ts-ignore
 export class VMetaElement extends HTMLMetaElement {
+    static element_name = "VMetaElement";
+    static element_tag = "meta";
     constructor(args = {}) {
         super();
         args.derived ??= VMetaElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VMetaElement.element_tag = "meta";
-;
+// @ts-ignore
+// export interface VMetaElement extends HTMLMetaElement, VElement, VElementExtensions {};
 postprocess(VMetaElement);
 export const VMeta = wrapper(VMetaElement);
 export const NullVMeta = create_null(VMetaElement);
 // Base class VMeterElement derived from HTMLMeterElement.
 // @ts-ignore
 export class VMeterElement extends HTMLMeterElement {
+    static element_name = "VMeterElement";
+    static element_tag = "meter";
     constructor(args = {}) {
         super();
         args.derived ??= VMeterElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VMeterElement.element_tag = "meter";
-;
+// @ts-ignore
+// export interface VMeterElement extends HTMLMeterElement, VElement, VElementExtensions {};
 postprocess(VMeterElement);
 export const VMeter = wrapper(VMeterElement);
 export const NullVMeter = create_null(VMeterElement);
 // Base class VObjectElement derived from HTMLObjectElement.
 // @ts-ignore
 export class VObjectElement extends HTMLObjectElement {
+    static element_name = "VObjectElement";
+    static element_tag = "object";
     constructor(args = {}) {
         super();
         args.derived ??= VObjectElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VObjectElement.element_tag = "object";
-;
+// @ts-ignore
+// export interface VObjectElement extends HTMLObjectElement, VElement, VElementExtensions {};
 postprocess(VObjectElement);
 export const VObject = wrapper(VObjectElement);
 export const NullVObject = create_null(VObjectElement);
 // Base class VOListElement derived from HTMLOListElement.
 // @ts-ignore
 export class VOListElement extends HTMLOListElement {
+    static element_name = "VOListElement";
+    static element_tag = "ol";
     constructor(args = {}) {
         super();
         args.derived ??= VOListElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VOListElement.element_tag = "ol";
-;
+// @ts-ignore
+// export interface VOListElement extends HTMLOListElement, VElement, VElementExtensions {};
 postprocess(VOListElement);
 export const VOList = wrapper(VOListElement);
 export const NullVOList = create_null(VOListElement);
 // Base class VOptGroupElement derived from HTMLOptGroupElement.
 // @ts-ignore
 export class VOptGroupElement extends HTMLOptGroupElement {
+    static element_name = "VOptGroupElement";
+    static element_tag = "optgroup";
     constructor(args = {}) {
         super();
         args.derived ??= VOptGroupElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VOptGroupElement.element_tag = "optgroup";
-;
+// @ts-ignore
+// export interface VOptGroupElement extends HTMLOptGroupElement, VElement, VElementExtensions {};
 postprocess(VOptGroupElement);
 export const VOptGroup = wrapper(VOptGroupElement);
 export const NullVOptGroup = create_null(VOptGroupElement);
 // Base class VOptionElement derived from HTMLOptionElement.
 // @ts-ignore
 export class VOptionElement extends HTMLOptionElement {
+    static element_name = "VOptionElement";
+    static element_tag = "option";
     constructor(args = {}) {
         super();
         args.derived ??= VOptionElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VOptionElement.element_tag = "option";
-;
+// @ts-ignore
+// export interface VOptionElement extends HTMLOptionElement, VElement, VElementExtensions {};
 postprocess(VOptionElement);
 export const VOption = wrapper(VOptionElement);
 export const NullVOption = create_null(VOptionElement);
 // Base class VOutputElement derived from HTMLOutputElement.
 // @ts-ignore
 export class VOutputElement extends HTMLOutputElement {
+    static element_name = "VOutputElement";
+    static element_tag = "output";
     constructor(args = {}) {
         super();
         args.derived ??= VOutputElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VOutputElement.element_tag = "output";
-;
+// @ts-ignore
+// export interface VOutputElement extends HTMLOutputElement, VElement, VElementExtensions {};
 postprocess(VOutputElement);
 export const VOutput = wrapper(VOutputElement);
 export const NullVOutput = create_null(VOutputElement);
 // Base class VParagraphElement derived from HTMLParagraphElement.
 // @ts-ignore
 export class VParagraphElement extends HTMLParagraphElement {
+    static element_name = "VParagraphElement";
+    static element_tag = "p";
     constructor(args = {}) {
         super();
         args.derived ??= VParagraphElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VParagraphElement.element_tag = "p";
-;
+// @ts-ignore
+// export interface VParagraphElement extends HTMLParagraphElement, VElement, VElementExtensions {};
 postprocess(VParagraphElement);
 export const VParagraph = wrapper(VParagraphElement);
 export const NullVParagraph = create_null(VParagraphElement);
 // Base class VParamElement derived from HTMLParamElement.
 // @ts-ignore
 export class VParamElement extends HTMLParamElement {
+    static element_name = "VParamElement";
+    static element_tag = "param";
     constructor(args = {}) {
         super();
         args.derived ??= VParamElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VParamElement.element_tag = "param";
-;
+// @ts-ignore
+// export interface VParamElement extends HTMLParamElement, VElement, VElementExtensions {};
 postprocess(VParamElement);
 export const VParam = wrapper(VParamElement);
 export const NullVParam = create_null(VParamElement);
 // Base class VPictureElement derived from HTMLPictureElement.
 // @ts-ignore
 export class VPictureElement extends HTMLPictureElement {
+    static element_name = "VPictureElement";
+    static element_tag = "picture";
     constructor(args = {}) {
         super();
         args.derived ??= VPictureElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VPictureElement.element_tag = "picture";
-;
+// @ts-ignore
+// export interface VPictureElement extends HTMLPictureElement, VElement, VElementExtensions {};
 postprocess(VPictureElement);
 export const VPicture = wrapper(VPictureElement);
 export const NullVPicture = create_null(VPictureElement);
 // Base class VPreElement derived from HTMLPreElement.
 // @ts-ignore
 export class VPreElement extends HTMLPreElement {
+    static element_name = "VPreElement";
+    static element_tag = "pre";
     constructor(args = {}) {
         super();
         args.derived ??= VPreElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VPreElement.element_tag = "pre";
-;
+// @ts-ignore
+// export interface VPreElement extends HTMLPreElement, VElement, VElementExtensions {};
 postprocess(VPreElement);
 export const VPre = wrapper(VPreElement);
 export const NullVPre = create_null(VPreElement);
 // Base class VProgressElement derived from HTMLProgressElement.
 // @ts-ignore
 export class VProgressElement extends HTMLProgressElement {
+    static element_name = "VProgressElement";
+    static element_tag = "progress";
     constructor(args = {}) {
         super();
         args.derived ??= VProgressElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VProgressElement.element_tag = "progress";
-;
+// @ts-ignore
+// export interface VProgressElement extends HTMLProgressElement, VElement, VElementExtensions {};
 postprocess(VProgressElement);
 export const VProgress = wrapper(VProgressElement);
 export const NullVProgress = create_null(VProgressElement);
 // Base class VScriptElement derived from HTMLScriptElement.
 // @ts-ignore
 export class VScriptElement extends HTMLScriptElement {
+    static element_name = "VScriptElement";
+    static element_tag = "script";
     constructor(args = {}) {
         super();
         args.derived ??= VScriptElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VScriptElement.element_tag = "script";
-;
+// @ts-ignore
+// export interface VScriptElement extends HTMLScriptElement, VElement, VElementExtensions {};
 postprocess(VScriptElement);
 export const VScript = wrapper(VScriptElement);
 export const NullVScript = create_null(VScriptElement);
 // Base class VSelectElement derived from HTMLSelectElement.
 // @ts-ignore
 export class VSelectElement extends HTMLSelectElement {
+    static element_name = "VSelectElement";
+    static element_tag = "select";
     constructor(args = {}) {
         super();
         args.derived ??= VSelectElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VSelectElement.element_tag = "select";
-;
+// @ts-ignore
+// export interface VSelectElement extends HTMLSelectElement, VElement, VElementExtensions {};
 postprocess(VSelectElement);
 export const VSelect = wrapper(VSelectElement);
 export const NullVSelect = create_null(VSelectElement);
 // Base class VSlotElement derived from HTMLSlotElement.
 // @ts-ignore
 export class VSlotElement extends HTMLSlotElement {
+    static element_name = "VSlotElement";
+    static element_tag = "slot";
     constructor(args = {}) {
         super();
         args.derived ??= VSlotElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VSlotElement.element_tag = "slot";
-;
+// @ts-ignore
+// export interface VSlotElement extends HTMLSlotElement, VElement, VElementExtensions {};
 postprocess(VSlotElement);
 export const VSlot = wrapper(VSlotElement);
 export const NullVSlot = create_null(VSlotElement);
 // Base class VSourceElement derived from HTMLSourceElement.
 // @ts-ignore
 export class VSourceElement extends HTMLSourceElement {
+    static element_name = "VSourceElement";
+    static element_tag = "source";
     constructor(args = {}) {
         super();
         args.derived ??= VSourceElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VSourceElement.element_tag = "source";
-;
+// @ts-ignore
+// export interface VSourceElement extends HTMLSourceElement, VElement, VElementExtensions {};
 postprocess(VSourceElement);
 export const VSource = wrapper(VSourceElement);
 export const NullVSource = create_null(VSourceElement);
 // Base class VSpanElement derived from HTMLSpanElement.
 // @ts-ignore
 export class VSpanElement extends HTMLSpanElement {
+    static element_name = "VSpanElement";
+    static element_tag = "span";
     constructor(args = {}) {
         super();
         args.derived ??= VSpanElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VSpanElement.element_tag = "span";
-;
+// @ts-ignore
+// export interface VSpanElement extends HTMLSpanElement, VElement, VElementExtensions {};
 postprocess(VSpanElement);
 export const VSpan = wrapper(VSpanElement);
 export const NullVSpan = create_null(VSpanElement);
 // Base class VTableElement derived from HTMLTableElement.
 // @ts-ignore
 export class VTableElement extends HTMLTableElement {
+    static element_name = "VTableElement";
+    static element_tag = "table";
     constructor(args = {}) {
         super();
         args.derived ??= VTableElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTableElement.element_tag = "table";
-;
+// @ts-ignore
+// export interface VTableElement extends HTMLTableElement, VElement, VElementExtensions {};
 postprocess(VTableElement);
 export const VTable = wrapper(VTableElement);
 export const NullVTable = create_null(VTableElement);
 // Base class VTHeadElement derived from HTMLTableSectionElement.
 // @ts-ignore
 export class VTHeadElement extends HTMLTableSectionElement {
+    static element_name = "VTHeadElement";
+    static element_tag = "thead";
     constructor(args = {}) {
         super();
         args.derived ??= VTHeadElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTHeadElement.element_tag = "thead";
-;
+// @ts-ignore
+// export interface VTHeadElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTHeadElement);
 export const VTHead = wrapper(VTHeadElement);
 export const NullVTHead = create_null(VTHeadElement);
 // Base class VTBodyElement derived from HTMLTableSectionElement.
 // @ts-ignore
 export class VTBodyElement extends HTMLTableSectionElement {
+    static element_name = "VTBodyElement";
+    static element_tag = "tbody";
     constructor(args = {}) {
         super();
         args.derived ??= VTBodyElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTBodyElement.element_tag = "tbody";
-;
+// @ts-ignore
+// export interface VTBodyElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTBodyElement);
 export const VTBody = wrapper(VTBodyElement);
 export const NullVTBody = create_null(VTBodyElement);
 // Base class VTFootElement derived from HTMLTableSectionElement.
 // @ts-ignore
 export class VTFootElement extends HTMLTableSectionElement {
+    static element_name = "VTFootElement";
+    static element_tag = "tfoot";
     constructor(args = {}) {
         super();
         args.derived ??= VTFootElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTFootElement.element_tag = "tfoot";
-;
+// @ts-ignore
+// export interface VTFootElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTFootElement);
 export const VTFoot = wrapper(VTFootElement);
 export const NullVTFoot = create_null(VTFootElement);
 // Base class VTHElement derived from HTMLTableCellElement.
 // @ts-ignore
 export class VTHElement extends HTMLTableCellElement {
+    static element_name = "VTHElement";
+    static element_tag = "th";
     constructor(args = {}) {
         super();
         args.derived ??= VTHElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTHElement.element_tag = "th";
-;
+// @ts-ignore
+// export interface VTHElement extends HTMLTableCellElement, VElement, VElementExtensions {};
 postprocess(VTHElement);
 export const VTH = wrapper(VTHElement);
 export const NullVTH = create_null(VTHElement);
 // Base class VTDElement derived from HTMLTableCellElement.
 // @ts-ignore
 export class VTDElement extends HTMLTableCellElement {
+    static element_name = "VTDElement";
+    static element_tag = "td";
     constructor(args = {}) {
         super();
         args.derived ??= VTDElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTDElement.element_tag = "td";
-;
+// @ts-ignore
+// export interface VTDElement extends HTMLTableCellElement, VElement, VElementExtensions {};
 postprocess(VTDElement);
 export const VTD = wrapper(VTDElement);
 export const NullVTD = create_null(VTDElement);
 // Base class VTemplateElement derived from HTMLTemplateElement.
 // @ts-ignore
 export class VTemplateElement extends HTMLTemplateElement {
+    static element_name = "VTemplateElement";
+    static element_tag = "template";
     constructor(args = {}) {
         super();
         args.derived ??= VTemplateElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTemplateElement.element_tag = "template";
-;
+// @ts-ignore
+// export interface VTemplateElement extends HTMLTemplateElement, VElement, VElementExtensions {};
 postprocess(VTemplateElement);
 export const VTemplate = wrapper(VTemplateElement);
 export const NullVTemplate = create_null(VTemplateElement);
 // Base class VTextAreaElement derived from HTMLTextAreaElement.
 // @ts-ignore
 export class VTextAreaElement extends HTMLTextAreaElement {
+    static element_name = "VTextAreaElement";
+    static element_tag = "textarea";
     constructor(args = {}) {
         super();
         args.derived ??= VTextAreaElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTextAreaElement.element_tag = "textarea";
-;
+// @ts-ignore
+// export interface VTextAreaElement extends HTMLTextAreaElement, VElement, VElementExtensions {};
 postprocess(VTextAreaElement);
 export const VTextArea = wrapper(VTextAreaElement);
 export const NullVTextArea = create_null(VTextAreaElement);
 // Base class VTimeElement derived from HTMLTimeElement.
 // @ts-ignore
 export class VTimeElement extends HTMLTimeElement {
+    static element_name = "VTimeElement";
+    static element_tag = "time";
     constructor(args = {}) {
         super();
         args.derived ??= VTimeElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTimeElement.element_tag = "time";
-;
+// @ts-ignore
+// export interface VTimeElement extends HTMLTimeElement, VElement, VElementExtensions {};
 postprocess(VTimeElement);
 export const VTime = wrapper(VTimeElement);
 export const NullVTime = create_null(VTimeElement);
 // Base class VTitleElement derived from HTMLTitleElement.
 // @ts-ignore
 export class VTitleElement extends HTMLTitleElement {
+    static element_name = "VTitleElement";
+    static element_tag = "title";
     constructor(args = {}) {
         super();
         args.derived ??= VTitleElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTitleElement.element_tag = "title";
-;
+// @ts-ignore
+// export interface VTitleElement extends HTMLTitleElement, VElement, VElementExtensions {};
 postprocess(VTitleElement);
 export const VTitle = wrapper(VTitleElement);
 export const NullVTitle = create_null(VTitleElement);
 // Base class VTableRowElement derived from HTMLTableRowElement.
 // @ts-ignore
 export class VTableRowElement extends HTMLTableRowElement {
+    static element_name = "VTableRowElement";
+    static element_tag = "tr";
     constructor(args = {}) {
         super();
         args.derived ??= VTableRowElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTableRowElement.element_tag = "tr";
-;
+// @ts-ignore
+// export interface VTableRowElement extends HTMLTableRowElement, VElement, VElementExtensions {};
 postprocess(VTableRowElement);
 export const VTableRow = wrapper(VTableRowElement);
 export const NullVTableRow = create_null(VTableRowElement);
 // Base class VTrackElement derived from HTMLTrackElement.
 // @ts-ignore
 export class VTrackElement extends HTMLTrackElement {
+    static element_name = "VTrackElement";
+    static element_tag = "track";
     constructor(args = {}) {
         super();
         args.derived ??= VTrackElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VTrackElement.element_tag = "track";
-;
+// @ts-ignore
+// export interface VTrackElement extends HTMLTrackElement, VElement, VElementExtensions {};
 postprocess(VTrackElement);
 export const VTrack = wrapper(VTrackElement);
 export const NullVTrack = create_null(VTrackElement);
 // Base class VUListElement derived from HTMLUListElement.
 // @ts-ignore
 export class VUListElement extends HTMLUListElement {
+    static element_name = "VUListElement";
+    static element_tag = "ul";
     constructor(args = {}) {
         super();
         args.derived ??= VUListElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VUListElement.element_tag = "ul";
-;
+// @ts-ignore
+// export interface VUListElement extends HTMLUListElement, VElement, VElementExtensions {};
 postprocess(VUListElement);
 export const VUList = wrapper(VUListElement);
 export const NullVUList = create_null(VUListElement);
 // Base class VIFrameElement derived from HTMLIFrameElement.
 // @ts-ignore
 export class VIFrameElement extends HTMLIFrameElement {
+    static element_name = "VIFrameElement";
+    static element_tag = "iframe";
     constructor(args = {}) {
         super();
         args.derived ??= VIFrameElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VIFrameElement.element_tag = "iframe";
-;
+// @ts-ignore
+// export interface VIFrameElement extends HTMLIFrameElement, VElement, VElementExtensions {};
 postprocess(VIFrameElement);
 export const VIFrame = wrapper(VIFrameElement);
 export const NullVIFrame = create_null(VIFrameElement);
 // Base class VCodeElement derived from HTMLElement.
 // @ts-ignore
 export class VCodeElement extends HTMLElement {
+    static element_name = "VCodeElement";
+    static element_tag = "code";
     constructor(args = {}) {
         super();
         args.derived ??= VCodeElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VCodeElement.element_tag = "code";
-;
+// @ts-ignore
+// export interface VCodeElement extends HTMLElement, VElement, VElementExtensions {};
 postprocess(VCodeElement);
 export const VCode = wrapper(VCodeElement);
 export const NullVCode = create_null(VCodeElement);
 // Base class VSectionElement derived from HTMLElement.
 // @ts-ignore
 export class VSectionElement extends HTMLElement {
+    static element_name = "VSectionElement";
+    static element_tag = "section";
     constructor(args = {}) {
         super();
         args.derived ??= VSectionElement;
-        this._init_velement(args);
+        this._init_sys_velement(args);
     }
 }
-VSectionElement.element_tag = "section";
-;
+// @ts-ignore
+// export interface VSectionElement extends HTMLElement, VElement, VElementExtensions {};
 postprocess(VSectionElement);
 export const VSection = wrapper(VSectionElement);
 export const NullVSection = create_null(VSectionElement);
-// Base class VDefaultElement derived from HTMLElement.
-// @ts-ignore
-// export class VDefaultElement extends (HTMLElement as unknown as _SafeVBaseElement) {
-//     static element_tag = "default";
-//     constructor(args: DerivedConstructorOptions = {}) {
-//         super();
-//         args.derived ??= VDefaultElement;
-//         this._init_velement(args as VBaseElementOptions);
-//     }
-// }
-// // @ts-ignore
-// export interface VDefaultElement extends HTMLElement, VBaseElement, VElementExtensions {};
-// postprocess(VDefaultElement);
-// export const VDefault = wrapper(VDefaultElement);
-// export const NullVDefault = create_null(VDefaultElement);
-// declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDefaultElement: VDefaultElement }}
 // The VElement map per html tag.
 export const VElementTagMap = {
     _base: VHTMLElement,
@@ -8814,5 +9052,4 @@ export const VElementTagMap = {
     iframe: VIFrameElement,
     code: VCodeElement,
     section: VSectionElement,
-    // default: VDefaultElement,
 };