@taybart/corvid 0.2.0 → 0.2.2

package/dist/dom.d.ts

@@ -1,3 +1,4 @@
+import * as style from './style';
 import { logger } from './utils';
 /****************
  *     DOM      *
@@ -17,8 +18,14 @@ export declare function onKey(key: string, cb: (ev: {
     shift: boolean;
 }) => void, verbose?: boolean): () => void;
 export declare function els(query: string, verbose?: boolean): el[];
+/**
+ * Define a custom element. Defining the same name with the same class again is a
+ * no-op rather than a `NotSupportedError`, so a double import or an HMR reload
+ * does not blow up; a *different* class on a taken name is still an error.
+ */
+export declare function registerElement(name: string, ctor: CustomElementConstructor): void;
 /*** element ***/
-type elOpts = {
+export type elOpts = {
     element?: HTMLElement;
     query?: string;
     tag?: string;
@@ -40,7 +47,7 @@ export declare class el {
     constructor(opts: HTMLElement | string | elOpts, verbose?: boolean);
     static query(query: string, verbose?: boolean): el;
     /*** dom manipulation ***/
-    value(update?: string): string | el;
+    value(update?: string): string | this;
     parent(parent: HTMLElement | el): this;
     append(ch: HTMLElement | el | string): this;
     appendChild(ch: HTMLElement | el): this;
@@ -51,22 +58,89 @@ export declare class el {
     content(content: any, { text }?: {
         text?: boolean;
     }): this;
-    html(content: string): void;
+    html(content: string): this;
     src(url: string): this;
     attrs(attrs: Object): this;
     attr(key: string, val: string): this;
     removeAttr(key: string): this;
     /*** Style ***/
-    style(update: Object | string, stringify?: boolean): this | undefined;
+    style(update: Object | string, stringify?: boolean): this;
     hasClass(className: string): boolean;
     addClass(className: string | string[]): this;
     removeClass(className: string | string[]): this;
-    /*** Templates ***/
     /*** Events ***/
     on(event: string, cb: (ev: Event) => void, options?: AddEventListenerOptions | boolean): this;
     listen(event: string, cb: (ev: Event) => void, options?: AddEventListenerOptions | boolean): this;
     removeListeners(event: string): this;
 }
+/**
+ * Create an element and return the node itself, not an `el` wrapper. Takes the
+ * same options as `el`, so a custom element comes back ready to talk to:
+ *
+ *   const form = create({ tag: 'x-search-form', parent: '#query-form' })
+ *   form.onSubmit(...)   // its own methods, no `.el` hop
+ *
+ * Wrap it later with `new el(node)` if you want the chainable helpers.
+ */
+export declare function create<T extends HTMLElement = HTMLElement>(opts: elOpts, verbose?: boolean): T;
+/*** component ***/
+/**
+ * Base class for custom elements. It handles registration, the component's
+ * stylesheet, and a mount hook
+ *   class SearchForm extends component {
+ *     static tag = 'x-search-form'
+ *     static styles = { input: { border: 'none' } }
+ *     input = create({ tag: 'input' })
+ *     mount() {
+ *       this.input.addEventListener('keydown', (e) => ...)
+ *       this.append(this.input)
+ *     }
+ *   }
+ *   SearchForm.register()
+ */
+export declare class component extends HTMLElement {
+    #private;
+    /** the name to register as; must contain a hyphen */
+    static tag: string;
+    /**
+     * Injected once at `register()`, scoped to the tag. Written *relative* to the
+     * component — no tag selector of its own — so it always matches whatever name
+     * the class actually registered under.
+     */
+    static styles: style.declarations | null;
+    /**
+     * Inject this component's styles and define it. Idempotent, so calling it
+     * twice (or after an HMR reload) is harmless.
+     * @param tag - overrides `static tag`
+     */
+    static register(tag?: string): void;
+    /**
+     * Called once, the first time the element is connected. Build the subtree and
+     * wire listeners here — a custom element cannot give itself children before
+     * it is connected, and `connectedCallback` runs again on every re-insertion.
+     */
+    mount(): void;
+    /**
+     * Called every time the element is disconnected. Listeners on this element
+     * and on children it owns go away with it; undo document/window listeners
+     * here, using the removers `on()` and `onKey()` hand back.
+     */
+    unmount(): void;
+    /**
+     * Called for every change to an attribute named in `static observedAttributes`,
+     * and never before `mount()` — changes that arrive earlier (anything set at
+     * creation or parse time, which the platform reports *before*
+     * `connectedCallback`) are held and delivered in order right after mount.
+     *
+     * Attributes are strings. For structured data use a property with a setter
+     * that re-renders; an object put through `setAttribute` becomes
+     * "[object Object]".
+     */
+    onAttr(_name: string, _value: string | null, _prev: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, prev: string | null, value: string | null): void;
+}
 /**
  * Get a template from a string
  * https://stackoverflow.com/a/41015840
@@ -78,6 +152,9 @@ export declare function interpolate(str: string, params: Object): string;
 declare const _default: {
     el: typeof el;
     els: typeof els;
+    create: typeof create;
+    component: typeof component;
+    registerElement: typeof registerElement;
     ready: typeof ready;
     on: typeof on;
     onKey: typeof onKey;

package/dist/dom.js

@@ -1,11 +1,102 @@
-function strings_toKebab(str) {
+function toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -61,6 +152,37 @@ class logger {
         });
     }
 }
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function dom_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -110,6 +232,14 @@ function onKey(key, cb, verbose = false) {
 function els(query, verbose = false) {
     return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
 }
+function registerElement(name, ctor) {
+    const existing = customElements.get(name);
+    if (existing) {
+        if (existing !== ctor) throw new Error(`custom element ${name} is already registered by ${existing.name}`);
+        return;
+    }
+    customElements.define(name, ctor);
+}
 class dom_el {
     static query(query, verbose = false) {
         return new dom_el(query, verbose);
@@ -168,6 +298,7 @@ class dom_el {
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         this.el.innerHTML = content;
+        return this;
     }
     src(url) {
         if (this.el && 'src' in this.el) this.el.src = url;
@@ -194,7 +325,7 @@ class dom_el {
             else if ('object' == typeof update) {
                 if (!stringify) {
                     for (const [k, v] of Object.entries(update))this.el.style[k] = v;
-                    return;
+                    return this;
                 }
                 const s = render(update);
                 this.log.debug(`set style: ${this.el.style} -> ${s}`);
@@ -297,6 +428,56 @@ class dom_el {
         }
     }
 }
+function create(opts, verbose = false) {
+    const node = new dom_el(opts, verbose).el;
+    if (!node) throw new Error(`could not create element: ${opts.tag ?? opts.query ?? '?'}`);
+    return node;
+}
+var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+class component extends HTMLElement {
+    static register(tag) {
+        const name = tag ?? this.tag;
+        if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
+        if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
+        if (this.styles) inject(name, this.styles);
+        registerElement(name, this);
+    }
+    mount() {}
+    unmount() {}
+    onAttr(_name, _value, _prev) {}
+    connectedCallback() {
+        if (!_class_private_field_get(this, _mounted)) {
+            _class_private_field_set(this, _mounted, true);
+            this.mount();
+            const queued = _class_private_field_get(this, _pendingAttrs);
+            _class_private_field_set(this, _pendingAttrs, []);
+            for (const [name, value, prev] of queued)this.onAttr(name, value, prev);
+        }
+    }
+    disconnectedCallback() {
+        this.unmount();
+    }
+    attributeChangedCallback(name, prev, value) {
+        if (prev === value) return;
+        if (!_class_private_field_get(this, _mounted)) return void _class_private_field_get(this, _pendingAttrs).push([
+            name,
+            value,
+            prev
+        ]);
+        this.onAttr(name, value, prev);
+    }
+    constructor(...args){
+        super(...args), _class_private_field_init(this, _mounted, {
+            writable: true,
+            value: false
+        }), _class_private_field_init(this, _pendingAttrs, {
+            writable: true,
+            value: []
+        });
+    }
+}
+dom_define_property(component, "tag", '');
+dom_define_property(component, "styles", null);
 function interpolate(str, params) {
     let names = Object.keys(params).map((k)=>`_${k}`);
     let vals = Object.values(params);
@@ -305,8 +486,11 @@ function interpolate(str, params) {
 const dom = {
     el: dom_el,
     els,
+    create,
+    component,
+    registerElement,
     ready,
     on,
     onKey
 };
-export { dom as default, dom_el as el, els, interpolate, on, onBlur, onFocus, onKey, ready };
+export { component, create, dom as default, dom_el as el, els, interpolate, on, onBlur, onFocus, onKey, ready, registerElement };

package/dist/index.js

@@ -29,7 +29,9 @@ __webpack_require__.d(strings_namespaceObject, {
 var style_namespaceObject = {};
 __webpack_require__.r(style_namespaceObject);
 __webpack_require__.d(style_namespaceObject, {
+    css: ()=>css,
     cssVar: ()=>cssVar,
+    eject: ()=>eject,
     gradient: ()=>gradient,
     handleThemeSwitch: ()=>handleThemeSwitch,
     inject: ()=>inject,
@@ -41,6 +43,8 @@ __webpack_require__.d(style_namespaceObject, {
 var dom_namespaceObject = {};
 __webpack_require__.r(dom_namespaceObject);
 __webpack_require__.d(dom_namespaceObject, {
+    component: ()=>component,
+    create: ()=>create,
     default: ()=>dom,
     el: ()=>dom_el,
     els: ()=>els,
@@ -49,7 +53,8 @@ __webpack_require__.d(dom_namespaceObject, {
     onBlur: ()=>onBlur,
     onFocus: ()=>onFocus,
     onKey: ()=>onKey,
-    ready: ()=>ready
+    ready: ()=>ready,
+    registerElement: ()=>registerElement
 });
 var network_namespaceObject = {};
 __webpack_require__.r(network_namespaceObject);
@@ -126,17 +131,104 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
-function inject(selector, style) {
-    const existing = document.getElementById(`corvid-injected-${encodeURIComponent(selector)}`);
-    if (existing) existing.remove();
-    const injected = document.createElement('style');
-    injected.id = `corvid-injected-${encodeURIComponent(selector)}`;
-    let s = `${selector} {\n`;
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}: ${v};\n`);
-    s += '}';
-    injected.textContent = s;
-    document.head.appendChild(injected);
-    return s;
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
+function eject(key) {
+    const sheets = registry();
+    const sheet = sheets.get(key);
+    if (!sheet) return;
+    if ('replaceSync' in sheet) document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s)=>s !== sheet);
+    else sheet.remove();
+    sheets.delete(key);
 }
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -272,6 +364,37 @@ class logger {
         });
     }
 }
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function dom_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -321,6 +444,14 @@ function onKey(key, cb, verbose = false) {
 function els(query, verbose = false) {
     return Array.from(document.querySelectorAll(query)).map((n)=>new dom_el(n, verbose));
 }
+function registerElement(name, ctor) {
+    const existing = customElements.get(name);
+    if (existing) {
+        if (existing !== ctor) throw new Error(`custom element ${name} is already registered by ${existing.name}`);
+        return;
+    }
+    customElements.define(name, ctor);
+}
 class dom_el {
     static query(query, verbose = false) {
         return new dom_el(query, verbose);
@@ -379,6 +510,7 @@ class dom_el {
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         this.el.innerHTML = content;
+        return this;
     }
     src(url) {
         if (this.el && 'src' in this.el) this.el.src = url;
@@ -405,7 +537,7 @@ class dom_el {
             else if ('object' == typeof update) {
                 if (!stringify) {
                     for (const [k, v] of Object.entries(update))this.el.style[k] = v;
-                    return;
+                    return this;
                 }
                 const s = render(update);
                 this.log.debug(`set style: ${this.el.style} -> ${s}`);
@@ -508,6 +640,56 @@ class dom_el {
         }
     }
 }
+function create(opts, verbose = false) {
+    const node = new dom_el(opts, verbose).el;
+    if (!node) throw new Error(`could not create element: ${opts.tag ?? opts.query ?? '?'}`);
+    return node;
+}
+var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+class component extends HTMLElement {
+    static register(tag) {
+        const name = tag ?? this.tag;
+        if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
+        if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
+        if (this.styles) inject(name, this.styles);
+        registerElement(name, this);
+    }
+    mount() {}
+    unmount() {}
+    onAttr(_name, _value, _prev) {}
+    connectedCallback() {
+        if (!_class_private_field_get(this, _mounted)) {
+            _class_private_field_set(this, _mounted, true);
+            this.mount();
+            const queued = _class_private_field_get(this, _pendingAttrs);
+            _class_private_field_set(this, _pendingAttrs, []);
+            for (const [name, value, prev] of queued)this.onAttr(name, value, prev);
+        }
+    }
+    disconnectedCallback() {
+        this.unmount();
+    }
+    attributeChangedCallback(name, prev, value) {
+        if (prev === value) return;
+        if (!_class_private_field_get(this, _mounted)) return void _class_private_field_get(this, _pendingAttrs).push([
+            name,
+            value,
+            prev
+        ]);
+        this.onAttr(name, value, prev);
+    }
+    constructor(...args){
+        super(...args), _class_private_field_init(this, _mounted, {
+            writable: true,
+            value: false
+        }), _class_private_field_init(this, _pendingAttrs, {
+            writable: true,
+            value: []
+        });
+    }
+}
+dom_define_property(component, "tag", '');
+dom_define_property(component, "styles", null);
 function interpolate(str, params) {
     let names = Object.keys(params).map((k)=>`_${k}`);
     let vals = Object.values(params);
@@ -516,6 +698,9 @@ function interpolate(str, params) {
 const dom = {
     el: dom_el,
     els,
+    create,
+    component,
+    registerElement,
     ready,
     on,
     onKey

package/dist/ls.js

@@ -1,11 +1,102 @@
-function strings_toKebab(str) {
+function toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -61,6 +152,37 @@ class utils_logger {
         });
     }
 }
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function dom_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -71,6 +193,14 @@ function dom_define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
+function registerElement(name, ctor) {
+    const existing = customElements.get(name);
+    if (existing) {
+        if (existing !== ctor) throw new Error(`custom element ${name} is already registered by ${existing.name}`);
+        return;
+    }
+    customElements.define(name, ctor);
+}
 class dom_el {
     static query(query, verbose = false) {
         return new dom_el(query, verbose);
@@ -129,6 +259,7 @@ class dom_el {
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         this.el.innerHTML = content;
+        return this;
     }
     src(url) {
         if (this.el && 'src' in this.el) this.el.src = url;
@@ -155,7 +286,7 @@ class dom_el {
             else if ('object' == typeof update) {
                 if (!stringify) {
                     for (const [k, v] of Object.entries(update))this.el.style[k] = v;
-                    return;
+                    return this;
                 }
                 const s = render(update);
                 this.log.debug(`set style: ${this.el.style} -> ${s}`);
@@ -258,6 +389,51 @@ class dom_el {
         }
     }
 }
+var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+class component extends HTMLElement {
+    static register(tag) {
+        const name = tag ?? this.tag;
+        if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
+        if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
+        if (this.styles) inject(name, this.styles);
+        registerElement(name, this);
+    }
+    mount() {}
+    unmount() {}
+    onAttr(_name, _value, _prev) {}
+    connectedCallback() {
+        if (!_class_private_field_get(this, _mounted)) {
+            _class_private_field_set(this, _mounted, true);
+            this.mount();
+            const queued = _class_private_field_get(this, _pendingAttrs);
+            _class_private_field_set(this, _pendingAttrs, []);
+            for (const [name, value, prev] of queued)this.onAttr(name, value, prev);
+        }
+    }
+    disconnectedCallback() {
+        this.unmount();
+    }
+    attributeChangedCallback(name, prev, value) {
+        if (prev === value) return;
+        if (!_class_private_field_get(this, _mounted)) return void _class_private_field_get(this, _pendingAttrs).push([
+            name,
+            value,
+            prev
+        ]);
+        this.onAttr(name, value, prev);
+    }
+    constructor(...args){
+        super(...args), _class_private_field_init(this, _mounted, {
+            writable: true,
+            value: false
+        }), _class_private_field_init(this, _pendingAttrs, {
+            writable: true,
+            value: []
+        });
+    }
+}
+dom_define_property(component, "tag", '');
+dom_define_property(component, "styles", null);
 function get(key, _default) {
     let ret = localStorage.getItem(key);
     if (null === ret && null != _default) {

package/dist/qr.js

@@ -1904,14 +1904,105 @@ const QRErrorCorrectLevel = {
     Q: 3,
     H: 2
 };
-function strings_toKebab(str) {
+function toKebab(str) {
     return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (s, ofs)=>(ofs ? '-' : '') + s.toLowerCase());
 }
 function render(style) {
     let s = '';
-    Object.entries(style).forEach(([k, v])=>s += `${strings_toKebab(k)}:${v};`);
+    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
 function utils_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -1967,6 +2058,37 @@ class utils_logger {
         });
     }
 }
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function dom_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -1977,6 +2099,14 @@ function dom_define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
+function registerElement(name, ctor) {
+    const existing = customElements.get(name);
+    if (existing) {
+        if (existing !== ctor) throw new Error(`custom element ${name} is already registered by ${existing.name}`);
+        return;
+    }
+    customElements.define(name, ctor);
+}
 class dom_el {
     static query(query, verbose = false) {
         return new dom_el(query, verbose);
@@ -2035,6 +2165,7 @@ class dom_el {
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         this.el.innerHTML = content;
+        return this;
     }
     src(url) {
         if (this.el && 'src' in this.el) this.el.src = url;
@@ -2061,7 +2192,7 @@ class dom_el {
             else if ('object' == typeof update) {
                 if (!stringify) {
                     for (const [k, v] of Object.entries(update))this.el.style[k] = v;
-                    return;
+                    return this;
                 }
                 const s = render(update);
                 this.log.debug(`set style: ${this.el.style} -> ${s}`);
@@ -2164,6 +2295,51 @@ class dom_el {
         }
     }
 }
+var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+class component extends HTMLElement {
+    static register(tag) {
+        const name = tag ?? this.tag;
+        if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
+        if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
+        if (this.styles) inject(name, this.styles);
+        registerElement(name, this);
+    }
+    mount() {}
+    unmount() {}
+    onAttr(_name, _value, _prev) {}
+    connectedCallback() {
+        if (!_class_private_field_get(this, _mounted)) {
+            _class_private_field_set(this, _mounted, true);
+            this.mount();
+            const queued = _class_private_field_get(this, _pendingAttrs);
+            _class_private_field_set(this, _pendingAttrs, []);
+            for (const [name, value, prev] of queued)this.onAttr(name, value, prev);
+        }
+    }
+    disconnectedCallback() {
+        this.unmount();
+    }
+    attributeChangedCallback(name, prev, value) {
+        if (prev === value) return;
+        if (!_class_private_field_get(this, _mounted)) return void _class_private_field_get(this, _pendingAttrs).push([
+            name,
+            value,
+            prev
+        ]);
+        this.onAttr(name, value, prev);
+    }
+    constructor(...args){
+        super(...args), _class_private_field_init(this, _mounted, {
+            writable: true,
+            value: false
+        }), _class_private_field_init(this, _pendingAttrs, {
+            writable: true,
+            value: []
+        });
+    }
+}
+dom_define_property(component, "tag", '');
+dom_define_property(component, "styles", null);
 class QR {
     static render(config, element) {
         const settings = this.getDefaultSettings(config);

package/dist/style.d.ts

@@ -3,7 +3,42 @@
  **************/
 export declare function cssVar(name: string): string;
 export declare function render(style: Object): string;
-export declare function inject(selector: string, style: Object): string;
+/**
+ * A block of css declarations. A value that is itself an object is a nested
+ * rule: the key is a selector (`&:focus`, `input`) or an at-rule (`@media ...`)
+ * rather than a property.
+ */
+export type declarations = {
+    [key: string]: string | number | declarations;
+};
+/**
+ * Render a declaration block to css without touching the document.
+ */
+export declare function css(selector: string, style: declarations): string;
+/**
+ * Install a stylesheet for `selector`. Nested objects become nested rules, so
+ * a component declares its styles in one call:
+ *
+ *   inject('x-search-form', {
+ *     marginTop: '33vh',
+ *     input: {
+ *       border: 'none',
+ *       '&:focus': { borderBottomColor: 'var(--ring)' },
+ *     },
+ *   })
+ *
+ * Injecting the same key again replaces that sheet rather than adding to it;
+ * `key` defaults to the selector.
+ * @return the generated css
+ */
+export declare function inject(selector: string, style: declarations, { key }?: {
+    key?: string;
+}): string;
+/**
+ * Remove a stylesheet installed by `inject`
+ * @param key - the key it was injected under (the selector, unless overridden)
+ */
+export declare function eject(key: string): void;
 /**
  * Check if the current theme is dark
  */

package/dist/style.js

@@ -10,17 +10,104 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
-function inject(selector, style) {
-    const existing = document.getElementById(`corvid-injected-${encodeURIComponent(selector)}`);
-    if (existing) existing.remove();
-    const injected = document.createElement('style');
-    injected.id = `corvid-injected-${encodeURIComponent(selector)}`;
-    let s = `${selector} {\n`;
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}: ${v};\n`);
-    s += '}';
-    injected.textContent = s;
-    document.head.appendChild(injected);
-    return s;
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
+function eject(key) {
+    const sheets = registry();
+    const sheet = sheets.get(key);
+    if (!sheet) return;
+    if ('replaceSync' in sheet) document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s)=>s !== sheet);
+    else sheet.remove();
+    sheets.delete(key);
 }
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -46,4 +133,4 @@ function gradient(start, end, value) {
     const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
     return `rgb(${red}, ${green}, ${blue})`;
 }
-export { cssVar, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, switchTheme };
+export { css, cssVar, eject, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, switchTheme };

package/dist/style.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {