amateras 0.2.0 → 0.4.0

package/ext/i18n/src/structure/I18n.ts

@@ -0,0 +1,40 @@
+import { _instanceof } from "amateras/lib/native";
+import { I18nText, type I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary } from "#structure/I18nDictionary";
+
+export class I18n {
+    locale$ = $.signal<string>('');
+    map = new Map<string, I18nDictionary>();
+    #defaultLocale: string;
+    constructor(defaultLocale: string) {
+        this.#defaultLocale = defaultLocale;
+        this.locale$.set(defaultLocale);
+    }
+
+    defaultLocale(): string;
+    defaultLocale(locale: string): this;
+    defaultLocale(locale?: string) {
+        if (!arguments.length) return this.#defaultLocale;
+        if (locale) this.locale$.set(locale);
+        return this;
+    }
+
+    locale(): string;
+    locale(locale: string): this;
+    locale(locale?: string) {
+        if (!arguments.length) return this.locale$();
+        if (locale) this.locale$.set(locale)
+        return this;
+    }
+
+    dictionary(locale = this.locale$()) {
+        if (!locale) return null;
+        const dictionary = this.map.get(locale);
+        return dictionary;
+    }
+
+    translate(key: string, options?: I18nTextOptions) {
+        return new I18nText(this, key, options);
+    }
+}
+

package/ext/i18n/src/structure/I18nDictionary.ts

