@a11d/lit 0.11.1 → 0.12.0-preview.0

package/README.md

@@ -11,6 +11,7 @@ npm install @a11d/lit
 ## Features
 
 - **[`Component` class](/packages/Lit/Component/README.md)** - Extended base class with additional lifecycle callbacks
+- **[`ComponentPart` class](/packages/Lit/ComponentPart/README.md)** - Break up a large component without introducing a component boundary
 - **[`updated` Decorator](/packages/Lit/updated/README.md)** - React to property changes with callbacks
 - **[`event` Decorator](/packages/Lit/event/README.md)** - Type-safe custom event dispatchers
 - **[`eventListener` Decorator](/packages/Lit/eventListener/README.md)** - Declarative event listener registration

package/dist/ComponentPart/ComponentPart.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLTemplateResult, type ReactiveElement } from 'lit';
+import { Controller } from '../Controller/index.js';
+/**
+ * A part of a component, extracted into a class of its own without introducing a component boundary.
+ *
+ * A part contributes a `template` to its host and may declare its own state, queries, events and
+ * event listeners with the very same decorators a component uses. As a part shares the update
+ * lifecycle of its host, changing its state re-renders the host as a whole - no properties have to
+ * be passed down and no updates have to be propagated by hand.
+ *
+ * This makes a part the tool of choice to break up a large component, whereas a component should be
+ * introduced whenever the extracted unit is reusable on its own.
+ */
+export declare abstract class ComponentPart<THost extends ReactiveElement = ReactiveElement> extends Controller {
+    protected readonly host: THost;
+    constructor(host: THost);
+    /** The template of the part which its host renders. */
+    get template(): HTMLTemplateResult;
+    /**
+     * Requests an update of the host.
+     *
+     * When a property key is provided, the change is tracked in the host's `changedProperties`
+     * by a key unique to this part and property, so that it can neither collide with a property
+     * of the host nor with one of another part.
+     */
+    requestUpdate(propertyKey?: PropertyKey, oldValue?: unknown): void;
+}
+//# sourceMappingURL=ComponentPart.d.ts.map

package/dist/ComponentPart/ComponentPart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPart.d.ts","sourceRoot":"","sources":["../../ComponentPart/ComponentPart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAInD;;;;;;;;;;GAUG;AACH,8BAAsB,aAAa,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,UAAU;uBAC9D,IAAI,EAAE,KAAK;gBAAX,IAAI,EAAE,KAAK;IAInD,uDAAuD;IACvD,IAAI,QAAQ,IAAI,kBAAkB,CAEjC;IAED;;;;;;OAMG;IACH,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,OAAO;CAG3D"}

package/dist/ComponentPart/ComponentPart.js

@@ -0,0 +1,34 @@
+import { Controller } from '../Controller/index.js';
+import { html } from '../Component/html.js';
+import { requestHostUpdate } from '../updated/requestHostUpdate.js';
+/**
+ * A part of a component, extracted into a class of its own without introducing a component boundary.
+ *
+ * A part contributes a `template` to its host and may declare its own state, queries, events and
+ * event listeners with the very same decorators a component uses. As a part shares the update
+ * lifecycle of its host, changing its state re-renders the host as a whole - no properties have to
+ * be passed down and no updates have to be propagated by hand.
+ *
+ * This makes a part the tool of choice to break up a large component, whereas a component should be
+ * introduced whenever the extracted unit is reusable on its own.
+ */
+export class ComponentPart extends Controller {
+    constructor(host) {
+        super(host);
+        this.host = host;
+    }
+    /** The template of the part which its host renders. */
+    get template() {
+        return html.nothing;
+    }
+    /**
+     * Requests an update of the host.
+     *
+     * When a property key is provided, the change is tracked in the host's `changedProperties`
+     * by a key unique to this part and property, so that it can neither collide with a property
+     * of the host nor with one of another part.
+     */
+    requestUpdate(propertyKey, oldValue) {
+        requestHostUpdate(this, propertyKey, oldValue);
+    }
+}

package/dist/ComponentPart/README.md

