amateras 0.3.0 → 0.4.1

package/src/lib/assign.ts

@@ -1,17 +1,15 @@
 import { Signal } from "../structure/Signal";
-import { _instanceof, _Object_defineProperty, isUndefined } from "./native";
+import { _instanceof, _Object_defineProperty, forEach, isUndefined } from "./native";
 
-export function assign(target: any, {set, get, fn}: { 
+export const assign = (target: any, {set, get, fn}: { 
     set?: string[], 
     get?: string[], 
     fn?: string[]
-}) {
+}) => {
     const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
-    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => {
-        return arr?.map(prop => [type, prop]) ?? []
-    }
+    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => arr?.map(prop => [type, prop]) ?? []
     const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
-    for (const [type, prop] of list) {
+    forEach(list, ([type, prop]) => 
         _Object_defineProperty(target.prototype, prop, {
             ...(type === GET ? {
                 get() { return this.node[prop as any] }
@@ -19,21 +17,22 @@ export function assign(target: any, {set, get, fn}: {
                 writable: true,
                 ...(type === SET ? {
                     // set
-                    value: function (this, args: any) {
+                    value(this, args: any) {
                         if (!arguments.length) return this.node[prop];
-                        const set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
+                        let set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
                         if (_instanceof(args, Signal)) args = args.subscribe(set).value();
                         set(args)
                         return this;
                     }
                 } : {
                     // fn
-                    value: function (this, ...args : any[]) {
-                        return this.node[prop](...args) ?? this;
+                    value(this, ...args : any[]) {
+                        let result = this.node[prop](...args)
+                        return isUndefined(result) ? this : result;
                     }
                 })
             }),
 
         })
-    }
+    )
 }

package/src/lib/assignHelper.ts

@@ -1,16 +1,17 @@
 import type { $Node } from "#node/$Node";
 import { assign } from "./assign";
-import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
+import { _Object_entries, _Object_getOwnPropertyDescriptors, forEach } from "./native";
 
-export function assignHelper(object: Constructor<Node>, target: Constructor<$Node>, tagname?: string) {
+export const assignHelper = (object: Constructor<EventTarget>, target: Constructor<$Node>, tagname?: string) => {
     const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
     // assign native object properties to target
-    for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
-        if (prop in target.prototype) continue;
-        if (value.get && !value.set) get.push(prop);
-        else if (value.value) fn.push(prop);
-        else if (value.get && value.set) set.push(prop);
-    }
+    forEach(_Object_entries(_Object_getOwnPropertyDescriptors(object.prototype)), ([prop, value]) => {
+        if (!(prop in target.prototype)) {
+            if (value.get && !value.set) get.push(prop);
+            else if (value.value) fn.push(prop);
+            else if (value.get && value.set) set.push(prop);
+        }
+    })
     assign(target, {set, get, fn})
     // register tagname
     if (tagname) $.assign(tagname, target)

package/src/lib/chain.ts

@@ -0,0 +1,13 @@
+import { isUndefined } from "./native";
+
+export const chain: chain = <T, R, V>(_this: T, args: IArguments | null, get: (() => R) | null, value: V, set: (value: Exclude<V, undefined>) => any) => 
+    args && get && !args.length 
+    ? get()
+    : isUndefined(value) 
+        ? _this 
+        : (set(value as any), _this);
+
+interface chain {
+    <T, V>(_this: T, args: null, get: null, value: V, set: (value: Exclude<V, undefined>) => any): T
+    <T, R, V>(_this: T, args: IArguments, get: (() => R), value: V, set: (value: Exclude<V, undefined>) => any): T | R
+}

package/src/lib/debounce.ts

@@ -0,0 +1,7 @@
+export const debounce = () => {
+    let timer: ReturnType<typeof setTimeout>;
+    return (fn: Function, timeout: number) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(fn, timeout);
+    }
+}

package/src/lib/env.ts

@@ -0,0 +1,2 @@
+// window and document
+export const _document = document;

package/src/lib/native.ts

@@ -1,5 +1,5 @@
-// document
-export const _document = document;
+// Value
+export const _null = null;
 // Object
 export const _Object_fromEntries = Object.fromEntries;
 export const _Object_entries = Object.entries;
@@ -9,37 +9,27 @@ export const _Object_defineProperty = Object.defineProperty;
 export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
 // Array
 export const _Array_from = Array.from;
-export function forEach<N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => any, thisArgs?: any): void;
-export function forEach<K, V>(set: Map<K, V>, fn: (value: V, key: K, index: number, map: Map<K, V>) => any, thisArgs?: any): void;
-export function forEach<T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;
-export function forEach<T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
-export function forEach<T>(arr: any, fn: any, thisArgs?: any) {
-    arr.forEach(fn, thisArgs)
-}
-// typeof
-export function _typeof(target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') {
-    return typeof target === type;
-}
-export function isString(target: any): target is string {
-    return _typeof(target, 'string');
-}
-export function isNumber(target: any): target is number {
-    return _typeof(target, 'number')
-}
-export function isObject(target: any): target is object {
-    return _typeof(target, 'object')
-}
-export function isFunction(target: any): target is Function {
-    return _typeof(target, 'function')
-}
-export function isUndefined(target: any): target is undefined {
-    return _typeof(target, 'undefined')
-}
-export function isNull(target: any): target is null {
-    return target === null;
-}
-export function _instanceof<T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> {
-    return !!instance.find(i => target instanceof i);
-}
+export const forEach: forEach = <T>(arr: any, fn: any, thisArgs?: any) => arr.forEach(fn, thisArgs);
+// type check
+export const _typeof = (target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') => typeof target === type;
+export const equal = <T, V extends T>(target: T, ...args: V[]): target is V => !!args.find(a => a === target);
+export const isString = (target: any): target is string => _typeof(target, 'string');
+export const isNumber = (target: any): target is number => _typeof(target, 'number')
+export const isObject = (target: any): target is object => _typeof(target, 'object')
+export const isFunction = (target: any): target is Function => _typeof(target, 'function')
+export const isUndefined = (target: any): target is undefined => target === undefined;
+export const isNull = (target: any): target is null => target === _null;
+export const _instanceof = <T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> => !!instance.find(i => target instanceof i);
 // JSON
-export const _JSON_stringify = JSON.stringify;
+export const _JSON_stringify = JSON.stringify;
+export const _JSON_parse = JSON.parse;
+// String
+export const startsWith = (target: string, ...str: string[]) => !!str.find(s => target.startsWith(s));
+// Function
+export const _bind = (target: Function, obj: Object) => target.bind(obj);
+interface forEach {
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;
+    <K, V>(set: Map<K, V>, fn: (value: V, key: K, index: number, map: Map<K, V>) => any, thisArgs?: any): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => any, thisArgs?: any): void;
+}

package/src/lib/randomId.ts

@@ -2,10 +2,8 @@ import { _Array_from } from "./native";
 
 const LOWER = 'abcdefghijklmnopqrstuvwxyz';
 const UPPER = LOWER.toUpperCase();
-export function randomId(options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string { 
+export const randomId = (options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string => { 
     options = {length: 5, lettercase: 'any', ...options};
     const char = options.lettercase === 'any' ? LOWER + UPPER : options.lettercase === 'lower' ? LOWER : UPPER;
-    return _Array_from({length: options.length as number}, (_, i) => { 
-        const rand = Math.round(Math.random() * char.length); return char[rand] 
-    }).join(''); 
+    return _Array_from({length: options.length as number}, (_, i) => char[Math.round(Math.random() * char.length)]).join(''); 
 }

package/src/lib/sleep.ts

@@ -1,3 +1 @@
-export async function sleep(ms: number) {
-    return new Promise(resolve => setTimeout(resolve, ms))
-}
+export const sleep = async (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

package/src/node/$Element.ts

@@ -1,6 +1,7 @@
 import { Signal } from "#structure/Signal";
 import { $Node } from "#node/$Node";
-import { _Array_from, _document, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
+import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isNull, isString, isUndefined } from "#lib/native";
+import { _document } from "#lib/env";
 
 export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node {
     declare node: Ele
@@ -12,12 +13,12 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
 
     attr(): {[key: string]: string};
     attr(key: string): string | null;
-    attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
-    attr(resolver?: {[key: string]: string | number | boolean | Signal<any>} | string) {
+    attr(obj: {[key: string]: string | number | boolean | Signal<any> | null}): this;
+    attr(resolver?: {[key: string]: string | number | boolean | Signal<any> | null} | string) {
         if (!arguments.length) return _Object_fromEntries(_Array_from(this.attributes).map(attr => [attr.name, attr.value]));
         if (isString(resolver)) return this.getAttribute(resolver);
         if (resolver) for (let [key, value] of _Object_entries(resolver)) {
-            const set = (value: any) => !isUndefined(value) && this.setAttribute(key, `${value}`)
+            const set = (value: any) => !isUndefined(value) && isNull(value) ? this.removeAttribute(key) : this.setAttribute(key, `${value}`)
             if (_instanceof(value, Signal)) value = value.subscribe(set).value();
             set(value);
         }
@@ -25,8 +26,7 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 
     class(...token: (string | null | undefined)[]) {
-        this.classList(token.filter(isString).join(' '));
-        return this;
+        return this.classList(token.filter(isString).join(' '));
     }
 
     addClass(...token: (string | null | undefined)[]) {
@@ -39,28 +39,16 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
         return this;
     }
 
-    use(callback: ($ele: this) => void) {
-        callback(this);
-        return this;
-    }
-
     on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
-        this.node.addEventListener(type as string, listener as any, options);
-        return this;
+        return this.addEventListener(type as string, listener as any, options);
     }
 
     off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions) {
-        this.node.removeEventListener(type as string, listener as any, options);
-        return this;
+        return this.removeEventListener(type as string, listener as any, options);
     }
     
     once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
-        const handler = (event: $Event<any>) => {
-            this.off(type, handler, options);
-            isFunction(listener) ? listener(event) : listener.handleEvent(event);
-        }
-        this.on(type, handler, options);
-        return this;
+        return this.on(type, listener, {once: true})
     }
 
     toString() {
@@ -68,14 +56,15 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 }
 
-export type EventMap = {[key: string]: Event}
-export type $Event<E extends $Element, Ev = any> = Ev & {target: {$: E}};
+export type $Event<E extends $Element, Ev = any> = Ev & {currentTarget: {$: E}};
 export type $EventListener<E extends $Element, Ev> = (event: $Event<E, Ev>) => void;
 export type $EventListenerObject<E extends $Element, Ev> = { handleEvent(object: $Event<E, Ev>): void; }
 
 function createNode(nodeName: string) {
+    return !_document 
     //@ts-expect-error
-    return !_document ? new Node(nodeName) as unknown as Node & ChildNode : _document.createElement(nodeName);
+    ? new Node(nodeName) as unknown as Node & ChildNode 
+    : _document.createElement(nodeName);
 }
 
 export interface $Element<Ele extends Element, EvMap> {
@@ -107,6 +96,20 @@ export interface $Element<Ele extends Element, EvMap> {
     readonly shadowRoot: ShadowRoot | null;
     /** {@link Element.tagName} */
     readonly tagName: string;
+    /** {@link Element.nextElementSibling} */
+    readonly nextElementSibling: Element | null;
+    /** {@link Element.previousElementSibling} */
+    readonly previousElementSibling: Element | null;
+    /** {@link Element.childElementCount} */
+    readonly childElementCount: number;
+    /** {@link Element.children} */
+    readonly children: HTMLCollection;
+    /** {@link Element.firstElementChild} */
+    readonly firstElementChild: Element | null;
+    /** {@link Element.lastElementChild} */
+    readonly lastElementChild: Element | null;
+    /** {@link Element.assignedSlot} */
+    readonly assignedSlot: HTMLSlotElement | null;
 
     /** {@link Element.attachShadow} */
     attachShadow(init: ShadowRootInit): ShadowRoot;
@@ -200,6 +203,24 @@ export interface $Element<Ele extends Element, EvMap> {
     setPointerCapture(pointerId: number): this;
     /** {@link Element.toggleAttribute} */
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+    /** {@link Element.animate} */
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    /** {@link Element.getAnimations} */
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    /** {@link Element.append} */
+    append(...nodes: (Node | string)[]): this;
+    /** {@link Element.prepend} */
+    prepend(...nodes: (Node | string)[]): this;
+    /** {@link Element.querySelector} */
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    /** {@link Element.querySelectorAll} */
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    /** {@link Element.replaceChildren} */
+    replaceChildren(...nodes: (Node | string)[]): this;
 
     /** {@link Element.classList} */
     classList(): DOMTokenList;
@@ -228,6 +249,144 @@ export interface $Element<Ele extends Element, EvMap> {
     /** {@link Element.slot} */
     slot(): string;
     slot(slot: $Parameter<string>): this;
+
+    // ARIAMixin
+    /** {@link ARIAMixin.ariaAtomic} */
+    ariaAtomic(): string | null;
+    ariaAtomic(ariaAtomic: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaAutoComplete} */
+    ariaAutoComplete(): string | null;
+    ariaAutoComplete(ariaAutoComplete: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBrailleLabel} */
+    ariaBrailleLabel(): string | null;
+    ariaBrailleLabel(ariaBrailleLabel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBrailleRoleDescription} */
+    ariaBrailleRoleDescription(): string | null;
+    ariaBrailleRoleDescription(ariaBrailleRoleDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBusy} */
+    ariaBusy(): string | null;
+    ariaBusy(ariaBusy: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaChecked} */
+    ariaChecked(): string | null;
+    ariaChecked(ariaChecked: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColCount} */
+    ariaColCount(): string | null;
+    ariaColCount(ariaColCount: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColIndex} */
+    ariaColIndex(): string | null;
+    ariaColIndex(ariaColIndex: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColIndexText} */
+    ariaColIndexText(): string | null;
+    ariaColIndexText(ariaColIndexText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColSpan} */
+    ariaColSpan(): string | null;
+    ariaColSpan(ariaColSpan: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaCurrent} */
+    ariaCurrent(): string | null;
+    ariaCurrent(ariaCurrent: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaDescription} */
+    ariaDescription(): string | null;
+    ariaDescription(ariaDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaDisabled} */
+    ariaDisabled(): string | null;
+    ariaDisabled(ariaDisabled: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaExpanded} */
+    ariaExpanded(): string | null;
+    ariaExpanded(ariaExpanded: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaHasPopup} */
+    ariaHasPopup(): string | null;
+    ariaHasPopup(ariaHasPopup: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaHidden} */
+    ariaHidden(): string | null;
+    ariaHidden(ariaHidden: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaInvalid} */
+    ariaInvalid(): string | null;
+    ariaInvalid(ariaInvalid: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaKeyShortcuts} */
+    ariaKeyShortcuts(): string | null;
+    ariaKeyShortcuts(ariaKeyShortcuts: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLabel} */
+    ariaLabel(): string | null;
+    ariaLabel(ariaLabel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLevel} */
+    ariaLevel(): string | null;
+    ariaLevel(ariaLevel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLive} */
+    ariaLive(): string | null;
+    ariaLive(ariaLive: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaModal} */
+    ariaModal(): string | null;
+    ariaModal(ariaModal: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaMultiLine} */
+    ariaMultiLine(): string | null;
+    ariaMultiLine(ariaMultiLine: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaMultiSelectable} */
+    ariaMultiSelectable(): string | null;
+    ariaMultiSelectable(ariaMultiSelectable: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaOrientation} */
+    ariaOrientation(): string | null;
+    ariaOrientation(ariaOrientation: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPlaceholder} */
+    ariaPlaceholder(): string | null;
+    ariaPlaceholder(ariaPlaceholder: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPosInSet} */
+    ariaPosInSet(): string | null;
+    ariaPosInSet(ariaPosInSet: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPressed} */
+    ariaPressed(): string | null;
+    ariaPressed(ariaPressed: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaReadOnly} */
+    ariaReadOnly(): string | null;
+    ariaReadOnly(ariaReadOnly: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRelevant} */
+    ariaRelevant(): string | null;
+    ariaRelevant(ariaRelevant: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRequired} */
+    ariaRequired(): string | null;
+    ariaRequired(ariaRequired: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRoleDescription} */
+    ariaRoleDescription(): string | null;
+    ariaRoleDescription(ariaRoleDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowCount} */
+    ariaRowCount(): string | null;
+    ariaRowCount(ariaRowCount: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowIndex} */
+    ariaRowIndex(): string | null;
+    ariaRowIndex(ariaRowIndex: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowIndexText} */
+    ariaRowIndexText(): string | null;
+    ariaRowIndexText(ariaRowIndexText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowSpan} */
+    ariaRowSpan(): string | null;
+    ariaRowSpan(ariaRowSpan: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSelected} */
+    ariaSelected(): string | null;
+    ariaSelected(ariaSelected: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSetSize} */
+    ariaSetSize(): string | null;
+    ariaSetSize(ariaSetSize: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSort} */
+    ariaSort(): string | null;
+    ariaSort(ariaSort: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueMax} */
+    ariaValueMax(): string | null;
+    ariaValueMax(ariaValueMax: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueMin} */
+    ariaValueMin(): string | null;
+    ariaValueMin(ariaValueMin: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueNow} */
+    ariaValueNow(): string | null;
+    ariaValueNow(ariaValueNow: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueText} */
+    ariaValueText(): string | null;
+    ariaValueText(ariaValueText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.role} */
+    role(): string | null;
+    role(role: $Parameter<string | null>): this;
+    addEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    addEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+    removeEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
+    removeEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
     
 
     on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;

package/src/node/$HTMLElement.ts

@@ -1,11 +1,23 @@
+import { _Object_entries, forEach } from "#lib/native";
 import { $Element } from "#node/$Element";
 
 export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
     constructor(resolver: string | Ele) {
         super(resolver);
     }
+    
+    style(): CSSStyleDeclaration;
+    style(style: Partial<CSSStyleDeclarationOptions> | undefined): this
+    style(style?: Partial<CSSStyleDeclarationOptions> | undefined) {
+        let _style = this.node.style
+        if (!arguments.length) return _style
+        if (style) forEach(_Object_entries(style), ([key, value]) => _style[key as any] = value ?? '');
+        return this;
+    }
 }
 
+type CSSStyleDeclarationOptions = Omit<CSSStyleDeclaration, 'parentRule' | 'length' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty'>;
+
 export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
     /** {@link HTMLElement.accessKeyLabel} */
     readonly accessKeyLabel: string;
@@ -19,6 +31,8 @@ export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTM
     readonly offsetTop: number;
     /** {@link HTMLElement.offsetWidth} */
     readonly offsetWidth: number;
+    /** {@link HTMLElement.isContentEditable} */
+    readonly isContentEditable: boolean;
 
     /** {@link HTMLElement.attachInternals} */
     attachInternals(): ElementInternals;
@@ -73,4 +87,13 @@ export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTM
     /** {@link HTMLElement.writingSuggestions} */
     writingSuggestions(): string;
     writingSuggestions(writingSuggestions: $Parameter<string>): this;
+    /** {@link HTMLElement.contentEditable} */
+    contentEditable(): string;
+    contentEditable(contentEditable: $Parameter<string>): this;
+    /** {@link HTMLElement.enterKeyHint} */
+    enterKeyHint(): string;
+    enterKeyHint(enterKeyHint: $Parameter<string>): this;
+    /** {@link HTMLElement.inputMode} */
+    inputMode(): string;
+    inputMode(inputMode: $Parameter<string>): this;
 }