amateras 0.2.0 → 0.3.0

package/ext/css/src/lib/colors/red.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _red = {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+    950: '#450a0a',
+} as const;
+
+colorAssign('red', _red);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const red: typeof _red;
+        }
+    }
+}

package/ext/css/src/lib/colors/rose.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _rose = {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+    950: '#4c0519',
+} as const;
+
+colorAssign('rose', _rose);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const rose: typeof _rose;
+        }
+    }
+}

package/ext/css/src/lib/colors/sky.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _sky = {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+    950: '#082f49',
+} as const;
+
+colorAssign('sky', _sky);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const sky: typeof _sky;
+        }
+    }
+}

package/ext/css/src/lib/colors/slate.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _slate = {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+} as const
+
+colorAssign('slate', _slate);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const slate: typeof _slate;
+        }
+    }
+}

package/ext/css/src/lib/colors/stone.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _stone = {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+    950: '#0c0a09',
+} as const;
+
+colorAssign('stone', _stone);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const stone: typeof _stone;
+        }
+    }
+}

package/ext/css/src/lib/colors/teal.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _teal = {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+    950: '#042f2e',
+} as const;
+
+colorAssign('teal', _teal);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const teal: typeof _teal;
+        }
+    }
+}

package/ext/css/src/lib/colors/violet.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _violet = {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+    950: '#2e1065',
+} as const;
+
+colorAssign('violet', _violet);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const violet: typeof _violet;
+        }
+    }
+}

package/ext/css/src/lib/colors/yellow.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _yellow = {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+    950: '#422006',
+} as const;
+
+colorAssign('yellow', _yellow);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const yellow: typeof _yellow;
+        }
+    }
+}

package/ext/css/src/lib/colors/zinc.ts

@@ -0,0 +1,25 @@
+import { colorAssign } from "../colorAssign";
+
+const _zinc = {
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+} as const;
+
+colorAssign('zinc', _zinc);
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export namespace color {
+            export const zinc: typeof _zinc;
+        }
+    }
+}

package/ext/css/src/lib/colors.ts

@@ -0,0 +1,23 @@
+import './colors/amber';
+import './colors/blackwhite';
+import './colors/blue';
+import './colors/cyan';
+import './colors/emerald';
+import './colors/fuchsia';
+import './colors/gray';
+import './colors/green';
+import './colors/indigo';
+import './colors/lime';
+import './colors/neutral';
+import './colors/orange';
+import './colors/pink';
+import './colors/purple';
+import './colors/red';
+import './colors/rose';
+import './colors/sky';
+import './colors/slate';
+import './colors/stone';
+import './colors/teal';
+import './colors/violet';
+import './colors/yellow';
+import './colors/zinc';

package/ext/css/src/structure/$CSSKeyframesRule.ts

@@ -4,15 +4,11 @@ import { _Array_from } from "../../../../src/lib/native";
 export class $CSSKeyframesRule extends $CSSRule {
     name: string;
     constructor(name: string) {
-        super();
+        super(`@keyframes ${name}`);
         this.name = name;
     }
     
     toString(): string {
         return this.name;
     }
-
-    get css() {
-        return `@keyframes ${this.name} { ${_Array_from(this.rules).map(rule => rule.css).join(' ')} }`
-    }
 }

package/ext/css/src/structure/$CSSMediaRule.ts

@@ -1,30 +1,10 @@
 import { _Array_from, _instanceof } from "amateras/lib/native";
 import { $CSSRule } from "#structure/$CSSRule";
-import { $CSSStyleRule } from "./$CSSStyleRule";
 
 export class $CSSMediaRule extends $CSSRule {
     condition: string;
-    constructor(condition: string) {
-        super();
-        this.condition = condition;
-    }
-
-    get css(): string {
-        function findOwnerMediaRule(rule: $CSSRule, contextRules: $CSSMediaRule[]) {
-            const ownerRule = rule.ownerRule;
-            if (!ownerRule) return contextRules;
-            if (_instanceof(ownerRule, $CSSMediaRule)) return findOwnerMediaRule(ownerRule, [ownerRule, ...contextRules]);
-            else return findOwnerMediaRule(ownerRule, contextRules);
-        }
-        
-        function findChildRules(rule: $CSSRule, rules: $CSSStyleRule[] = []) {
-            _Array_from(rule.rules).forEach((_rule => {
-                if (!_instanceof(_rule, $CSSStyleRule)) return;
-                rules.push(_rule);
-                return findChildRules(_rule, rules);
-            }))
-            return rules
-        }
-        return `@media ${findOwnerMediaRule(this, [this]).map(rule => rule.condition).join(' and ')} { ${findChildRules(this).map(rule => rule.css).join(' ')} }`
+    constructor(selector: string) {
+        super(selector);
+        this.condition = selector.replace('@media ', '');
     }
 }

package/ext/css/src/structure/$CSSRule.ts

@@ -1,25 +1,13 @@
-import { _instanceof } from "amateras/lib/native";
-import { $CSSMediaRule } from "#structure/$CSSMediaRule";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export abstract class $CSSRule {
     rules = new Set<$CSSRule>();
-    ownerRule: $CSSRule | null = null;
-    constructor() {}
-
-    abstract get css(): string;
-    
-    get mediaRules() {
-        const rules: $CSSMediaRule[] = []
-        this.rules.forEach(rule => {
-            if (_instanceof(rule, $CSSMediaRule)) rules.push(rule);
-            rules.push(...rule.mediaRules)
-        })
-        return rules;
+    selector: string;
+    constructor(selector: string) {
+        this.selector = selector;
     }
 
-    addRule(rule: $CSSRule) {
-        this.rules.add(rule);
-        rule.ownerRule = this;
-        return this;
+    get options(): {[key: string]: any} {
+        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule]))
     }
 }