@@ -0,0 +1,31 @@
+import { _instanceof, isObject } from "amateras/lib/native";
+
+export class I18nDictionary {
+    #context: I18nDictionaryContext | Promise<I18nDictionaryContext> | null = null;
+    #fetch: I18nDictionaryContextImporter | null = null;
+    constructor(resolver: I18nDictionaryContext | I18nDictionaryContextImporter) {
+        if (_instanceof(resolver, Function)) this.#fetch = resolver;
+        else this.#context = resolver;
+    }
+
+    async context(): Promise<I18nDictionaryContext> {
+        if (this.#context) return await this.#context;
+        if (!this.#fetch) throw 'I18n Context Fetch Error';
+        return this.#context = this.#fetch().then((module) => module.default);
+    }
+
+    async find(path: string, context?: I18nDictionaryContext): Promise<string | undefined> {
+        if (!context) context = await this.context();
+        const [snippet, ...rest] = path.split('.') as [string, ...string[]];
+        const target = context[snippet];
+        if (isObject(target)) {
+            if (rest.length) return this.find(rest.join('.'), target);
+            else return target['_'] as string;
+        } 
+        if (rest.length) return path;
+        else return target;
+    }
+}
+
+export type I18nDictionaryContext = {[key: string]: string | I18nDictionaryContext}
+export type I18nDictionaryContextImporter = () => Promise<{default: I18nDictionaryContext}>

package/ext/markdown/index.ts

@@ -0,0 +1,123 @@
+import { _Array_from, forEach } from "#lib/native";
+
+const blockProcesses = new Set<MarkdownBlockProcessOptions>();
+const inlineProcesses = new Set<MarkdownProcessFunction>();
+
+export class Markdown {
+    blockProcessSet = new Set(blockProcesses);
+    inlineProcessSet = new Set(inlineProcesses);
+    constructor() {}
+
+    blockProcess(options: MarkdownBlockProcessOptions) {
+        this.blockProcessSet.add(options);
+        return this;
+    }
+
+    inlineProcess(handle: MarkdownProcessFunction) {
+        this.inlineProcessSet.add(handle);
+        return this;
+    }
+
+    toHTML(text: string) {
+        const blocks = _Array_from(text.matchAll(/(?:.+?\n?)+/gm));
+        return blocks.map(block => {
+            let matched, blockText = block[0]
+            for (const blockProcess of blockProcesses) {
+                matched = blockText.match(blockProcess.regexp);
+                if (!matched) continue;
+                blockText = blockProcess.handle(blockText);
+                const removeHTML = blockText.replaceAll(/<.+>[^<]+?<\/.+>/gm, '');
+                if (!removeHTML) break;
+            }
+            if (!matched) blockText = paragraph(blockText);
+            inlineProcesses.forEach(fn => blockText = fn(blockText))
+            return blockText;
+        }).join('')
+    }
+
+    toDOM(text: string) {
+        return $('article').innerHTML(this.toHTML(text))
+    }
+}
+
+export type MarkdownProcessFunction = (text: string) => string;
+export interface MarkdownBlockProcessOptions {
+    regexp: RegExp,
+    handle: (text: string) => string;
+}
+
+const blockProcess = (options: MarkdownBlockProcessOptions) => blockProcesses.add(options);
+const inlineProcess = (handle: MarkdownProcessFunction) => inlineProcesses.add(handle);
+const replaceAll = (str: string, searchValue: string | RegExp, replacer: ((substring: string, ...args: any[]) => string) | string): string => str.replaceAll(searchValue, replacer as any);
+const trim = (str: string) => str.trim();
+const paragraph = (str: string) => {
+    return replaceAll(str, /(?:.+?\n?)+/gm, $0 => `<p>${trim($0)}</p>`)
+}
+// Headings
+blockProcess({
+    regexp: /^(#+) (.+)/gm,
+    handle: text => replaceAll(text, /^(#+) (.+)/gm, (_, $1: string, $2) => `<h${$1.length}>${$2}</h${$1.length}>`)
+});
+blockProcess({
+    regexp: /^(.+)\n==+$/gm,
+    handle: text => replaceAll(text, /^(.+)\n==+$/gm, (_, $1) => `<h1>${$1}</h1>`)
+});
+blockProcess({
+    regexp: /^(.+)\n--+$/gm,
+    handle: text => replaceAll(text, /^(.+)\n--+$/gm, (_, $1) => `<h2>${$1}</h2>`)
+});
+// Blockquote
+blockProcess({
+    regexp: /(?:^> ?.*(?:\n|$))+/gm,
+    handle: text => {
+        const fn = (str: string) => {
+            const blocks = _Array_from(str.matchAll(/(?:^> ?.*(?:\n|$))+/gm));
+            forEach(blocks, block => {
+                const blocked = fn(replaceAll(block[0], /^> ?/gm, ''));
+                str = str.replace(block[0], `<blockquote>\n${paragraph(blocked)}\n</blockquote>`);
+            })
+            return str;
+        }
+        return fn(text);
+    }
+});
+// List
+blockProcess({
+    regexp: /(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm,
+    handle: text => {
+        const fn = (str: string) => {
+            const blocks = _Array_from(str.matchAll(/(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm));
+            forEach(blocks, block => {
+                let haveList = false // check this loop have list
+                const type = block[0].match(/^(-|[0-9]+\.) /)?.[1] === '-' ? 'ul' : 'ol';
+                const listed = replaceAll(block[0], /^(?:-|[0-9]+\.) (.+)/gm, (_, $1: string) => (haveList = true, `<li>\n${trim($1)}\n</li>`));
+                const clearTabbed = replaceAll(listed, /^(?:\t|(?:  ))/gm, '');
+                const convertedList = fn(clearTabbed);
+                str = str.replace(block[0], haveList ? `<${type}>\n${trim(convertedList)}\n</${type}>` : convertedList);
+            })
+            return str;
+        }
+        return fn(text);
+    }
+})
+// Codeblock
+blockProcess({
+    regexp: /^```([^`\n]+)\n([^`]+)?```/gm,
+    handle: text => replaceAll(text, /^```([^`\n]+)\n([^`]+)?```/gm, (_, $1, $2: string) => `<pre><code>\n${trim($2)}\n</code></pre>`)
+})
+// Horizontal Rule
+blockProcess({
+    regexp: /^(?:---|\*\*\*|___)(\s+)?$/gm,
+    handle: text => replaceAll(text, /^(?:---|\*\*\*|___)(\s+)?$/gm, _ => `<hr>`)
+})
+// Bold
+inlineProcess(text => replaceAll(text, /\*\*([^*]+?)\*\*/g, (_, $1) => `<b>${$1}</b>`));
+// Italic
+inlineProcess(text => replaceAll(text, /\*([^*]+?)\*/g, (_, $1) => `<i>${$1}</i>`));
+// Image
+inlineProcess(text => replaceAll(text, /!\[(.+?)\]\((.+?)(?: "(.+?)?")?\)/g, (_, alt, src, title) => `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ''}>`));
+// Link
+inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w\w+?:[^\s]+?)(?: "(.+?)?")?)\)/g, (_, content, href, title) => `<a href="${href}"${title ? ` title="${title}"` : ''}>${content}</a>`));
+inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w+?@(?:\w|\.\w)+?)(?: "(.+)?")?)\)/g, (_, content, mail, title) => `<a href="mailto:${mail}"${title ? ` title="${title}"` : ''}>${content}</a>`));
+inlineProcess(text => replaceAll(text, /<(\w\w+?:[^\s]+?)>/g, (_, href) => `<a href="${href}">${href}</a>`));
+inlineProcess(text => replaceAll(text, /<(\w+?@(?:\w|\.\w)+?)>/g, (_, mail) => `<a href="mailto:${mail}">${mail}</a>`));

