@gluon/gluon 2.5.2 → 3.0.0

package/dist/gluon.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright (c) 2026 Goffert van Gool
+ * SPDX-License-Identifier: MIT
+ */
+import { type PropertyDeclarations, type PropertyValues } from "./properties.js";
+import { type Styles } from "./styles.js";
+type GluonConstructor = typeof GluonElement;
+/**
+ * Registers an element class with a custom element registry, under the tag name `name`
+ *
+ * A name that is already registered is not registered again, so a module can be loaded more than once.
+ * When the name is registered with a different class, the existing registration is kept and a warning is logged.
+ */
+export declare const define: <T extends GluonConstructor>(ctor: T, name: string, registry?: CustomElementRegistry) => T;
+/**
+ * A base class for custom elements
+ *
+ * - Declares reactive properties in a static `properties` map, with attributes that are converted and reflected
+ * - Renders the result of `render()` with lite-html into a shadow root, batched in a microtask after properties change
+ * - Applies the static `styles` to the shadow root, once per class
+ * - Calls event handlers in the template with the element as `this`
+ */
+export declare class GluonElement extends HTMLElement {
+    #private;
+    /**
+  
+     * The reactive properties of this element, by name
+     *
+     * Each declared property is an accessor that requests an update when its value changes.
+     * With `attribute: true`, the property is also set from the attribute with its kebab-cased name.
+     */
+    static properties: PropertyDeclarations;
+    /**
+     * The styles of this element: CSS text, a constructed `CSSStyleSheet`, or a list of them
+     *
+     * The styles are applied to the shadow root of every instance, once per class.
+     * They are not applied when the element renders into its light DOM.
+     */
+    static styles?: Styles;
+    /**
+     * The options for the shadow root that `createRenderRoot()` attaches
+     */
+    static shadowRootOptions: ShadowRootInit;
+    static get observedAttributes(): string[];
+    /**
+     * The node that `render()` renders into. A shadow root, unless `createRenderRoot()` is overridden
+     */
+    readonly renderRoot: ParentNode;
+    /**
+     * Whether an update is scheduled and has not been performed yet
+     */
+    isUpdatePending: boolean;
+    /**
+     * Whether the element has performed its first update
+     */
+    hasUpdated: boolean;
+    constructor();
+    /**
+     * Returns the node to render into
+     *
+     * Attaches a shadow root with the static `shadowRootOptions`, or returns the shadow root that already exists.
+     * Override this method to render somewhere else, for example `return this` to render into the light DOM.
+     */
+    protected createRenderRoot(): ParentNode;
+    /**
+     * An `AbortSignal` that is aborted when the element is disconnected
+     *
+     * Pass it as the `signal` of listeners and observers that are set up in `connectedCallback()`,
+     * so they are removed when the element is disconnected. A new signal is created on every connect.
+     */
+    get disconnectSignal(): AbortSignal;
+    /**
+     * Resolves when the pending update completes
+     *
+     * Resolves with `true` when no further update was requested during the update, and `false` otherwise
+     */
+    get updateComplete(): Promise<boolean>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, value: string | null): void;
+    /**
+     * Requests an update, which is performed in a microtask
+     *
+     * Called by the setter of every declared property. Call it without arguments to update after a change
+     * that the element cannot see, such as a mutation of an array or object in a property.
+     */
+    requestUpdate(name?: string, oldValue?: unknown): void;
+    /**
+     * Performs the pending update now, instead of in a microtask
+     *
+     * Runs `shouldUpdate()`, `willUpdate()`, `update()`, `firstUpdated()`, and `updated()`
+     */
+    performUpdate(): void;
+    /**
+     * Decides whether an update is performed. Defaults to `true`
+     */
+    protected shouldUpdate(_changed: PropertyValues<this>): boolean;
+    /**
+     * Called before `update()`, to compute values that depend on the changed properties
+     */
+    protected willUpdate(_changed: PropertyValues<this>): void;
+    /**
+     * Reflects the changed properties to their attributes, and renders the result of `render()` into the render root
+     *
+     * Nothing is rendered when `render()` returns `noChange`
+     */
+    protected update(_changed: PropertyValues<this>): void;
+    /**
+     * Returns what to render into the render root, usually a lite-html template
+     *
+     * Return `noChange` to leave the render root as it is
+     */
+    protected render(): unknown;
+    /**
+     * Called after the first update
+     */
+    protected firstUpdated(_changed: PropertyValues<this>): void;
+    /**
+     * Called after every update
+     */
+    protected updated(_changed: PropertyValues<this>): void;
+}
+export {};

package/dist/gluon.min.js