package/ext/css/src/structure/$CSSStyleRule.ts

@@ -1,23 +1,21 @@
 import type { $CSSDeclaration } from "#structure/$CSSDeclaration";
 import { $CSSRule } from "#structure/$CSSRule";
-import { _Array_from, _instanceof } from "amateras/lib/native";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export class $CSSStyleRule extends $CSSRule {
-    context: string[] = [];
     declarations = new Map<string, $CSSDeclaration>();
-    className: string = '';
-    constructor(context: string[] = []) {
-        super();
-        this.context = context;
+    constructor(selector: string) {
+        super(selector);
     }
 
-    get css(): string {
-        return `${this.selector} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+    clone(selector: string) {
+        const rule = new $CSSStyleRule(selector)
+        rule.declarations = this.declarations;
+        rule.rules = this.rules;
+        return rule
     }
 
-    get selector() {
-        const ctx: string[][] = [];
-        this.context.forEach((part, i) => ctx.push(part.split(',').map(sel => ctx[i - 1] ? ctx[i - 1]!.map(prefix => `${prefix} ${sel.trim()}`) : [sel.trim()]).flat()))
-        return ctx.at(-1)?.join(', ')
+    get options(): {[key: string]: any} {
+        return {..._Object_fromEntries(_Array_from(this.declarations).map(([_, dec]) => [dec.key, dec])), ...super.options}
     }
 }

package/ext/html/node/$Anchor.ts

@@ -8,10 +8,40 @@ export class $Anchor extends $HTMLElement<HTMLAnchorElement> {
 }
 
 export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {
-    href(href: string): this;
+    /** {@link HTMLAnchorElement.href} */
+    href(href: $Parameter<string>): this;
     href(): string;
+    /** {@link HTMLAnchorElement.hreflang} */
+    hreflang(hreflang: $Parameter<string>): this;
+    hreflang(): string;
+    /** {@link HTMLAnchorElement.download} */
+    download(download: $Parameter<string>): this;
+    download(): string;
+    /** {@link HTMLAnchorElement.ping} */
+    ping(ping: $Parameter<string>): this;
+    ping(): string;
+    /** {@link HTMLAnchorElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLAnchorElement.rel} */
+    rel(rel: $Parameter<string>): this;
+    rel(): string;
+    /** {@link HTMLAnchorElement.relList} */
+    relList(relList: $Parameter<string>): this;
+    relList(): DOMTokenList;
+    /** {@link HTMLAnchorElement.target} */
+    target(target: $Parameter<AnchorTarget>): this;
+    target(): AnchorTarget;
+    /** {@link HTMLAnchorElement.text} */
+    text(text: $Parameter<string>): this;
+    text(): string;
+    /** {@link HTMLAnchorElement.type} */
+    type(type: $Parameter<string>): this;
+    type(): string;
 }
 
+export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top' | '_unfenced_top' | '';
+
 declare module '#core' {
     export function $(nodeName: 'a'): $Anchor
 }

package/ext/html/node/$Image.ts

@@ -8,8 +8,61 @@ export class $Image extends $HTMLElement<HTMLImageElement> {
 }
 
 export interface $Image extends $HTMLElement<HTMLImageElement> {
-    src(src: string): this;
+    /** {@link HTMLImageElement.complete} */
+    readonly complete: boolean;
+    /** {@link HTMLImageElement.currentSrc} */
+    readonly currentSrc: string;
+    /** {@link HTMLImageElement.naturalHeight} */
+    readonly naturalHeight: number;
+    /** {@link HTMLImageElement.naturalWidth} */
+    readonly naturalWidth: number;
+    /** {@link HTMLImageElement.x} */
+    readonly x: number;
+    /** {@link HTMLImageElement.y} */
+    readonly y: number;
+
+    /** {@link HTMLImageElement.decode} */
+    decode(): Promise<this>;
+
+    /** {@link HTMLImageElement.alt} */
+    alt(alt: $Parameter<string>): this;
+    alt(): string;
+    /** {@link HTMLImageElement.crossOrigin} */
+    crossOrigin(crossOrigin: $Parameter<string | null>): this;
+    crossOrigin(): string | null;
+    /** {@link HTMLImageElement.decoding} */
+    decoding(decoding: $Parameter<"async" | "sync" | "auto">): this;
+    decoding(): "async" | "sync" | "auto";
+    /** {@link HTMLImageElement.fetchPriority} */
+    fetchPriority(fetchPriority: $Parameter<"high" | "low" | "auto">): this;
+    fetchPriority(): "high" | "low" | "auto";
+    /** {@link HTMLImageElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLImageElement.isMap} */
+    isMap(isMap: $Parameter<boolean>): this;
+    isMap(): boolean;
+    /** {@link HTMLImageElement.loading} */
+    loading(loading: $Parameter<"eager" | "lazy">): this;
+    loading(): "eager" | "lazy";
+    /** {@link HTMLImageElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLImageElement.sizes} */
+    sizes(sizes: $Parameter<string>): this;
+    sizes(): string;
+    /** {@link HTMLImageElement.src} */
+    src(src: $Parameter<string>): this;
     src(): string;
+    /** {@link HTMLImageElement.srcset} */
+    srcset(srcset: $Parameter<string>): this;
+    srcset(): string;
+    /** {@link HTMLImageElement.useMap} */
+    useMap(useMap: $Parameter<string>): this;
+    useMap(): string;
+    /** {@link HTMLImageElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
 }
 
 assignHelper(HTMLImageElement, $Image, 'img');

package/ext/html/node/$Input.ts

@@ -7,7 +7,160 @@ export class $Input extends $HTMLElement<HTMLInputElement> {
     }
 }
 
-export interface $Input extends $HTMLElement<HTMLInputElement> {}
+export interface $Input extends $HTMLElement<HTMLInputElement> {
+    /** {@link HTMLInputElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLInputElement.labels} */
+    readonly labels: NodeListOf<HTMLLabelElement> | null;
+    /** {@link HTMLInputElement.list} */
+    readonly list: HTMLDataListElement | null;
+    /** {@link HTMLInputElement.validationMessage} */
+    readonly validationMessage: string;
+    /** {@link HTMLInputElement.validity} */
+    readonly validity: ValidityState;
+    /** {@link HTMLInputElement.webkitEntries} */
+    readonly webkitEntries: ReadonlyArray<FileSystemEntry>;
+    /** {@link HTMLInputElement.willValidate} */
+    readonly willValidate: boolean;
+
+    /** {@link HTMLInputElement.checkValidity} */
+    checkValidity(): boolean;
+    /** {@link HTMLInputElement.reportValidity} */
+    reportValidity(): boolean;
+    /** {@link HTMLInputElement.select} */
+    select(): this;
+    /** {@link HTMLInputElement.setCustomValidity} */
+    setCustomValidity(error: string): this;
+    /** {@link HTMLInputElement.setRangeText} */
+    setRangeText(replacement: string): this;
+    setRangeText(replacement: string, start: number, end: number, selectionMode?: SelectionMode): this;
+    /** {@link HTMLInputElement.setSelectionRange} */
+    setSelectionRange(start: number | null, end: number | null, direction?: "forward" | "backward" | "none"): this;
+    /** {@link HTMLInputElement.showPicker} */
+    showPicker(): this;
+    /** {@link HTMLInputElement.stepDown} */
+    stepDown(n?: number): this;
+    /** {@link HTMLInputElement.stepUp} */
+    stepUp(n?: number): this;
+    
+    /** {@link HTMLInputElement.accept} */
+    accept(accept: $Parameter<string>): this;
+    accept(): string;
+    /** {@link HTMLInputElement.alt} */
+    alt(alt: $Parameter<string>): this;
+    alt(): string;
+    /** {@link HTMLInputElement.autoFill} */
+    autoFill(autoFill: $Parameter<AutoFill>): this;
+    autoFill(): AutoFill;
+    /** {@link HTMLInputElement.capture} */
+    capture(capture: $Parameter<string>): this;
+    capture(): string;
+    /** {@link HTMLInputElement.checked} */
+    checked(checked: $Parameter<boolean>): this;
+    checked(): boolean;
+    /** {@link HTMLInputElement.defaultChecked} */
+    defaultChecked(defaultChecked: $Parameter<boolean>): this;
+    defaultChecked(): string;
+    /** {@link HTMLInputElement.defaultValue} */
+    defaultValue(defaultValue: $Parameter<string>): this;
+    defaultValue(): string;
+    /** {@link HTMLInputElement.dirName} */
+    dirName(dirName: $Parameter<string>): this;
+    dirName(): string;
+    /** {@link HTMLInputElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLInputElement.files} */
+    files(files: $Parameter<FileList | null>): this;
+    files(): string;
+    /** {@link HTMLInputElement.formAction} */
+    formAction(formAction: $Parameter<string>): this;
+    formAction(): string;
+    /** {@link HTMLInputElement.formEnctype} */
+    formEnctype(formEnctype: $Parameter<string>): this;
+    formEnctype(): string;
+    /** {@link HTMLInputElement.formMethod} */
+    formMethod(formMethod: $Parameter<string>): this;
+    formMethod(): string;
+    /** {@link HTMLInputElement.formNoValidate} */
+    formNoValidate(formNoValidate: $Parameter<boolean>): this;
+    formNoValidate(): boolean;
+    /** {@link HTMLInputElement.formTarget} */
+    formTarget(formTarget: $Parameter<string>): this;
+    formTarget(): string;
+    /** {@link HTMLInputElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLInputElement.indeterminate} */
+    indeterminate(indeterminate: $Parameter<boolean>): this;
+    indeterminate(): boolean;
+    /** {@link HTMLInputElement.max} */
+    max(max: $Parameter<string>): this;
+    max(): string;
+    /** {@link HTMLInputElement.maxLength} */
+    maxLength(maxLength: $Parameter<number>): this;
+    maxLength(): number;
+    /** {@link HTMLInputElement.min} */
+    min(min: $Parameter<string>): this;
+    min(): string;
+    /** {@link HTMLInputElement.minLength} */
+    minLength(minLength: $Parameter<string>): this;
+    minLength(): string;
+    /** {@link HTMLInputElement.multiple} */
+    multiple(multiple: $Parameter<boolean>): this;
+    multiple(): boolean;
+    /** {@link HTMLInputElement.name} */
+    name(name: $Parameter<string>): this;
+    name(): string;
+    /** {@link HTMLInputElement.pattern} */
+    pattern(pattern: $Parameter<string>): this;
+    pattern(): string;
+    /** {@link HTMLInputElement.placeholder} */
+    placeholder(placeholder: $Parameter<string>): this;
+    placeholder(): string;
+    /** {@link HTMLInputElement.readOnly} */
+    readOnly(readOnly: $Parameter<boolean>): this;
+    readOnly(): boolean;
+    /** {@link HTMLInputElement.required} */
+    required(required: $Parameter<boolean>): this;
+    required(): boolean;
+    /** {@link HTMLInputElement.selectionDirection} */
+    selectionDirection(selectionDirection: $Parameter<'forward' | 'backward' | 'none' | null>): this;
+    selectionDirection(): 'forward' | 'backward' | 'none' | null;
+    /** {@link HTMLInputElement.selectionEnd} */
+    selectionEnd(selectionEnd: $Parameter<number | null>): this;
+    selectionEnd(): number | null;
+    /** {@link HTMLInputElement.selectionStart} */
+    selectionStart(selectionStart: $Parameter<number>): this;
+    selectionStart(): number;
+    /** {@link HTMLInputElement.size} */
+    size(size: $Parameter<number>): this;
+    size(): number;
+    /** {@link HTMLInputElement.src} */
+    src(src: $Parameter<string>): this;
+    src(): string;
+    /** {@link HTMLInputElement.step} */
+    step(step: $Parameter<string>): this;
+    step(): string;
+    /** {@link HTMLInputElement.type} */
+    type(type: $Parameter<string>): this;
+    type(): string;
+    /** {@link HTMLInputElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+    /** {@link HTMLInputElement.valueAsDate} */
+    valueAsDate(valueAsDate: $Parameter<Date | null>): this;
+    valueAsDate(): Date | null;
+    /** {@link HTMLInputElement.valueAsNumber} */
+    valueAsNumber(valueAsNumber: $Parameter<number>): this;
+    valueAsNumber(): number;
+    /** {@link HTMLInputElement.webkitdirectory} */
+    webkitdirectory(webkitdirectory: $Parameter<boolean>): this;
+    webkitdirectory(): boolean;
+    /** {@link HTMLInputElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
+}
 
 assignHelper(HTMLInputElement, $Input, 'input');
 

package/ext/html/node/$OptGroup.ts

@@ -7,7 +7,14 @@ export class $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
     }
 }
 
-export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {}
+export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
+    /** {@link HTMLOptGroupElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLOptGroupElement.label} */
+    label(label: $Parameter<string>): this;
+    label(): string;
+}
 
 assignHelper(HTMLOptGroupElement, $OptGroup, 'optgroup');