package/ext/router/index.ts

@@ -1,4 +1,5 @@
-import { _Object_assign } from "#lib/native";
+import type { AnchorTarget } from "#html/$Anchor";
+import { _Object_assign, forEach } from "#lib/native";
 import type { $NodeContentResolver } from "#node/$Node";
 import type { Page } from "./node/Page";
 import { Route } from "./node/Route";
@@ -7,18 +8,26 @@ import { RouterAnchor } from "./node/RouterAnchor";
 export * from "./node/Route";
 export * from "./node/Router";
 export * from "./node/Page";
+export * from "./node/RouterAnchor";
 
 declare module 'amateras/core' {
     export function $<P extends string>(nodeName: 'route', path: P, builder: RouteBuilder<Route<P>, RouteDataResolver<P>>): Route<P>;
     export function $(nodeName: 'router', page?: Page<any>): Router;
     export function $(nodeName: 'ra'): RouterAnchor;
     export namespace $ {
-        export function open(url: string | URL | Nullish): typeof Router;
+        export function open(url: string | URL | Nullish, target: AnchorTarget): typeof Router;
         export function replace(url: string | URL | Nullish): typeof Router;
         export function back(): typeof Router;
         export function forward(): typeof Router;
     }
 }
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'routeopen': Event;
+    }
+}
+
 // assign methods
 _Object_assign($, {
     open: Router.open.bind(Router),
@@ -27,10 +36,10 @@ _Object_assign($, {
     forward: Router.forward.bind(Router)
 });
 // define styles
-[
+forEach([
     `router{display:block}`,
     `page{display:block}`
-].forEach(rule => $.stylesheet.insertRule(rule));
+], $.style);
 // assign nodes
 $.assign([
     ['router', Router],

package/ext/router/node/Page.ts

@@ -9,6 +9,7 @@ export class Page<R extends Route<any> = any, Data extends RouteData = any> exte
     params: Data['params'];
     query: Data['query'];
     #pageTitle: null | string = null;
+    initial = false;
     constructor(route: R, data?: {params: any, query: any}) {
         super('page');
         this.route = route;

package/ext/router/node/Route.ts

@@ -1,5 +1,5 @@
 import { _instanceof, _Object_fromEntries, _Array_from } from "#lib/native";
-import { $Element } from "#node/node";
+import { $Element } from "#node/$Element";
 import type { AsyncRoute, RouteBuilder, RouteDataResolver } from "..";
 import { Page } from "./Page";
 
@@ -34,9 +34,10 @@ export class Route<Path extends string = string> extends BaseRouteNode<Path> {
         super(path, builder, 'route');
     }
 
-    async build(data: {params: any, query: any} = {params: {}, query: {}}) {
-        const page = new Page(this, data);
+    async build(data: {params: any, query: any} = {params: {}, query: {}}, page?: Page) {
+        page = page ?? new Page(this, data);
         page.params = data.params;
+        page.initial = true;
         let resolver: any = this.builder(page);
         if (_instanceof(resolver, Promise)) {
             const result = await resolver as any;

package/ext/router/node/Router.ts

@@ -1,32 +1,61 @@
-import { _Array_from, _instanceof, _Object_fromEntries } from "#lib/native";
+import type { AnchorTarget } from "#html/$Anchor";
+import { _document } from "#lib/env";
+import { _Array_from, _instanceof, _JSON_parse, _JSON_stringify, _Object_entries, _Object_fromEntries, forEach, startsWith } from "#lib/native";
 import { Page } from "./Page";
 import { BaseRouteNode, Route } from "./Route";
 
+// history index
+let index = 0;
+const _addEventListener = addEventListener;
 const _location = location;
 const {origin} = _location;
 const _history = history;
-const toURL = (path: string | URL) => 
-    _instanceof(path, URL) ? path : new URL(path.startsWith(origin) ? path : origin + path);
+const _sessionStorage = sessionStorage;
+const documentElement = _document.documentElement;
 const [PUSH, REPLACE] = [1, 2] as const;
-const historyHandler = (path: string | URL | Nullish, mode: 1 | 2) => {
+const [FORWARD, BACK] = ['forward', 'back'] as const;
+const scrollStorageKey = '__scroll__';
+/** convert path string to URL object */
+const toURL = (path: string | URL) => 
+    _instanceof(path, URL) ? path : startsWith(path, 'http') ? new URL(path) : new URL(startsWith(path, origin) ? path : origin + path);
+
+type ScrollData = {[key: number]: {x: number, y: number}};
+const scrollRecord = (e?: Event) => {
+    const data = _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}') as ScrollData;
+    data[index] = { x: documentElement.scrollLeft, y: documentElement.scrollTop };
+    // e is Event when called from scroll or beforeload
+    if (!e) forEach(_Object_entries(data), ([i]) => +i > index && delete data[+i])
+    _sessionStorage.setItem(scrollStorageKey, _JSON_stringify(data));
+}
+/** handle history state with push and replace state. */
+const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?: AnchorTarget) => {
     if (!path) return;
     const url = toURL(path);
-    if (url.origin !== origin) return this;
-    history[mode === PUSH ? 'pushState' : 'replaceState']({}, '' , url)
-    Router.routers.forEach(router => router.routes.size && router.resolve(path));
+    if (url.href === _location.href) return;
+    if (target && target !== '_self') return open(url, target);
+    if (url.origin !== origin) return open(url, target);
+    scrollRecord();
+    if (mode === PUSH) index += 1;
+    Router.direction = FORWARD;
+    _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
+    for (let router of Router.routers) router.routes.size && await router.resolve(path);
 }
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
+
 export class Router extends BaseRouteNode<''> {
     static pageRouters = new Map<Page, Router>();
     static routers = new Set<Router>();
     pageMap = new Map<string, Page>();
+    static direction: 'back' | 'forward' = FORWARD;
     constructor(page?: Page) {
         super('', () => [], 'router')
         Router.routers.add(this);
         if (page) Router.pageRouters.set(page, this);
     }
 
-    static open(path: string | URL | Nullish) {
-        historyHandler(path, PUSH);
+    static open(path: string | URL | Nullish, target?: AnchorTarget) {
+        historyHandler(path, PUSH, target);
         return this;
     }
 
@@ -46,7 +75,7 @@ export class Router extends BaseRouteNode<''> {
     }
 
     async resolve(path: string | URL) {
-        const {pathname, searchParams, hash} = toURL(path);
+        const {pathname, searchParams, hash, href} = toURL(path);
         const routeData = { params: {} as {[key: string]: string}, query: _Object_fromEntries(searchParams) }
         const split = (p: string) => p.replaceAll(/\/+/g, '/').split('/').map(path => `/${path}`);
 
@@ -65,7 +94,7 @@ export class Router extends BaseRouteNode<''> {
                     if (routeSnippet.includes(':')) {
                         if (targetSnippet === '/') continue routeLoop;
                         const [prefix, paramName] = routeSnippet.split(':') as [string, string];
-                        if (!targetSnippet.startsWith(prefix)) continue routeLoop;
+                        if (!startsWith(targetSnippet, prefix)) continue routeLoop;
                         routeData.params[paramName] = targetSnippet.replace(`${prefix}`, '');
                         pass();
                         continue splitLoop;
@@ -82,23 +111,39 @@ export class Router extends BaseRouteNode<''> {
         const targetRoutes = determineRoute(this, pathname + '/', hash);
         // build pages
         let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
+        const appendPage = (prevRouter: Router | undefined, page: Page) => page.parentNode !== prevRouter?.node && prevRouter?.content(page);
+
         for (const [route, pathId] of targetRoutes) {
-            const page = await (this.pageMap.get(pathId) ?? (route ? route.build(routeData) : prevRoute.routes.get('404')?.build(routeData) ?? new Route('404', () => null).build()));
-            const _document = document;
+            const page = this.pageMap.get(pathId) ?? new Page(route ?? prevRoute.routes.get('404') ?? new Route('404', () => null), routeData);
+            if (!page.initial) await route?.build(routeData, page);
             _document && (_document.title = page.pageTitle() ?? _document.title);
             this.pageMap.set(pathId, page);
-            if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
-            else this.content(page);
+            if (href === _location.href) appendPage(prevPage ? Router.pageRouters.get(prevPage) : this, page);
             prevPage = page;
             if (route) prevRoute = route;
         }
+        let { x, y } = Router.scroll ?? {x: 0, y: 0};
+        scrollTo(x, y);
+        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
         return this;
     }
 
     listen() {
-        const resolve = () => this.resolve(_location.href)
-        addEventListener('popstate', resolve);
+        const resolve = () => {
+            const stateIndex = _history.state?.index ?? 0;
+            if (index > stateIndex) Router.direction = BACK;
+            if (index < stateIndex) Router.direction = FORWARD;
+            index = stateIndex;
+            this.resolve(_location.href);
+        }
+        _addEventListener('popstate', resolve);
+        _addEventListener('beforeunload', scrollRecord);
+        _addEventListener('scroll', scrollRecord, false);
         resolve();
         return this;
     }
+
+    static get scroll(): ScrollData[number] {
+        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
+    }
 }

package/ext/router/node/RouterAnchor.ts

@@ -3,6 +3,6 @@ import { $Anchor } from "#html/$Anchor";
 export class RouterAnchor extends $Anchor {
     constructor() {
         super();
-        this.on('click', e => { e.preventDefault(); $.open(this.href()) })
+        this.on('click', e => { e.preventDefault(); $.open(this.href(), this.target()) })
     }
 }

package/ext/ssr/index.ts

@@ -1,8 +1,10 @@
 import './env';
 import 'amateras';
-import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty } from "amateras/lib/native";
-import { $Element, $Node, $Text } from "amateras/node";
+import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
+import { $Element } from 'amateras/node/$Element';
 import { BROWSER, NODE } from 'esm-env';
+import { $Node, $Text } from 'amateras/node/$Node';
+import { _document } from '../../src/lib/env';
 
 declare module 'amateras/core' {
     export namespace $ {
@@ -24,7 +26,7 @@ export function onclient<T>(cb: () => T): T | undefined {
 _Object_assign($, {
     mount(id: string, $node: $Element) {
         if (!BROWSER) return;
-        const node = document.querySelector(`#${id}`);
+        const node = _document.querySelector(`#${id}`);
         if (!node) throw 'Target node of mounting not found';
         getData(node, $node);
         node.replaceWith($node.node);
@@ -32,12 +34,12 @@ _Object_assign($, {
         function getData(node: Node, $node: $Node) {
             if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
                 const type = $(node).attr()['type'];
-                return $node.signals.forEach(signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
+                return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
             }
             if (_instanceof(node, Text)) return $node.textContent(node.textContent);
             if (_instanceof(node, Element) && _instanceof($node, $Element)) $node.attr($(node).attr());
             const arr = _Array_from($node.childNodes);
-            node.childNodes.forEach((_node, i) => {
+            forEach(node.childNodes, (_node, i) => {
                 const targetChildNode = arr.at(i);
                 if (!targetChildNode) throw 'Target DOM tree not matched';
                 getData(_node, targetChildNode.$)

package/ext/ui/lib/VirtualScroll.ts

@@ -0,0 +1,24 @@
+import { _Array_from, _instanceof, forEach } from "amateras/lib/native";
+import type { $Virtual } from "amateras/node/$Virtual";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { _document } from "../../../src/lib/env";
+
+export function VirtualScroll($parent: $Virtual, scroller: Node = _document) {
+    scroller.addEventListener('scroll', render, true);
+    $parent.on('layout', render);
+    function render() {
+        const getRect = ($node: $HTMLElement) => $node.getBoundingClientRect();
+        const number = (str: string) => parseInt(str);
+        const parentRect = getRect($parent);
+        const children = _Array_from($parent.nodes);
+        forEach(children, $child => {
+            if (!_instanceof($child, $HTMLElement)) return;
+            const { top, height } = $child.style();
+            const topPos = parentRect.top + number(top);
+            const bottomPos = topPos + number(height);
+            if (bottomPos < 0 || topPos > innerHeight) $parent.hide($child);
+            else $parent.show($child);
+        })
+        $parent.render();
+    }
+}

package/ext/ui/node/Accordian.ts

@@ -0,0 +1,97 @@
+import { _Array_from, _instanceof, forEach, isNull } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { $Node, $NodeContentResolver } from "amateras/node/$Node";
+import { chain } from "../../../src/lib/chain";
+
+const [ACCORDIAN, ACCORDIAN_ITEM, ACCORDIAN_TRIGGER, ACCORDIAN_CONTENT, ACCORDIAN_CONTAINER] = ['accordian', 'accordian-item', 'accordian-trigger', 'accordian-content', 'accordian-container'] as const;
+forEach([
+    `${ACCORDIAN},${ACCORDIAN_ITEM},${ACCORDIAN_TRIGGER}{display:block}`,
+    `${ACCORDIAN_CONTENT}{display:grid;grid-template-rows:0fr}`,
+    `${ACCORDIAN_CONTENT}[opened]{grid-template-rows:1fr}`,
+    `${ACCORDIAN_CONTAINER}{overflow:hidden}`,
+], $.style)
+
+export class Accordian extends $HTMLElement {
+    #autoclose = false;
+    constructor() {
+        super(ACCORDIAN);
+    }
+
+    autoclose(): boolean;
+    autoclose(autoclose: boolean): this;
+    autoclose(autoclose?: boolean) {
+        return chain(this, arguments, () => this.#autoclose, autoclose, autoclose => this.#autoclose = autoclose);
+    }
+
+    get items() {
+        return _Array_from($(this.childNodes)).filter($child => _instanceof($child, AccordianItem))
+    }
+}
+
+export class AccordianItem extends $HTMLElement {
+    $content: null | AccordianContent = null;
+    $trigger: null | AccordianTrigger = null;
+    $root: null | Accordian = null;
+    constructor() {
+        super(ACCORDIAN_ITEM);
+    }
+
+    mounted($parent: $Node): this {
+        if (_instanceof($parent, Accordian)) this.$root = $parent;
+        forEach($(this.childNodes), $c => {
+            if (_instanceof($c, AccordianTrigger)) this.$trigger = $c;
+            if (_instanceof($c, AccordianContent)) this.$content = $c;
+        })
+        return this;
+    }
+}
+
+export class AccordianTrigger extends $HTMLElement {
+    $item: null | AccordianItem = null;
+    constructor() {
+        super(ACCORDIAN_TRIGGER);
+        this.on('click', _ => {
+            const $item = this.$item;
+            const $root = $item?.$root;
+            this.$item?.$content?.use($content => isNull($content.attr('opened')) ? $content.open() : $content.close());
+            $root?.autoclose() && $root.items.forEach($i => $i !== $item && $i.$content?.close())
+        })
+    }
+
+    mounted($parent: $Node): this {
+        if (_instanceof($parent, AccordianItem)) this.$item = $parent;
+        return this;
+    }
+}
+
+export class AccordianContent extends $HTMLElement {
+    $container = $(AccordianContainer);
+    constructor() {
+        super(ACCORDIAN_CONTENT);
+        super.insert(this.$container);
+    }
+
+    content(children: $NodeContentResolver<AccordianContainer>): this {
+        this.$container.content(children);
+        return this;
+    }
+
+    insert(resolver: $NodeContentResolver<AccordianContainer>, position?: number): this {
+        this.$container.insert(resolver, position);
+        return this;
+    }
+
+    open() {
+        return this.attr({opened: ''})
+    }
+
+    close() {
+        return this.attr({opened: null});
+    }
+}
+
+export class AccordianContainer extends $HTMLElement {
+    constructor() {
+        super(ACCORDIAN_CONTAINER);
+    }
+}