@@ -0,0 +1,4 @@
+/** @license Copyright (c) 2026 Goffert van Gool, SPDX-License-Identifier: MIT */
+var e=Math.random().toString(36).slice(2).padStart(10,`0`),t=`attribute-${e}`,n=`comment-${e}`,r=`node-${e}`,i=`${r}" ${r} `,a=()=>document.createComment(``),o=(e,t,n)=>{let r=e.nextSibling;for(;r&&r!==t;){let e=r.nextSibling;n?n.append(r):r.remove(),r=e}},s=/* @__PURE__ */ new WeakSet,c=e=>typeof e==`function`&&s.has(e),l=e=>(s.add(e),e),u=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`,d=e=>typeof e[Symbol.iterator]==`function`,ee=e=>typeof e.then==`function`,f={},p={},m={},h=class e{node;value;beforeNode;afterNode;instance;iterableParts;promise;options;constructor({node:e,options:t}){this.node=p,this.value=f,this.options=t,this.beforeNode=e,this.afterNode=e.nextSibling}get parentNode(){return this.beforeNode.parentNode}render(e){if(c(e))e(this);else if(e!==f){if(e==null)this.clear();else if(u(e))this._renderText(e);else if(e instanceof D)this._renderTemplateResult(e);else if(d(e))this._renderIterable(e);else if(e instanceof Node)this._renderNode(e);else if(ee(e)){this._renderPromise(e);return}else e=String(e),this._renderText(e);this.promise=void 0,this.value=e}}_renderText(e){this.value!==e&&(u(this.value)?this.node.data=String(e):this._renderNode(document.createTextNode(String(e))))}_renderTemplateResult(e){if(this.instance?.template===e.template)this.instance.render(e.values);else{let t=new O(e.template,this.options);t.render(e.values),this._renderNode(t.fragment),this.instance=t}}_renderIterable(t){let n=this.iterableParts;(this.node!==m||!n)&&(this.clear(),this.node=m,n=this.iterableParts=[]);let r=0,i=this.afterNode?this.afterNode.previousSibling:this.parentNode.lastChild;for(let o of t){let t=n[r];if(t===void 0){let r=a();this.parentNode.insertBefore(r,this.afterNode),t=new e({node:i,options:this.options}),n.push(t),i=r}t.render(o),r++}if(r===0)o(this.beforeNode,this.afterNode);else if(r<n.length){let e=n[r-1];o(e.afterNode,this.afterNode)}n.length=r}_renderNode(e){this.node!==e&&(this.clear(),this.parentNode.insertBefore(e,this.afterNode),this.node=e)}_renderPromise(e){this.promise!==e&&(this.promise=e,e.then(t=>{this.promise===e&&(this.promise=void 0,this.render(t))}))}clear(){o(this.beforeNode,this.afterNode,this.node instanceof DocumentFragment?this.node:void 0),this.node=p,this.instance=this.iterableParts=void 0}},g=class{node;constructor({node:e}){this.node=e}render(e){this.node.textContent=e==null?``:String(e)}},_=class{node;value;type;name;options;_render;constructor({node:e,attribute:t,options:n}){switch(this.node=e,this.value=f,this.options=n,t[0]){case`.`:this.type=`property`,this._render=this._renderProperty;break;case`?`:this.type=`boolean`,this._render=this._renderBoolean;break;case`@`:this.type=`event`,this._render=this._renderEvent;break;default:this.type=`attribute`,this._render=this._renderAttribute}this.name=this.type===`attribute`?t:t.slice(1),this.type===`event`&&this.node.addEventListener(this.name,this)}render(e){c(e)?e(this):e!==f&&this._render(e)}_renderProperty(e){this.node[this.name]=e}_renderBoolean(e){this.value!==!!e&&(e?this.node.setAttribute(this.name,``):this.node.removeAttribute(this.name),this.value=!!e)}_renderEvent(e){this.value=e}handleEvent(e){let t=this.value;typeof t==`function`?t.call(this.options?.host??this.node,e):t?.handleEvent?.(e)}_renderAttribute(e){this.value!==e&&(this.node.setAttribute(this.name,String(e??``)),this.value=e)}},te=/[ \x09\x0a\x0c\x0d]([^\0-\x1F\x7F-\x9F \x09\x0a\x0c\x0d"'>=/]+)[ \x09\x0a\x0c\x0d]*=$/,v=(a,o)=>{let s=[],c=(t,n)=>{if(t.includes(e))throw Error(`Parts are not allowed inside <${n?.localName}> elements`)},l=(e,o)=>{if(e instanceof Comment)e.data===n?s.push({type:g,path:o}):e.data===i&&(e.data=``,s.push({type:h,path:o}));else if(e instanceof Text)c(e.data,e.parentElement);else{if(e instanceof Element){if(e.hasAttribute(r))throw Error(`The '>' character is not allowed in attribute literals. Replace with '&gt;'`);if(e.localName===`template`&&c(e.innerHTML,e),e.hasAttribute(t)){e.removeAttribute(t);let n=[...e.attributes].filter(e=>e.value===t);for(let t of n){e.removeAttributeNode(t);let n=te.exec(a[s.length])[1];s.push({type:_,path:o,attribute:n})}}}let n=e.childNodes,i=n.length;for(let e=0;e<i;e++)l(n[e],[...o,e])}};if(l(o.content,[]),s.length<a.length-1)throw Error("Double attribute assignments are not allowed: '<div a=${0} a=${0}>'");return s},y=`${t} ${t}`,b=`--><!--${n}--><!-- `,x=`<!--${i}-->`,S=/<[a-zA-Z/!?]/g,C=(e,t)=>{let n=e.lastIndexOf(`<!--`);if((t===b||n>-1)&&e.indexOf(`-->`,n+1)<0)return b;let r=e.lastIndexOf(`>`);return S.lastIndex=r+1,S.test(e)?y:r>-1?x:t},w=e=>{let t=``,n=x;for(let r of e.slice(0,-1)){if(n=C(r,n),n===y&&!r.endsWith(`=`))throw Error("Only bare attribute parts are allowed: `<div a=${0}>`");t+=r+n}return t+e.at(-1)},T=(e,t)=>{let n=document.createElement(`template`),r=w(e);if(t){n.innerHTML=`<svg>${r}</svg>`;let e=n.content.firstChild;e.replaceWith(...e.childNodes)}else n.innerHTML=r;let o=n.content.lastChild;return o instanceof Comment&&o.data===i&&n.content.append(a()),n},E=/* @__PURE__ */ new WeakMap,ne=class{strings;element;parts;constructor(e,t){this.strings=e,this.element=T(e,t),this.parts=v(e,this.element)}},D=class{strings;values;isSvg;_template;constructor(e,t,n){this.strings=e,this.values=t,this.isSvg=n,this._template=void 0}get template(){if(this._template)return this._template;let e=E.get(this.strings);return e||(e=new ne(this.strings,this.isSvg),E.set(this.strings,e)),this._template=e,e}},O=class{template;fragment;parts;constructor(e,t){this.template=e,this.fragment=document.importNode(e.element.content,!0),this.parts=e.parts.map(e=>{let n=this.fragment;return e.path.forEach(e=>{n=n.childNodes[e]}),`attribute`in e?new _({node:n,attribute:e.attribute,options:t}):e.type===g?new g({node:n}):new h({node:n,options:t})})}render(e){this.parts.forEach((t,n)=>t.render(e[n]))}},k=/* @__PURE__ */ new WeakMap,A=e=>l(t=>{let n=k.get(t);n||(n=/* @__PURE__ */ new Map,k.set(t,n));let r=e instanceof D?n.get(e.template):void 0;r&&t.instance!==r&&(t._renderNode(r.fragment),t.instance=r),t.render(e),t.instance&&n.set(t.instance.template,t.instance)}),j=/* @__PURE__ */ new WeakMap,re=(e,t)=>l(n=>{let r=j.get(n);(!r||r.length!==e.length||e.some((e,t)=>e!==r[t]))&&(j.set(n,[...e]),n.render(t()))}),ie=e=>l(t=>{e==null&&t instanceof _&&t.type===`attribute`?(t.node.removeAttribute(t.name),t.value=f):t.render(e)}),M=/* @__PURE__ */ new WeakMap,N=({beforeNode:e,afterNode:t})=>{let n=document.createRange();return n.setStartBefore(e),n.setEndAfter(t),n},P=(e,t,n)=>l(r=>{if(!n){r.render(Array.from(e,t));return}let i=M.get(r);(!i||r.node!==i)&&(r.clear(),r.value=r.promise=void 0,i=[]);let o=/* @__PURE__ */ new Map;for(let{key:e,itemPart:t}of i)o.has(e)?N(t).deleteContents():o.set(e,t);let s=r.parentNode,c=[],l=r.beforeNode.nextSibling,u=0;for(let i of e){let e=t(i,u),d=o.get(e);if(d)o.delete(e),d.beforeNode!==l&&s.insertBefore(N(d).extractContents(),l);else{let e=a();s.insertBefore(e,l),s.insertBefore(a(),l),d=new h({node:e,options:r.options})}d.render(n(i,u++)),c.push({key:e,itemPart:d}),l=d.afterNode.nextSibling}o.forEach(e=>N(e).deleteContents()),M.set(r,c),r.node=c}),F=/* @__PURE__ */ new WeakMap,I=e=>l(t=>{let n=F.get(t);if(!n||n.htmlString!==e||t.node!==n.fragment){let n=document.createElement(`template`);n.innerHTML=e;let r=document.importNode(n.content,!0);t.render(r),F.set(t,{htmlString:e,fragment:r})}}),L=/* @__PURE__ */ new WeakMap,R=(e,t)=>l(n=>{L.has(e)?n.render(L.get(e)):(e.then(t=>L.set(e,t),()=>{}),n.render(t),n.render(e))}),z=(e,t,n)=>l(r=>{e?r.render(t):r.render(n)}),B=/* @__PURE__ */ new WeakMap,V=(e,...t)=>new D(e,t),H=(e,...t)=>new D(e,t,!0),U=(e,t,n)=>{let r=B.get(t);if(!r){let e=a();t.replaceChildren(e),r=new h({node:e,options:n}),B.set(t,r)}r.render(e)},W={fromAttribute(e,t){switch(t){case Boolean:return e!==null;case Number:return e===null?null:Number(e);case Array:case Object:return e===null?null:JSON.parse(e);default:return e}},toAttribute(e,t){switch(t){case Boolean:return e?``:null;case Array:case Object:return e==null?null:JSON.stringify(e);default:return e==null?null:String(e)}}},G=(e,t)=>!Object.is(e,t),K=e=>e.replace(/([a-z](?=[A-Z]))|([A-Z](?=[A-Z][a-z]))/g,`$1$2-`).toLowerCase(),q=(e,{attribute:t})=>t?K(e):void 0,J=(e,...t)=>e.reduce((e,n,r)=>e+String(t[r-1])+n),Y=/* @__PURE__ */ new Map,ae=e=>{if(typeof e!=`string`)return e;let t=Y.get(e);return t||(t=new CSSStyleSheet,t.replaceSync(e),Y.set(e,t)),t},oe=e=>typeof e==`string`?e:Array.from(e.cssRules,e=>e.cssText).join(`
+`),X=/* @__PURE__ */ new WeakMap,Z=/* @__PURE__ */ new WeakSet,se=(e,t)=>{let n;for(let r=e;r!==$.prototype&&!n;r=Object.getPrototypeOf(r))n=Object.getOwnPropertyDescriptor(r,t);if(n?.set&&Z.has(n.set))return;let r=Symbol(t),i=n?.get??function(){return this[r]},a=n?.set??function(e){this[r]=e},o=function(e){let n=i.call(this);a.call(this,e),this.requestUpdate(t,n)};Z.add(o),Object.defineProperty(e,t,{get:i,set:o,configurable:!0,enumerable:!0})},Q=e=>{let t=X.get(e);if(t)return t;let n=e===$?void 0:Q(Object.getPrototypeOf(e));if(t={properties:new Map(n?.properties),attributes:new Map(n?.attributes)},X.set(e,t),Object.hasOwn(e,`properties`))for(let[n,r]of Object.entries(e.properties)){t.properties.set(n,r);for(let[e,r]of t.attributes)r===n&&t.attributes.delete(e);let i=q(n,r);i&&t.attributes.set(i,n),se(e.prototype,n)}return t},ce=e=>{let t=Q(e);return t.styles??=[].concat(e.styles??[])},le=(e,t,n=customElements)=>{let r=n.get(t);return r?r!==e&&console.warn(`<${t}> is already defined with a different class, the existing definition is kept`):n.define(t,e),e},$=class extends HTMLElement{static properties={};static styles;static shadowRootOptions={mode:`open`};static get observedAttributes(){return[...Q(this).attributes.keys()]}renderRoot;isUpdatePending=!1;hasUpdated=!1;#e=/* @__PURE__ */ new Map;#t=/* @__PURE__ */ new Set;#n;#r;#i;#a=!1;#o;#s=new AbortController;constructor(){super(),Q(this.constructor),this.#r=new Promise(e=>this.#i=e),this.renderRoot=this.createRenderRoot(),this.#u(),this.requestUpdate()}createRenderRoot(){return this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions)}get disconnectSignal(){return this.#s.signal}get updateComplete(){return this.#r}connectedCallback(){if(this.#s.signal.aborted&&(this.#s=new AbortController),!this.#a){this.#a=!0,this.#l();for(let e of Q(this.constructor).properties.keys())this.requestUpdate(e,void 0);this.#i(!0)}}disconnectedCallback(){this.#s.abort()}attributeChangedCallback(e,t,n){let r=Q(this.constructor),i=r.attributes.get(e);if(i===void 0||this.#n===i)return;let a=r.properties.get(i),o=a.converter?.fromAttribute??W.fromAttribute;this.#n=i,this[i]=o(n,a.type),this.#n=void 0}requestUpdate(e,t){if(e!==void 0){let n=Q(this.constructor).properties.get(e)??{};if(!(n.hasChanged??G)(this[e],t))return;this.#e.has(e)||this.#e.set(e,t),n.reflect&&this.#n!==e&&this.#t.add(e)}this.isUpdatePending||(this.isUpdatePending=!0,this.#r=this.#c(this.#r))}performUpdate(){if(!this.isUpdatePending)return;let e=this.#e,t=!1;try{t=this.shouldUpdate(e),t&&(this.willUpdate(e),this.update(e))}finally{this.#e=/* @__PURE__ */ new Map,this.isUpdatePending=!1}t&&(this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e))}shouldUpdate(e){return!0}willUpdate(e){}update(e){for(let e of this.#t)this.#d(e);this.#t.clear();let t=this.render();if(t!==f&&(U(t,this.renderRoot,{host:this}),this.#o!==void 0)){let e=document.createElement(`style`);e.textContent=this.#o,this.renderRoot.prepend(e),this.#o=void 0}}render(){return f}firstUpdated(e){}updated(e){}async#c(e){await e;try{this.performUpdate()}catch(e){Promise.reject(e)}return!this.isUpdatePending}#l(){let e=Object.getPrototypeOf(this),t=this;for(let n of Object.getOwnPropertyNames(this))if(n in e){let e=t[n];delete t[n],t[n]=e}}#u(){let e=this.renderRoot,t=ce(this.constructor);e instanceof ShadowRoot&&t.length!==0&&(`adoptedStyleSheets`in e?e.adoptedStyleSheets=t.map(ae):this.#o=t.map(oe).join(`
+`))}#d(e){let t=Q(this.constructor).properties.get(e),n=q(e,t);if(n===void 0)return;let r=(t.converter?.toAttribute??W.toAttribute)(this[e],t.type);this.#n=e,r===null?this.removeAttribute(n):this.setAttribute(n,r),this.#n=void 0}};export{$ as GluonElement,A as cache,J as css,le as define,re as guard,V as html,ie as ifDefined,f as noChange,U as render,P as repeat,H as svg,I as unsafeHTML,R as until,z as when};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2026 Goffert van Gool
+ * SPDX-License-Identifier: MIT
+ */
+export * from "lite-html";
+export { GluonElement, define } from "./gluon.js";
+export { type PropertyType, type AttributeConverter, type PropertyDeclaration, type PropertyDeclarations, type PropertyValues, } from "./properties.js";
+export { type StyleSheet, type Styles, css } from "./styles.js";

package/dist/index.js

@@ -0,0 +1,254 @@
+/** @license Copyright (c) 2026 Goffert van Gool, SPDX-License-Identifier: MIT */
+import { noChange, render } from "lite-html";
+
+export * from "lite-html"
+
+//#region src/properties.ts
+var defaultConverter = {
+	fromAttribute(value, type) {
+		switch (type) {
+			case Boolean: return value !== null;
+			case Number: return value === null ? null : Number(value);
+			case Array:
+			case Object: return value === null ? null : JSON.parse(value);
+			default: return value;
+		}
+	},
+	toAttribute(value, type) {
+		switch (type) {
+			case Boolean: return value ? "" : null;
+			case Array:
+			case Object: return value == null ? null : JSON.stringify(value);
+			default: return value == null ? null : String(value);
+		}
+	}
+};
+var notEqual = (value, oldValue) => !Object.is(value, oldValue);
+var camelToKebab = (camel) => camel.replace(/([a-z](?=[A-Z]))|([A-Z](?=[A-Z][a-z]))/g, "$1$2-").toLowerCase();
+var attributeName = (name, { attribute }) => attribute ? camelToKebab(name) : void 0;
+
+//#endregion
+//#region src/styles.ts
+var css = (strings, ...values) => strings.reduce((result, string, index) => result + String(values[index - 1]) + string);
+var styleSheets = /* @__PURE__ */ new Map();
+var toStyleSheet = (style) => {
+	if (typeof style !== "string") return style;
+	let sheet = styleSheets.get(style);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(style);
+		styleSheets.set(style, sheet);
+	}
+	return sheet;
+};
+var toCSSText = (style) => typeof style === "string" ? style : Array.from(style.cssRules, (rule) => rule.cssText).join("\n");
+
+//#endregion
+//#region src/gluon.ts
+var classInfos = /* @__PURE__ */ new WeakMap();
+var reactiveSetters = /* @__PURE__ */ new WeakSet();
+var defineAccessor = (prototype, name) => {
+	let descriptor;
+	for (let object = prototype; object !== GluonElement.prototype && !descriptor; object = Object.getPrototypeOf(object)) descriptor = Object.getOwnPropertyDescriptor(object, name);
+	if (descriptor?.set && reactiveSetters.has(descriptor.set)) return;
+	const key = Symbol(name);
+	const get = descriptor?.get ?? function() {
+		return this[key];
+	};
+	const set = descriptor?.set ?? function(value) {
+		this[key] = value;
+	};
+	const reactiveSet = function(value) {
+		const oldValue = get.call(this);
+		set.call(this, value);
+		this.requestUpdate(name, oldValue);
+	};
+	reactiveSetters.add(reactiveSet);
+	Object.defineProperty(prototype, name, {
+		get,
+		set: reactiveSet,
+		configurable: true,
+		enumerable: true
+	});
+};
+var finalize = (ctor) => {
+	let info = classInfos.get(ctor);
+	if (info) return info;
+	const inherited = ctor === GluonElement ? void 0 : finalize(Object.getPrototypeOf(ctor));
+	info = {
+		properties: new Map(inherited?.properties),
+		attributes: new Map(inherited?.attributes)
+	};
+	classInfos.set(ctor, info);
+	if (Object.hasOwn(ctor, "properties")) for (const [name, declaration] of Object.entries(ctor.properties)) {
+		info.properties.set(name, declaration);
+		for (const [attribute, property] of info.attributes) if (property === name) info.attributes.delete(attribute);
+		const attribute = attributeName(name, declaration);
+		if (attribute) info.attributes.set(attribute, name);
+		defineAccessor(ctor.prototype, name);
+	}
+	return info;
+};
+var getStyles = (ctor) => {
+	const info = finalize(ctor);
+	return info.styles ??= [].concat(ctor.styles ?? []);
+};
+var define = (ctor, name, registry = customElements) => {
+	const existing = registry.get(name);
+	if (!existing) registry.define(name, ctor);
+	else if (existing !== ctor) console.warn(`<${name}> is already defined with a different class, the existing definition is kept`);
+	return ctor;
+};
+var GluonElement = class extends HTMLElement {
+	static properties = {};
+	static styles;
+	static shadowRootOptions = { mode: "open" };
+	static get observedAttributes() {
+		return [...finalize(this).attributes.keys()];
+	}
+	renderRoot;
+	isUpdatePending = false;
+	hasUpdated = false;
+	#changed = /* @__PURE__ */ new Map();
+	#reflecting = /* @__PURE__ */ new Set();
+	#reflectingProperty;
+	#updatePromise;
+	#enableUpdating;
+	#connected = false;
+	#styleText;
+	#disconnect = new AbortController();
+	constructor() {
+		super();
+		finalize(this.constructor);
+		this.#updatePromise = new Promise((resolve) => this.#enableUpdating = resolve);
+		this.renderRoot = this.createRenderRoot();
+		this.#adoptStyles();
+		this.requestUpdate();
+	}
+	createRenderRoot() {
+		return this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+	}
+	get disconnectSignal() {
+		return this.#disconnect.signal;
+	}
+	get updateComplete() {
+		return this.#updatePromise;
+	}
+	connectedCallback() {
+		if (this.#disconnect.signal.aborted) this.#disconnect = new AbortController();
+		if (!this.#connected) {
+			this.#connected = true;
+			this.#upgradeProperties();
+			for (const name of finalize(this.constructor).properties.keys()) this.requestUpdate(name, void 0);
+			this.#enableUpdating(true);
+		}
+	}
+	disconnectedCallback() {
+		this.#disconnect.abort();
+	}
+	attributeChangedCallback(name, _oldValue, value) {
+		const info = finalize(this.constructor);
+		const property = info.attributes.get(name);
+		if (property === void 0 || this.#reflectingProperty === property) return;
+		const declaration = info.properties.get(property);
+		const fromAttribute = declaration.converter?.fromAttribute ?? defaultConverter.fromAttribute;
+		this.#reflectingProperty = property;
+		this[property] = fromAttribute(value, declaration.type);
+		this.#reflectingProperty = void 0;
+	}
+	requestUpdate(name, oldValue) {
+		if (name !== void 0) {
+			const declaration = finalize(this.constructor).properties.get(name) ?? {};
+			if (!(declaration.hasChanged ?? notEqual)(this[name], oldValue)) return;
+			if (!this.#changed.has(name)) this.#changed.set(name, oldValue);
+			if (declaration.reflect && this.#reflectingProperty !== name) this.#reflecting.add(name);
+		}
+		if (!this.isUpdatePending) {
+			this.isUpdatePending = true;
+			this.#updatePromise = this.#enqueueUpdate(this.#updatePromise);
+		}
+	}
+	performUpdate() {
+		if (!this.isUpdatePending) return;
+		const changed = this.#changed;
+		let shouldUpdate = false;
+		try {
+			shouldUpdate = this.shouldUpdate(changed);
+			if (shouldUpdate) {
+				this.willUpdate(changed);
+				this.update(changed);
+			}
+		} finally {
+			this.#changed = /* @__PURE__ */ new Map();
+			this.isUpdatePending = false;
+		}
+		if (shouldUpdate) {
+			if (!this.hasUpdated) {
+				this.hasUpdated = true;
+				this.firstUpdated(changed);
+			}
+			this.updated(changed);
+		}
+	}
+	shouldUpdate(_changed) {
+		return true;
+	}
+	willUpdate(_changed) {}
+	update(_changed) {
+		for (const name of this.#reflecting) this.#propertyToAttribute(name);
+		this.#reflecting.clear();
+		const result = this.render();
+		if (result !== noChange) {
+			render(result, this.renderRoot, { host: this });
+			if (this.#styleText !== void 0) {
+				const style = document.createElement("style");
+				style.textContent = this.#styleText;
+				this.renderRoot.prepend(style);
+				this.#styleText = void 0;
+			}
+		}
+	}
+	render() {
+		return noChange;
+	}
+	firstUpdated(_changed) {}
+	updated(_changed) {}
+	async #enqueueUpdate(previous) {
+		await previous;
+		try {
+			this.performUpdate();
+		} catch (error) {
+			Promise.reject(error);
+		}
+		return !this.isUpdatePending;
+	}
+	#upgradeProperties() {
+		const prototype = Object.getPrototypeOf(this);
+		const properties = this;
+		for (const name of Object.getOwnPropertyNames(this)) if (name in prototype) {
+			const value = properties[name];
+			delete properties[name];
+			properties[name] = value;
+		}
+	}
+	#adoptStyles() {
+		const root = this.renderRoot;
+		const styles = getStyles(this.constructor);
+		if (!(root instanceof ShadowRoot) || styles.length === 0) return;
+		if ("adoptedStyleSheets" in root) root.adoptedStyleSheets = styles.map(toStyleSheet);
+		else this.#styleText = styles.map(toCSSText).join("\n");
+	}
+	#propertyToAttribute(name) {
+		const declaration = finalize(this.constructor).properties.get(name);
+		const attribute = attributeName(name, declaration);
+		if (attribute === void 0) return;
+		const value = (declaration.converter?.toAttribute ?? defaultConverter.toAttribute)(this[name], declaration.type);
+		this.#reflectingProperty = name;
+		if (value === null) this.removeAttribute(attribute);
+		else this.setAttribute(attribute, value);
+		this.#reflectingProperty = void 0;
+	}
+};
+
+//#endregion
+export { GluonElement, css, define };

package/dist/properties.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2026 Goffert van Gool
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The type of a declared property, used by the default converter to read and write attributes
+ */
+export type PropertyType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;
+/**
+ * Converts between a property value and its attribute value
+ *
+ * `fromAttribute` is called with `null` when the attribute is removed
+ * `toAttribute` returns `null` to remove the attribute
+ */
+export interface AttributeConverter {
+    fromAttribute?: (value: string | null, type?: PropertyType) => unknown;
+    toAttribute?: (value: unknown, type?: PropertyType) => string | null;
+}
+/**
+ * The declaration of a reactive property in the static `properties` map of an element class
+ */
+export interface PropertyDeclaration {
+    /** The type of the property, as a hint for the default converter. Defaults to `String` */
+    type?: PropertyType;
+    /** Whether the property is set from the attribute with its kebab-cased name. Defaults to `false` */
+    attribute?: boolean;
+    /** Whether the property value is written to its attribute when it changes, with `attribute`. Defaults to `false` */
+    reflect?: boolean;
+    /** A converter between the property value and its attribute. Defaults to the built-in converter */
+    converter?: AttributeConverter;
+    /** Decides whether a new value counts as a change. Defaults to `!Object.is(value, oldValue)` */
+    hasChanged?: (value: unknown, oldValue: unknown) => boolean;
+}
+export type PropertyDeclarations = Record<string, PropertyDeclaration>;
+/**
+ * A map of the changed properties to their previous values, passed to the update lifecycle methods
+ *
+ * The keys are typed as the properties of the element, so `changed.has('count')` is checked
+ */
+export interface PropertyValues<T = unknown> extends Map<PropertyKey, unknown> {
+    get<K extends keyof T>(key: K): T[K] | undefined;
+    has<K extends keyof T>(key: K): boolean;
+    set<K extends keyof T>(key: K, value: T[K]): this;
+    delete<K extends keyof T>(key: K): boolean;
+}
+/**
+ * The converter that is used for properties without their own
+ *
+ * `String` properties are copied, `Number` properties are parsed with `Number()`,
+ * `Boolean` properties are `true` when the attribute is present, and `Array` and `Object` properties are JSON
+ * A property that is `null` or `undefined` removes its attribute
+ */
+export declare const defaultConverter: Required<AttributeConverter>;
+/**
+ * The change detection that is used for properties without their own
+ */
+export declare const notEqual: (value: unknown, oldValue: unknown) => boolean;
+export declare const camelToKebab: (camel: string) => string;
+export declare const attributeName: (name: string, { attribute }: PropertyDeclaration) => string | undefined;

package/dist/styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2026 Goffert van Gool
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * A stylesheet for an element: CSS text, or a constructed `CSSStyleSheet`
+ */
+export type StyleSheet = string | CSSStyleSheet;
+export type Styles = StyleSheet | readonly StyleSheet[];
+/**
+ * Tagging function for CSS in template string literals
+ *
+ * Returns the CSS as a string, for the static `styles` of an element. The tag marks the string as CSS
+ * for editors, formatters, and linters. Interpolated values are converted to strings, so other styles
+ * and numbers can be composed into it.
+ */
+export declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => string;
+/**
+ * Returns a constructed stylesheet for a style, sharing one sheet per CSS string
+ */
+export declare const toStyleSheet: (style: StyleSheet) => CSSStyleSheet;
+/**
+ * Returns the CSS text of a style, for a `<style>` element
+ */
+export declare const toCSSText: (style: StyleSheet) => string;

package/package.json

@@ -1,66 +1,66 @@
 {
   "name": "@gluon/gluon",
-  "version": "2.5.2",
-  "description": "A tiny WebComponent library",
-  "main": "gluon.js",
-  "umd:main": "gluon.umd.js",
-  "module": "gluon.js",
-  "jsnext:main": "gluon.js",
+  "version": "3.0.0",
+  "description": "A tiny base class for Web Components, rendered with lite-html",
+  "license": "MIT",
+  "type": "module",
   "files": [
-    "gluon.*"
+    "dist",
+    "CHANGELOG.md"
   ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "dist/gluon.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build": "vite build && vite build --mode bundle && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "npm run typecheck && npm run format:check && npm test",
+    "prepublishOnly": "npm run check && npm run build"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ruphin/gluonjs.git"
   },
+  "homepage": "https://github.com/ruphin/gluonjs",
+  "bugs": {
+    "url": "https://github.com/ruphin/gluonjs/issues"
+  },
   "author": "Goffert van Gool <ruphin@ruphin.net>",
   "keywords": [
     "web-components",
     "webcomponents",
-    "lit-html",
-    "lit"
+    "lite-html",
+    "custom-elements"
   ],
-  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "bugs": {
-    "url": "https://github.com/ruphin/gluonjs/issues"
+  "engines": {
+    "node": ">=20"
   },
-  "scripts": {
-    "build": "rollup -c && cp src/gluon.js gluon.js",
-    "dev": "browser-sync start --config browsersync.config.js",
-    "release": "np",
-    "test": "karma start",
-    "guard": "karma start --no-single-run"
-  },
-  "homepage": "https://github.com/ruphin/gluonjs",
   "dependencies": {
-    "lit-html": "1.0.0"
+    "lite-html": "^1.2.0"
   },
   "devDependencies": {
-    "@webcomponents/webcomponentsjs": "2.2.7",
-    "babel-core": "6.26.3",
-    "babel-plugin-external-helpers": "6.22.0",
-    "babel-preset-env": "1.7.0",
-    "babel-polyfill": "6.26.0",
-    "browser-sync": "2.26.3",
-    "chai": "4.2.0",
-    "karma": "3.0.0",
-    "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-firefox-launcher": "1.1.0",
-    "karma-mocha": "1.3.0",
-    "karma-mocha-reporter": "2.2.5",
-    "mocha": "6.0.0",
-    "np": "4.0.2",
-    "rollup": "1.2.2",
-    "rollup-plugin-babel": "4.3.2",
-    "rollup-plugin-commonjs": "9.2.0",
-    "rollup-plugin-cleanup": "3.1.1",
-    "rollup-plugin-filesize": "6.0.1",
-    "rollup-plugin-includepaths": "0.2.3",
-    "rollup-plugin-node-resolve": "4.0.0",
-    "rollup-plugin-terser": "4.0.4"
+    "@types/node": "^26.6.4",
+    "jsdom": "^30.1.2",
+    "prettier": "^3.9.9",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
   }
 }