@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/elements/base.ts

@@ -14,6 +14,9 @@ import { Themes } from "../modules/themes.js"
 import { GradientType } from "../types/gradient.js"
 import { Statics  } from "../modules/statics.js"
 
+import type { AnyElement } from "../ui/any_element.js"
+import { register_element } from "./register_element.js";
+
 // Vars.
 const elements_with_width_attribute = [ // elements that use the "width" etc attribute instead of the "style.width".
     'canvas',
@@ -25,25 +28,32 @@ const elements_with_width_attribute = [ // elements that use the "width" etc att
     'video',
 ];
 
-
-
 // ------------------------------------------------------------------------------------------------
 // The base VElement.
 
 // The VElement user defined extensions.
 declare global {
     export interface VElementExtensions {}
+    // export type none = null | undefined;
 }
 
 // VElement options.
-interface VBaseElementOptions {
+interface BaseVElementInitOptions {
     derived: any,
-    name?: string,
+    // name: string, // replaced with assigning element_name on each element. @warning required since class names are renamed on bundled file so class.name cant be used.
     // tag: string,
     default_style?: Record<string, any>;
     default_attributes?: Record<string, any>;
     default_events?: Record<string, any>;
 }
+interface DerivedVElementInitOptions {
+    derived?: any,
+    name?: string,
+    // tag?: string,
+    default_style?: Record<string, any>;
+    default_attributes?: Record<string, any>;
+    default_events?: Record<string, any>;
+}
 
 // Get/Set methods.
 const element_checked_descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked');// instead of getAttribute("checked")
@@ -54,9 +64,16 @@ const element_src_descriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.
 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 {}
+// Types.
+export type AppendType = null | undefined | string | Node | VElement | Function | AppendType[];
+export type ElementCallback<This> = (element: This) => any;
+export type ElementEvent<This> = (element: This, event: Event) => any;
+export type ElementMouseEvent<This> = (element: This, event: MouseEvent) => any;
+export type ElementDragEvent<This> = (element: This, event: MouseEvent) => any;
+export type ElementKeyboardEvent<This> = (element: This, event: KeyboardEvent) => any;
+export type ThemeUpdateCallback<This> = (element: This) => any;
+export type OnAppearCallback<This> = (element: This, options: { scroll_direction: string }) => any;
+export type undefstrnr = null | undefined | string | number;
 
 // Base element.
 // @note: this.tagName can not be used since they have different values on safari and other browsers.
@@ -69,14 +86,6 @@ const element_value_descriptor = Object.getOwnPropertyDescriptor(HTMLInputElemen
 // export class VElement extends (HTMLElement as {new(): VBaseElementInterface, prototype: VBaseElementInterface}) {
 export abstract class VElement extends HTMLElement {
 
-    // Macros
-    #macro ElementCallback ((element: this) => any)
-    #macro ElementEvent ((element: this, event: Event) => any)
-    #macro ElementMouseEvent ((element: this, event: MouseEvent) => any)
-    #macro ElementDragEvent ((element: this, event: MouseEvent) => any)
-    #macro ElementKeyboardEvent ((element: this, event: KeyboardEvent) => any)
-    #macro ThemeUpdateCallback ((element: this) => any)
-
     // ---------------------------------------------------------
     // 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.
@@ -89,8 +98,8 @@ export abstract class VElement extends HTMLElement {
     static default_events: Record<string, any> = {};
 
     public rendered!: boolean;
-    public element_type!: string;
-    public base_element_type!: string;
+    public element_name!: string;
+    public base_element_name!: string;
     public remove_focus!: HTMLElement["blur"];
     public _v_children!: any[];
 
@@ -109,17 +118,17 @@ export abstract class VElement extends HTMLElement {
     public _on_resize_rule_evals!: Record<string, any>;
     public _observing_on_resize!: boolean;
     public _observing_on_render!: boolean;
-    public _on_resize_callbacks!: ElementCallback[];
-    public _on_render_callbacks!: ElementCallback[];
-    public _on_theme_updates!: ThemeUpdateCallback[];
-    public _on_mouse_leave_callback!: ElementMouseEvent;
-    public _on_mouse_enter_callback!: ElementMouseEvent;
+    public _on_resize_callbacks!: ElementCallback<this>[];
+    public _on_render_callbacks!: ElementCallback<this>[];
+    public _on_theme_updates!: ThemeUpdateCallback<this>[];
+    public _on_mouse_leave_callback!: ElementMouseEvent<this>;
+    public _on_mouse_enter_callback!: ElementMouseEvent<this>;
     public _on_shortcut_time!: number;
     public _on_shortcut_key!: string;
     public _on_shortcut_keycode!: number;
     public _on_keypress_set!: boolean;
-    public _on_enter_callback?: ElementKeyboardEvent;
-    public _on_escape_callback?: ElementKeyboardEvent;
+    public _on_enter_callback?: ElementKeyboardEvent<this>;
+    public _on_escape_callback?: ElementKeyboardEvent<this>;
     public _on_appear_callbacks!: Record<string, any>[];
     // public _context_menu?: ContextMenuElement;
     public _media_queries!: {
@@ -144,15 +153,19 @@ export abstract class VElement extends HTMLElement {
         // @warning do not use the constructor to define any member props, use _init_velement() instead.
         super();
     }
-    // @warning this method should only be used by the direct types declared in this file e.g. VSpanElement.
-    _init_velement(args: VBaseElementOptions) {  
+    /**
+     * @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.
+     */
+    protected _init_sys_velement(args: BaseVElementInitOptions) {  
 
         // 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;
@@ -161,8 +174,8 @@ export abstract class VElement extends HTMLElement {
         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 = [];
 
@@ -242,18 +255,26 @@ export abstract 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: VBaseElementOptions) {
+    /**
+     * @warning Any VElement (a derived class of VElementTagMap) must call this method in its constructor.
+     */
+    protected _init(args: BaseVElementInitOptions) {
 
         // 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")) {
@@ -330,7 +351,7 @@ export abstract class VElement extends HTMLElement {
         // @ts-ignore
         const clone = new this.constructor();
 
-        if (clone.element_type !== undefined) {
+        if (clone.element_name != null) {
             clone.inner_html("");
         }
 
@@ -368,7 +389,7 @@ export abstract 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 as any).clone());
                 } else {
                     clone.appendChild(child.cloneNode(true));
@@ -439,19 +460,20 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the modified filter string or null if the input filter was null.
      */
-    edit_filter_wrapper(filter: string | null, type: string, to: string | null = null): string {
+    edit_filter_wrapper(filter: string | null, type: string, to: undefstrnr = undefined): string {
+        const to_str: string = (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)) {
+        if (pattern.test(filter!)) {
             if (to == null) {
                 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;
     }
@@ -520,7 +542,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @descr: Returns the instance of the element for chaining.
      */
-    append(...children: any[]): this {
+    append(...children: AppendType[]): this {
         for (let i = 0; i < children.length; i++) {
             let child = children[i];
             if (child != null) {
@@ -531,11 +553,9 @@ export abstract class VElement extends HTMLElement {
                 }
 
                 // VWeb element.
-                else if (isVElement(child) && child.element_type != null) {
+                else if (isVElement(child) && child.element_name != null) {
                     if (
-                        child.element_type == "ForEach" ||
-                        child.element_type == "If" ||
-                        child.element_type == "IfDeviceWith"
+                        child.element_name == "ForEachElement"
                     ) {
                         child.append_children_to(this, this._on_append_callback);
                     } else {
@@ -591,7 +611,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the ZStack element for chaining.
      */
-    zstack_append(...children: any[]): this {
+    zstack_append(...children: AppendType[]): this {
         for (let i = 0; i < children.length; i++) {
             let child = children[i];
             if (child != null) {
@@ -602,12 +622,10 @@ export abstract class VElement extends HTMLElement {
                 }
 
                 // 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"
+                        child.element_name == "ForEachElement"
                     ) {
                         child.append_children_to(this, this._on_append_callback);
                     } else {
@@ -628,7 +646,7 @@ export abstract class VElement extends HTMLElement {
                 }
 
                 // Node element.
-                else if (child instanceof Node || child instanceof HTMLElement) {
+                else if ((child instanceof Node) || (child as any) instanceof HTMLElement) {
                     if (child instanceof HTMLElement) {
                         child.style.gridArea = "1 / 1 / 2 / 2";
                     }
@@ -690,7 +708,7 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     append_children_to(parent: any, on_append_callback?: Function): this {
-        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]);
             }
@@ -722,7 +740,7 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     remove_child(child: any): this {
-        if (isVElement(child) && child.element_type != null) {
+        if (isVElement(child) && child.element_name != null) {
             this.removeChild(child as any);
         } else if (child instanceof Node) {
             this.removeChild(child as any);
@@ -849,6 +867,9 @@ export abstract class VElement extends HTMLElement {
         return this;
     }
 
+    /** Simple wrapper for .width("fit-content") */
+    fit_content(): this { return this.width("fit-content"); }
+
     /**
      * @docs:
      * @title: Fixed Width
@@ -1194,6 +1215,54 @@ export abstract class VElement extends HTMLElement {
         return response;
     }
 
+    // Sync height from another node.
+    sync_height_from(node: AnyElement, process?: (height: number) => number): this {
+        if ((node as any)._sync_height_info === undefined) {
+            (node as any)._sync_height_info = {
+                sync_to: [this],
+                on_resize(e: VElement) {
+                    for (const to_node of (node as any)._sync_height_info.sync_to) {
+                        to_node.height(process === undefined ? node.clientHeight : process(node.clientHeight))
+                    }
+                },
+            };
+            node.on_resize((node as any)._sync_height_info.on_resize)
+        } else {
+            (node as any)._sync_height_info.sync_to.push(this);
+        }
+        return this;
+    }
+    sync_height_to(node: AnyElement | AnyElement[], process?: (height: number) => number): this {
+        if (Array.isArray(node)) {
+            for (const n of node) {
+                this.sync_height_to(n, process);
+            }
+            return this;
+        }
+        if ((this as any)._sync_height_info === undefined) {
+            (this as any)._sync_height_info = {
+                sync_to: [node],
+                on_resize: (e: VElement) => {
+                    for (const to_node of (this as any)._sync_height_info.sync_to) {
+                        to_node.height(process === undefined ? this.clientHeight : process(this.clientHeight))
+                    }
+                },
+            };
+            this.on_resize((this as any)._sync_height_info.on_resize)
+        } else {
+            (this as any)._sync_height_info.sync_to.push(this);
+        }
+        return this;
+    }
+
+    /**
+     * Set a square frame width and height.
+     */
+    square(size: string | number): this {
+        this.flex(0).fixed_frame(size, size);
+        return this;
+    }
+
     /**
      * @docs:
      * @title: Padding
@@ -1613,7 +1682,7 @@ export abstract class VElement extends HTMLElement {
             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\".");
         }
 
@@ -1666,7 +1735,7 @@ export abstract class VElement extends HTMLElement {
         const is_last_non_divider = (child: any) => {
             if (child.nextElementSibling == null) {
                 return true;
-            } else if (child.nextElementSibling.element_type !== "Divider") {
+            } else if (child.nextElementSibling.element_name !== "DividerElement") {
                 return false;
             } else {
                 return is_last_non_divider(child.nextElementSibling);
@@ -1676,7 +1745,7 @@ export abstract class VElement extends HTMLElement {
         // Iterate children.
         this.iterate((child: any) => {
             // Divider element.
-            if (child.element_type === "Divider") {
+            if (child.element_name === "DividerElement") {
                 if (col_children.length > 0 && hide_dividers) {
                     child.hide();
                 } else {
@@ -1818,24 +1887,24 @@ export abstract class VElement extends HTMLElement {
     align(value: string): this;
     // @ts-ignore
     align(value?: string): string | this {
-        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; }
                 if (value === "default") { value = ""; }
                 if (this.style.justifyContent !== value) {
                     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; }
                 if (value === "default") { value = "normal"; }
                 if (this.style.alignItems !== value) {
@@ -1899,31 +1968,31 @@ export abstract class VElement extends HTMLElement {
     align_vertical(): string;
     align_vertical(value: string): this;
     align_vertical(value?: string): string | this {
-        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; }
                 if (value === "default") { value = "normal"; }
                 if (value !== this.style.alignItems) {
                     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; }
                 if (value === "default") { value = ""; }
                 if (value !== this.style.justifyContent) {
                     this.style.justifyContent = value ?? "";
                 }
                 return this;
-            case "Text":
+            case "TextElement":
                 if (value == null) { return this.style.alignItems; }
                 if (this.style.display == null || !this.style.display.includes("flex")) {
                     this.display("flex");
@@ -2406,8 +2475,8 @@ export abstract class VElement extends HTMLElement {
     opacity(): string | number;
     opacity(value: string | number): this;
     opacity(value?: string | number): this | string | number {
-        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);
                 } else {
@@ -2884,7 +2953,7 @@ export abstract 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;
                     }
                 }
@@ -3099,6 +3168,73 @@ export abstract class VElement extends HTMLElement {
         }
     }
 
+    /**
+     * 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: {
+        target: "this" | "self" | AnyElement,
+        selected: string,
+        unselected: string,
+        methods: string[]
+        duration?: number,
+        easing?: string,
+    }[]): this {
+
+        // Set transitions.
+        for (let item of items) {
+            if (item.target === "this" || item.target === "self") {
+                item.target = this;
+            }
+            if (!(item.target as AnyElement).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 as any).transition_mask(transition);
+                } else {
+                    (item.target as AnyElement).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;
+    }
+
     /**
      * @docs:
      * @title: Text Width
@@ -3142,8 +3278,8 @@ export abstract class VElement extends HTMLElement {
      */
     media(
         media_query: string,
-        true_handler?: ElementCallback,
-        false_handler?: ElementCallback
+        true_handler?: ElementCallback<this>,
+        false_handler?: ElementCallback<this>
     ): this {
         // Edit query.
         if (media_query.first() !== "(") {
@@ -3885,7 +4021,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    timeout(delay: number, callback: ElementCallback, options?: { id?: string; debounce?: boolean } | null): this {
+    timeout(delay: number, callback: ElementCallback<this>, options?: { id?: string; debounce?: boolean } | null): this {
         if (options != null && options.id != null) {
             if (options.debounce === true) {
                 clearTimeout(this._timeouts[options.id]);
@@ -3915,6 +4051,7 @@ export abstract class VElement extends HTMLElement {
         return this;
     }
 
+    private _disabled_cursor?: string;
     /**
      * @docs:
      * @title: Disable Button
@@ -3923,6 +4060,8 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     disable(): this {
+        this._disabled_cursor = this.style.cursor;
+        this.style.cursor = "not-allowed";
         this._is_button_disabled = true;
         return this;
     }
@@ -3935,6 +4074,9 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining.
      */
     enable(): this {
+        if (this._disabled_cursor) {
+            this.style.cursor = this._disabled_cursor;
+        }
         this._is_button_disabled = false;
         return this;
     }
@@ -3989,7 +4131,7 @@ export abstract 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;
@@ -4191,9 +4333,6 @@ export abstract class VElement extends HTMLElement {
         return this;
     }
 
-    // On appear callback.
-    #macro OnAppearCallback ((element: T, options: { scroll_direction: string }) => any)
-
     /**
      * @docs:
      * @title: On Appear
@@ -4211,11 +4350,11 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    on_appear<T = this>(callback: OnAppearCallback): this;
-    on_appear<T = this>(options: { callback: OnAppearCallback; repeat?: boolean, threshold?: number | null }): this;
+    on_appear<T = this>(callback: OnAppearCallback<T>): this;
+    on_appear<T = this>(options: { callback: OnAppearCallback<T>; repeat?: boolean, threshold?: number | null }): this;
     on_appear<T = this>(callback_or_opts?: 
-        OnAppearCallback | 
-        { callback: OnAppearCallback, repeat?: boolean; threshold?: number | null }
+        OnAppearCallback<T> | 
+        { callback: OnAppearCallback<T>, repeat?: boolean; threshold?: number | null }
     ): this {
         let callback = callback_or_opts, repeat = false, threshold: number | null = null;
         if (typeof callback_or_opts === "object") {
@@ -4420,9 +4559,9 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    on_enter(): undefined | ElementKeyboardEvent;
-    on_enter(callback: ElementKeyboardEvent): this;
-    on_enter(callback?: ElementKeyboardEvent): this | undefined | ElementKeyboardEvent {
+    on_enter(): undefined | ElementKeyboardEvent<this>;
+    on_enter(callback: ElementKeyboardEvent<this>): this;
+    on_enter(callback?: ElementKeyboardEvent<this>): this | undefined | ElementKeyboardEvent<this> {
         if (callback == null) {
             return this._on_enter_callback;
         }
@@ -4451,9 +4590,9 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    on_escape(): undefined | ElementKeyboardEvent;
-    on_escape(callback: ElementKeyboardEvent): this;
-    on_escape(callback?: ElementKeyboardEvent): this | undefined | ElementKeyboardEvent {
+    on_escape(): undefined | ElementKeyboardEvent<this>;
+    on_escape(callback: ElementKeyboardEvent<this>): this;
+    on_escape(callback?: ElementKeyboardEvent<this>): this | undefined | ElementKeyboardEvent<this> {
         if (callback == null) {
             return this._on_escape_callback;
         }
@@ -4483,9 +4622,9 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the instance of the element for chaining when a callback is provided, or the array of existing callbacks if null is passed.
      * @funcs: 2
      */
-    on_theme_update(): ThemeUpdateCallback[];
-    on_theme_update(callback: ThemeUpdateCallback): this;
-    on_theme_update(callback?: ThemeUpdateCallback): ThemeUpdateCallback[] | this {
+    on_theme_update(): ThemeUpdateCallback<this>[];
+    on_theme_update(callback: ThemeUpdateCallback<this>): this;
+    on_theme_update(callback?: ThemeUpdateCallback<this>): ThemeUpdateCallback<this>[] | this {
         if (callback == null) {
             return this._on_theme_updates;
         }   
@@ -4515,7 +4654,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    remove_on_theme_update(callback: ThemeUpdateCallback): this {
+    remove_on_theme_update(callback: ThemeUpdateCallback<this>): this {
         this._on_theme_updates = this._on_theme_updates.drop(callback);
         return this;
     }
@@ -4543,9 +4682,9 @@ export abstract class VElement extends HTMLElement {
      *     @description When a callback is provided, returns the instance of the element for chaining. If no callback is provided, returns the array of current callbacks.
      * @funcs: 2
      */
-    on_render(): (ElementCallback)[];
-    on_render(callback: ElementCallback): this;
-    on_render(callback?: ElementCallback): (ElementCallback)[] | this {
+    on_render(): (ElementCallback<this>)[];
+    on_render(callback: ElementCallback<this>): this;
+    on_render(callback?: ElementCallback<this>): (ElementCallback<this>)[] | this {
         if (callback == null) {
             return this._on_render_callbacks;
         }
@@ -4567,7 +4706,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    remove_on_render(callback: ElementCallback): this {
+    remove_on_render(callback: ElementCallback<this>): this {
         this._on_render_callbacks = this._on_render_callbacks.drop(callback);
         if (this._on_render_callbacks.length === 0) {
             Utils.on_render_observer.unobserve(this as any);
@@ -4655,9 +4794,9 @@ export abstract class VElement extends HTMLElement {
      *     @descr: When a callback is provided, returns the instance for chaining. Otherwise, returns the list of existing resize callbacks.
      * @funcs: 2
      */
-    on_resize(): (ElementCallback)[];
-    on_resize(callback: ElementCallback): this;
-    on_resize(callback?: ElementCallback): (ElementCallback)[] | this {
+    on_resize(): (ElementCallback<this>)[];
+    on_resize(callback: ElementCallback<this>): this;
+    on_resize(callback?: ElementCallback<this>): (ElementCallback<this>)[] | this {
         if (callback == null) {
             return this._on_resize_callbacks;
         }
@@ -4679,7 +4818,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    remove_on_resize(callback: ElementCallback): this {
+    remove_on_resize(callback: ElementCallback<this>): this {
         this._on_resize_callbacks = this._on_resize_callbacks.drop(callback);
         if (this._on_resize_callbacks.length === 0) {
             Utils.on_resize_observer.unobserve(this as any);
@@ -4724,8 +4863,8 @@ export abstract class VElement extends HTMLElement {
      */
     on_resize_rule(
         evaluation: (element: this) => boolean,
-        on_true?: ElementCallback,
-        on_false?: ElementCallback,
+        on_true?: ElementCallback<this>,
+        on_false?: ElementCallback<this>,
     ): this {
         const eval_index = this._on_resize_rule_evals.length;
         this._on_resize_rule_evals[eval_index] = null;
@@ -4930,7 +5069,7 @@ export abstract class VElement extends HTMLElement {
     //          return this.oncontextmenu ?? undefined;
     //      }
     //  }
-    //  if (callback instanceof ContextMenuElement || (callback as any).element_type === "ContextMenu") {
+    //  if (callback instanceof ContextMenuElement || (callback as any).element_name === "ContextMenuElement") {
     //      this._context_menu = callback as ContextMenuElement;
     //      const _this_ = this;
     //      this.oncontextmenu = (event) => {
@@ -4964,9 +5103,9 @@ export abstract class VElement extends HTMLElement {
      *     @descr: When a callback is provided, returns the instance of the element for chaining. If no callback is provided, returns the current callback.
      * @funcs: 2
      */
-    on_mouse_enter(): ElementMouseEvent;
-    on_mouse_enter(callback: ElementMouseEvent): this;
-    on_mouse_enter(callback?: ElementMouseEvent): this | ElementMouseEvent {
+    on_mouse_enter(): ElementMouseEvent<this>;
+    on_mouse_enter(callback: ElementMouseEvent<this>): this;
+    on_mouse_enter(callback?: ElementMouseEvent<this>): this | ElementMouseEvent<this> {
         if (callback == null) { return this._on_mouse_enter_callback; }
         this._on_mouse_enter_callback = callback;
         const e = this;
@@ -4985,9 +5124,9 @@ export abstract class VElement extends HTMLElement {
      *     @description When an argument is passed this function returns the instance of the element for chaining. Otherwise, it returns the currently set callback function.
      * @funcs: 2
      */
-    on_mouse_leave(): ElementMouseEvent;
-    on_mouse_leave(callback: ElementMouseEvent): this;
-    on_mouse_leave(callback?: ElementMouseEvent): this | ElementMouseEvent {
+    on_mouse_leave(): ElementMouseEvent<this>;
+    on_mouse_leave(callback: ElementMouseEvent<this>): this;
+    on_mouse_leave(callback?: ElementMouseEvent<this>): this | ElementMouseEvent<this> {
         if (callback == null) { return this._on_mouse_leave_callback; }
         this._on_mouse_leave_callback = callback;
         const e = this;
@@ -5008,7 +5147,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    on_mouse_over_out(mouse_over: ElementMouseEvent, mouse_out: ElementMouseEvent): this {
+    on_mouse_over_out(mouse_over: ElementMouseEvent<this>, mouse_out: ElementMouseEvent<this>): this {
         this.on_mouse_over(mouse_over);
         this.on_mouse_out(mouse_out);
         return this;
@@ -5679,7 +5818,7 @@ export abstract class VElement extends HTMLElement {
      * @return:
      *     @description Returns the instance of the element for chaining.
      */
-    exec(callback: ElementCallback): this {
+    exec(callback: ElementCallback<this>): this {
         callback(this);
         return this;
     }
@@ -14252,8 +14391,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     // on_page_show(): Function | undefined;
-    // on_page_show(callback: ElementEvent): this;
-    // on_page_show(callback?: ElementEvent): this | Function | undefined {
+    // on_page_show(callback: ElementEvent<this>): this;
+    // on_page_show(callback?: ElementEvent<this>): this | Function | undefined {
     //     if (callback == null) { return this.onpageshow; }
     //     const e = this;
     //     this.onpageshow = (t) => callback(e, t);
@@ -14320,8 +14459,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_blur(): Function | undefined;
-    on_blur(callback: ElementEvent): this;
-    on_blur(callback?: ElementEvent): this | Function | undefined {
+    on_blur(callback: ElementEvent<this>): this;
+    on_blur(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onblur ?? undefined; }
         const e = this;
         this.onblur = (t) => callback(e, t);
@@ -14340,8 +14479,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_change(): Function | undefined;
-    on_change(callback: ElementEvent): this;
-    on_change(callback?: ElementEvent): this | Function | undefined {
+    on_change(callback: ElementEvent<this>): this;
+    on_change(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onchange ?? undefined; }
         const e = this;
         this.onchange = (t) => callback(e, t);
@@ -14361,8 +14500,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_focus(): Function | undefined;
-    on_focus(callback: ElementEvent): this;
-    on_focus(callback?: ElementEvent): this | Function | undefined {
+    on_focus(callback: ElementEvent<this>): this;
+    on_focus(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onfocus ?? undefined; }
         const e = this;
         this.onfocus = (t) => callback(e, t);
@@ -14383,9 +14522,9 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the `VElement` object for chaining, or the attribute's value if the parameter is `null`.
      * @funcs: 2
      */
-    on_input(): ElementEvent | undefined;
-    on_input(callback: ElementEvent): this;
-    on_input(callback?: ElementEvent): this | ElementEvent | undefined {
+    on_input(): ElementEvent<this> | undefined;
+    on_input(callback: ElementEvent<this>): this;
+    on_input(callback?: ElementEvent<this>): this | ElementEvent<this> | undefined {
         if (callback == null) { return (this.oninput as any) ?? undefined; }
         const e = this;
         this.oninput = (t) => callback(e, t);
@@ -14404,8 +14543,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_before_input(): Function | undefined;
-    on_before_input(callback: ElementEvent): this;
-    on_before_input(callback?: ElementEvent): this | Function | undefined {
+    on_before_input(callback: ElementEvent<this>): this;
+    on_before_input(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return (this.onbeforeinput as any) ?? undefined; }
         const e = this;
         this.onbeforeinput = (t) => callback(e, t);
@@ -14425,8 +14564,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_invalid(): Function | undefined;
-    on_invalid(callback: ElementEvent): this;
-    on_invalid(callback?: ElementEvent): this | Function | undefined {
+    on_invalid(callback: ElementEvent<this>): this;
+    on_invalid(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.oninvalid ?? undefined; }
         const e = this;
         this.oninvalid = (t) => callback(e, t);
@@ -14446,8 +14585,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_reset(): Function | undefined;
-    on_reset(callback: ElementEvent): this;
-    on_reset(callback?: ElementEvent): this | Function | undefined {
+    on_reset(callback: ElementEvent<this>): this;
+    on_reset(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onreset ?? undefined; }
         const e = this;
         this.onreset = (t) => callback(e, t);
@@ -14469,8 +14608,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_select(): Function | undefined;
-    on_select(callback: ElementEvent): this;
-    on_select(callback?: ElementEvent): this | Function | undefined {
+    on_select(callback: ElementEvent<this>): this;
+    on_select(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onselect ?? undefined; }
         const e = this;
         this.onselect = (t) => callback(e, t);
@@ -14490,8 +14629,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_submit(): Function | undefined;
-    on_submit(callback: ElementEvent): this;
-    on_submit(callback?: ElementEvent): this | Function | undefined {
+    on_submit(callback: ElementEvent<this>): this;
+    on_submit(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onsubmit ?? undefined; }
         const e = this;
         this.onsubmit = (t) => callback(e, t);
@@ -14512,8 +14651,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_key_down(): Function | undefined;
-    on_key_down(callback: ElementKeyboardEvent): this;
-    on_key_down(callback?: ElementKeyboardEvent): this | Function | undefined {
+    on_key_down(callback: ElementKeyboardEvent<this>): this;
+    on_key_down(callback?: ElementKeyboardEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onkeydown ?? undefined; }
         const e = this;
         this.onkeydown = (t) => callback(e, t);
@@ -14533,8 +14672,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_key_press(): Function | undefined;
-    on_key_press(callback: ElementKeyboardEvent): this;
-    on_key_press(callback?: ElementKeyboardEvent): this | Function | undefined {
+    on_key_press(callback: ElementKeyboardEvent<this>): this;
+    on_key_press(callback?: ElementKeyboardEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onkeypress ?? undefined; }
         const e = this;
         this.onkeypress = (t) => callback(e, t);
@@ -14556,8 +14695,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_key_up(): Function | undefined;
-    on_key_up(callback: ElementKeyboardEvent): this;
-    on_key_up(callback?: ElementKeyboardEvent): this | Function | undefined {
+    on_key_up(callback: ElementKeyboardEvent<this>): this;
+    on_key_up(callback?: ElementKeyboardEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onkeyup ?? undefined; }
         const e = this;
         this.onkeyup = (t) => callback(e, t);
@@ -14578,8 +14717,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_dbl_click(): Function | undefined;
-    on_dbl_click(callback: ElementMouseEvent): this;
-    on_dbl_click(callback?: ElementMouseEvent): this | Function | undefined {
+    on_dbl_click(callback: ElementMouseEvent<this>): this;
+    on_dbl_click(callback?: ElementMouseEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ondblclick ?? undefined; }
         const e = this;
         this.ondblclick = (t) => callback(e, t);
@@ -14599,8 +14738,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_mouse_down(): Function | undefined;
-    on_mouse_down(callback: ElementMouseEvent): this;
-    on_mouse_down(callback?: ElementMouseEvent): this | Function | undefined {
+    on_mouse_down(callback: ElementMouseEvent<this>): this;
+    on_mouse_down(callback?: ElementMouseEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onmousedown ?? undefined; }
         const e = this;
         this.onmousedown = (t) => callback(e, t);
@@ -14620,8 +14759,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_mouse_move(): Function | undefined;
-    on_mouse_move(callback: ElementMouseEvent): this;
-    on_mouse_move(callback?: ElementMouseEvent): this | Function | undefined  {
+    on_mouse_move(callback: ElementMouseEvent<this>): this;
+    on_mouse_move(callback?: ElementMouseEvent<this>): this | Function | undefined  {
         if (callback == null) { return this.onmousemove ?? undefined; }
         const e = this;
         this.onmousemove = (t) => callback(e, t);
@@ -14642,11 +14781,15 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_mouse_out(): Function | undefined;
-    on_mouse_out(callback: ElementMouseEvent): this;
-    on_mouse_out(callback?: ElementMouseEvent): this | Function | undefined {
+    on_mouse_out(callback: ElementMouseEvent<this>): this;
+    on_mouse_out(callback?: ElementMouseEvent<this>): this | Function | undefined {
         if (callback == null) { 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;
     }
 
@@ -14662,11 +14805,15 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_mouse_over(): Function | undefined;
-    on_mouse_over(callback: ElementMouseEvent): this;
-    on_mouse_over(callback?: ElementMouseEvent): this | Function | undefined {
+    on_mouse_over(callback: ElementMouseEvent<this>): this;
+    on_mouse_over(callback?: ElementMouseEvent<this>): this | Function | undefined {
         if (callback == null) { 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;
     }
 
@@ -14683,8 +14830,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_mouse_up(): Function | undefined;
-    on_mouse_up(callback: ElementMouseEvent): this;
-    on_mouse_up(callback?: ElementMouseEvent): this | Function | undefined {
+    on_mouse_up(callback: ElementMouseEvent<this>): this;
+    on_mouse_up(callback?: ElementMouseEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onmouseup ?? undefined; }
         const e = this;
         this.onmouseup = (t) => callback(e, t);
@@ -14728,8 +14875,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag(): Function | undefined;
-    on_drag(callback: ElementDragEvent): this;
-    on_drag(callback?: ElementDragEvent): this | Function | undefined {
+    on_drag(callback: ElementDragEvent<this>): this;
+    on_drag(callback?: ElementDragEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ondrag ?? undefined; }
         const e = this;
         this.ondrag = (t) => callback(e, t);
@@ -14749,8 +14896,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag_end(): Function | undefined;
-    on_drag_end(callback: ElementDragEvent): this;
-    on_drag_end(callback?: ElementDragEvent): this | Function | undefined {
+    on_drag_end(callback: ElementDragEvent<this>): this;
+    on_drag_end(callback?: ElementDragEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ondragend ?? undefined; }
         const e = this;
         this.ondragend = (t) => callback(e, t);
@@ -14775,8 +14922,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag_enter(): Function | undefined;
-    on_drag_enter(callback: ElementDragEvent): this;
-    on_drag_enter(callback?: ElementDragEvent): this | Function | undefined{
+    on_drag_enter(callback: ElementDragEvent<this>): this;
+    on_drag_enter(callback?: ElementDragEvent<this>): this | Function | undefined{
         if (callback == null) { return this.ondragenter ?? undefined; }
         const e = this;
         this.ondragenter = (t) => callback(e, t);
@@ -14801,8 +14948,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag_leave(): Function | undefined;
-    on_drag_leave(callback: ElementDragEvent): this;
-    on_drag_leave(callback?: ElementDragEvent): this | Function | undefined {
+    on_drag_leave(callback: ElementDragEvent<this>): this;
+    on_drag_leave(callback?: ElementDragEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ondragleave ?? undefined; }
         const e = this;
         this.ondragleave = (t) => callback(e, t);
@@ -14823,8 +14970,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag_over(): Function | undefined;
-    on_drag_over(callback: ElementDragEvent): this;
-    on_drag_over(callback?: ElementDragEvent): this | Function | undefined{
+    on_drag_over(callback: ElementDragEvent<this>): this;
+    on_drag_over(callback?: ElementDragEvent<this>): this | Function | undefined{
         if (callback == null) { return this.ondragover ?? undefined; }
         const e = this;
         this.ondragover = (t) => callback(e, t);
@@ -14845,8 +14992,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drag_start(): Function | undefined;
-    on_drag_start(callback: ElementDragEvent): this;
-    on_drag_start(callback?: ElementDragEvent): this | Function | undefined{
+    on_drag_start(callback: ElementDragEvent<this>): this;
+    on_drag_start(callback?: ElementDragEvent<this>): this | Function | undefined{
         if (callback == null) { return this.ondragstart ?? undefined; }
         const e = this;
         this.ondragstart = (t) => callback(e, t);
@@ -14865,8 +15012,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_drop(): Function | undefined;
-    on_drop(callback: ElementEvent): this;
-    on_drop(callback?: ElementEvent): this | Function | undefined {
+    on_drop(callback: ElementEvent<this>): this;
+    on_drop(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ondrop ?? undefined; }
         const e = this;
         this.ondrop = (t) => callback(e, t);
@@ -14894,8 +15041,8 @@ export abstract class VElement extends HTMLElement {
      *     @description Returns the `VElement` object. Unless parameter `value` is `null`, then the attribute's value is returned.
      */
     on_copy(): Function | undefined;
-    on_copy(callback: ElementEvent): this;
-    on_copy(callback?: ElementEvent): this | Function | undefined {
+    on_copy(callback: ElementEvent<this>): this;
+    on_copy(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.oncopy ?? undefined; }
         const e = this;
         this.oncopy = (t) => callback(e, t);
@@ -14915,8 +15062,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_cut(): Function | undefined;
-    on_cut(callback: ElementEvent): this;
-    on_cut(callback?: ElementEvent): undefined | Function | this {
+    on_cut(callback: ElementEvent<this>): this;
+    on_cut(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.oncut ?? undefined; }
         const e = this;
         this.oncut = (t) => callback(e, t);
@@ -14936,8 +15083,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_paste(): Function | undefined;
-    on_paste(callback: ElementEvent): this;
-    on_paste(callback?: ElementEvent): undefined | Function | this {
+    on_paste(callback: ElementEvent<this>): this;
+    on_paste(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onpaste ?? undefined; }
         const e = this;
         this.onpaste = (t) => callback(e, t);
@@ -14958,8 +15105,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_abort(): Function | undefined;
-    on_abort(callback: ElementEvent): this;
-    on_abort(callback?: ElementEvent): undefined | Function | this {
+    on_abort(callback: ElementEvent<this>): this;
+    on_abort(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onabort ?? undefined; }
         const e = this;
         this.onabort = (t) => callback(e, t);
@@ -14980,8 +15127,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_canplay(): Function | undefined;
-    on_canplay(callback: ElementEvent): this;
-    on_canplay(callback?: ElementEvent): undefined | Function | this {
+    on_canplay(callback: ElementEvent<this>): this;
+    on_canplay(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.oncanplay ?? undefined; }
         const e = this;
         this.oncanplay = (t) => callback(e, t);
@@ -15001,8 +15148,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_canplay_through(): Function | undefined;
-    on_canplay_through(callback: ElementEvent): this;
-    on_canplay_through(callback?: ElementEvent): undefined | Function | this {
+    on_canplay_through(callback: ElementEvent<this>): this;
+    on_canplay_through(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.oncanplaythrough ?? undefined; }
         const e = this;
         this.oncanplaythrough = (t) => callback(e, t);
@@ -15024,8 +15171,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_cue_change(): Function | undefined;
-    on_cue_change(callback: ElementEvent): this;
-    on_cue_change(callback?: ElementEvent): undefined | Function | this {
+    on_cue_change(callback: ElementEvent<this>): this;
+    on_cue_change(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.oncuechange ?? undefined; }
         const e = this;
         this.oncuechange = (t) => callback(e, t);
@@ -15045,8 +15192,8 @@ export abstract class VElement extends HTMLElement {
     * @funcs: 2
      */
     on_duration_change(): Function | undefined;
-    on_duration_change(callback: ElementEvent): this;
-    on_duration_change(callback?: ElementEvent): undefined | Function | this {
+    on_duration_change(callback: ElementEvent<this>): this;
+    on_duration_change(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.ondurationchange ?? undefined; }
         const e = this;
         this.ondurationchange = (t) => callback(e, t);
@@ -15066,8 +15213,8 @@ export abstract class VElement extends HTMLElement {
     * @funcs: 2
      */
     on_emptied(): Function | undefined;
-    on_emptied(callback: ElementEvent): this;
-    on_emptied(callback?: ElementEvent): undefined | Function | this {
+    on_emptied(callback: ElementEvent<this>): this;
+    on_emptied(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onemptied ?? undefined; }
         const e = this;
         this.onemptied = (t) => callback(e, t);
@@ -15088,8 +15235,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_ended(): Function | undefined;
-    on_ended(callback: ElementEvent): this;
-    on_ended(callback?: ElementEvent): undefined | Function | this {
+    on_ended(callback: ElementEvent<this>): this;
+    on_ended(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onended ?? undefined; }
         const e = this;
         this.onended = (t) => callback(e, t);
@@ -15130,8 +15277,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_loaded_data(): Function | undefined;
-    on_loaded_data(callback: ElementEvent): this;
-    on_loaded_data(callback?: ElementEvent): undefined | Function | this {
+    on_loaded_data(callback: ElementEvent<this>): this;
+    on_loaded_data(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onloadeddata ?? undefined; }
         const e = this;
         this.onloadeddata = (t) => callback(e, t);
@@ -15152,8 +15299,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_loaded_metadata(): Function | undefined;
-    on_loaded_metadata(callback: ElementEvent): this;
-    on_loaded_metadata(callback?: ElementEvent): undefined | Function | this {
+    on_loaded_metadata(callback: ElementEvent<this>): this;
+    on_loaded_metadata(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onloadedmetadata ?? undefined; }
         const e = this;
         this.onloadedmetadata = (t) => callback(e, t);
@@ -15178,8 +15325,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_load_start(): Function | undefined;
-    on_load_start(callback: ElementEvent): this;
-    on_load_start(callback?: ElementEvent): undefined | Function | this {
+    on_load_start(callback: ElementEvent<this>): this;
+    on_load_start(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onloadstart ?? undefined; }
         const e = this;
         this.onloadstart = (t) => callback(e, t);
@@ -15198,8 +15345,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_pause(): Function | undefined;
-    on_pause(callback: ElementEvent): this;
-    on_pause(callback?: ElementEvent): undefined | Function | this {
+    on_pause(callback: ElementEvent<this>): this;
+    on_pause(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onpause ?? undefined; }
         const e = this;
         this.onpause = (t) => callback(e, t);
@@ -15219,8 +15366,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_play(): Function | undefined;
-    on_play(callback: ElementEvent): this;
-    on_play(callback?: ElementEvent): undefined | Function | this {
+    on_play(callback: ElementEvent<this>): this;
+    on_play(callback?: ElementEvent<this>): undefined | Function | this {
         if (callback == null) { return this.onplay ?? undefined; }
         const e = this;
         this.onplay = (t) => callback(e, t);
@@ -15261,8 +15408,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_progress(): Function | undefined;
-    on_progress(callback: ElementEvent): this;
-    on_progress(callback?: ElementEvent): this | Function | undefined {
+    on_progress(callback: ElementEvent<this>): this;
+    on_progress(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onprogress ?? undefined; }
         const e = this;
         this.onprogress = (t) => callback(e, t);
@@ -15282,8 +15429,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_rate_change(): Function | undefined;
-    on_rate_change(callback: ElementEvent): this;
-    on_rate_change(callback?: ElementEvent): undefined | this | Function {
+    on_rate_change(callback: ElementEvent<this>): this;
+    on_rate_change(callback?: ElementEvent<this>): undefined | this | Function {
         if (callback == null) { return this.onratechange ?? undefined; }
         const e = this;
         this.onratechange = (t) => callback(e, t);
@@ -15345,8 +15492,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_stalled(): Function | undefined;
-    on_stalled(callback: ElementEvent): this;
-    on_stalled(callback?: ElementEvent): this | Function | undefined {
+    on_stalled(callback: ElementEvent<this>): this;
+    on_stalled(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onstalled ?? undefined; }
         const e = this;
         this.onstalled = (t) => callback(e, t);
@@ -15385,8 +15532,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_time_update(): Function | undefined;
-    on_time_update(callback: ElementEvent): this;
-    on_time_update(callback?: ElementEvent): this | Function | undefined {
+    on_time_update(callback: ElementEvent<this>): this;
+    on_time_update(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ontimeupdate ?? undefined; }
         const e = this;
         this.ontimeupdate = (t) => callback(e, t);
@@ -15406,8 +15553,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_volume_change(): Function | undefined;
-    on_volume_change(callback: ElementEvent): this;
-    on_volume_change(callback?: ElementEvent): this | Function | undefined {
+    on_volume_change(callback: ElementEvent<this>): this;
+    on_volume_change(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.onvolumechange ?? undefined; }
         const e = this;
         this.onvolumechange = (t) => callback(e, t);
@@ -15448,8 +15595,8 @@ export abstract class VElement extends HTMLElement {
      * @funcs: 2
      */
     on_toggle() : Function | undefined;
-    on_toggle(callback: ElementEvent): this;
-    on_toggle(callback?: ElementEvent): this | Function | undefined {
+    on_toggle(callback: ElementEvent<this>): this;
+    on_toggle(callback?: ElementEvent<this>): this | Function | undefined {
         if (callback == null) { return this.ontoggle ?? undefined; }
         const e = this;
         this.ontoggle = (t) => callback(e, t);
@@ -15531,57 +15678,11 @@ export function extend<T extends Record<string, ((this: VElement & ThisType<VEle
         Object.assign(instance.prototype, 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: any, tag?: null | string): void {
-    (type as any)._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 as any).element_tag });
-    }
-}
-// register_type(VElement);
 
 // Post process velement.
-function postprocess(type: any, tag?: null | string): void {
+function postprocess(type: any): void {
     mixin(type);
-    register_type(type, tag);
+    register_element(type);
 }
 
 // Create a constructor wrapper.
@@ -15607,60 +15708,56 @@ export function create_null<T extends new (...args: any[]) => any>(target_class:
 // These types must be defined as v2 in order to extend all base html elements properly and still keep VElement as common base class without using dynamic classes.
 // v1 used a dynamic class which caused a lot of typescript issues regarding extended type & method hierarchy.
 
-interface DerivedConstructorOptions {
-    derived?: any,
-    name?: string,
-    // tag?: string,
-    default_style?: Record<string, any>;
-    default_attributes?: Record<string, any>;
-    default_events?: Record<string, any>;
-}
-
-interface DerivedInitOptions {
-    derived: any,
-    name?: string,
-    // tag?: string,
-    default_style?: Record<string, any>;
-    default_attributes?: Record<string, any>;
-    default_events?: Record<string, any>;
+// The signature types used to cast `class X extends (VStackElement as VElementBaseSignature)`.
+// 1. Done to add the extensions to the classes so the class types can be used and still include the extensions instead of `ReturnType<typeof volt.Text>` because that already had the extensions.
+// 2. Done because sometimes when extending a class typescript doesnt infer and detec the original VElement methods, this cast also fixes that.
+export type VElementBaseSignature = {
+    new(...args: any[]): VElement & VElementExtensions;
+    element_tag: string;
+    default_style: Record<string, any>;
+    default_attributes: Record<string, any>;
+    default_events: Record<string, any>;
 }
+type VElementBaseSignature2 = VElementBaseSignature;
 
-type _SafeVBaseElement = typeof VElement & typeof HTMLElement & {
-   new(): VElement & HTMLElement & VElementExtensions,
-   prototype: VElement & HTMLElement & VElementExtensions,
-}
+// 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 as unknown as _SafeVBaseElement) {
-    constructor(args: DerivedConstructorOptions = {}) {
+export class VHTMLElement extends (HTMLElement as unknown as VElementBaseSignature2) {
+    static element_name = "VHTMLElement";
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VHTMLElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VHTMLElement extends HTMLElement, VBaseElement, VElementExtensions {};
-postprocess(VHTMLElement, null);
+// export interface VHTMLElement extends HTMLElement, VElement, VElementExtensions {};
+postprocess(VHTMLElement);
 export const VHTML = wrapper(VHTMLElement);
 export const NullVHTML = create_null(VHTMLElement);
 declare module '../ui/any_element.d.ts' { interface AnyElementMap { VHTMLElement: VHTMLElement }}
 
 // Base class VAnchorElement derived from HTMLAnchorElement.
 // @ts-ignore
-export class VAnchorElement extends (HTMLAnchorElement as unknown as _SafeVBaseElement) {
+export class VAnchorElement extends (HTMLAnchorElement as unknown as VElementBaseSignature2) {
+    static element_name = "VAnchorElement";
     static element_tag = "a";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VAnchorElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VAnchorElement extends HTMLAnchorElement, VBaseElement, VElementExtensions {};
+// export interface VAnchorElement extends HTMLAnchorElement, VElement, VElementExtensions {};
 postprocess(VAnchorElement);
 export const VAnchor = wrapper(VAnchorElement);
 export const NullVAnchor = create_null(VAnchorElement);
@@ -15668,16 +15765,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VAnchorEleme
 
 // Base class VAreaElement derived from HTMLAreaElement.
 // @ts-ignore
-export class VAreaElement extends (HTMLAreaElement as unknown as _SafeVBaseElement) {
+export class VAreaElement extends (HTMLAreaElement as unknown as VElementBaseSignature2) {
+    static element_name = "VAreaElement";
     static element_tag = "area";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VAreaElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VAreaElement extends HTMLAreaElement, VBaseElement, VElementExtensions {};
+// export interface VAreaElement extends HTMLAreaElement, VElement, VElementExtensions {};
 postprocess(VAreaElement);
 export const VArea = wrapper(VAreaElement);
 export const NullVArea = create_null(VAreaElement);
@@ -15685,16 +15783,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VAreaElement
 
 // Base class VAudioElement derived from HTMLAudioElement.
 // @ts-ignore
-export class VAudioElement extends (HTMLAudioElement as unknown as _SafeVBaseElement) {
+export class VAudioElement extends (HTMLAudioElement as unknown as VElementBaseSignature2) {
+    static element_name = "VAudioElement";
     static element_tag = "audio";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VAudioElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VAudioElement extends HTMLAudioElement, VBaseElement, VElementExtensions {};
+// export interface VAudioElement extends HTMLAudioElement, VElement, VElementExtensions {};
 postprocess(VAudioElement);
 export const VAudio = wrapper(VAudioElement);
 export const NullVAudio = create_null(VAudioElement);
@@ -15702,16 +15801,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VAudioElemen
 
 // Base class VBlockQuoteElement derived from HTMLQuoteElement.
 // @ts-ignore
-export class VBlockQuoteElement extends (HTMLQuoteElement as unknown as _SafeVBaseElement) {
+export class VBlockQuoteElement extends (HTMLQuoteElement as unknown as VElementBaseSignature2) {
+    static element_name = "VBlockQuoteElement";
     static element_tag = "blockquote";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VBlockQuoteElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VBlockQuoteElement extends HTMLQuoteElement, VBaseElement, VElementExtensions {};
+// export interface VBlockQuoteElement extends HTMLQuoteElement, VElement, VElementExtensions {};
 postprocess(VBlockQuoteElement);
 export const VBlockQuote = wrapper(VBlockQuoteElement);
 export const NullVBlockQuote = create_null(VBlockQuoteElement);
@@ -15719,16 +15819,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VBlockQuoteE
 
 // Base class VBodyElement derived from HTMLBodyElement.
 // @ts-ignore
-export class VBodyElement extends (HTMLBodyElement as unknown as _SafeVBaseElement) {
+export class VBodyElement extends (HTMLBodyElement as unknown as VElementBaseSignature2) {
+    static element_name = "VBodyElement";
     static element_tag = "body";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VBodyElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VBodyElement extends HTMLBodyElement, VBaseElement, VElementExtensions {};
+// export interface VBodyElement extends HTMLBodyElement, VElement, VElementExtensions {};
 postprocess(VBodyElement);
 export const VBody = wrapper(VBodyElement);
 export const NullVBody = create_null(VBodyElement);
@@ -15736,16 +15837,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VBodyElement
 
 // Base class VBRElement derived from HTMLBRElement.
 // @ts-ignore
-export class VBRElement extends (HTMLBRElement as unknown as _SafeVBaseElement) {
+export class VBRElement extends (HTMLBRElement as unknown as VElementBaseSignature2) {
+    static element_name = "VBRElement";
     static element_tag = "br";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VBRElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VBRElement extends HTMLBRElement, VBaseElement, VElementExtensions {};
+// export interface VBRElement extends HTMLBRElement, VElement, VElementExtensions {};
 postprocess(VBRElement);
 export const VBR = wrapper(VBRElement);
 export const NullVBR = create_null(VBRElement);
@@ -15753,16 +15855,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VBRElement:
 
 // Base class VButtonElement derived from HTMLButtonElement.
 // @ts-ignore
-export class VButtonElement extends (HTMLButtonElement as unknown as _SafeVBaseElement) {
+export class VButtonElement extends (HTMLButtonElement as unknown as VElementBaseSignature2) {
+    static element_name = "VButtonElement";
     static element_tag = "button";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VButtonElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VButtonElement extends HTMLButtonElement, VBaseElement, VElementExtensions {};
+// export interface VButtonElement extends HTMLButtonElement, VElement, VElementExtensions {};
 postprocess(VButtonElement);
 export const VButton = wrapper(VButtonElement);
 export const NullVButton = create_null(VButtonElement);
@@ -15770,16 +15873,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VButtonEleme
 
 // Base class VCanvasElement derived from HTMLCanvasElement.
 // @ts-ignore
-export class VCanvasElement extends (HTMLCanvasElement as unknown as _SafeVBaseElement) {
+export class VCanvasElement extends (HTMLCanvasElement as unknown as VElementBaseSignature2) {
+    static element_name = "VCanvasElement";
     static element_tag = "canvas";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VCanvasElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VCanvasElement extends HTMLCanvasElement, VBaseElement, VElementExtensions {};
+// export interface VCanvasElement extends HTMLCanvasElement, VElement, VElementExtensions {};
 postprocess(VCanvasElement);
 export const VCanvas = wrapper(VCanvasElement);
 export const NullVCanvas = create_null(VCanvasElement);
@@ -15787,16 +15891,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VCanvasEleme
 
 // Base class VTableCaptionElement derived from HTMLTableCaptionElement.
 // @ts-ignore
-export class VTableCaptionElement extends (HTMLTableCaptionElement as unknown as _SafeVBaseElement) {
+export class VTableCaptionElement extends (HTMLTableCaptionElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTableCaptionElement";
     static element_tag = "caption";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTableCaptionElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTableCaptionElement extends HTMLTableCaptionElement, VBaseElement, VElementExtensions {};
+// export interface VTableCaptionElement extends HTMLTableCaptionElement, VElement, VElementExtensions {};
 postprocess(VTableCaptionElement);
 export const VTableCaption = wrapper(VTableCaptionElement);
 export const NullVTableCaption = create_null(VTableCaptionElement);
@@ -15804,16 +15909,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTableCaptio
 
 // Base class VTableColElement derived from HTMLTableColElement.
 // @ts-ignore
-export class VTableColElement extends (HTMLTableColElement as unknown as _SafeVBaseElement) {
+export class VTableColElement extends (HTMLTableColElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTableColElement";
     static element_tag = "col";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTableColElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTableColElement extends HTMLTableColElement, VBaseElement, VElementExtensions {};
+// export interface VTableColElement extends HTMLTableColElement, VElement, VElementExtensions {};
 postprocess(VTableColElement);
 export const VTableCol = wrapper(VTableColElement);
 export const NullVTableCol = create_null(VTableColElement);
@@ -15821,16 +15927,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTableColEle
 
 // Base class VDataElement derived from HTMLDataElement.
 // @ts-ignore
-export class VDataElement extends (HTMLDataElement as unknown as _SafeVBaseElement) {
+export class VDataElement extends (HTMLDataElement as unknown as VElementBaseSignature2) {
+    static element_name = "VDataElement";
     static element_tag = "data";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VDataElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VDataElement extends HTMLDataElement, VBaseElement, VElementExtensions {};
+// export interface VDataElement extends HTMLDataElement, VElement, VElementExtensions {};
 postprocess(VDataElement);
 export const VData = wrapper(VDataElement);
 export const NullVData = create_null(VDataElement);
@@ -15838,16 +15945,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDataElement
 
 // Base class VDataListElement derived from HTMLDataListElement.
 // @ts-ignore
-export class VDataListElement extends (HTMLDataListElement as unknown as _SafeVBaseElement) {
+export class VDataListElement extends (HTMLDataListElement as unknown as VElementBaseSignature2) {
+    static element_name = "VDataListElement";
     static element_tag = "datalist";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VDataListElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VDataListElement extends HTMLDataListElement, VBaseElement, VElementExtensions {};
+// export interface VDataListElement extends HTMLDataListElement, VElement, VElementExtensions {};
 postprocess(VDataListElement);
 export const VDataList = wrapper(VDataListElement);
 export const NullVDataList = create_null(VDataListElement);
@@ -15855,16 +15963,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDataListEle
 
 // Base class VDListElement derived from HTMLDListElement.
 // @ts-ignore
-export class VDListElement extends (HTMLDListElement as unknown as _SafeVBaseElement) {
+export class VDListElement extends (HTMLDListElement as unknown as VElementBaseSignature2) {
+    static element_name = "VDListElement";
     static element_tag = "dl";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VDListElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VDListElement extends HTMLDListElement, VBaseElement, VElementExtensions {};
+// export interface VDListElement extends HTMLDListElement, VElement, VElementExtensions {};
 postprocess(VDListElement);
 export const VDList = wrapper(VDListElement);
 export const NullVDList = create_null(VDListElement);
@@ -15872,16 +15981,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDListElemen
 
 // Base class VDirectoryElement derived from HTMLDirectoryElement.
 // @ts-ignore
-export class VDirectoryElement extends (HTMLDirectoryElement as unknown as _SafeVBaseElement) {
+export class VDirectoryElement extends (HTMLDirectoryElement as unknown as VElementBaseSignature2) {
+    static element_name = "VDirectoryElement";
     static element_tag = "dir";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VDirectoryElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VDirectoryElement extends HTMLDirectoryElement, VBaseElement, VElementExtensions {};
+// export interface VDirectoryElement extends HTMLDirectoryElement, VElement, VElementExtensions {};
 postprocess(VDirectoryElement);
 export const VDirectory = wrapper(VDirectoryElement);
 export const NullVDirectory = create_null(VDirectoryElement);
@@ -15889,16 +15999,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDirectoryEl
 
 // Base class VDivElement derived from HTMLDivElement.
 // @ts-ignore
-export class VDivElement extends (HTMLDivElement as unknown as _SafeVBaseElement) {
+export class VDivElement extends (HTMLDivElement as unknown as VElementBaseSignature2) {
+    static element_name = "VDivElement";
     static element_tag = "div";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VDivElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VDivElement extends HTMLDivElement, VBaseElement, VElementExtensions {};
+// export interface VDivElement extends HTMLDivElement, VElement, VElementExtensions {};
 postprocess(VDivElement);
 export const VDiv = wrapper(VDivElement);
 export const NullVDiv = create_null(VDivElement);
@@ -15906,16 +16017,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VDivElement:
 
 // Base class VEmbedElement derived from HTMLEmbedElement.
 // @ts-ignore
-export class VEmbedElement extends (HTMLEmbedElement as unknown as _SafeVBaseElement) {
+export class VEmbedElement extends (HTMLEmbedElement as unknown as VElementBaseSignature2) {
+    static element_name = "VEmbedElement";
     static element_tag = "embed";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VEmbedElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VEmbedElement extends HTMLEmbedElement, VBaseElement, VElementExtensions {};
+// export interface VEmbedElement extends HTMLEmbedElement, VElement, VElementExtensions {};
 postprocess(VEmbedElement);
 export const VEmbed = wrapper(VEmbedElement);
 export const NullVEmbed = create_null(VEmbedElement);
@@ -15923,16 +16035,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VEmbedElemen
 
 // Base class VFieldSetElement derived from HTMLFieldSetElement.
 // @ts-ignore
-export class VFieldSetElement extends (HTMLFieldSetElement as unknown as _SafeVBaseElement) {
+export class VFieldSetElement extends (HTMLFieldSetElement as unknown as VElementBaseSignature2) {
+    static element_name = "VFieldSetElement";
     static element_tag = "fieldset";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VFieldSetElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VFieldSetElement extends HTMLFieldSetElement, VBaseElement, VElementExtensions {};
+// export interface VFieldSetElement extends HTMLFieldSetElement, VElement, VElementExtensions {};
 postprocess(VFieldSetElement);
 export const VFieldSet = wrapper(VFieldSetElement);
 export const NullVFieldSet = create_null(VFieldSetElement);
@@ -15940,16 +16053,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VFieldSetEle
 
 // Base class VFormElement derived from HTMLFormElement.
 // @ts-ignore
-export class VFormElement extends (HTMLFormElement as unknown as _SafeVBaseElement) {
+export class VFormElement extends (HTMLFormElement as unknown as VElementBaseSignature2) {
+    static element_name = "VFormElement";
     static element_tag = "form";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VFormElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VFormElement extends HTMLFormElement, VBaseElement, VElementExtensions {};
+// export interface VFormElement extends HTMLFormElement, VElement, VElementExtensions {};
 postprocess(VFormElement);
 export const VForm = wrapper(VFormElement);
 export const NullVForm = create_null(VFormElement);
@@ -15957,16 +16071,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VFormElement
 
 // Base class VHeadingElement derived from HTMLHeadingElement.
 // @ts-ignore
-export class VHeadingElement extends (HTMLHeadingElement as unknown as _SafeVBaseElement) {
+export class VHeadingElement extends (HTMLHeadingElement as unknown as VElementBaseSignature2) {
+    static element_name = "VHeadingElement";
     static element_tag = "h1";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VHeadingElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VHeadingElement extends HTMLHeadingElement, VBaseElement, VElementExtensions {};
+// export interface VHeadingElement extends HTMLHeadingElement, VElement, VElementExtensions {};
 postprocess(VHeadingElement);
 export const VHeading = wrapper(VHeadingElement);
 export const NullVHeading = create_null(VHeadingElement);
@@ -15974,16 +16089,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VHeadingElem
 
 // Base class VHeadElement derived from HTMLHeadElement.
 // @ts-ignore
-export class VHeadElement extends (HTMLHeadElement as unknown as _SafeVBaseElement) {
+export class VHeadElement extends (HTMLHeadElement as unknown as VElementBaseSignature2) {
+    static element_name = "VHeadElement";
     static element_tag = "head";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VHeadElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VHeadElement extends HTMLHeadElement, VBaseElement, VElementExtensions {};
+// export interface VHeadElement extends HTMLHeadElement, VElement, VElementExtensions {};
 postprocess(VHeadElement);
 export const VHead = wrapper(VHeadElement);
 export const NullVHead = create_null(VHeadElement);
@@ -15991,16 +16107,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VHeadElement
 
 // Base class VHRElement derived from HTMLHRElement.
 // @ts-ignore
-export class VHRElement extends (HTMLHRElement as unknown as _SafeVBaseElement) {
+export class VHRElement extends (HTMLHRElement as unknown as VElementBaseSignature2) {
+    static element_name = "VHRElement";
     static element_tag = "hr";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VHRElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VHRElement extends HTMLHRElement, VBaseElement, VElementExtensions {};
+// export interface VHRElement extends HTMLHRElement, VElement, VElementExtensions {};
 postprocess(VHRElement);
 export const VHR = wrapper(VHRElement);
 export const NullVHR = create_null(VHRElement);
@@ -16008,16 +16125,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VHRElement:
 
 // Base class VImageElement derived from HTMLImageElement.
 // @ts-ignore
-export class VImageElement extends (HTMLImageElement as unknown as _SafeVBaseElement) {
+export class VImageElement extends (HTMLImageElement as unknown as VElementBaseSignature2) {
+    static element_name = "VImageElement";
     static element_tag = "img";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VImageElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VImageElement extends HTMLImageElement, VBaseElement, VElementExtensions {};
+// export interface VImageElement extends HTMLImageElement, VElement, VElementExtensions {};
 postprocess(VImageElement);
 export const VImage = wrapper(VImageElement);
 export const NullVImage = create_null(VImageElement);
@@ -16025,16 +16143,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VImageElemen
 
 // Base class VInputElement derived from HTMLInputElement.
 // @ts-ignore
-export class VInputElement extends (HTMLInputElement as unknown as _SafeVBaseElement) {
+export class VInputElement extends (HTMLInputElement as unknown as VElementBaseSignature2) {
+    static element_name = "VInputElement";
     static element_tag = "input";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VInputElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VInputElement extends HTMLInputElement, VBaseElement, VElementExtensions {};
+// export interface VInputElement extends HTMLInputElement, VElement, VElementExtensions {};
 postprocess(VInputElement);
 export const VInput = wrapper(VInputElement);
 export const NullVInput = create_null(VInputElement);
@@ -16042,16 +16161,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VInputElemen
 
 // Base class VModElement derived from HTMLModElement.
 // @ts-ignore
-export class VModElement extends (HTMLModElement as unknown as _SafeVBaseElement) {
+export class VModElement extends (HTMLModElement as unknown as VElementBaseSignature2) {
+    static element_name = "VModElement";
     static element_tag = "ins";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VModElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VModElement extends HTMLModElement, VBaseElement, VElementExtensions {};
+// export interface VModElement extends HTMLModElement, VElement, VElementExtensions {};
 postprocess(VModElement);
 export const VMod = wrapper(VModElement);
 export const NullVMod = create_null(VModElement);
@@ -16059,16 +16179,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VModElement:
 
 // Base class VLabelElement derived from HTMLLabelElement.
 // @ts-ignore
-export class VLabelElement extends (HTMLLabelElement as unknown as _SafeVBaseElement) {
+export class VLabelElement extends (HTMLLabelElement as unknown as VElementBaseSignature2) {
+    static element_name = "VLabelElement";
     static element_tag = "label";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VLabelElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VLabelElement extends HTMLLabelElement, VBaseElement, VElementExtensions {};
+// export interface VLabelElement extends HTMLLabelElement, VElement, VElementExtensions {};
 postprocess(VLabelElement);
 export const VLabel = wrapper(VLabelElement);
 export const NullVLabel = create_null(VLabelElement);
@@ -16076,16 +16197,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VLabelElemen
 
 // Base class VLegendElement derived from HTMLLegendElement.
 // @ts-ignore
-export class VLegendElement extends (HTMLLegendElement as unknown as _SafeVBaseElement) {
+export class VLegendElement extends (HTMLLegendElement as unknown as VElementBaseSignature2) {
+    static element_name = "VLegendElement";
     static element_tag = "legend";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VLegendElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VLegendElement extends HTMLLegendElement, VBaseElement, VElementExtensions {};
+// export interface VLegendElement extends HTMLLegendElement, VElement, VElementExtensions {};
 postprocess(VLegendElement);
 export const VLegend = wrapper(VLegendElement);
 export const NullVLegend = create_null(VLegendElement);
@@ -16093,16 +16215,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VLegendEleme
 
 // Base class VLIElement derived from HTMLLIElement.
 // @ts-ignore
-export class VLIElement extends (HTMLLIElement as unknown as _SafeVBaseElement) {
+export class VLIElement extends (HTMLLIElement as unknown as VElementBaseSignature2) {
+    static element_name = "VLIElement";
     static element_tag = "li";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VLIElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VLIElement extends HTMLLIElement, VBaseElement, VElementExtensions {};
+// export interface VLIElement extends HTMLLIElement, VElement, VElementExtensions {};
 postprocess(VLIElement);
 export const VLI = wrapper(VLIElement);
 export const NullVLI = create_null(VLIElement);
@@ -16110,16 +16233,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VLIElement:
 
 // Base class VLinkElement derived from HTMLLinkElement.
 // @ts-ignore
-export class VLinkElement extends (HTMLLinkElement as unknown as _SafeVBaseElement) {
+export class VLinkElement extends (HTMLLinkElement as unknown as VElementBaseSignature2) {
+    static element_name = "VLinkElement";
     static element_tag = "link";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VLinkElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VLinkElement extends HTMLLinkElement, VBaseElement, VElementExtensions {};
+// export interface VLinkElement extends HTMLLinkElement, VElement, VElementExtensions {};
 postprocess(VLinkElement);
 export const VLink = wrapper(VLinkElement);
 export const NullVLink = create_null(VLinkElement);
@@ -16127,16 +16251,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VLinkElement
 
 // Base class VMapElement derived from HTMLMapElement.
 // @ts-ignore
-export class VMapElement extends (HTMLMapElement as unknown as _SafeVBaseElement) {
+export class VMapElement extends (HTMLMapElement as unknown as VElementBaseSignature2) {
+    static element_name = "VMapElement";
     static element_tag = "map";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VMapElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VMapElement extends HTMLMapElement, VBaseElement, VElementExtensions {};
+// export interface VMapElement extends HTMLMapElement, VElement, VElementExtensions {};
 postprocess(VMapElement);
 export const VMap = wrapper(VMapElement);
 export const NullVMap = create_null(VMapElement);
@@ -16144,16 +16269,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VMapElement:
 
 // Base class VMetaElement derived from HTMLMetaElement.
 // @ts-ignore
-export class VMetaElement extends (HTMLMetaElement as unknown as _SafeVBaseElement) {
+export class VMetaElement extends (HTMLMetaElement as unknown as VElementBaseSignature2) {
+    static element_name = "VMetaElement";
     static element_tag = "meta";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VMetaElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VMetaElement extends HTMLMetaElement, VBaseElement, VElementExtensions {};
+// export interface VMetaElement extends HTMLMetaElement, VElement, VElementExtensions {};
 postprocess(VMetaElement);
 export const VMeta = wrapper(VMetaElement);
 export const NullVMeta = create_null(VMetaElement);
@@ -16161,16 +16287,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VMetaElement
 
 // Base class VMeterElement derived from HTMLMeterElement.
 // @ts-ignore
-export class VMeterElement extends (HTMLMeterElement as unknown as _SafeVBaseElement) {
+export class VMeterElement extends (HTMLMeterElement as unknown as VElementBaseSignature2) {
+    static element_name = "VMeterElement";
     static element_tag = "meter";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VMeterElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VMeterElement extends HTMLMeterElement, VBaseElement, VElementExtensions {};
+// export interface VMeterElement extends HTMLMeterElement, VElement, VElementExtensions {};
 postprocess(VMeterElement);
 export const VMeter = wrapper(VMeterElement);
 export const NullVMeter = create_null(VMeterElement);
@@ -16178,16 +16305,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VMeterElemen
 
 // Base class VObjectElement derived from HTMLObjectElement.
 // @ts-ignore
-export class VObjectElement extends (HTMLObjectElement as unknown as _SafeVBaseElement) {
+export class VObjectElement extends (HTMLObjectElement as unknown as VElementBaseSignature2) {
+    static element_name = "VObjectElement";
     static element_tag = "object";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VObjectElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VObjectElement extends HTMLObjectElement, VBaseElement, VElementExtensions {};
+// export interface VObjectElement extends HTMLObjectElement, VElement, VElementExtensions {};
 postprocess(VObjectElement);
 export const VObject = wrapper(VObjectElement);
 export const NullVObject = create_null(VObjectElement);
@@ -16195,16 +16323,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VObjectEleme
 
 // Base class VOListElement derived from HTMLOListElement.
 // @ts-ignore
-export class VOListElement extends (HTMLOListElement as unknown as _SafeVBaseElement) {
+export class VOListElement extends (HTMLOListElement as unknown as VElementBaseSignature2) {
+    static element_name = "VOListElement";
     static element_tag = "ol";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VOListElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VOListElement extends HTMLOListElement, VBaseElement, VElementExtensions {};
+// export interface VOListElement extends HTMLOListElement, VElement, VElementExtensions {};
 postprocess(VOListElement);
 export const VOList = wrapper(VOListElement);
 export const NullVOList = create_null(VOListElement);
@@ -16212,16 +16341,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VOListElemen
 
 // Base class VOptGroupElement derived from HTMLOptGroupElement.
 // @ts-ignore
-export class VOptGroupElement extends (HTMLOptGroupElement as unknown as _SafeVBaseElement) {
+export class VOptGroupElement extends (HTMLOptGroupElement as unknown as VElementBaseSignature2) {
+    static element_name = "VOptGroupElement";
     static element_tag = "optgroup";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VOptGroupElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VOptGroupElement extends HTMLOptGroupElement, VBaseElement, VElementExtensions {};
+// export interface VOptGroupElement extends HTMLOptGroupElement, VElement, VElementExtensions {};
 postprocess(VOptGroupElement);
 export const VOptGroup = wrapper(VOptGroupElement);
 export const NullVOptGroup = create_null(VOptGroupElement);
@@ -16229,16 +16359,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VOptGroupEle
 
 // Base class VOptionElement derived from HTMLOptionElement.
 // @ts-ignore
-export class VOptionElement extends (HTMLOptionElement as unknown as _SafeVBaseElement) {
+export class VOptionElement extends (HTMLOptionElement as unknown as VElementBaseSignature2) {
+    static element_name = "VOptionElement";
     static element_tag = "option";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VOptionElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VOptionElement extends HTMLOptionElement, VBaseElement, VElementExtensions {};
+// export interface VOptionElement extends HTMLOptionElement, VElement, VElementExtensions {};
 postprocess(VOptionElement);
 export const VOption = wrapper(VOptionElement);
 export const NullVOption = create_null(VOptionElement);
@@ -16246,16 +16377,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VOptionEleme
 
 // Base class VOutputElement derived from HTMLOutputElement.
 // @ts-ignore
-export class VOutputElement extends (HTMLOutputElement as unknown as _SafeVBaseElement) {
+export class VOutputElement extends (HTMLOutputElement as unknown as VElementBaseSignature2) {
+    static element_name = "VOutputElement";
     static element_tag = "output";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VOutputElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VOutputElement extends HTMLOutputElement, VBaseElement, VElementExtensions {};
+// export interface VOutputElement extends HTMLOutputElement, VElement, VElementExtensions {};
 postprocess(VOutputElement);
 export const VOutput = wrapper(VOutputElement);
 export const NullVOutput = create_null(VOutputElement);
@@ -16263,16 +16395,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VOutputEleme
 
 // Base class VParagraphElement derived from HTMLParagraphElement.
 // @ts-ignore
-export class VParagraphElement extends (HTMLParagraphElement as unknown as _SafeVBaseElement) {
+export class VParagraphElement extends (HTMLParagraphElement as unknown as VElementBaseSignature2) {
+    static element_name = "VParagraphElement";
     static element_tag = "p";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VParagraphElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VParagraphElement extends HTMLParagraphElement, VBaseElement, VElementExtensions {};
+// export interface VParagraphElement extends HTMLParagraphElement, VElement, VElementExtensions {};
 postprocess(VParagraphElement);
 export const VParagraph = wrapper(VParagraphElement);
 export const NullVParagraph = create_null(VParagraphElement);
@@ -16280,16 +16413,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VParagraphEl
 
 // Base class VParamElement derived from HTMLParamElement.
 // @ts-ignore
-export class VParamElement extends (HTMLParamElement as unknown as _SafeVBaseElement) {
+export class VParamElement extends (HTMLParamElement as unknown as VElementBaseSignature2) {
+    static element_name = "VParamElement";
     static element_tag = "param";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VParamElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VParamElement extends HTMLParamElement, VBaseElement, VElementExtensions {};
+// export interface VParamElement extends HTMLParamElement, VElement, VElementExtensions {};
 postprocess(VParamElement);
 export const VParam = wrapper(VParamElement);
 export const NullVParam = create_null(VParamElement);
@@ -16297,16 +16431,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VParamElemen
 
 // Base class VPictureElement derived from HTMLPictureElement.
 // @ts-ignore
-export class VPictureElement extends (HTMLPictureElement as unknown as _SafeVBaseElement) {
+export class VPictureElement extends (HTMLPictureElement as unknown as VElementBaseSignature2) {
+    static element_name = "VPictureElement";
     static element_tag = "picture";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VPictureElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VPictureElement extends HTMLPictureElement, VBaseElement, VElementExtensions {};
+// export interface VPictureElement extends HTMLPictureElement, VElement, VElementExtensions {};
 postprocess(VPictureElement);
 export const VPicture = wrapper(VPictureElement);
 export const NullVPicture = create_null(VPictureElement);
@@ -16314,16 +16449,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VPictureElem
 
 // Base class VPreElement derived from HTMLPreElement.
 // @ts-ignore
-export class VPreElement extends (HTMLPreElement as unknown as _SafeVBaseElement) {
+export class VPreElement extends (HTMLPreElement as unknown as VElementBaseSignature2) {
+    static element_name = "VPreElement";
     static element_tag = "pre";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VPreElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VPreElement extends HTMLPreElement, VBaseElement, VElementExtensions {};
+// export interface VPreElement extends HTMLPreElement, VElement, VElementExtensions {};
 postprocess(VPreElement);
 export const VPre = wrapper(VPreElement);
 export const NullVPre = create_null(VPreElement);
@@ -16331,16 +16467,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VPreElement:
 
 // Base class VProgressElement derived from HTMLProgressElement.
 // @ts-ignore
-export class VProgressElement extends (HTMLProgressElement as unknown as _SafeVBaseElement) {
+export class VProgressElement extends (HTMLProgressElement as unknown as VElementBaseSignature2) {
+    static element_name = "VProgressElement";
     static element_tag = "progress";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VProgressElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VProgressElement extends HTMLProgressElement, VBaseElement, VElementExtensions {};
+// export interface VProgressElement extends HTMLProgressElement, VElement, VElementExtensions {};
 postprocess(VProgressElement);
 export const VProgress = wrapper(VProgressElement);
 export const NullVProgress = create_null(VProgressElement);
@@ -16348,16 +16485,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VProgressEle
 
 // Base class VScriptElement derived from HTMLScriptElement.
 // @ts-ignore
-export class VScriptElement extends (HTMLScriptElement as unknown as _SafeVBaseElement) {
+export class VScriptElement extends (HTMLScriptElement as unknown as VElementBaseSignature2) {
+    static element_name = "VScriptElement";
     static element_tag = "script";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VScriptElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VScriptElement extends HTMLScriptElement, VBaseElement, VElementExtensions {};
+// export interface VScriptElement extends HTMLScriptElement, VElement, VElementExtensions {};
 postprocess(VScriptElement);
 export const VScript = wrapper(VScriptElement);
 export const NullVScript = create_null(VScriptElement);
@@ -16365,16 +16503,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VScriptEleme
 
 // Base class VSelectElement derived from HTMLSelectElement.
 // @ts-ignore
-export class VSelectElement extends (HTMLSelectElement as unknown as _SafeVBaseElement) {
+export class VSelectElement extends (HTMLSelectElement as unknown as VElementBaseSignature2) {
+    static element_name = "VSelectElement";
     static element_tag = "select";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VSelectElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VSelectElement extends HTMLSelectElement, VBaseElement, VElementExtensions {};
+// export interface VSelectElement extends HTMLSelectElement, VElement, VElementExtensions {};
 postprocess(VSelectElement);
 export const VSelect = wrapper(VSelectElement);
 export const NullVSelect = create_null(VSelectElement);
@@ -16382,16 +16521,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSelectEleme
 
 // Base class VSlotElement derived from HTMLSlotElement.
 // @ts-ignore
-export class VSlotElement extends (HTMLSlotElement as unknown as _SafeVBaseElement) {
+export class VSlotElement extends (HTMLSlotElement as unknown as VElementBaseSignature2) {
+    static element_name = "VSlotElement";
     static element_tag = "slot";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VSlotElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VSlotElement extends HTMLSlotElement, VBaseElement, VElementExtensions {};
+// export interface VSlotElement extends HTMLSlotElement, VElement, VElementExtensions {};
 postprocess(VSlotElement);
 export const VSlot = wrapper(VSlotElement);
 export const NullVSlot = create_null(VSlotElement);
@@ -16399,16 +16539,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSlotElement
 
 // Base class VSourceElement derived from HTMLSourceElement.
 // @ts-ignore
-export class VSourceElement extends (HTMLSourceElement as unknown as _SafeVBaseElement) {
+export class VSourceElement extends (HTMLSourceElement as unknown as VElementBaseSignature2) {
+    static element_name = "VSourceElement";
     static element_tag = "source";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VSourceElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VSourceElement extends HTMLSourceElement, VBaseElement, VElementExtensions {};
+// export interface VSourceElement extends HTMLSourceElement, VElement, VElementExtensions {};
 postprocess(VSourceElement);
 export const VSource = wrapper(VSourceElement);
 export const NullVSource = create_null(VSourceElement);
@@ -16416,16 +16557,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSourceEleme
 
 // Base class VSpanElement derived from HTMLSpanElement.
 // @ts-ignore
-export class VSpanElement extends (HTMLSpanElement as unknown as _SafeVBaseElement) {
+export class VSpanElement extends (HTMLSpanElement as unknown as VElementBaseSignature2) {
+    static element_name = "VSpanElement";
     static element_tag = "span";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VSpanElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VSpanElement extends HTMLSpanElement, VBaseElement, VElementExtensions {};
+// export interface VSpanElement extends HTMLSpanElement, VElement, VElementExtensions {};
 postprocess(VSpanElement);
 export const VSpan = wrapper(VSpanElement);
 export const NullVSpan = create_null(VSpanElement);
@@ -16433,16 +16575,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSpanElement
 
 // Base class VTableElement derived from HTMLTableElement.
 // @ts-ignore
-export class VTableElement extends (HTMLTableElement as unknown as _SafeVBaseElement) {
+export class VTableElement extends (HTMLTableElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTableElement";
     static element_tag = "table";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTableElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTableElement extends HTMLTableElement, VBaseElement, VElementExtensions {};
+// export interface VTableElement extends HTMLTableElement, VElement, VElementExtensions {};
 postprocess(VTableElement);
 export const VTable = wrapper(VTableElement);
 export const NullVTable = create_null(VTableElement);
@@ -16450,16 +16593,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTableElemen
 
 // Base class VTHeadElement derived from HTMLTableSectionElement.
 // @ts-ignore
-export class VTHeadElement extends (HTMLTableSectionElement as unknown as _SafeVBaseElement) {
+export class VTHeadElement extends (HTMLTableSectionElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTHeadElement";
     static element_tag = "thead";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTHeadElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTHeadElement extends HTMLTableSectionElement, VBaseElement, VElementExtensions {};
+// export interface VTHeadElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTHeadElement);
 export const VTHead = wrapper(VTHeadElement);
 export const NullVTHead = create_null(VTHeadElement);
@@ -16467,16 +16611,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTHeadElemen
 
 // Base class VTBodyElement derived from HTMLTableSectionElement.
 // @ts-ignore
-export class VTBodyElement extends (HTMLTableSectionElement as unknown as _SafeVBaseElement) {
+export class VTBodyElement extends (HTMLTableSectionElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTBodyElement";
     static element_tag = "tbody";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTBodyElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTBodyElement extends HTMLTableSectionElement, VBaseElement, VElementExtensions {};
+// export interface VTBodyElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTBodyElement);
 export const VTBody = wrapper(VTBodyElement);
 export const NullVTBody = create_null(VTBodyElement);
@@ -16484,16 +16629,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTBodyElemen
 
 // Base class VTFootElement derived from HTMLTableSectionElement.
 // @ts-ignore
-export class VTFootElement extends (HTMLTableSectionElement as unknown as _SafeVBaseElement) {
+export class VTFootElement extends (HTMLTableSectionElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTFootElement";
     static element_tag = "tfoot";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTFootElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTFootElement extends HTMLTableSectionElement, VBaseElement, VElementExtensions {};
+// export interface VTFootElement extends HTMLTableSectionElement, VElement, VElementExtensions {};
 postprocess(VTFootElement);
 export const VTFoot = wrapper(VTFootElement);
 export const NullVTFoot = create_null(VTFootElement);
@@ -16501,16 +16647,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTFootElemen
 
 // Base class VTHElement derived from HTMLTableCellElement.
 // @ts-ignore
-export class VTHElement extends (HTMLTableCellElement as unknown as _SafeVBaseElement) {
+export class VTHElement extends (HTMLTableCellElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTHElement";
     static element_tag = "th";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTHElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTHElement extends HTMLTableCellElement, VBaseElement, VElementExtensions {};
+// export interface VTHElement extends HTMLTableCellElement, VElement, VElementExtensions {};
 postprocess(VTHElement);
 export const VTH = wrapper(VTHElement);
 export const NullVTH = create_null(VTHElement);
@@ -16518,16 +16665,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTHElement:
 
 // Base class VTDElement derived from HTMLTableCellElement.
 // @ts-ignore
-export class VTDElement extends (HTMLTableCellElement as unknown as _SafeVBaseElement) {
+export class VTDElement extends (HTMLTableCellElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTDElement";
     static element_tag = "td";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTDElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTDElement extends HTMLTableCellElement, VBaseElement, VElementExtensions {};
+// export interface VTDElement extends HTMLTableCellElement, VElement, VElementExtensions {};
 postprocess(VTDElement);
 export const VTD = wrapper(VTDElement);
 export const NullVTD = create_null(VTDElement);
@@ -16535,16 +16683,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTDElement:
 
 // Base class VTemplateElement derived from HTMLTemplateElement.
 // @ts-ignore
-export class VTemplateElement extends (HTMLTemplateElement as unknown as _SafeVBaseElement) {
+export class VTemplateElement extends (HTMLTemplateElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTemplateElement";
     static element_tag = "template";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTemplateElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTemplateElement extends HTMLTemplateElement, VBaseElement, VElementExtensions {};
+// export interface VTemplateElement extends HTMLTemplateElement, VElement, VElementExtensions {};
 postprocess(VTemplateElement);
 export const VTemplate = wrapper(VTemplateElement);
 export const NullVTemplate = create_null(VTemplateElement);
@@ -16552,16 +16701,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTemplateEle
 
 // Base class VTextAreaElement derived from HTMLTextAreaElement.
 // @ts-ignore
-export class VTextAreaElement extends (HTMLTextAreaElement as unknown as _SafeVBaseElement) {
+export class VTextAreaElement extends (HTMLTextAreaElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTextAreaElement";
     static element_tag = "textarea";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTextAreaElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTextAreaElement extends HTMLTextAreaElement, VBaseElement, VElementExtensions {};
+// export interface VTextAreaElement extends HTMLTextAreaElement, VElement, VElementExtensions {};
 postprocess(VTextAreaElement);
 export const VTextArea = wrapper(VTextAreaElement);
 export const NullVTextArea = create_null(VTextAreaElement);
@@ -16569,16 +16719,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTextAreaEle
 
 // Base class VTimeElement derived from HTMLTimeElement.
 // @ts-ignore
-export class VTimeElement extends (HTMLTimeElement as unknown as _SafeVBaseElement) {
+export class VTimeElement extends (HTMLTimeElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTimeElement";
     static element_tag = "time";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTimeElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTimeElement extends HTMLTimeElement, VBaseElement, VElementExtensions {};
+// export interface VTimeElement extends HTMLTimeElement, VElement, VElementExtensions {};
 postprocess(VTimeElement);
 export const VTime = wrapper(VTimeElement);
 export const NullVTime = create_null(VTimeElement);
@@ -16586,16 +16737,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTimeElement
 
 // Base class VTitleElement derived from HTMLTitleElement.
 // @ts-ignore
-export class VTitleElement extends (HTMLTitleElement as unknown as _SafeVBaseElement) {
+export class VTitleElement extends (HTMLTitleElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTitleElement";
     static element_tag = "title";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTitleElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTitleElement extends HTMLTitleElement, VBaseElement, VElementExtensions {};
+// export interface VTitleElement extends HTMLTitleElement, VElement, VElementExtensions {};
 postprocess(VTitleElement);
 export const VTitle = wrapper(VTitleElement);
 export const NullVTitle = create_null(VTitleElement);
@@ -16603,16 +16755,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTitleElemen
 
 // Base class VTableRowElement derived from HTMLTableRowElement.
 // @ts-ignore
-export class VTableRowElement extends (HTMLTableRowElement as unknown as _SafeVBaseElement) {
+export class VTableRowElement extends (HTMLTableRowElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTableRowElement";
     static element_tag = "tr";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTableRowElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTableRowElement extends HTMLTableRowElement, VBaseElement, VElementExtensions {};
+// export interface VTableRowElement extends HTMLTableRowElement, VElement, VElementExtensions {};
 postprocess(VTableRowElement);
 export const VTableRow = wrapper(VTableRowElement);
 export const NullVTableRow = create_null(VTableRowElement);
@@ -16620,16 +16773,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTableRowEle
 
 // Base class VTrackElement derived from HTMLTrackElement.
 // @ts-ignore
-export class VTrackElement extends (HTMLTrackElement as unknown as _SafeVBaseElement) {
+export class VTrackElement extends (HTMLTrackElement as unknown as VElementBaseSignature2) {
+    static element_name = "VTrackElement";
     static element_tag = "track";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VTrackElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VTrackElement extends HTMLTrackElement, VBaseElement, VElementExtensions {};
+// export interface VTrackElement extends HTMLTrackElement, VElement, VElementExtensions {};
 postprocess(VTrackElement);
 export const VTrack = wrapper(VTrackElement);
 export const NullVTrack = create_null(VTrackElement);
@@ -16637,16 +16791,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VTrackElemen
 
 // Base class VUListElement derived from HTMLUListElement.
 // @ts-ignore
-export class VUListElement extends (HTMLUListElement as unknown as _SafeVBaseElement) {
+export class VUListElement extends (HTMLUListElement as unknown as VElementBaseSignature2) {
+    static element_name = "VUListElement";
     static element_tag = "ul";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VUListElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VUListElement extends HTMLUListElement, VBaseElement, VElementExtensions {};
+// export interface VUListElement extends HTMLUListElement, VElement, VElementExtensions {};
 postprocess(VUListElement);
 export const VUList = wrapper(VUListElement);
 export const NullVUList = create_null(VUListElement);
@@ -16654,16 +16809,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VUListElemen
 
 // Base class VIFrameElement derived from HTMLIFrameElement.
 // @ts-ignore
-export class VIFrameElement extends (HTMLIFrameElement as unknown as _SafeVBaseElement) {
+export class VIFrameElement extends (HTMLIFrameElement as unknown as VElementBaseSignature2) {
+    static element_name = "VIFrameElement";
     static element_tag = "iframe";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VIFrameElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VIFrameElement extends HTMLIFrameElement, VBaseElement, VElementExtensions {};
+// export interface VIFrameElement extends HTMLIFrameElement, VElement, VElementExtensions {};
 postprocess(VIFrameElement);
 export const VIFrame = wrapper(VIFrameElement);
 export const NullVIFrame = create_null(VIFrameElement);
@@ -16671,16 +16827,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VIFrameEleme
 
 // Base class VCodeElement derived from HTMLElement.
 // @ts-ignore
-export class VCodeElement extends (HTMLElement as unknown as _SafeVBaseElement) {
+export class VCodeElement extends (HTMLElement as unknown as VElementBaseSignature2) {
+    static element_name = "VCodeElement";
     static element_tag = "code";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VCodeElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VCodeElement extends HTMLElement, VBaseElement, VElementExtensions {};
+// export interface VCodeElement extends HTMLElement, VElement, VElementExtensions {};
 postprocess(VCodeElement);
 export const VCode = wrapper(VCodeElement);
 export const NullVCode = create_null(VCodeElement);
@@ -16688,16 +16845,17 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VCodeElement
 
 // Base class VSectionElement derived from HTMLElement.
 // @ts-ignore
-export class VSectionElement extends (HTMLElement as unknown as _SafeVBaseElement) {
+export class VSectionElement extends (HTMLElement as unknown as VElementBaseSignature2) {
+    static element_name = "VSectionElement";
     static element_tag = "section";
-    constructor(args: DerivedConstructorOptions = {}) {
+    constructor(args: DerivedVElementInitOptions = {}) {
         super();
         args.derived ??= VSectionElement;
-        this._init_velement(args as VBaseElementOptions);
+        this._init_sys_velement(args as BaseVElementInitOptions);
     }
 }
 // @ts-ignore
-export interface VSectionElement extends HTMLElement, VBaseElement, VElementExtensions {};
+// export interface VSectionElement extends HTMLElement, VElement, VElementExtensions {};
 postprocess(VSectionElement);
 export const VSection = wrapper(VSectionElement);
 export const NullVSection = create_null(VSectionElement);
@@ -16705,7 +16863,7 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSectionElem
 
 // Base class VDefaultElement derived from HTMLElement.
 // @ts-ignore
-// export class VDefaultElement extends (HTMLElement as unknown as _SafeVBaseElement) {
+// export class VDefaultElement extends (HTMLElement as unknown as VElementBaseSignature2) {
 //     static element_tag = "default";
 //     constructor(args: DerivedConstructorOptions = {}) {
 //         super();
@@ -16714,12 +16872,77 @@ declare module '../ui/any_element.d.ts' { interface AnyElementMap { VSectionElem
 //     }
 // }
 // // @ts-ignore
-// export interface VDefaultElement extends HTMLElement, VBaseElement, VElementExtensions {};
+// // export interface VDefaultElement extends HTMLElement, VElement, 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 }}
 
+// All base elements.
+export type VBaseElements =
+    VHTMLElement |
+    VAnchorElement |
+    VAreaElement |
+    VAudioElement |
+    VBlockQuoteElement |
+    VBodyElement |
+    VBRElement |
+    VButtonElement |
+    VCanvasElement |
+    VTableCaptionElement |
+    VTableColElement |
+    VDataElement |
+    VDataListElement |
+    VDListElement |
+    VDirectoryElement |
+    VDivElement |
+    VEmbedElement |
+    VFieldSetElement |
+    VFormElement |
+    VHeadingElement |
+    VHeadElement |
+    VHRElement |
+    VImageElement |
+    VInputElement |
+    VModElement |
+    VLabelElement |
+    VLegendElement |
+    VLIElement |
+    VLinkElement |
+    VMapElement |
+    VMetaElement |
+    VMeterElement |
+    VObjectElement |
+    VOListElement |
+    VOptGroupElement |
+    VOptionElement |
+    VOutputElement |
+    VParagraphElement |
+    VParamElement |
+    VPictureElement |
+    VPreElement |
+    VProgressElement |
+    VScriptElement |
+    VSelectElement |
+    VSlotElement |
+    VSourceElement |
+    VSpanElement |
+    VTableElement |
+    VTHeadElement |
+    VTBodyElement |
+    VTFootElement |
+    VTHElement |
+    VTDElement |
+    VTemplateElement |
+    VTextAreaElement |
+    VTimeElement |
+    VTitleElement |
+    VTableRowElement |
+    VTrackElement |
+    VUListElement |
+    VIFrameElement |
+    VCodeElement |
+    VSectionElement;
 
 // The VElement map per html tag.
 export const VElementTagMap = {
@@ -16786,5 +17009,4 @@ export const VElementTagMap = {
     iframe: VIFrameElement,
     code: VCodeElement,
     section: VSectionElement,
-    // default: VDefaultElement,
 } as const;