@@ -0,0 +1,114 @@
+# `ComponentPart` class
+
+A `ComponentPart` is a part of a component, extracted into a class of its own **without introducing a component boundary**.
+
+A part contributes a `template` to its host and may declare its own state, queries, events and event listeners with the very same decorators a component uses. As a part shares the update lifecycle of its host, changing the state of a part re-renders the host as a whole — no properties have to be passed down and no updates have to be propagated by hand.
+
+```ts
+import { bind, Component, component, ComponentPart, html, state } from '@a11d/lit'
+
+class SearchPart extends ComponentPart<PageProducts> {
+	@state() query = ''
+
+	override get template() {
+		return html`
+			<input ${bind(this, 'query')}>
+			<span>${this.host.products.filter(p => p.name.includes(this.query)).length}</span>
+		`
+	}
+}
+
+@component('page-products')
+class PageProducts extends Component {
+	@state() products = new Array<Product>()
+
+	readonly search = new SearchPart(this)
+
+	protected override get template() {
+		return html`${this.search.template}`
+	}
+}
+```
+
+## Import the host as a type
+
+A part names its host as a type argument and must therefore **import it with `import type`**, so the import is erased and the two files do not form a cycle at runtime:
+
+```ts
+// SearchPart.ts
+import type { PageProducts } from './PageProducts.js'
+
+export class SearchPart extends ComponentPart<PageProducts> { }
+```
+
+```ts
+// PageProducts.ts
+import { SearchPart } from './SearchPart.js'
+
+@component('page-products')
+export class PageProducts extends Component {
+	readonly search = new SearchPart(this)
+}
+```
+
+## When to use a part
+
+Use a **component** whenever the extracted unit is reusable on its own, and a **part** whenever a large component should merely be broken up into comprehensible units:
+
+|                        | `Component`                                  | `ComponentPart`                              |
+| ---------------------- | -------------------------------------------- | -------------------------------------------- |
+| Reusable on its own    | yes                                           | no, it belongs to its host                    |
+| Data flow              | properties in, events out                     | direct access to the host                     |
+| Update propagation     | by the properties passed to it                | shared with the host                          |
+| DOM                    | own shadow root                               | rendered into the host's shadow root          |
+| Styling                | own styles                                    | the styles of the host                        |
+
+## Decorators
+
+The decorators of this library resolve the element owning the update lifecycle through the `host` symbol, and therefore behave identically on a component and on a part:
+
+| Decorator        | Behavior on a part                                                                   |
+| ---------------- | ------------------------------------------------------------------------------------ |
+| `state`          | stored on the part, requests an update of the host whenever it changes                |
+| `updated`        | invoked with the part as `this` after the host has updated                            |
+| `query`          | queries the render root of the host                                                   |
+| `queryAll`       | queries the render root of the host                                                   |
+| `event`          | dispatches from the host element                                                      |
+| `eventListener`  | listens on the host element, with the part as `this`                                  |
+| `bind`           | `bind(this, 'property')` binds against the part                                       |
+
+As the state of a part does not exist on its host, it cannot be registered as a reactive property of it. It is instead tracked in the host's `changedProperties` by a key unique to the part and the property, so that it can neither collide with a property of the host nor with one of another part.
+
+```ts
+class CounterPart extends ComponentPart<PageCounter> {
+	@state({ updated(this: CounterPart, value: number) { this.host.notify(value) } }) count = 0
+
+	@query('#count') private readonly countElement!: HTMLElement | undefined
+
+	@event() readonly countChange!: EventDispatcher<number>
+
+	@eventListener('click')
+	protected handleClick() {
+		this.count++
+		this.countChange.dispatch(this.count)
+	}
+
+	override get template() {
+		return html`<span id='count'>${this.count}</span>`
+	}
+}
+```
+
+## Lifecycle
+
+A part is a `Controller`, so all reactive controller callbacks are available:
+
+```ts
+class DataPart extends ComponentPart<PageData> {
+	@state() data?: Data
+
+	override async hostConnected() {
+		this.data = await fetchData()
+	}
+}
+```

package/dist/ComponentPart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ComponentPart.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ComponentPart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../ComponentPart/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/ComponentPart/index.js

@@ -0,0 +1 @@
+export * from './ComponentPart.js';

package/dist/Controller/Controller.d.ts

@@ -1,10 +1,12 @@
 import { type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { host } from '../host.js';
 type Initializer = (controller: Controller) => void;
 export declare abstract class Controller implements ReactiveController {
     protected readonly host: ReactiveControllerHost;
     private static _initializers?;
     static addInitializer(initializer: Initializer): void;
     constructor(host: ReactiveControllerHost);
+    get [host](): import("lit").ReactiveElement;
     hostConnected?(): void;
     hostDisconnected?(): void;
     hostUpdate?(): void;

package/dist/Controller/Controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["../../Controller/Controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAA;AAE1E,KAAK,WAAW,GAAG,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;AAEnD,8BAAsB,UAAW,YAAW,kBAAkB;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,sBAAsB;IAL3D,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAkB;IAC/C,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW;gBAIf,IAAI,EAAE,sBAAsB;IAK3D,aAAa,CAAC,IAAI,IAAI;IACtB,gBAAgB,CAAC,IAAI,IAAI;IACzB,UAAU,CAAC,IAAI,IAAI;IACnB,WAAW,CAAC,IAAI,IAAI;CACpB"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["../../Controller/Controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAA;AAC1E,OAAO,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAA;AAEpD,KAAK,WAAW,GAAG,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;AAEnD,8BAAsB,UAAW,YAAW,kBAAkB;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,sBAAsB;IAL3D,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAkB;IAC/C,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW;gBAIf,IAAI,EAAE,sBAAsB;IAK3D,IAAI,CAAC,IAAI,CAAC,kCAET;IAED,aAAa,CAAC,IAAI,IAAI;IACtB,gBAAgB,CAAC,IAAI,IAAI;IACzB,UAAU,CAAC,IAAI,IAAI;IACnB,WAAW,CAAC,IAAI,IAAI;CACpB"}

package/dist/Controller/Controller.js

@@ -1,3 +1,4 @@
+import { host } from '../host.js';
 export class Controller {
     static addInitializer(initializer) {
         (this._initializers ??= new Set(Object.getPrototypeOf(this).initializers ?? [])).add(initializer);
@@ -7,4 +8,7 @@ export class Controller {
         this.host.addController(this);
         this.constructor._initializers?.forEach(initializer => initializer(this));
     }
+    get [host]() {
+        return this.host[host];
+    }
 }

package/dist/README.md

@@ -11,6 +11,7 @@ npm install @a11d/lit
 ## Features
 
 - **[`Component` class](/packages/Lit/Component/README.md)** - Extended base class with additional lifecycle callbacks
+- **[`ComponentPart` class](/packages/Lit/ComponentPart/README.md)** - Break up a large component without introducing a component boundary
 - **[`updated` Decorator](/packages/Lit/updated/README.md)** - React to property changes with callbacks
 - **[`event` Decorator](/packages/Lit/event/README.md)** - Type-safe custom event dispatchers
 - **[`eventListener` Decorator](/packages/Lit/eventListener/README.md)** - Declarative event listener registration

package/dist/bind/BindDirective.d.ts

@@ -17,7 +17,14 @@ export declare enum BindingMode {
      */
     OneWayToSource = "one-way-to-source"
 }
-export type BindDirectiveParameters<Component extends ReactiveElement, Property extends keyof Component> = [
+/**
+ * The source a binding can be established on.
+ *
+ * Besides `ReactiveElement`s this includes any context which forwards its updates to a host,
+ * such as a `ComponentPart`, so bindings can be declared in a part's template as well.
+ */
+export type BindSource = Pick<ReactiveElement, 'requestUpdate'>;
+export type BindDirectiveParameters<Component extends BindSource, Property extends keyof Component> = [
     component: Component,
     property: Property,
     options?: BindDirectiveParametersOptions<Component[Property]>
@@ -30,14 +37,14 @@ export type BindDirectiveParametersOptions<Data> = {
     sourceUpdated?: (value: Data) => void;
 };
 type BindDirectivePart = ElementPart | AttributePart | BooleanAttributePart | PropertyPart;
-declare class BindDirective<Component extends ReactiveElement, Property extends keyof Component> extends AsyncDirective {
+declare class BindDirective<Component extends BindSource, Property extends keyof Component> extends AsyncDirective {
     #private;
     constructor(partInfo: PartInfo);
-    render(): {};
+    render(): unknown;
     update(part: BindDirectivePart, parameters: BindDirectiveParameters<Component, Property>): unknown;
     disconnected(): void;
     reconnected(): void;
 }
-export declare const bind: <Component extends ReactiveElement, Property extends keyof Component>(...parameters: BindDirectiveParameters<Component, Property>) => DirectiveResult<typeof BindDirective<Component, Property>>;
+export declare const bind: <Component extends BindSource, Property extends keyof Component>(...parameters: BindDirectiveParameters<Component, Property>) => DirectiveResult<typeof BindDirective<Component, Property>>;
 export {};
 //# sourceMappingURL=BindDirective.d.ts.map

package/dist/bind/BindDirective.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BindDirective.d.ts","sourceRoot":"","sources":["../../bind/BindDirective.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAY,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAY,MAAM,aAAa,CAAA;AAC1N,OAAO,gBAAgB,CAAA;AAKvB,oBAAY,WAAW;IACtB;;;OAGG;IACH,MAAM,YAAY;IAClB;;;OAGG;IACH,MAAM,YAAY;IAClB;;;OAGG;IACH,cAAc,sBAAsB;CACpC;AAED,MAAM,MAAM,uBAAuB,CAAC,SAAS,SAAS,eAAe,EAAE,QAAQ,SAAS,MAAM,SAAS,IAAI;IAC1G,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,QAAQ;IAClB,OAAO,CAAC,EAAE,8BAA8B,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,MAAM,8BAA8B,CAAC,IAAI,IAAI;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,KAAK,iBAAiB,GAAG,WAAW,GAAG,aAAa,GAAG,oBAAoB,GAAG,YAAY,CAAA;AAE1F,cAAM,aAAa,CAAC,SAAS,SAAS,eAAe,EAAE,QAAQ,SAAS,MAAM,SAAS,CAAE,SAAQ,cAAc;;gBAGlG,QAAQ,EAAE,QAAQ;IAO9B,MAAM;IAIG,MAAM,CAAC,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,CAAC,SAAS,EAAE,QAAQ,CAAC;IAYxF,YAAY;IAIZ,WAAW;CAGpB;AAED,eAAO,MAAM,IAAI,GAAI,SAAS,SAAS,eAAe,EAAE,QAAQ,SAAS,MAAM,SAAS,EAAE,GAAG,YAAY,uBAAuB,CAAC,SAAS,EAAE,QAAQ,CAAC,KACzF,eAAe,CAAC,OAAO,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CACpH,CAAA"}
+{"version":3,"file":"BindDirective.d.ts","sourceRoot":"","sources":["../../bind/BindDirective.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAY,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAY,MAAM,aAAa,CAAA;AAC1N,OAAO,gBAAgB,CAAA;AAKvB,oBAAY,WAAW;IACtB;;;OAGG;IACH,MAAM,YAAY;IAClB;;;OAGG;IACH,MAAM,YAAY;IAClB;;;OAGG;IACH,cAAc,sBAAsB;CACpC;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAA;AAE/D,MAAM,MAAM,uBAAuB,CAAC,SAAS,SAAS,UAAU,EAAE,QAAQ,SAAS,MAAM,SAAS,IAAI;IACrG,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,QAAQ;IAClB,OAAO,CAAC,EAAE,8BAA8B,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,MAAM,8BAA8B,CAAC,IAAI,IAAI;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,KAAK,iBAAiB,GAAG,WAAW,GAAG,aAAa,GAAG,oBAAoB,GAAG,YAAY,CAAA;AAE1F,cAAM,aAAa,CAAC,SAAS,SAAS,UAAU,EAAE,QAAQ,SAAS,MAAM,SAAS,CAAE,SAAQ,cAAc;;gBAG7F,QAAQ,EAAE,QAAQ;IAO9B,MAAM;IAIG,MAAM,CAAC,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,CAAC,SAAS,EAAE,QAAQ,CAAC;IAYxF,YAAY;IAIZ,WAAW;CAGpB;AAED,eAAO,MAAM,IAAI,GAAI,SAAS,SAAS,UAAU,EAAE,QAAQ,SAAS,MAAM,SAAS,EAAE,GAAG,YAAY,uBAAuB,CAAC,SAAS,EAAE,QAAQ,CAAC,KACpF,eAAe,CAAC,OAAO,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CACpH,CAAA"}

package/dist/bind/BindDirective.js

@@ -29,7 +29,7 @@ class BindDirective extends AsyncDirective {
         }
     }
     render() {
-        return this.#valueBinder?.template ?? noChange;
+        return this.#valueBinder ? this.#valueBinder.template : noChange;
     }
     update(part, parameters) {
         if (!this.#valueBinder) {

package/dist/bind/Binder.d.ts

@@ -1,5 +1,4 @@
-import { type ReactiveElement } from 'lit';
-import { type BindDirectiveParametersOptions } from './BindDirective.js';
+import { type BindDirectiveParametersOptions, type BindSource } from './BindDirective.js';
 type BinderParameters<T> = [keyPath: KeyPath.Of<T>] | [options: BindDirectiveParametersOptions<T>];
 /**
  * A utility to facilitate binding to a property of a reactive element.
@@ -21,14 +20,14 @@ type BinderParameters<T> = [keyPath: KeyPath.Of<T>] | [options: BindDirectivePar
  * ```
  */
 export declare class Binder<T> {
-    readonly host: ReactiveElement;
+    readonly host: BindSource;
     readonly key: string;
-    constructor(host: ReactiveElement, key: string);
+    constructor(host: BindSource, key: string);
     bind: (...[parameter]: BinderParameters<T>) => import("lit-html/directive.js").DirectiveResult<{
         new (partInfo: import("lit-html/directive.js").PartInfo): {
             "__#private@#valueBinder"?: import("./ValueBinder.js").ValueBinder<import("lit-html").ElementPart | import("lit-html").AttributePart | import("lit-html").PropertyPart | import("lit-html").BooleanAttributePart>;
-            render(): {};
-            update(part: import("lit-html").ElementPart | import("lit-html").AttributePart | import("lit-html").PropertyPart | import("lit-html").BooleanAttributePart, parameters: import("./BindDirective.js").BindDirectiveParameters<ReactiveElement, keyof ReactiveElement>): unknown;
+            render(): unknown;
+            update(part: import("lit-html").ElementPart | import("lit-html").AttributePart | import("lit-html").PropertyPart | import("lit-html").BooleanAttributePart, parameters: import("./BindDirective.js").BindDirectiveParameters<BindSource, "requestUpdate">): unknown;
             disconnected(): void;
             reconnected(): void;
             isConnected: boolean;

package/dist/bind/Binder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Binder.d.ts","sourceRoot":"","sources":["../../bind/Binder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAQ,KAAK,8BAA8B,EAAE,MAAM,oBAAoB,CAAA;AAE9E,KAAK,gBAAgB,CAAC,CAAC,IACpB,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GACxB,CAAC,OAAO,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,MAAM,CAAC,CAAC;IACR,QAAQ,CAAC,IAAI,EAAE,eAAe;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM;gBAA3C,IAAI,EAAE,eAAe,EAAW,GAAG,EAAE,MAAM;IAEhE,IAAI,GAAI,GAAG,aAAa,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;OAI1C;IAED,SAAS,CAAC,aAAa,CAAC,UAAU,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,8BAA8B,CAAC,CAAC,CAAC;CAGzG"}
+{"version":3,"file":"Binder.d.ts","sourceRoot":"","sources":["../../bind/Binder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,8BAA8B,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/F,KAAK,gBAAgB,CAAC,CAAC,IACpB,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GACxB,CAAC,OAAO,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,MAAM,CAAC,CAAC;IACR,QAAQ,CAAC,IAAI,EAAE,UAAU;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM;gBAAtC,IAAI,EAAE,UAAU,EAAW,GAAG,EAAE,MAAM;IAE3D,IAAI,GAAI,GAAG,aAAa,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;OAI1C;IAED,SAAS,CAAC,aAAa,CAAC,UAAU,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,8BAA8B,CAAC,CAAC,CAAC;CAGzG"}

package/dist/event/README.md

@@ -1,67 +1,67 @@
-# `event` Decorator
-
-Create type-safe custom event dispatchers for your components. The `event` decorator converts a class field into an `EventDispatcher` that can dispatch custom events with typed payloads.
-
-```ts
-import { component, Component, html, event, EventDispatcher } from '@a11d/lit'
-
-@component('delete-button')
-class DeleteButton extends Component {
-    @event() readonly delete!: EventDispatcher<'single' | 'all'>
-
-    protected get template() {
-        return html`
-            <button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
-            <button @click=${() => this.delete.dispatch('all')}>Delete All</button>
-        `
-    }
-}
-```
-
-The decorator converts the field into a getter that returns an instance of either `HTMLElementEventDispatcher<T>` or `PureEventDispatcher<T>` based on the context, both implementing the `EventDispatcher<T>` interface.
-
-## Event Options
-
-The decorator accepts an options object to configure event behavior:
-- `bubbles` - Whether the event bubbles up the DOM tree (default: `false`)
-- `cancelable` - Whether the event can be cancelled (default: `false`)
-- `composed` - Whether the event triggers listeners outside of shadow DOM (default: `false`)
-- `type` - Custom DOM event type name (default: property name)
-
-```ts
-import { component, Component, html, event, EventDispatcher } from '@a11d/lit'
-
-@component('delete-button')
-class DeleteButton extends Component {
-    @event({ bubbles: true, composed: true }) readonly delete!: EventDispatcher<'single' | 'all'>
-
-    protected get template() {
-        return html`
-            <button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
-            <button @click=${() => this.delete.dispatch('all')}>Delete All</button>
-        `
-    }
-}
-```
-
-### Custom Event Types
-
-By default, the DOM event type matches the property name. Use the `type` option to specify a custom event type:
-
-```ts
-@component('user-form')
-class UserForm extends Component {
-    @event({ type: 'user-save', bubbles: true }) readonly save!: EventDispatcher<User>
-    @event({ type: 'user-cancel' }) readonly cancel!: EventDispatcher<void>
-
-    protected get template() {
-        return html`
-            <button @click=${() => this.save.dispatch(user)}>Save</button>
-            <button @click=${() => this.cancel.dispatch()}>Cancel</button>
-        `
-    }
-}
-
-// Listen using the custom type
-html`<user-form @user-save=${(e: CustomEvent<User>) => this.handleUserSave(e.detail)}></user-form>`
+# `event` Decorator
+
+Create type-safe custom event dispatchers for your components. The `event` decorator converts a class field into an `EventDispatcher` that can dispatch custom events with typed payloads.
+
+```ts
+import { component, Component, html, event, EventDispatcher } from '@a11d/lit'
+
+@component('delete-button')
+class DeleteButton extends Component {
+    @event() readonly delete!: EventDispatcher<'single' | 'all'>
+
+    protected get template() {
+        return html`
+            <button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
+            <button @click=${() => this.delete.dispatch('all')}>Delete All</button>
+        `
+    }
+}
+```
+
+The decorator converts the field into a getter that returns an instance of either `HTMLElementEventDispatcher<T>` or `PureEventDispatcher<T>` based on the context, both implementing the `EventDispatcher<T>` interface.
+
+## Event Options
+
+The decorator accepts an options object to configure event behavior:
+- `bubbles` - Whether the event bubbles up the DOM tree (default: `false`)
+- `cancelable` - Whether the event can be cancelled (default: `false`)
+- `composed` - Whether the event triggers listeners outside of shadow DOM (default: `false`)
+- `type` - Custom DOM event type name (default: property name)
+
+```ts
+import { component, Component, html, event, EventDispatcher } from '@a11d/lit'
+
+@component('delete-button')
+class DeleteButton extends Component {
+    @event({ bubbles: true, composed: true }) readonly delete!: EventDispatcher<'single' | 'all'>
+
+    protected get template() {
+        return html`
+            <button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
+            <button @click=${() => this.delete.dispatch('all')}>Delete All</button>
+        `
+    }
+}
+```
+
+### Custom Event Types
+
+By default, the DOM event type matches the property name. Use the `type` option to specify a custom event type:
+
+```ts
+@component('user-form')
+class UserForm extends Component {
+    @event({ type: 'user-save', bubbles: true }) readonly save!: EventDispatcher<User>
+    @event({ type: 'user-cancel' }) readonly cancel!: EventDispatcher<void>
+
+    protected get template() {
+        return html`
+            <button @click=${() => this.save.dispatch(user)}>Save</button>
+            <button @click=${() => this.cancel.dispatch()}>Cancel</button>
+        `
+    }
+}
+
+// Listen using the custom type
+html`<user-form @user-save=${(e: CustomEvent<User>) => this.handleUserSave(e.detail)}></user-form>`
 ```

package/dist/event/event.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event.d.ts","sourceRoot":"","sources":["../../event/event.ts"],"names":[],"mappings":"AAIA,wBAAgB,KAAK,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,IAC7D,WAAW,OAAO,EAAE,cAAc,MAAM,UAahD"}
+{"version":3,"file":"event.d.ts","sourceRoot":"","sources":["../../event/event.ts"],"names":[],"mappings":"AAKA,wBAAgB,KAAK,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,IAC7D,WAAW,OAAO,EAAE,cAAc,MAAM,UAchD"}

package/dist/event/event.js

@@ -1,6 +1,7 @@
 import { isServer } from 'lit';
 import { HTMLElementEventDispatcher } from './HTMLElementEventDispatcher.js';
 import { PureEventDispatcher } from './PureEventDispatcher.js';
+import { host } from '../host.js';
 export function event(options) {
     return (prototype, propertyKey) => {
         if (propertyKey === undefined) {
@@ -8,8 +9,9 @@ export function event(options) {
         }
         Object.defineProperty(prototype, propertyKey, {
             get() {
-                return this[`$${propertyKey}Event$`] ??= !isServer && this instanceof HTMLElement
-                    ? new HTMLElementEventDispatcher(this, options?.type ?? propertyKey, options)
+                const element = this[host];
+                return this[`$${propertyKey}Event$`] ??= !isServer && element instanceof HTMLElement
+                    ? new HTMLElementEventDispatcher(element, options?.type ?? propertyKey, options)
                     : new PureEventDispatcher();
             }
         });

package/dist/eventListener/eventListener.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveElement } from 'lit';
+import { type ReactiveElement } from 'lit';
 import type { EventListenerTarget } from './extractEventTargets.js';
 import type { Controller } from '../Controller/Controller.js';
 type ShorthandEventListenerDecoratorOptions = [type: string, options?: AddEventListenerOptions | boolean];

package/dist/eventListener/eventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eventListener.d.ts","sourceRoot":"","sources":["../../eventListener/eventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,KAAK,sCAAsC,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC,CAAA;AAEzG,KAAK,iCAAiC,GAAG;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAA;CAC3C,CAAA;AAED,KAAK,6BAA6B,GAAG,sCAAsC,GAAG,CAAC,iCAAiC,CAAC,CAAA;AAEjH,wBAAgB,cAAc,CAAC,IAAI,EAAE,6BAA6B,GAAG,iCAAiC,CAOrG;AAED,eAAO,MAAM,aAAa,GAAI,GAAG,sBAAsB,6BAA6B,MAC3E,WAAW,eAAe,GAAG,UAAU,EAAE,aAAa,MAAM,EAAE,aAAa,kBAAkB,SA0BrG,CAAA"}
+{"version":3,"file":"eventListener.d.ts","sourceRoot":"","sources":["../../eventListener/eventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AAE1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAG7D,KAAK,sCAAsC,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC,CAAA;AAEzG,KAAK,iCAAiC,GAAG;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAA;CAC3C,CAAA;AAED,KAAK,6BAA6B,GAAG,sCAAsC,GAAG,CAAC,iCAAiC,CAAC,CAAA;AAEjH,wBAAgB,cAAc,CAAC,IAAI,EAAE,6BAA6B,GAAG,iCAAiC,CAOrG;AAED,eAAO,MAAM,aAAa,GAAI,GAAG,sBAAsB,6BAA6B,MAC3E,WAAW,eAAe,GAAG,UAAU,EAAE,aAAa,MAAM,EAAE,aAAa,kBAAkB,SA0BrG,CAAA"}

package/dist/eventListener/eventListener.js

@@ -1,5 +1,5 @@
-import { ReactiveElement } from 'lit';
 import { EventListenerController } from './EventListenerController.js';
+import { host } from '../host.js';
 export function extractOptions(args) {
     const short = ((args) => typeof args[0] === 'string')(args);
     return {
@@ -12,7 +12,7 @@ export const eventListener = (...eventListenerOptions) => {
     return (prototype, propertyKey, descriptor) => {
         const Constructor = prototype.constructor;
         Constructor.addInitializer(context => {
-            const element = context instanceof ReactiveElement ? context : context['host'];
+            const element = context[host];
             new class extends EventListenerController {
                 constructor() {
                     const { type, target, options } = extractOptions(eventListenerOptions);

package/dist/host.d.ts

@@ -0,0 +1,18 @@
+import { ReactiveElement } from 'lit';
+/**
+ * The symbol resolving the `ReactiveElement` which owns the update lifecycle of a given context.
+ *
+ * A `ReactiveElement` resolves to itself, while a `Controller` resolves to its host, which allows
+ * decorators such as `state`, `query`, `queryAll`, `event`, `eventListener` and `updated` to behave
+ * identically regardless of whether they are applied on a component or on a controller.
+ */
+export declare const host: unique symbol;
+export interface HostProvider {
+    readonly [host]: ReactiveElement;
+}
+declare module '@lit/reactive-element' {
+    interface ReactiveElement {
+        readonly [host]: ReactiveElement;
+    }
+}
+//# sourceMappingURL=host.d.ts.map

package/dist/host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,eAAiB,CAAA;AAElC,MAAM,WAAW,YAAY;IAC5B,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,eAAe,CAAA;CAChC;AAED,OAAO,QAAQ,uBAAuB,CAAC;IACtC,UAAU,eAAe;QACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,eAAe,CAAA;KAChC;CACD"}

package/dist/host.js

@@ -0,0 +1,13 @@
+import { ReactiveElement } from 'lit';
+/**
+ * The symbol resolving the `ReactiveElement` which owns the update lifecycle of a given context.
+ *
+ * A `ReactiveElement` resolves to itself, while a `Controller` resolves to its host, which allows
+ * decorators such as `state`, `query`, `queryAll`, `event`, `eventListener` and `updated` to behave
+ * identically regardless of whether they are applied on a component or on a controller.
+ */
+export const host = Symbol('host');
+Object.defineProperty(ReactiveElement.prototype, host, {
+    configurable: true,
+    get() { return this; },
+});

package/dist/index.d.ts

@@ -28,7 +28,9 @@ export * from 'lit-html/directives/until.js';
 export * from 'lit-html/directives/when.js';
 export { render, noChange } from 'lit-html';
 export { Component, component, html } from './Component/index.js';
+export * from './ComponentPart/index.js';
 export * from './Controller/index.js';
+export * from './host.js';
 export * from './query/index.js';
 export * from './style/index.js';
 export * from './updated/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,cAAc,KAAK,CAAA;AACnB,OAAO,EAAE,KAAK,2BAA2B,EAAE,KAAK,4BAA4B,EAAE,KAAK,yBAAyB,EAAE,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC5M,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,IAAI,UAAU,EAAE,GAAG,IAAI,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9H,cAAc,UAAU,CAAA;AACxB,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qCAAqC,CAAA;AACnD,cAAc,sCAAsC,CAAA;AACpD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AACjE,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,cAAc,KAAK,CAAA;AACnB,OAAO,EAAE,KAAK,2BAA2B,EAAE,KAAK,4BAA4B,EAAE,KAAK,yBAAyB,EAAE,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC5M,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,IAAI,UAAU,EAAE,GAAG,IAAI,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9H,cAAc,UAAU,CAAA;AACxB,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qCAAqC,CAAA;AACnD,cAAc,sCAAsC,CAAA;AACpD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AACjE,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -28,7 +28,9 @@ export * from 'lit-html/directives/until.js';
 export * from 'lit-html/directives/when.js';
 export { render, noChange } from 'lit-html';
 export { Component, component, html } from './Component/index.js';
+export * from './ComponentPart/index.js';
 export * from './Controller/index.js';
+export * from './host.js';
 export * from './query/index.js';
 export * from './style/index.js';
 export * from './updated/index.js';

package/dist/query/query.d.ts

@@ -1,3 +1,4 @@
 import type { ReactiveElement } from 'lit';
-export declare const query: (selector: string) => (prototype: ReactiveElement, propertyKey: PropertyKey) => void;
+import type { Controller } from '../Controller/Controller.js';
+export declare const query: (selector: string) => (prototype: ReactiveElement | Controller, propertyKey: PropertyKey) => void;
 //# sourceMappingURL=query.d.ts.map

package/dist/query/query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../query/query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAE1C,eAAO,MAAM,KAAK,GAAI,UAAU,MAAM,MAC7B,WAAW,eAAe,EAAE,aAAa,WAAW,SAO5D,CAAA"}
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../query/query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAG7D,eAAO,MAAM,KAAK,GAAI,UAAU,MAAM,MAC7B,WAAW,eAAe,GAAG,UAAU,EAAE,aAAa,WAAW,SAOzE,CAAA"}

package/dist/query/query.js

@@ -1,8 +1,9 @@
+import { host } from '../host.js';
 export const query = (selector) => {
     return (prototype, propertyKey) => {
         Object.defineProperty(prototype, propertyKey, {
             get() {
-                return this.renderRoot?.querySelector(selector) ?? undefined;
+                return this[host]?.renderRoot?.querySelector(selector) ?? undefined;
             }
         });
     };

package/dist/query/queryAll.d.ts

@@ -1,3 +1,4 @@
 import type { ReactiveElement } from 'lit';
-export declare const queryAll: (selector: string) => (prototype: ReactiveElement, propertyKey: PropertyKey) => void;
+import type { Controller } from '../Controller/Controller.js';
+export declare const queryAll: (selector: string) => (prototype: ReactiveElement | Controller, propertyKey: PropertyKey) => void;
 //# sourceMappingURL=queryAll.d.ts.map