@lit/reactive-element - npm Package Compare versions

Comparing version 2.0.0-pre.0 to 2.0.0-pre.1

decorators.d.ts

@@ -6,3 +6,2 @@ /**
  */
-export * from './decorators/base.js';
 export * from './decorators/custom-element.js';
@@ -9,0 +8,0 @@ export * from './decorators/property.js';

decorators.js

@@ -1,2 +0,2 @@
-export{decorateProperty,legacyPrototypeMethod,standardPrototypeMethod}from"./decorators/base.js";export{customElement}from"./decorators/custom-element.js";export{property}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/event-options.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/query-all.js";export{queryAsync}from"./decorators/query-async.js";export{queryAssignedElements}from"./decorators/query-assigned-elements.js";export{queryAssignedNodes}from"./decorators/query-assigned-nodes.js";
+export{customElement}from"./decorators/custom-element.js";export{property,standardProperty}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/event-options.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/query-all.js";export{queryAsync}from"./decorators/query-async.js";export{queryAssignedElements}from"./decorators/query-assigned-elements.js";export{queryAssignedNodes}from"./decorators/query-assigned-nodes.js";
 //# sourceMappingURL=decorators.js.map

decorators/base.d.ts

@@ -6,44 +6,13 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+/**
+ * Generates a public interface type that removes private and protected fields.
+ * This allows accepting otherwise incompatible versions of the type (e.g. from
+ * multiple copies of the same package in `node_modules`).
+ */
+export type Interface<T> = {
+    [K in keyof T]: T[K];
+};
 export type Constructor<T> = {
     new (...args: any[]): T;
 };
-export interface ClassDescriptor {
-    kind: 'class';
-    elements: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
-}
-export interface ClassElement {
-    kind: 'field' | 'method';
-    key: PropertyKey;
-    placement: 'static' | 'prototype' | 'own';
-    initializer?: Function;
-    extras?: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
-    descriptor?: PropertyDescriptor;
-}
-export declare const legacyPrototypeMethod: (descriptor: PropertyDescriptor, proto: Object, name: PropertyKey) => void;
-export declare const standardPrototypeMethod: (descriptor: PropertyDescriptor, element: ClassElement) => {
-    kind: string;
-    placement: string;
-    key: PropertyKey;
-    descriptor: PropertyDescriptor;
-};
-/**
- * Helper for decorating a property that is compatible with both TypeScript
- * and Babel decorators. The optional `finisher` can be used to perform work on
- * the class. The optional `descriptor` should return a PropertyDescriptor
- * to install for the given property.
- *
- * @param finisher {function} Optional finisher method; receives the element
- * constructor and property key as arguments and has no return value.
- * @param descriptor {function} Optional descriptor method; receives the
- * property key as an argument and returns a property descriptor to define for
- * the given property.
- * @returns {ClassElement|void}
- */
-export declare const decorateProperty: ({ finisher, descriptor, }: {
-    finisher?: ((ctor: typeof ReactiveElement, property: PropertyKey) => void) | null | undefined;
-    descriptor?: ((property: PropertyKey) => PropertyDescriptor) | undefined;
-}) => (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => void | any;
 //# sourceMappingURL=base.d.ts.map

decorators/base.js

@@ -6,3 +6,3 @@ /**
  */
-const e=(e,t,o)=>{Object.defineProperty(t,o,e)},t=(e,t)=>({kind:"method",placement:"prototype",key:t.key,descriptor:e}),o=({finisher:e,descriptor:t})=>(o,n)=>{if(void 0===n){const n=o.originalKey??o.key,r=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(r.finisher=function(t){e(t,n)}),r}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),e?.(r,n)}};export{o as decorateProperty,e as legacyPrototypeMethod,t as standardPrototypeMethod};
+const e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};
 //# sourceMappingURL=base.js.map

decorators/custom-element.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ClassDescriptor } from './base.js';
+import type { Constructor } from './base.js';
 /**
@@ -12,2 +12,6 @@ * Allow for custom element classes with private constructors
 type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+export type CustomElementDecorator = {
+    (cls: CustomElementClass): void;
+    (target: CustomElementClass, context: ClassDecoratorContext<Constructor<HTMLElement>>): void;
+};
 /**
@@ -27,4 +31,4 @@ * Class decorator factory that defines the decorated class as a custom element.
  */
-export declare const customElement: (tagName: string) => (classOrDescriptor: CustomElementClass | ClassDescriptor) => any;
+export declare const customElement: (tagName: string) => CustomElementDecorator;
 export {};
 //# sourceMappingURL=custom-element.d.ts.map

decorators/custom-element.js

@@ -6,3 +6,3 @@ /**
  */
-const e=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return{kind:t,elements:s,finisher(n){customElements.define(e,n)}}})(e,n);export{e as customElement};
+const t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)};export{t as customElement};
 //# sourceMappingURL=custom-element.js.map

decorators/event-options.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import type { Interface } from './base.js';
+export type EventOptionsDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey): void | any;
+    <C, V extends (this: C, ...args: any) => any>(value: V, _context: ClassMethodDecoratorContext<C, V>): void;
+};
 /**
@@ -38,3 +43,3 @@ * Adds event listener options to a method used as an event listener in a
  */
-export declare function eventOptions(options: AddEventListenerOptions): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function eventOptions(options: AddEventListenerOptions): EventOptionsDecorator;
 //# sourceMappingURL=event-options.d.ts.map

decorators/event-options.js

@@ -1,2 +0,1 @@
-import{decorateProperty as r}from"./base.js";
 /**
@@ -6,3 +5,4 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function e(e){return r({finisher:(r,t)=>{Object.assign(r.prototype[t],e)}})}export{e as eventOptions};
+ */
+function t(t){return(n,o)=>{const c="function"==typeof n?n:n[o];Object.assign(c,t)}}export{t as eventOptions};
 //# sourceMappingURL=event-options.js.map

decorators/property.d.ts

@@ -6,7 +6,20 @@ /**
  */
-import { PropertyDeclaration } from '../reactive-element.js';
-import { ClassElement } from './base.js';
+import { type PropertyDeclaration, type ReactiveElement } from '../reactive-element.js';
+import type { Interface } from './base.js';
+export type PropertyDecorator = {
+    <C extends Interface<ReactiveElement>, V>(target: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+    <C extends Interface<ReactiveElement>, V>(target: (value: V) => void, context: ClassSetterDecoratorContext<C, V>): (this: C, value: V) => void;
+    (protoOrDescriptor: Object, name: PropertyKey, descriptor?: PropertyDescriptor): any;
+};
+type StandardPropertyContext<C, V> = (ClassAccessorDecoratorContext<C, V> | ClassSetterDecoratorContext<C, V>) & {
+    metadata: object;
+};
 /**
- * A property decorator which creates a reactive property that reflects a
- * corresponding attribute value. When a decorated property is set
+ * Wraps a class accessor or setter so that `requestUpdate()` is called with the
+ * property name and old value when the accessor is set.
+ */
+export declare const standardProperty: <C extends Interface<ReactiveElement>, V>(options: PropertyDeclaration<unknown, unknown> | undefined, target: ClassAccessorDecoratorTarget<C, V> | ((value: V) => void), context: StandardPropertyContext<C, V>) => ClassAccessorDecoratorResult<C, V> | ((this: C, value: V) => void);
+/**
+ * A class field or accessor decorator which creates a reactive property that
+ * reflects a corresponding attribute value. When a decorated property is set
  * the element will update and render. A {@linkcode PropertyDeclaration} may
@@ -41,3 +54,4 @@ * optionally be supplied to configure property features.
  */
-export declare function property(options?: PropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
+export declare function property(options?: PropertyDeclaration): PropertyDecorator;
+export {};
 //# sourceMappingURL=property.d.ts.map

decorators/property.js

@@ -0,1 +1,2 @@
+import{defaultConverter as t,notEqual as e}from"../reactive-element.js";
 /**
@@ -5,4 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */
-const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(n){n.createProperty(e.key,i)}},e=(i,e,n)=>{e.constructor.createProperty(n,i)};function n(n){return(t,o)=>void 0!==o?e(n,t,o):i(n,t)}export{n as property};
+ */const o={attribute:!0,type:String,converter:t,reflect:!1,hasChanged:e},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return{set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t)},init(e){return void 0!==e&&this.C(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t)}}throw Error("Unsupported decorator location: "+n)};function n(t){return(e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}export{n as property,r as standardProperty};
 //# sourceMappingURL=property.js.map

decorators/query-all.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryAllDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends NodeList>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -32,3 +37,3 @@ * A property decorator that converts a class property into a getter
  */
-export declare function queryAll(selector: string): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAll(selector: string): QueryAllDecorator;
 //# sourceMappingURL=query-all.d.ts.map

decorators/query-all.js

@@ -1,2 +0,2 @@
-import{decorateProperty as r}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,4 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function e(e){return r({descriptor:r=>({get(){return this.renderRoot?.querySelectorAll(e)??[]},enumerable:!0,configurable:!0})})}export{e as queryAll};
+ */
+let e;function r(r){return(n,o)=>t(n,o,{get(){return(this.renderRoot??(e??=document.createDocumentFragment())).querySelectorAll(r)}})}export{r as queryAll};
 //# sourceMappingURL=query-all.js.map

decorators/query-assigned-elements.d.ts

@@ -8,2 +8,7 @@ /**
 import type { QueryAssignedNodesOptions } from './query-assigned-nodes.js';
+import { type Interface } from './base.js';
+export type QueryAssignedElementsDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Array<Element>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -50,3 +55,3 @@ * Options for the {@linkcode queryAssignedElements} decorator. Extends the
  */
-export declare function queryAssignedElements(options?: QueryAssignedElementsOptions): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAssignedElements(options?: QueryAssignedElementsOptions): QueryAssignedElementsDecorator;
 //# sourceMappingURL=query-assigned-elements.d.ts.map

decorators/query-assigned-elements.js

@@ -1,2 +0,2 @@
-import{decorateProperty as e}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */const o=null!=globalThis.HTMLSlotElement?.prototype.assignedElements?(e,o)=>e.assignedElements(o):(e,o)=>e.assignedNodes(o).filter((e=>e.nodeType===Node.ELEMENT_NODE));function t(t){const{slot:n,selector:r}=t??{};return e({descriptor:e=>({get(){const e="slot"+(n?`[name=${n}]`:":not([name])"),l=this.renderRoot?.querySelector(e),s=null!=l?o(l,t):[];return r?s.filter((e=>e.matches(r))):s},enumerable:!0,configurable:!0})})}export{t as queryAssignedElements};
+ */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}export{o as queryAssignedElements};
 //# sourceMappingURL=query-assigned-elements.js.map

decorators/query-assigned-nodes.d.ts

@@ -6,2 +6,4 @@ /**
  */
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
 /**
@@ -17,3 +19,6 @@ * Options for the {@linkcode queryAssignedNodes} decorator. Extends the options
 }
-type TSDecoratorReturnType = void | any;
+export type QueryAssignedNodesDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Array<Node>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -45,4 +50,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function queryAssignedNodes(options?: QueryAssignedNodesOptions): TSDecoratorReturnType;
-export {};
+export declare function queryAssignedNodes(options?: QueryAssignedNodesOptions): QueryAssignedNodesDecorator;
 //# sourceMappingURL=query-assigned-nodes.d.ts.map

decorators/query-assigned-nodes.js

@@ -1,2 +0,2 @@
-import{decorateProperty as e}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function t(t){const n=t?.slot,r=t;return e({descriptor:e=>({get(){const e="slot"+(n?`[name=${n}]`:":not([name])"),t=this.renderRoot?.querySelector(e);return t?.assignedNodes(r)??[]},enumerable:!0,configurable:!0})})}export{t as queryAssignedNodes};
+ */function n(n){return(o,r)=>{const{slot:e}=n??{},s="slot"+(e?`[name=${e}]`:":not([name])");return t(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}}export{n as queryAssignedNodes};
 //# sourceMappingURL=query-assigned-nodes.js.map

decorators/query-async.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryAsyncDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Promise<Element | null>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -40,3 +45,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function queryAsync(selector: string): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAsync(selector: string): QueryAsyncDecorator;
 //# sourceMappingURL=query-async.d.ts.map

decorators/query-async.js

@@ -1,2 +0,2 @@
-import{decorateProperty as r}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -7,3 +7,3 @@ * @license
  */
-function e(e){return r({descriptor:r=>({async get(){return await this.updateComplete,this.renderRoot?.querySelector(e)},enumerable:!0,configurable:!0})})}export{e as queryAsync};
+function r(r){return(n,e)=>t(n,e,{async get(){return await this.updateComplete,this.renderRoot?.querySelector(r)??null}})}export{r as queryAsync};
 //# sourceMappingURL=query-async.js.map

decorators/query.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Element>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -33,3 +38,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function query(selector: string, cache?: boolean): QueryDecorator;
 //# sourceMappingURL=query.d.ts.map

decorators/query.js

@@ -1,2 +0,2 @@
-import{decorateProperty as t}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function r(r,n){return t({descriptor:t=>{const e={get(){return this.renderRoot?.querySelector(r)??null},enumerable:!0,configurable:!0};if(n){const t=Symbol();e.get=function(){return void 0===this[t]&&(this[t]=this.renderRoot?.querySelector(r)??null),this[t]}}return e}})}export{r as query};
+ */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:u}="object"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){if(r){let t=e.call(this);return void 0===t&&(t=o(this),u.call(this,t)),t}return o(this)}})}return t(n,s,{get(){return o(this)}})}}export{e as query};
 //# sourceMappingURL=query.js.map

decorators/state.d.ts

@@ -6,3 +6,3 @@ /**
  */
-export interface InternalPropertyDeclaration<Type = unknown> {
+export interface StateDeclaration<Type = unknown> {
     /**
@@ -16,2 +16,6 @@ * A function that indicates if a property should be considered changed when
 /**
+ * @deprecated use StateDeclaration
+ */
+export type InternalPropertyDeclaration<Type = unknown> = StateDeclaration<Type>;
+/**
  * Declares a private or protected reactive property that still triggers
@@ -26,3 +30,3 @@ * updates to the element when it changes. It does not reflect from the
  */
-export declare function state(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function state(options?: StateDeclaration): import("./property.js").PropertyDecorator;
 //# sourceMappingURL=state.d.ts.map

decorators/state.js

@@ -1,2 +0,2 @@
-import{property as r}from"./property.js";
+import{property as t}from"./property.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function t(t){return r({...t,state:!0})}export{t as state};
+ */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};
 //# sourceMappingURL=state.js.map

development/decorators.d.ts

@@ -6,3 +6,2 @@ /**
  */
-export * from './decorators/base.js';
 export * from './decorators/custom-element.js';
@@ -9,0 +8,0 @@ export * from './decorators/property.js';

development/decorators.js

@@ -6,9 +6,5 @@ /**
  */
-/*
- * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
- * property decorators (but not class decorators) in this file that have
- * an @ExportDecoratedItems annotation must be defined as a regular function,
- * not an arrow function.
- */
-export * from './decorators/base.js';
+// This module exports decorators that are compatible both with standard
+// decorators as implemented by TypeScript 5.2 and Babel, and with TypeScript's
+// experimentalDecorators option.
 export * from './decorators/custom-element.js';
@@ -15,0 +11,0 @@ export * from './decorators/property.js';

development/decorators/base.d.ts

@@ -6,44 +6,13 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+/**
+ * Generates a public interface type that removes private and protected fields.
+ * This allows accepting otherwise incompatible versions of the type (e.g. from
+ * multiple copies of the same package in `node_modules`).
+ */
+export type Interface<T> = {
+    [K in keyof T]: T[K];
+};
 export type Constructor<T> = {
     new (...args: any[]): T;
 };
-export interface ClassDescriptor {
-    kind: 'class';
-    elements: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
-}
-export interface ClassElement {
-    kind: 'field' | 'method';
-    key: PropertyKey;
-    placement: 'static' | 'prototype' | 'own';
-    initializer?: Function;
-    extras?: ClassElement[];
-    finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
-    descriptor?: PropertyDescriptor;
-}
-export declare const legacyPrototypeMethod: (descriptor: PropertyDescriptor, proto: Object, name: PropertyKey) => void;
-export declare const standardPrototypeMethod: (descriptor: PropertyDescriptor, element: ClassElement) => {
-    kind: string;
-    placement: string;
-    key: PropertyKey;
-    descriptor: PropertyDescriptor;
-};
-/**
- * Helper for decorating a property that is compatible with both TypeScript
- * and Babel decorators. The optional `finisher` can be used to perform work on
- * the class. The optional `descriptor` should return a PropertyDescriptor
- * to install for the given property.
- *
- * @param finisher {function} Optional finisher method; receives the element
- * constructor and property key as arguments and has no return value.
- * @param descriptor {function} Optional descriptor method; receives the
- * property key as an argument and returns a property descriptor to define for
- * the given property.
- * @returns {ClassElement|void}
- */
-export declare const decorateProperty: ({ finisher, descriptor, }: {
-    finisher?: ((ctor: typeof ReactiveElement, property: PropertyKey) => void) | null | undefined;
-    descriptor?: ((property: PropertyKey) => PropertyDescriptor) | undefined;
-}) => (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => void | any;
 //# sourceMappingURL=base.d.ts.map

development/decorators/base.js

@@ -6,61 +6,28 @@ /**
  */
-export const legacyPrototypeMethod = (descriptor, proto, name) => {
-    Object.defineProperty(proto, name, descriptor);
-};
-export const standardPrototypeMethod = (descriptor, element) => ({
-    kind: 'method',
-    placement: 'prototype',
-    key: element.key,
-    descriptor,
-});
 /**
- * Helper for decorating a property that is compatible with both TypeScript
- * and Babel decorators. The optional `finisher` can be used to perform work on
- * the class. The optional `descriptor` should return a PropertyDescriptor
- * to install for the given property.
+ * Wraps up a few best practices when returning a property descriptor from a
+ * decorator.
  *
- * @param finisher {function} Optional finisher method; receives the element
- * constructor and property key as arguments and has no return value.
- * @param descriptor {function} Optional descriptor method; receives the
- * property key as an argument and returns a property descriptor to define for
- * the given property.
- * @returns {ClassElement|void}
+ * Marks the defined property as configurable, and enumerable, and handles
+ * the case where we have a busted Reflect.decorate zombiefill (e.g. in Angular
+ * apps).
+ *
+ * @internal
  */
-export const decorateProperty = ({ finisher, descriptor, }) => (protoOrDescriptor, name
-// Note TypeScript requires the return type to be `void|any`
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-) => {
-    // TypeScript / Babel legacy mode
-    if (name !== undefined) {
-        const ctor = protoOrDescriptor
-            .constructor;
-        if (descriptor !== undefined) {
-            Object.defineProperty(protoOrDescriptor, name, descriptor(name));
-        }
-        finisher?.(ctor, name);
-        // Babel standard mode
+export const desc = (obj, name, descriptor) => {
+    // For backwards compatibility, we keep them configurable and enumerable.
+    descriptor.configurable = true;
+    descriptor.enumerable = true;
+    if (
+    // We check for Reflect.decorate each time, in case the zombiefill
+    // is applied via lazy loading some Angular code.
+    Reflect.decorate &&
+        typeof name !== 'object') {
+        // If we're called as a legacy decorator, and Reflect.decorate is present
+        // then we have no guarantees that the returned descriptor will be
+        // defined on the class, so we must apply it directly ourselves.
+        Object.defineProperty(obj, name, descriptor);
     }
-    else {
-        // Note, the @property decorator saves `key` as `originalKey`
-        // so try to use it here.
-        const key = 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        protoOrDescriptor.originalKey ??
-            protoOrDescriptor.key;
-        const info = descriptor != undefined
-            ? {
-                kind: 'method',
-                placement: 'prototype',
-                key,
-                descriptor: descriptor(protoOrDescriptor.key),
-            }
-            : { ...protoOrDescriptor, key };
-        if (finisher != undefined) {
-            info.finisher = function (ctor) {
-                finisher(ctor, key);
-            };
-        }
-        return info;
-    }
+    return descriptor;
 };
 //# sourceMappingURL=base.js.map

development/decorators/custom-element.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ClassDescriptor } from './base.js';
+import type { Constructor } from './base.js';
 /**
@@ -12,2 +12,6 @@ * Allow for custom element classes with private constructors
 type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+export type CustomElementDecorator = {
+    (cls: CustomElementClass): void;
+    (target: CustomElementClass, context: ClassDecoratorContext<Constructor<HTMLElement>>): void;
+};
 /**
@@ -27,4 +31,4 @@ * Class decorator factory that defines the decorated class as a custom element.
  */
-export declare const customElement: (tagName: string) => (classOrDescriptor: CustomElementClass | ClassDescriptor) => any;
+export declare const customElement: (tagName: string) => CustomElementDecorator;
 export {};
 //# sourceMappingURL=custom-element.d.ts.map

development/decorators/custom-element.js

@@ -6,23 +6,2 @@ /**
  */
-const legacyCustomElement = (tagName, clazz) => {
-    customElements.define(tagName, clazz);
-    // Cast as any because TS doesn't recognize the return type as being a
-    // subtype of the decorated class when clazz is typed as
-    // `Constructor<HTMLElement>` for some reason.
-    // `Constructor<HTMLElement>` is helpful to make sure the decorator is
-    // applied to elements however.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return clazz;
-};
-const standardCustomElement = (tagName, descriptor) => {
-    const { kind, elements } = descriptor;
-    return {
-        kind,
-        elements,
-        // This callback is called once the class is otherwise fully defined
-        finisher(clazz) {
-            customElements.define(tagName, clazz);
-        },
-    };
-};
 /**
@@ -42,5 +21,12 @@ * Class decorator factory that defines the decorated class as a custom element.
  */
-export const customElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
-    ? legacyCustomElement(tagName, classOrDescriptor)
-    : standardCustomElement(tagName, classOrDescriptor);
+export const customElement = (tagName) => (classOrTarget, context) => {
+    if (context !== undefined) {
+        context.addInitializer(() => {
+            customElements.define(tagName, classOrTarget);
+        });
+    }
+    else {
+        customElements.define(tagName, classOrTarget);
+    }
+};
 //# sourceMappingURL=custom-element.js.map

development/decorators/event-options.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import type { Interface } from './base.js';
+export type EventOptionsDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey): void | any;
+    <C, V extends (this: C, ...args: any) => any>(value: V, _context: ClassMethodDecoratorContext<C, V>): void;
+};
 /**
@@ -38,3 +43,3 @@ * Adds event listener options to a method used as an event listener in a
  */
-export declare function eventOptions(options: AddEventListenerOptions): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function eventOptions(options: AddEventListenerOptions): EventOptionsDecorator;
 //# sourceMappingURL=event-options.d.ts.map

development/decorators/event-options.js

@@ -6,3 +6,2 @@ /**
  */
-import { decorateProperty } from './base.js';
 /**
@@ -39,10 +38,10 @@ * Adds event listener options to a method used as an event listener in a
 export function eventOptions(options) {
-    return decorateProperty({
-        finisher: (ctor, name) => {
-            Object.assign(
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ctor.prototype[name], options);
-        },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return ((protoOrValue, nameOrContext) => {
+        const method = typeof protoOrValue === 'function'
+            ? protoOrValue
+            : protoOrValue[nameOrContext];
+        Object.assign(method, options);
     });
 }
 //# sourceMappingURL=event-options.js.map

development/decorators/property.d.ts

@@ -6,7 +6,20 @@ /**
  */
-import { PropertyDeclaration } from '../reactive-element.js';
-import { ClassElement } from './base.js';
+import { type PropertyDeclaration, type ReactiveElement } from '../reactive-element.js';
+import type { Interface } from './base.js';
+export type PropertyDecorator = {
+    <C extends Interface<ReactiveElement>, V>(target: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+    <C extends Interface<ReactiveElement>, V>(target: (value: V) => void, context: ClassSetterDecoratorContext<C, V>): (this: C, value: V) => void;
+    (protoOrDescriptor: Object, name: PropertyKey, descriptor?: PropertyDescriptor): any;
+};
+type StandardPropertyContext<C, V> = (ClassAccessorDecoratorContext<C, V> | ClassSetterDecoratorContext<C, V>) & {
+    metadata: object;
+};
 /**
- * A property decorator which creates a reactive property that reflects a
- * corresponding attribute value. When a decorated property is set
+ * Wraps a class accessor or setter so that `requestUpdate()` is called with the
+ * property name and old value when the accessor is set.
+ */
+export declare const standardProperty: <C extends Interface<ReactiveElement>, V>(options: PropertyDeclaration<unknown, unknown> | undefined, target: ClassAccessorDecoratorTarget<C, V> | ((value: V) => void), context: StandardPropertyContext<C, V>) => ClassAccessorDecoratorResult<C, V> | ((this: C, value: V) => void);
+/**
+ * A class field or accessor decorator which creates a reactive property that
+ * reflects a corresponding attribute value. When a decorated property is set
  * the element will update and render. A {@linkcode PropertyDeclaration} may
@@ -41,3 +54,4 @@ * optionally be supplied to configure property features.
  */
-export declare function property(options?: PropertyDeclaration): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any;
+export declare function property(options?: PropertyDeclaration): PropertyDecorator;
+export {};
 //# sourceMappingURL=property.d.ts.map

development/decorators/property.js

@@ -6,53 +6,96 @@ /**
  */
-const standardProperty = (options, element) => {
-    // When decorating an accessor, pass it through and add property metadata.
-    // Note, the `hasOwnProperty` check in `createProperty` ensures we don't
-    // stomp over the user's accessor.
-    if (element.kind === 'method' &&
-        element.descriptor &&
-        !('value' in element.descriptor)) {
+/*
+ * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
+ * property decorators (but not class decorators) in this file that have
+ * an @ExportDecoratedItems annotation must be defined as a regular function,
+ * not an arrow function.
+ */
+import { defaultConverter, notEqual, } from '../reactive-element.js';
+const DEV_MODE = true;
+let issueWarning;
+if (DEV_MODE) {
+    // Ensure warnings are issued only 1x, even if multiple versions of Lit
+    // are loaded.
+    const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
+    // Issue a warning, if we haven't already.
+    issueWarning = (code, warning) => {
+        warning += ` See https://lit.dev/msg/${code} for more information.`;
+        if (!issuedWarnings.has(warning)) {
+            console.warn(warning);
+            issuedWarnings.add(warning);
+        }
+    };
+}
+const legacyProperty = (options, proto, name) => {
+    const hasOwnProperty = proto.hasOwnProperty(name);
+    proto.constructor.createProperty(name, hasOwnProperty ? { ...options, wrapped: true } : options);
+    // For accessors (which have a descriptor on the prototype) we need to
+    // return a descriptor, otherwise TypeScript overwrites the descriptor we
+    // define in createProperty() with the original descriptor. We don't do this
+    // for fields, which don't have a descriptor, because this could overwrite
+    // descriptor defined by other decorators.
+    return hasOwnProperty
+        ? Object.getOwnPropertyDescriptor(proto, name)
+        : undefined;
+};
+// This is duplicated from a similar variable in reactive-element.ts, but
+// actually makes sense to have this default defined with the decorator, so
+// that different decorators could have different defaults.
+const defaultPropertyDeclaration = {
+    attribute: true,
+    type: String,
+    converter: defaultConverter,
+    reflect: false,
+    hasChanged: notEqual,
+};
+/**
+ * Wraps a class accessor or setter so that `requestUpdate()` is called with the
+ * property name and old value when the accessor is set.
+ */
+export const standardProperty = (options = defaultPropertyDeclaration, target, context) => {
+    const { kind, metadata } = context;
+    if (DEV_MODE && metadata == null) {
+        issueWarning('missing-class-metadata', `The class ${target} is missing decorator metadata. This ` +
+            `could mean that you're using a compiler that supports decorators ` +
+            `but doesn't support decorator metadata, such as TypeScript 5.1. ` +
+            `Please update your compiler.`);
+    }
+    // Store the property options
+    let properties = globalThis.litPropertyMetadata.get(metadata);
+    if (properties === undefined) {
+        globalThis.litPropertyMetadata.set(metadata, (properties = new Map()));
+    }
+    properties.set(context.name, options);
+    if (kind === 'accessor') {
+        // Standard decorators cannot dynamically modify the class, so we can't
+        // replace a field with accessors. The user must use the new `accessor`
+        // keyword instead.
+        const { name } = context;
         return {
-            ...element,
-            finisher(clazz) {
-                clazz.createProperty(element.key, options);
+            set(v) {
+                const oldValue = target.get.call(this);
+                target.set.call(this, v);
+                this.requestUpdate(name, oldValue, options);
             },
-        };
-    }
-    else {
-        // createProperty() takes care of defining the property, but we still
-        // must return some kind of descriptor, so return a descriptor for an
-        // unused prototype field. The finisher calls createProperty().
-        return {
-            kind: 'field',
-            key: Symbol(),
-            placement: 'own',
-            descriptor: {},
-            // store the original key so subsequent decorators have access to it.
-            originalKey: element.key,
-            // When @babel/plugin-proposal-decorators implements initializers,
-            // do this instead of the initializer below. See:
-            // https://github.com/babel/babel/issues/9260 extras: [
-            //   {
-            //     kind: 'initializer',
-            //     placement: 'own',
-            //     initializer: descriptor.initializer,
-            //   }
-            // ],
-            initializer() {
-                if (typeof element.initializer === 'function') {
-                    this[element.key] = element.initializer.call(this);
+            init(v) {
+                if (v !== undefined) {
+                    this._$changeProperty(name, undefined, options);
                 }
+                return v;
             },
-            finisher(clazz) {
-                clazz.createProperty(element.key, options);
-            },
         };
     }
+    else if (kind === 'setter') {
+        const { name } = context;
+        return function (value) {
+            const oldValue = this[name];
+            target.call(this, value);
+            this.requestUpdate(name, oldValue, options);
+        };
+    }
+    throw new Error(`Unsupported decorator location: ${kind}`);
 };
-const legacyProperty = (options, proto, name) => {
-    proto.constructor.createProperty(name, options);
-};
 /**
- * A property decorator which creates a reactive property that reflects a
- * corresponding attribute value. When a decorated property is set
+ * A class field or accessor decorator which creates a reactive property that
+ * reflects a corresponding attribute value. When a decorated property is set
  * the element will update and render. A {@linkcode PropertyDeclaration} may
@@ -88,7 +131,10 @@ * optionally be supplied to configure property features.
 export function property(options) {
+    return (protoOrTarget, nameOrContext
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (protoOrDescriptor, name) => name !== undefined
-        ? legacyProperty(options, protoOrDescriptor, name)
-        : standardProperty(options, protoOrDescriptor);
+    ) => {
+        return (typeof nameOrContext === 'object'
+            ? standardProperty(options, protoOrTarget, nameOrContext)
+            : legacyProperty(options, protoOrTarget, nameOrContext));
+    };
 }
 //# sourceMappingURL=property.js.map

development/decorators/query-all.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryAllDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends NodeList>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -32,3 +37,3 @@ * A property decorator that converts a class property into a getter
  */
-export declare function queryAll(selector: string): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAll(selector: string): QueryAllDecorator;
 //# sourceMappingURL=query-all.d.ts.map

development/decorators/query-all.js

@@ -6,3 +6,6 @@ /**
  */
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
+// Shared fragment used to generate empty NodeLists when a render root is
+// undefined
+let fragment;
 /**
@@ -33,12 +36,11 @@ * A property decorator that converts a class property into a getter
 export function queryAll(selector) {
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        return desc(obj, name, {
             get() {
-                return this.renderRoot?.querySelectorAll(selector) ?? [];
+                const container = this.renderRoot ?? (fragment ??= document.createDocumentFragment());
+                return container.querySelectorAll(selector);
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
 }
 //# sourceMappingURL=query-all.js.map

development/decorators/query-assigned-elements.d.ts

@@ -8,2 +8,7 @@ /**
 import type { QueryAssignedNodesOptions } from './query-assigned-nodes.js';
+import { type Interface } from './base.js';
+export type QueryAssignedElementsDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Array<Element>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -50,3 +55,3 @@ * Options for the {@linkcode queryAssignedElements} decorator. Extends the
  */
-export declare function queryAssignedElements(options?: QueryAssignedElementsOptions): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAssignedElements(options?: QueryAssignedElementsOptions): QueryAssignedElementsDecorator;
 //# sourceMappingURL=query-assigned-elements.d.ts.map

development/decorators/query-assigned-elements.js

@@ -6,18 +6,4 @@ /**
  */
-/*
- * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
- * property decorators (but not class decorators) in this file that have
- * an @ExportDecoratedItems annotation must be defined as a regular function,
- * not an arrow function.
- */
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 /**
- * A tiny module scoped polyfill for HTMLSlotElement.assignedElements.
- */
-const slotAssignedElements = globalThis.HTMLSlotElement?.prototype.assignedElements != null
-    ? (slot, opts) => slot.assignedElements(opts)
-    : (slot, opts) => slot
-        .assignedNodes(opts)
-        .filter((node) => node.nodeType === Node.ELEMENT_NODE);
-/**
  * A property decorator that converts a class property into a getter that
@@ -52,19 +38,16 @@ * returns the `assignedElements` of the given `slot`. Provides a declarative
 export function queryAssignedElements(options) {
-    const { slot, selector } = options ?? {};
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        const { slot, selector } = options ?? {};
+        const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
+        return desc(obj, name, {
             get() {
-                const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
                 const slotEl = this.renderRoot?.querySelector(slotSelector);
-                const elements = slotEl != null ? slotAssignedElements(slotEl, options) : [];
-                if (selector) {
-                    return elements.filter((node) => node.matches(selector));
-                }
-                return elements;
+                const elements = slotEl?.assignedElements(options) ?? [];
+                return (selector === undefined
+                    ? elements
+                    : elements.filter((node) => node.matches(selector)));
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
 }
 //# sourceMappingURL=query-assigned-elements.js.map

development/decorators/query-assigned-nodes.d.ts

@@ -6,2 +6,4 @@ /**
  */
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
 /**
@@ -17,3 +19,6 @@ * Options for the {@linkcode queryAssignedNodes} decorator. Extends the options
 }
-type TSDecoratorReturnType = void | any;
+export type QueryAssignedNodesDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Array<Node>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -45,4 +50,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function queryAssignedNodes(options?: QueryAssignedNodesOptions): TSDecoratorReturnType;
-export {};
+export declare function queryAssignedNodes(options?: QueryAssignedNodesOptions): QueryAssignedNodesDecorator;
 //# sourceMappingURL=query-assigned-nodes.d.ts.map

development/decorators/query-assigned-nodes.js

@@ -6,9 +6,3 @@ /**
  */
-/*
- * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
- * property decorators (but not class decorators) in this file that have
- * an @ExportDecoratedItems annotation must be defined as a regular function,
- * not an arrow function.
- */
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 /**
@@ -41,16 +35,14 @@ * A property decorator that converts a class property into a getter that
 export function queryAssignedNodes(options) {
-    const slot = options?.slot;
-    const assignedNodesOptions = options;
-    return decorateProperty({
-        descriptor: (_name) => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return ((obj, name) => {
+        const { slot } = options ?? {};
+        const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
+        return desc(obj, name, {
             get() {
-                const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
                 const slotEl = this.renderRoot?.querySelector(slotSelector);
-                return slotEl?.assignedNodes(assignedNodesOptions) ?? [];
+                return (slotEl?.assignedNodes(options) ?? []);
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
 }
 //# sourceMappingURL=query-assigned-nodes.js.map

development/decorators/query-async.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryAsyncDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Promise<Element | null>>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -40,3 +45,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function queryAsync(selector: string): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function queryAsync(selector: string): QueryAsyncDecorator;
 //# sourceMappingURL=query-async.d.ts.map

development/decorators/query-async.js

@@ -6,3 +6,3 @@ /**
  */
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 // Note, in the future, we may extend this decorator to support the use case
@@ -46,13 +46,11 @@ // where the queried element may need to do work to become ready to interact
 export function queryAsync(selector) {
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        return desc(obj, name, {
             async get() {
                 await this.updateComplete;
-                return this.renderRoot?.querySelector(selector);
+                return this.renderRoot?.querySelector(selector) ?? null;
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
 }
 //# sourceMappingURL=query-async.js.map

development/decorators/query.d.ts

@@ -6,3 +6,8 @@ /**
  */
-import { ReactiveElement } from '../reactive-element.js';
+import type { ReactiveElement } from '../reactive-element.js';
+import { type Interface } from './base.js';
+export type QueryDecorator = {
+    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
+    <C extends Interface<ReactiveElement>, V extends Element>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
+};
 /**
@@ -33,3 +38,3 @@ * A property decorator that converts a class property into a getter that
  */
-export declare function query(selector: string, cache?: boolean): (protoOrDescriptor: ReactiveElement | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function query(selector: string, cache?: boolean): QueryDecorator;
 //# sourceMappingURL=query.d.ts.map

development/decorators/query.js

@@ -6,3 +6,3 @@ /**
  */
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 const DEV_MODE = true;
@@ -35,28 +35,57 @@ /**
 export function query(selector, cache) {
-    return decorateProperty({
-        descriptor: (name) => {
-            const descriptor = {
+    return ((protoOrTarget, nameOrContext, descriptor) => {
+        const doQuery = (el) => {
+            // TODO: if we want to allow users to assert that the query will never
+            // return null, we need a new option and to throw here if the result
+            // is null.
+            return (el.renderRoot?.querySelector(selector) ?? null);
+        };
+        if (cache) {
+            // Accessors to wrap from either:
+            //   1. The decorator target, in the case of standard decorators
+            //   2. The property descriptor, in the case of experimental decorators
+            //      on auto-accessors.
+            //   3. Functions that access our own cache-key property on the instance,
+            //      in the case of experimental decorators on fields.
+            const { get, set } = typeof nameOrContext === 'object'
+                ? protoOrTarget
+                : descriptor ??
+                    (() => {
+                        const key = DEV_MODE
+                            ? Symbol(`${String(nameOrContext)} (@query() cache)`)
+                            : Symbol();
+                        return {
+                            get() {
+                                return this[key];
+                            },
+                            set(v) {
+                                this[key] = v;
+                            },
+                        };
+                    })();
+            return desc(protoOrTarget, nameOrContext, {
                 get() {
-                    return this.renderRoot?.querySelector(selector) ?? null;
+                    if (cache) {
+                        let result = get.call(this);
+                        if (result === undefined) {
+                            result = doQuery(this);
+                            set.call(this, result);
+                        }
+                        return result;
+                    }
+                    return doQuery(this);
                 },
-                enumerable: true,
-                configurable: true,
-            };
-            if (cache) {
-                const key = DEV_MODE
-                    ? Symbol(`${String(name)} (@query() cache)`)
-                    : Symbol();
-                descriptor.get = function () {
-                    if (this[key] ===
-                        undefined) {
-                        this[key] =
-                            this.renderRoot?.querySelector(selector) ?? null;
-                    }
-                    return this[key];
-                };
-            }
-            return descriptor;
-        },
+            });
+        }
+        else {
+            // This object works as the return type for both standard and
+            // experimental decorators.
+            return desc(protoOrTarget, nameOrContext, {
+                get() {
+                    return doQuery(this);
+                },
+            });
+        }
     });
 }
 //# sourceMappingURL=query.js.map

development/decorators/state.d.ts

@@ -6,3 +6,3 @@ /**
  */
-export interface InternalPropertyDeclaration<Type = unknown> {
+export interface StateDeclaration<Type = unknown> {
     /**
@@ -16,2 +16,6 @@ * A function that indicates if a property should be considered changed when
 /**
+ * @deprecated use StateDeclaration
+ */
+export type InternalPropertyDeclaration<Type = unknown> = StateDeclaration<Type>;
+/**
  * Declares a private or protected reactive property that still triggers
@@ -26,3 +30,3 @@ * updates to the element when it changes. It does not reflect from the
  */
-export declare function state(options?: InternalPropertyDeclaration): (protoOrDescriptor: Object | import("./base.js").ClassElement, name?: PropertyKey | undefined) => any;
+export declare function state(options?: StateDeclaration): import("./property.js").PropertyDecorator;
 //# sourceMappingURL=state.d.ts.map

development/decorators/state.js

@@ -26,5 +26,9 @@ /**
         ...options,
+        // Add both `state` and `attribute` because we found a third party
+        // controller that is keying off of PropertyOptions.state to determine
+        // whether a field is a private internal property or not.
         state: true,
+        attribute: false,
     });
 }
 //# sourceMappingURL=state.js.map

development/reactive-element.d.ts

@@ -145,3 +145,3 @@ /**
 export interface PropertyValueMap<T> extends Map<PropertyKey, unknown> {
-    get<K extends keyof T>(k: K): T[K];
+    get<K extends keyof T>(k: K): T[K] | undefined;
     set<K extends keyof T>(key: K, value: T[K]): this;
@@ -170,8 +170,16 @@ has<K extends keyof T>(k: K): boolean;
  */
-export type WarningKind = 'change-in-update' | 'migration';
+export type WarningKind = 'change-in-update' | 'migration' | 'async-perform-update';
 export type Initializer = (element: ReactiveElement) => void;
+declare global {
+    interface SymbolConstructor {
+        readonly metadata: unique symbol;
+    }
+}
+declare global {
+    var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration>>;
+}
 /**
  * Base element class which manages element properties and attributes. When
  * properties change, the `update` method is asynchronously called. This method
- * should be supplied by subclassers to render updates as desired.
+ * should be supplied by subclasses to render updates as desired.
  * @noInheritDoc
@@ -268,3 +276,5 @@ */
     /**
-     * Marks class as having finished creating properties.
+     * Marks class as having been finalized, which includes creating properties
+     * from `static properties`, but does *not* include all properties created
+     * from decorators.
      */
@@ -340,8 +350,2 @@ protected static [finalized]: boolean;
     /**
-     * The set of properties defined by this class that caused an accessor to be
-     * added during `createProperty`.
-     * @nocollapse
-     */
-    private static __reactivePropertyKeys?;
-    /**
      * Returns a list of attributes corresponding to the registered properties.
@@ -352,2 +356,3 @@ * @nocollapse
     static get observedAttributes(): string[];
+    private __instanceProperties?;
     /**
@@ -422,10 +427,28 @@ * Creates a property accessor on the element prototype if one does not exist
     static getPropertyOptions(name: PropertyKey): PropertyDeclaration<unknown, unknown>;
+    static [Symbol.metadata]: object & Record<PropertyKey, unknown>;
     /**
-     * Creates property accessors for registered properties, sets up element
-     * styling, and ensures any superclasses are also finalized. Returns true if
-     * the element was finalized.
+     * Initializes static own properties of the class used in bookkeeping
+     * for element properties, initializers, etc.
+     *
+     * Can be called multiple times by code that needs to ensure these
+     * properties exist before using them.
+     *
+     * This method ensures the superclass is finalized so that inherited
+     * property metadata can be copied down.
      * @nocollapse
      */
-    protected static finalize(): boolean;
+    private static __prepare;
     /**
+     * Finishes setting up the class so that it's ready to be registered
+     * as a custom element and instantiated.
+     *
+     * This method is called by the ReactiveElement.observedAttributes getter.
+     * If you override the observedAttributes getter, you must either call
+     * super.observedAttributes to trigger finalization, or call finalize()
+     * yourself.
+     *
+     * @nocollapse
+     */
+    protected static finalize(): void;
+    /**
      * Options used when calling `attachShadow`. Set this property to customize
@@ -467,3 +490,2 @@ * the options for the shadowRoot; for example, to create a closed
     private static __attributeNameForProperty;
-    private __instanceProperties?;
     private __updatePromise;
@@ -483,3 +505,3 @@ /**
     /**
-     * Map with keys of properties that should be reflected when updated.
+     * Properties that should be reflected when updated.
      */
@@ -497,2 +519,7 @@ private __reflectingProperties?;
     /**
+     * Internal only override point for customizing work done when elements
+     * are constructed.
+     */
+    private __initialize;
+    /**
      * Registers a `ReactiveController` to participate in the element's reactive
@@ -581,2 +608,4 @@ * update cycle. The element automatically calls into any registered
      *     configured options
+     * @param initial whether this call is for the initial value of the property.
+     *     Initial values do not reflect to an attribute.
      * @category updates
@@ -615,12 +644,5 @@ */
      *
-     * Note: To ensure `performUpdate()` synchronously completes a pending update,
-     * it should not be overridden. In LitElement 2.x it was suggested to override
-     * `performUpdate()` to also customizing update scheduling. Instead, you should now
-     * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
-     * scheduling updates via `performUpdate()` continues to work, but will make
-     * also calling `performUpdate()` to synchronously process updates difficult.
-     *
      * @category updates
      */
-    protected performUpdate(): void | Promise<unknown>;
+    protected performUpdate(): void;
     /**
@@ -627,0 +649,0 @@ * Invoked before `update()` to compute values needed during the update.

development/reactive-element.js

@@ -16,2 +16,4 @@ /**
 export * from './css-tag.js';
+// TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
+const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
 const NODE_MODE = false;
@@ -127,6 +129,3 @@ // Lets a minifier replace globalThis references with a minified name
  */
-export const notEqual = (value, old) => {
-    // This ensures (old==NaN, value==NaN) always returns false
-    return old !== value && (old === old || value === value);
-};
+export const notEqual = (value, old) => !is(value, old);
 const defaultPropertyDeclaration = {
@@ -146,9 +145,16 @@ attribute: true,
 const finalized = 'finalized';
+// Ensure metadata is enabled. TypeScript does not polyfill
+// Symbol.metadata, so we must ensure that it exists.
+Symbol.metadata ??= Symbol('metadata');
+// Map from a class's metadata object to property options
+// Note that we must use nullish-coalescing assignment so that we only use one
+// map even if we load multiple version of this module.
+global.litPropertyMetadata ??= new WeakMap();
 /**
  * Base element class which manages element properties and attributes. When
  * properties change, the `update` method is asynchronously called. This method
- * should be supplied by subclassers to render updates as desired.
+ * should be supplied by subclasses to render updates as desired.
  * @noInheritDoc
  */
-class ReactiveElement
+export class ReactiveElement
 // In the Node build, this `extends` clause will be substituted with
@@ -197,3 +203,3 @@ // `(globalThis.HTMLElement ?? HTMLElement)`.
     static addInitializer(initializer) {
-        this.finalize();
+        this.__prepare();
         (this._initializers ??= []).push(initializer);
@@ -207,13 +213,9 @@ }
     static get observedAttributes() {
-        // note: piggy backing on this to ensure we're finalized.
+        // Ensure we've created all properties
         this.finalize();
-        const attributes = [];
-        for (const [p, v] of this.elementProperties) {
-            const attr = this.__attributeNameForProperty(p, v);
-            if (attr !== undefined) {
-                this.__attributeToPropertyMap.set(attr, p);
-                attributes.push(attr);
-            }
-        }
-        return attributes;
+        // this.__attributeToPropertyMap is only undefined after finalize() in
+        // ReactiveElement itself. ReactiveElement.observedAttributes is only
+        // accessed with ReactiveElement as the receiver when a subclass or mixin
+        // calls super.observedAttributes
+        return (this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()]);
     }
@@ -252,12 +254,5 @@ /**
         }
-        // Note, since this can be called by the `@property` decorator which
-        // is called before `finalize`, we ensure finalization has been kicked off.
-        this.finalize();
+        this.__prepare();
         this.elementProperties.set(name, options);
-        // Do not generate an accessor if the prototype already has one, since
-        // it would be lost otherwise and that would never be the user's intention;
-        // Instead, we expect users to call `requestUpdate` themselves from
-        // user-defined accessors. Note that if the super has an accessor we will
-        // still overwrite it
-        if (!options.noAccessor && !this.prototype.hasOwnProperty(name)) {
+        if (!options.noAccessor) {
             const key = DEV_MODE
@@ -270,11 +265,3 @@ ? // Use Symbol.for in dev mode to make it easier to maintain state
             if (descriptor !== undefined) {
-                Object.defineProperty(this.prototype, name, descriptor);
-                if (DEV_MODE) {
-                    // If this class doesn't have its own set, create one and initialize
-                    // with the values in the set from the nearest ancestor class, if any.
-                    if (!this.hasOwnProperty('__reactivePropertyKeys')) {
-                        this.__reactivePropertyKeys = new Set(this.__reactivePropertyKeys ?? []);
-                    }
-                    this.__reactivePropertyKeys.add(name);
-                }
+                defineProperty(this.prototype, name, descriptor);
             }
@@ -311,10 +298,29 @@ }
     static getPropertyDescriptor(name, key, options) {
-        return {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? {
             get() {
                 return this[key];
             },
+            set(v) {
+                this[key] = v;
+            },
+        };
+        if (DEV_MODE && get == null) {
+            if ('value' in (getOwnPropertyDescriptor(this.prototype, name) ?? {})) {
+                throw new Error(`Field ${JSON.stringify(String(name))} on ` +
+                    `${this.name} was declared as a reactive property ` +
+                    `but it's actually declared as a value on the prototype. ` +
+                    `Usually this is due to using @property or @state on a method.`);
+            }
+            issueWarning('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
+                `${this.name} was declared as a reactive property ` +
+                `but it does not have a getter. This will be an error in a ` +
+                `future version of Lit.`);
+        }
+        return {
+            get() {
+                return get?.call(this);
+            },
             set(value) {
-                const oldValue = this[name];
-                this[key] = value;
+                const oldValue = get?.call(this);
+                set.call(this, value);
                 this.requestUpdate(name, oldValue, options);
@@ -341,17 +347,22 @@ },
     static getPropertyOptions(name) {
-        return this.elementProperties.get(name) || defaultPropertyDeclaration;
+        return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
     }
     /**
-     * Creates property accessors for registered properties, sets up element
-     * styling, and ensures any superclasses are also finalized. Returns true if
-     * the element was finalized.
+     * Initializes static own properties of the class used in bookkeeping
+     * for element properties, initializers, etc.
+     *
+     * Can be called multiple times by code that needs to ensure these
+     * properties exist before using them.
+     *
+     * This method ensures the superclass is finalized so that inherited
+     * property metadata can be copied down.
      * @nocollapse
      */
-    static finalize() {
-        if (this.hasOwnProperty(finalized)) {
-            return false;
+    static __prepare() {
+        if (this.hasOwnProperty('elementProperties')) {
+            // Already prepared
+            return;
         }
-        this[finalized] = true;
-        // finalize any superclasses
-        const superCtor = Object.getPrototypeOf(this);
+        // Finalize any superclasses
+        const superCtor = getPrototypeOf(this);
         superCtor.finalize();
@@ -364,26 +375,62 @@ // Create own set of initializers for this class if any exist on the
         }
+        // Initialize elementProperties from the superclass
         this.elementProperties = new Map(superCtor.elementProperties);
-        // initialize Map populated in observedAttributes
-        this.__attributeToPropertyMap = new Map();
-        // make any properties
-        // Note, only process "own" properties since this element will inherit
-        // any properties defined on the superClass, and finalization ensures
-        // the entire prototype chain is finalized.
+    }
+    /**
+     * Finishes setting up the class so that it's ready to be registered
+     * as a custom element and instantiated.
+     *
+     * This method is called by the ReactiveElement.observedAttributes getter.
+     * If you override the observedAttributes getter, you must either call
+     * super.observedAttributes to trigger finalization, or call finalize()
+     * yourself.
+     *
+     * @nocollapse
+     */
+    static finalize() {
+        if (this.hasOwnProperty(finalized)) {
+            return;
+        }
+        this[finalized] = true;
+        this.__prepare();
+        // Create properties from the static properties block:
         if (this.hasOwnProperty(JSCompiler_renameProperty('properties', this))) {
             const props = this.properties;
-            // support symbols in properties (IE11 does not support this)
             const propKeys = [
-                ...Object.getOwnPropertyNames(props),
-                ...Object.getOwnPropertySymbols(props),
+                ...getOwnPropertyNames(props),
+                ...getOwnPropertySymbols(props),
             ];
-            // This for/of is ok because propKeys is an array
             for (const p of propKeys) {
-                // note, use of `any` is due to TypeScript lack of support for symbol in
-                // index types
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.createProperty(p, props[p]);
             }
         }
+        // Create properties from standard decorator metadata:
+        const metadata = this[Symbol.metadata];
+        if (metadata !== null) {
+            const properties = litPropertyMetadata.get(metadata);
+            if (properties !== undefined) {
+                for (const [p, options] of properties) {
+                    this.elementProperties.set(p, options);
+                }
+            }
+        }
+        // Create the attribute-to-property map
+        this.__attributeToPropertyMap = new Map();
+        for (const [p, options] of this.elementProperties) {
+            const attr = this.__attributeNameForProperty(p, options);
+            if (attr !== undefined) {
+                this.__attributeToPropertyMap.set(attr, p);
+            }
+        }
         this.elementStyles = this.finalizeStyles(this.styles);
-        return true;
+        if (DEV_MODE) {
+            if (this.hasOwnProperty('createProperty')) {
+                issueWarning('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
+                    'The override will not be called with standard decorators');
+            }
+            if (this.hasOwnProperty('getPropertyDescriptor')) {
+                issueWarning('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
+                    'The override will not be called with standard decorators');
+            }
+        }
     }
@@ -437,3 +484,3 @@ /**
         super();
-        this.__instanceProperties = new Map();
+        this.__instanceProperties = undefined;
         /**
@@ -455,3 +502,3 @@ * True if there is a pending update as a result of calling `requestUpdate()`.
         this.__reflectingProperty = null;
-        this._initialize();
+        this.__initialize();
     }
@@ -461,8 +508,8 @@ /**
      * are constructed.
-     *
-     * @internal
      */
-    _initialize() {
+    __initialize() {
         this.__updatePromise = new Promise((res) => (this.enableUpdating = res));
         this._$changedProperties = new Map();
+        // This enqueues a microtask that ust run before the first udpate, so it
+        // must be called before requestUpdate()
         this.__saveInstanceProperties();
@@ -515,2 +562,3 @@ // ensures first update will be caught by an early access of
     __saveInstanceProperties() {
+        const instanceProperties = new Map();
         const elementProperties = this.constructor
@@ -520,6 +568,9 @@ .elementProperties;
             if (this.hasOwnProperty(p)) {
-                this.__instanceProperties.set(p, this[p]);
+                instanceProperties.set(p, this[p]);
                 delete this[p];
             }
         }
+        if (instanceProperties.size > 0) {
+            this.__instanceProperties = instanceProperties;
+        }
     }
@@ -585,3 +636,4 @@ /**
     }
-    __propertyToAttribute(name, value, options = defaultPropertyDeclaration) {
+    __propertyToAttribute(name, value) {
+        const options = this.constructor.elementProperties.get(name);
         const attr = this.constructor.__attributeNameForProperty(name, options);
@@ -595,3 +647,3 @@ if (attr !== undefined && options.reflect === true) {
             if (DEV_MODE &&
-                this.constructor.enabledWarnings.indexOf('migration') >= 0 &&
+                this.constructor.enabledWarnings.includes('migration') &&
                 attrValue === undefined) {
@@ -646,45 +698,18 @@ issueWarning('undefined-attribute-value', `The attribute value for the ${name} property is ` +
     }
-    /**
-     * Requests an update which is processed asynchronously. This should be called
-     * when an element should update based on some state not triggered by setting
-     * a reactive property. In this case, pass no arguments. It should also be
-     * called when manually implementing a property setter. In this case, pass the
-     * property `name` and `oldValue` to ensure that any configured property
-     * options are honored.
-     *
-     * @param name name of requesting property
-     * @param oldValue old value of requesting property
-     * @param options property options to use instead of the previously
-     *     configured options
-     * @category updates
-     */
-    requestUpdate(name, oldValue, options) {
-        let shouldRequestUpdate = true;
+    /* @internal */
+    requestUpdate(name, oldValue, options, initial = false, initialValue) {
         // If we have a property key, perform property update steps.
         if (name !== undefined) {
-            options =
-                options ||
-                    this.constructor.getPropertyOptions(name);
-            const hasChanged = options.hasChanged || notEqual;
-            if (hasChanged(this[name], oldValue)) {
-                if (!this._$changedProperties.has(name)) {
-                    this._$changedProperties.set(name, oldValue);
-                }
-                // Add to reflecting properties set.
-                // Note, it's important that every change has a chance to add the
-                // property to `_reflectingProperties`. This ensures setting
-                // attribute + property reflects correctly.
-                if (options.reflect === true && this.__reflectingProperty !== name) {
-                    if (this.__reflectingProperties === undefined) {
-                        this.__reflectingProperties = new Map();
-                    }
-                    this.__reflectingProperties.set(name, options);
-                }
+            options ??= this.constructor.getPropertyOptions(name);
+            const hasChanged = options.hasChanged ?? notEqual;
+            const newValue = initial ? initialValue : this[name];
+            if (hasChanged(newValue, oldValue)) {
+                this._$changeProperty(name, oldValue, options);
             }
             else {
                 // Abort the request if the property should not be considered changed.
-                shouldRequestUpdate = false;
+                return;
             }
         }
-        if (!this.isUpdatePending && shouldRequestUpdate) {
+        if (this.isUpdatePending === false) {
             this.__updatePromise = this.__enqueueUpdate();
@@ -694,2 +719,19 @@ }
     /**
+     * @internal
+     */
+    _$changeProperty(name, oldValue, options) {
+        // TODO (justinfagnani): Create a benchmark of Map.has() + Map.set(
+        // vs just Map.set()
+        if (!this._$changedProperties.has(name)) {
+            this._$changedProperties.set(name, oldValue);
+        }
+        // Add to reflecting properties set.
+        // Note, it's important that every change has a chance to add the
+        // property to `__reflectingProperties`. This ensures setting
+        // attribute + property reflects correctly.
+        if (options.reflect === true && this.__reflectingProperty !== name) {
+            (this.__reflectingProperties ??= new Set()).add(name);
+        }
+    }
+    /**
      * Sets up the element to asynchronously update.
@@ -738,3 +780,12 @@ */
     scheduleUpdate() {
-        return this.performUpdate();
+        const result = this.performUpdate();
+        if (DEV_MODE &&
+            this.constructor.enabledWarnings.includes('async-perform-update') &&
+            typeof result?.then ===
+                'function') {
+            issueWarning('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
+                `This behavior is deprecated and will be removed in a future ` +
+                `version of ReactiveElement.`);
+        }
+        return result;
     }
@@ -749,9 +800,2 @@ /**
      *
-     * Note: To ensure `performUpdate()` synchronously completes a pending update,
-     * it should not be overridden. In LitElement 2.x it was suggested to override
-     * `performUpdate()` to also customizing update scheduling. Instead, you should now
-     * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
-     * scheduling updates via `performUpdate()` continues to work, but will make
-     * also calling `performUpdate()` to synchronously process updates difficult.
-     *
      * @category updates
@@ -767,12 +811,10 @@ */
         debugLogEvent?.({ kind: 'update' });
-        // create renderRoot before first update.
         if (!this.hasUpdated) {
-            // Produce warning if any class properties are shadowed by class fields
             if (DEV_MODE) {
-                const shadowedProperties = [];
-                this.constructor.__reactivePropertyKeys?.forEach((p) => {
-                    if (this.hasOwnProperty(p) && !this.__instanceProperties?.has(p)) {
-                        shadowedProperties.push(p);
-                    }
-                });
+                // Produce warning if any reactive properties on the prototype are
+                // shadowed by class fields. Instance fields set before upgrade are
+                // deleted by this point, so any own property is caused by class field
+                // initialization in the constructor.
+                const ctor = this.constructor;
+                const shadowedProperties = [...ctor.elementProperties.keys()].filter((p) => this.hasOwnProperty(p) && p in getPrototypeOf(this));
                 if (shadowedProperties.length) {
@@ -788,10 +830,30 @@ throw new Error(`The following properties on element ${this.localName} will not ` +
             }
+            // Mixin instance properties once, if they exist.
+            if (this.__instanceProperties) {
+                // TODO (justinfagnani): should we use the stored value? Could a new value
+                // have been set since we stored the own property value?
+                for (const [p, value] of this.__instanceProperties) {
+                    this[p] = value;
+                }
+                this.__instanceProperties = undefined;
+            }
+            // Trigger initial value reflection and populate the initial
+            // changedProperties map, but only for the case of experimental
+            // decorators on accessors, which will not have already populated the
+            // changedProperties map. We can't know if these accessors had
+            // initializers, so we just set them anyway - a difference from
+            // experimental decorators on fields and standard decorators on
+            // auto-accessors.
+            const elementProperties = this.constructor
+                .elementProperties;
+            if (elementProperties.size > 0) {
+                for (const [p, options] of elementProperties) {
+                    if (options.wrapped === true &&
+                        !this._$changedProperties.has(p) &&
+                        this[p] !== undefined) {
+                        this._$changeProperty(p, this[p], options);
+                    }
+                }
+            }
         }
-        // Mixin instance properties once, if they exist.
-        // The forEach() expression will only run when when __instanceProperties is
-        // defined, and it returns undefined, setting __instanceProperties to
-        // undefined
-        this.__instanceProperties &&= this.__instanceProperties.forEach(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (v, p) => (this[p] = v));
         let shouldUpdate = false;
@@ -856,3 +918,3 @@ const changedProperties = this._$changedProperties;
             this.isUpdatePending &&
-            this.constructor.enabledWarnings.indexOf('change-in-update') >= 0) {
+            this.constructor.enabledWarnings.includes('change-in-update')) {
             issueWarning('change-in-update', `Element ${this.localName} scheduled an update ` +
@@ -938,3 +1000,3 @@ `(generally because a property was set) ` +
         // undefined
-        this.__reflectingProperties &&= this.__reflectingProperties.forEach((v, k) => this.__propertyToAttribute(k, this[k], v));
+        this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p]));
         this.__markUpdated();
@@ -973,3 +1035,5 @@ }
 /**
- * Marks class as having finished creating properties.
+ * Marks class as having been finalized, which includes creating properties
+ * from `static properties`, but does *not* include all properties created
+ * from decorators.
  */
@@ -1002,3 +1066,2 @@ ReactiveElement[_a] = true;
 ReactiveElement.shadowRootOptions = { mode: 'open' };
-export { ReactiveElement };
 // Apply polyfills if available
@@ -1009,3 +1072,6 @@ polyfillSupport?.({ ReactiveElement });
     // Default warning set.
-    ReactiveElement.enabledWarnings = ['change-in-update'];
+    ReactiveElement.enabledWarnings = [
+        'change-in-update',
+        'async-perform-update',
+    ];
     const ensureOwnWarnings = function (ctor) {
@@ -1018,3 +1084,3 @@ if (!ctor.hasOwnProperty(JSCompiler_renameProperty('enabledWarnings', ctor))) {
         ensureOwnWarnings(this);
-        if (this.enabledWarnings.indexOf(warning) < 0) {
+        if (!this.enabledWarnings.includes(warning)) {
             this.enabledWarnings.push(warning);
@@ -1033,3 +1099,3 @@ }
 // This line will be used in regexes to search for ReactiveElement usage.
-(global.reactiveElementVersions ??= []).push('2.0.0-pre.0');
+(global.reactiveElementVersions ??= []).push('2.0.0-pre.1');
 if (DEV_MODE && global.reactiveElementVersions.length > 1) {
@@ -1036,0 +1102,0 @@ issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +

node/decorators.js

@@ -1,2 +0,2 @@
-export{decorateProperty,legacyPrototypeMethod,standardPrototypeMethod}from"./decorators/base.js";export{customElement}from"./decorators/custom-element.js";export{property}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/event-options.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/query-all.js";export{queryAsync}from"./decorators/query-async.js";export{queryAssignedElements}from"./decorators/query-assigned-elements.js";export{queryAssignedNodes}from"./decorators/query-assigned-nodes.js";
+export{customElement}from"./decorators/custom-element.js";export{property,standardProperty}from"./decorators/property.js";export{state}from"./decorators/state.js";export{eventOptions}from"./decorators/event-options.js";export{query}from"./decorators/query.js";export{queryAll}from"./decorators/query-all.js";export{queryAsync}from"./decorators/query-async.js";export{queryAssignedElements}from"./decorators/query-assigned-elements.js";export{queryAssignedNodes}from"./decorators/query-assigned-nodes.js";
 //# sourceMappingURL=decorators.js.map

node/decorators/base.js

@@ -6,3 +6,3 @@ /**
  */
-const e=(e,t,o)=>{Object.defineProperty(t,o,e)},t=(e,t)=>({kind:"method",placement:"prototype",key:t.key,descriptor:e}),o=({finisher:e,descriptor:t})=>(o,n)=>{if(void 0===n){const n=o.originalKey??o.key,r=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(r.finisher=function(t){e(t,n)}),r}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),e?.(r,n)}};export{o as decorateProperty,e as legacyPrototypeMethod,t as standardPrototypeMethod};
+const e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};
 //# sourceMappingURL=base.js.map

node/decorators/custom-element.js

@@ -6,3 +6,3 @@ /**
  */
-const e=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return{kind:t,elements:s,finisher(n){customElements.define(e,n)}}})(e,n);export{e as customElement};
+const t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)};export{t as customElement};
 //# sourceMappingURL=custom-element.js.map

node/decorators/event-options.js

@@ -1,2 +0,1 @@
-import{decorateProperty as r}from"./base.js";
 /**
@@ -6,3 +5,4 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function e(e){return r({finisher:(r,t)=>{Object.assign(r.prototype[t],e)}})}export{e as eventOptions};
+ */
+function t(t){return(n,o)=>{const c="function"==typeof n?n:n[o];Object.assign(c,t)}}export{t as eventOptions};
 //# sourceMappingURL=event-options.js.map

node/decorators/property.js

@@ -0,1 +1,2 @@
+import{defaultConverter as t,notEqual as e}from"../reactive-element.js";
 /**
@@ -5,4 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */
-const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(n){n.createProperty(e.key,i)}},e=(i,e,n)=>{e.constructor.createProperty(n,i)};function n(n){return(t,o)=>void 0!==o?e(n,t,o):i(n,t)}export{n as property};
+ */const o={attribute:!0,type:String,converter:t,reflect:!1,hasChanged:e},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return{set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t)},init(e){return void 0!==e&&this.C(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t)}}throw Error("Unsupported decorator location: "+n)};function n(t){return(e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}export{n as property,r as standardProperty};
 //# sourceMappingURL=property.js.map

node/decorators/query-all.js

@@ -1,2 +0,2 @@
-import{decorateProperty as r}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,4 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function e(e){return r({descriptor:r=>({get(){return this.renderRoot?.querySelectorAll(e)??[]},enumerable:!0,configurable:!0})})}export{e as queryAll};
+ */
+let e;function r(r){return(n,o)=>t(n,o,{get(){return(this.renderRoot??(e??=document.createDocumentFragment())).querySelectorAll(r)}})}export{r as queryAll};
 //# sourceMappingURL=query-all.js.map

node/decorators/query-assigned-elements.js

@@ -1,2 +0,2 @@
-import{decorateProperty as e}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */const o=null!=globalThis.HTMLSlotElement?.prototype.assignedElements?(e,o)=>e.assignedElements(o):(e,o)=>e.assignedNodes(o).filter((e=>e.nodeType===Node.ELEMENT_NODE));function t(t){const{slot:n,selector:r}=t??{};return e({descriptor:e=>({get(){const e="slot"+(n?`[name=${n}]`:":not([name])"),l=this.renderRoot?.querySelector(e),s=null!=l?o(l,t):[];return r?s.filter((e=>e.matches(r))):s},enumerable:!0,configurable:!0})})}export{t as queryAssignedElements};
+ */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}export{o as queryAssignedElements};
 //# sourceMappingURL=query-assigned-elements.js.map

node/decorators/query-assigned-nodes.js

@@ -1,2 +0,2 @@
-import{decorateProperty as e}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function t(t){const n=t?.slot,r=t;return e({descriptor:e=>({get(){const e="slot"+(n?`[name=${n}]`:":not([name])"),t=this.renderRoot?.querySelector(e);return t?.assignedNodes(r)??[]},enumerable:!0,configurable:!0})})}export{t as queryAssignedNodes};
+ */function n(n){return(o,r)=>{const{slot:e}=n??{},s="slot"+(e?`[name=${e}]`:":not([name])");return t(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}}export{n as queryAssignedNodes};
 //# sourceMappingURL=query-assigned-nodes.js.map

node/decorators/query-async.js

@@ -1,2 +0,2 @@
-import{decorateProperty as r}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -7,3 +7,3 @@ * @license
  */
-function e(e){return r({descriptor:r=>({async get(){return await this.updateComplete,this.renderRoot?.querySelector(e)},enumerable:!0,configurable:!0})})}export{e as queryAsync};
+function r(r){return(n,e)=>t(n,e,{async get(){return await this.updateComplete,this.renderRoot?.querySelector(r)??null}})}export{r as queryAsync};
 //# sourceMappingURL=query-async.js.map

node/decorators/query.js

@@ -1,2 +0,2 @@
-import{decorateProperty as t}from"./base.js";
+import{desc as t}from"./base.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function r(r,n){return t({descriptor:t=>{const e={get(){return this.renderRoot?.querySelector(r)??null},enumerable:!0,configurable:!0};if(n){const t=Symbol();e.get=function(){return void 0===this[t]&&(this[t]=this.renderRoot?.querySelector(r)??null),this[t]}}return e}})}export{r as query};
+ */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:u}="object"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){if(r){let t=e.call(this);return void 0===t&&(t=o(this),u.call(this,t)),t}return o(this)}})}return t(n,s,{get(){return o(this)}})}}export{e as query};
 //# sourceMappingURL=query.js.map

node/decorators/state.js

@@ -1,2 +0,2 @@
-import{property as r}from"./property.js";
+import{property as t}from"./property.js";
 /**
@@ -6,3 +6,3 @@ * @license
  * SPDX-License-Identifier: BSD-3-Clause
- */function t(t){return r({...t,state:!0})}export{t as state};
+ */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};
 //# sourceMappingURL=state.js.map

node/development/decorators.js

@@ -1,4 +0,3 @@
-export { decorateProperty, legacyPrototypeMethod, standardPrototypeMethod } from './decorators/base.js';
 export { customElement } from './decorators/custom-element.js';
-export { property } from './decorators/property.js';
+export { property, standardProperty } from './decorators/property.js';
 export { state } from './decorators/state.js';
@@ -5,0 +4,0 @@ export { eventOptions } from './decorators/event-options.js';

node/development/decorators/base.js

@@ -6,63 +6,30 @@ /**
  */
-const legacyPrototypeMethod = (descriptor, proto, name) => {
-    Object.defineProperty(proto, name, descriptor);
-};
-const standardPrototypeMethod = (descriptor, element) => ({
-    kind: 'method',
-    placement: 'prototype',
-    key: element.key,
-    descriptor,
-});
 /**
- * Helper for decorating a property that is compatible with both TypeScript
- * and Babel decorators. The optional `finisher` can be used to perform work on
- * the class. The optional `descriptor` should return a PropertyDescriptor
- * to install for the given property.
+ * Wraps up a few best practices when returning a property descriptor from a
+ * decorator.
  *
- * @param finisher {function} Optional finisher method; receives the element
- * constructor and property key as arguments and has no return value.
- * @param descriptor {function} Optional descriptor method; receives the
- * property key as an argument and returns a property descriptor to define for
- * the given property.
- * @returns {ClassElement|void}
+ * Marks the defined property as configurable, and enumerable, and handles
+ * the case where we have a busted Reflect.decorate zombiefill (e.g. in Angular
+ * apps).
+ *
+ * @internal
  */
-const decorateProperty = ({ finisher, descriptor, }) => (protoOrDescriptor, name
-// Note TypeScript requires the return type to be `void|any`
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-) => {
-    // TypeScript / Babel legacy mode
-    if (name !== undefined) {
-        const ctor = protoOrDescriptor
-            .constructor;
-        if (descriptor !== undefined) {
-            Object.defineProperty(protoOrDescriptor, name, descriptor(name));
-        }
-        finisher?.(ctor, name);
-        // Babel standard mode
+const desc = (obj, name, descriptor) => {
+    // For backwards compatibility, we keep them configurable and enumerable.
+    descriptor.configurable = true;
+    descriptor.enumerable = true;
+    if (
+    // We check for Reflect.decorate each time, in case the zombiefill
+    // is applied via lazy loading some Angular code.
+    Reflect.decorate &&
+        typeof name !== 'object') {
+        // If we're called as a legacy decorator, and Reflect.decorate is present
+        // then we have no guarantees that the returned descriptor will be
+        // defined on the class, so we must apply it directly ourselves.
+        Object.defineProperty(obj, name, descriptor);
     }
-    else {
-        // Note, the @property decorator saves `key` as `originalKey`
-        // so try to use it here.
-        const key = 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        protoOrDescriptor.originalKey ??
-            protoOrDescriptor.key;
-        const info = descriptor != undefined
-            ? {
-                kind: 'method',
-                placement: 'prototype',
-                key,
-                descriptor: descriptor(protoOrDescriptor.key),
-            }
-            : { ...protoOrDescriptor, key };
-        if (finisher != undefined) {
-            info.finisher = function (ctor) {
-                finisher(ctor, key);
-            };
-        }
-        return info;
-    }
+    return descriptor;
 };
 
-export { decorateProperty, legacyPrototypeMethod, standardPrototypeMethod };
+export { desc };
 //# sourceMappingURL=base.js.map

node/development/decorators/custom-element.js

@@ -6,23 +6,2 @@ /**
  */
-const legacyCustomElement = (tagName, clazz) => {
-    customElements.define(tagName, clazz);
-    // Cast as any because TS doesn't recognize the return type as being a
-    // subtype of the decorated class when clazz is typed as
-    // `Constructor<HTMLElement>` for some reason.
-    // `Constructor<HTMLElement>` is helpful to make sure the decorator is
-    // applied to elements however.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return clazz;
-};
-const standardCustomElement = (tagName, descriptor) => {
-    const { kind, elements } = descriptor;
-    return {
-        kind,
-        elements,
-        // This callback is called once the class is otherwise fully defined
-        finisher(clazz) {
-            customElements.define(tagName, clazz);
-        },
-    };
-};
 /**
@@ -42,7 +21,14 @@ * Class decorator factory that defines the decorated class as a custom element.
  */
-const customElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
-    ? legacyCustomElement(tagName, classOrDescriptor)
-    : standardCustomElement(tagName, classOrDescriptor);
+const customElement = (tagName) => (classOrTarget, context) => {
+    if (context !== undefined) {
+        context.addInitializer(() => {
+            customElements.define(tagName, classOrTarget);
+        });
+    }
+    else {
+        customElements.define(tagName, classOrTarget);
+    }
+};
 
 export { customElement };
 //# sourceMappingURL=custom-element.js.map

node/development/decorators/event-options.js

@@ -1,3 +0,1 @@
-import { decorateProperty } from './base.js';
-
 /**
@@ -39,8 +37,8 @@ * @license
 function eventOptions(options) {
-    return decorateProperty({
-        finisher: (ctor, name) => {
-            Object.assign(
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ctor.prototype[name], options);
-        },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return ((protoOrValue, nameOrContext) => {
+        const method = typeof protoOrValue === 'function'
+            ? protoOrValue
+            : protoOrValue[nameOrContext];
+        Object.assign(method, options);
     });
@@ -47,0 +45,0 @@ }

node/development/decorators/property.js

@@ -0,1 +1,3 @@
+import { defaultConverter, notEqual } from '../reactive-element.js';
+
 /**
@@ -6,53 +8,88 @@ * @license
  */
-const standardProperty = (options, element) => {
-    // When decorating an accessor, pass it through and add property metadata.
-    // Note, the `hasOwnProperty` check in `createProperty` ensures we don't
-    // stomp over the user's accessor.
-    if (element.kind === 'method' &&
-        element.descriptor &&
-        !('value' in element.descriptor)) {
+let issueWarning;
+{
+    // Ensure warnings are issued only 1x, even if multiple versions of Lit
+    // are loaded.
+    const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
+    // Issue a warning, if we haven't already.
+    issueWarning = (code, warning) => {
+        warning += ` See https://lit.dev/msg/${code} for more information.`;
+        if (!issuedWarnings.has(warning)) {
+            console.warn(warning);
+            issuedWarnings.add(warning);
+        }
+    };
+}
+const legacyProperty = (options, proto, name) => {
+    const hasOwnProperty = proto.hasOwnProperty(name);
+    proto.constructor.createProperty(name, hasOwnProperty ? { ...options, wrapped: true } : options);
+    // For accessors (which have a descriptor on the prototype) we need to
+    // return a descriptor, otherwise TypeScript overwrites the descriptor we
+    // define in createProperty() with the original descriptor. We don't do this
+    // for fields, which don't have a descriptor, because this could overwrite
+    // descriptor defined by other decorators.
+    return hasOwnProperty
+        ? Object.getOwnPropertyDescriptor(proto, name)
+        : undefined;
+};
+// This is duplicated from a similar variable in reactive-element.ts, but
+// actually makes sense to have this default defined with the decorator, so
+// that different decorators could have different defaults.
+const defaultPropertyDeclaration = {
+    attribute: true,
+    type: String,
+    converter: defaultConverter,
+    reflect: false,
+    hasChanged: notEqual,
+};
+/**
+ * Wraps a class accessor or setter so that `requestUpdate()` is called with the
+ * property name and old value when the accessor is set.
+ */
+const standardProperty = (options = defaultPropertyDeclaration, target, context) => {
+    const { kind, metadata } = context;
+    if (metadata == null) {
+        issueWarning('missing-class-metadata', `The class ${target} is missing decorator metadata. This ` +
+            `could mean that you're using a compiler that supports decorators ` +
+            `but doesn't support decorator metadata, such as TypeScript 5.1. ` +
+            `Please update your compiler.`);
+    }
+    // Store the property options
+    let properties = globalThis.litPropertyMetadata.get(metadata);
+    if (properties === undefined) {
+        globalThis.litPropertyMetadata.set(metadata, (properties = new Map()));
+    }
+    properties.set(context.name, options);
+    if (kind === 'accessor') {
+        // Standard decorators cannot dynamically modify the class, so we can't
+        // replace a field with accessors. The user must use the new `accessor`
+        // keyword instead.
+        const { name } = context;
         return {
-            ...element,
-            finisher(clazz) {
-                clazz.createProperty(element.key, options);
+            set(v) {
+                const oldValue = target.get.call(this);
+                target.set.call(this, v);
+                this.requestUpdate(name, oldValue, options);
             },
-        };
-    }
-    else {
-        // createProperty() takes care of defining the property, but we still
-        // must return some kind of descriptor, so return a descriptor for an
-        // unused prototype field. The finisher calls createProperty().
-        return {
-            kind: 'field',
-            key: Symbol(),
-            placement: 'own',
-            descriptor: {},
-            // store the original key so subsequent decorators have access to it.
-            originalKey: element.key,
-            // When @babel/plugin-proposal-decorators implements initializers,
-            // do this instead of the initializer below. See:
-            // https://github.com/babel/babel/issues/9260 extras: [
-            //   {
-            //     kind: 'initializer',
-            //     placement: 'own',
-            //     initializer: descriptor.initializer,
-            //   }
-            // ],
-            initializer() {
-                if (typeof element.initializer === 'function') {
-                    this[element.key] = element.initializer.call(this);
+            init(v) {
+                if (v !== undefined) {
+                    this._$changeProperty(name, undefined, options);
                 }
+                return v;
             },
-            finisher(clazz) {
-                clazz.createProperty(element.key, options);
-            },
         };
     }
+    else if (kind === 'setter') {
+        const { name } = context;
+        return function (value) {
+            const oldValue = this[name];
+            target.call(this, value);
+            this.requestUpdate(name, oldValue, options);
+        };
+    }
+    throw new Error(`Unsupported decorator location: ${kind}`);
 };
-const legacyProperty = (options, proto, name) => {
-    proto.constructor.createProperty(name, options);
-};
 /**
- * A property decorator which creates a reactive property that reflects a
- * corresponding attribute value. When a decorated property is set
+ * A class field or accessor decorator which creates a reactive property that
+ * reflects a corresponding attribute value. When a decorated property is set
  * the element will update and render. A {@linkcode PropertyDeclaration} may
@@ -88,9 +125,12 @@ * optionally be supplied to configure property features.
 function property(options) {
+    return (protoOrTarget, nameOrContext
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (protoOrDescriptor, name) => name !== undefined
-        ? legacyProperty(options, protoOrDescriptor, name)
-        : standardProperty(options, protoOrDescriptor);
+    ) => {
+        return (typeof nameOrContext === 'object'
+            ? standardProperty(options, protoOrTarget, nameOrContext)
+            : legacyProperty(options, protoOrTarget, nameOrContext));
+    };
 }
 
-export { property };
+export { property, standardProperty };
 //# sourceMappingURL=property.js.map

node/development/decorators/query-all.js

@@ -1,2 +0,2 @@
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 
@@ -8,2 +8,5 @@ /**
  */
+// Shared fragment used to generate empty NodeLists when a render root is
+// undefined
+let fragment;
 /**
@@ -34,10 +37,9 @@ * A property decorator that converts a class property into a getter
 function queryAll(selector) {
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        return desc(obj, name, {
             get() {
-                return this.renderRoot?.querySelectorAll(selector) ?? [];
+                const container = this.renderRoot ?? (fragment ??= document.createDocumentFragment());
+                return container.querySelectorAll(selector);
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
@@ -44,0 +46,0 @@ }

node/development/decorators/query-assigned-elements.js

@@ -1,2 +0,2 @@
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 
@@ -9,10 +9,2 @@ /**
 /**
- * A tiny module scoped polyfill for HTMLSlotElement.assignedElements.
- */
-const slotAssignedElements = globalThis.HTMLSlotElement?.prototype.assignedElements != null
-    ? (slot, opts) => slot.assignedElements(opts)
-    : (slot, opts) => slot
-        .assignedNodes(opts)
-        .filter((node) => node.nodeType === Node.ELEMENT_NODE);
-/**
  * A property decorator that converts a class property into a getter that
@@ -47,17 +39,14 @@ * returns the `assignedElements` of the given `slot`. Provides a declarative
 function queryAssignedElements(options) {
-    const { slot, selector } = options ?? {};
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        const { slot, selector } = options ?? {};
+        const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
+        return desc(obj, name, {
             get() {
-                const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
                 const slotEl = this.renderRoot?.querySelector(slotSelector);
-                const elements = slotEl != null ? slotAssignedElements(slotEl, options) : [];
-                if (selector) {
-                    return elements.filter((node) => node.matches(selector));
-                }
-                return elements;
+                const elements = slotEl?.assignedElements(options) ?? [];
+                return (selector === undefined
+                    ? elements
+                    : elements.filter((node) => node.matches(selector)));
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
@@ -64,0 +53,0 @@ }

node/development/decorators/query-assigned-nodes.js

@@ -1,2 +0,2 @@
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 
@@ -35,14 +35,12 @@ /**
 function queryAssignedNodes(options) {
-    const slot = options?.slot;
-    const assignedNodesOptions = options;
-    return decorateProperty({
-        descriptor: (_name) => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return ((obj, name) => {
+        const { slot } = options ?? {};
+        const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
+        return desc(obj, name, {
             get() {
-                const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
                 const slotEl = this.renderRoot?.querySelector(slotSelector);
-                return slotEl?.assignedNodes(assignedNodesOptions) ?? [];
+                return (slotEl?.assignedNodes(options) ?? []);
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
@@ -49,0 +47,0 @@ }

node/development/decorators/query-async.js

@@ -1,2 +0,2 @@
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 
@@ -46,11 +46,9 @@ /**
 function queryAsync(selector) {
-    return decorateProperty({
-        descriptor: (_name) => ({
+    return ((obj, name) => {
+        return desc(obj, name, {
             async get() {
                 await this.updateComplete;
-                return this.renderRoot?.querySelector(selector);
+                return this.renderRoot?.querySelector(selector) ?? null;
             },
-            enumerable: true,
-            configurable: true,
-        }),
+        });
     });
@@ -57,0 +55,0 @@ }

node/development/decorators/query.js

@@ -1,2 +0,2 @@
-import { decorateProperty } from './base.js';
+import { desc } from './base.js';
 
@@ -34,25 +34,54 @@ /**
 function query(selector, cache) {
-    return decorateProperty({
-        descriptor: (name) => {
-            const descriptor = {
+    return ((protoOrTarget, nameOrContext, descriptor) => {
+        const doQuery = (el) => {
+            // TODO: if we want to allow users to assert that the query will never
+            // return null, we need a new option and to throw here if the result
+            // is null.
+            return (el.renderRoot?.querySelector(selector) ?? null);
+        };
+        if (cache) {
+            // Accessors to wrap from either:
+            //   1. The decorator target, in the case of standard decorators
+            //   2. The property descriptor, in the case of experimental decorators
+            //      on auto-accessors.
+            //   3. Functions that access our own cache-key property on the instance,
+            //      in the case of experimental decorators on fields.
+            const { get, set } = typeof nameOrContext === 'object'
+                ? protoOrTarget
+                : descriptor ??
+                    (() => {
+                        const key = Symbol(`${String(nameOrContext)} (@query() cache)`)
+                            ;
+                        return {
+                            get() {
+                                return this[key];
+                            },
+                            set(v) {
+                                this[key] = v;
+                            },
+                        };
+                    })();
+            return desc(protoOrTarget, nameOrContext, {
                 get() {
-                    return this.renderRoot?.querySelector(selector) ?? null;
+                    if (cache) {
+                        let result = get.call(this);
+                        if (result === undefined) {
+                            result = doQuery(this);
+                            set.call(this, result);
+                        }
+                        return result;
+                    }
+                    return doQuery(this);
                 },
-                enumerable: true,
-                configurable: true,
-            };
-            if (cache) {
-                const key = Symbol(`${String(name)} (@query() cache)`)
-                    ;
-                descriptor.get = function () {
-                    if (this[key] ===
-                        undefined) {
-                        this[key] =
-                            this.renderRoot?.querySelector(selector) ?? null;
-                    }
-                    return this[key];
-                };
-            }
-            return descriptor;
-        },
+            });
+        }
+        else {
+            // This object works as the return type for both standard and
+            // experimental decorators.
+            return desc(protoOrTarget, nameOrContext, {
+                get() {
+                    return doQuery(this);
+                },
+            });
+        }
     });
@@ -59,0 +88,0 @@ }

node/development/decorators/state.js

@@ -21,3 +21,7 @@ import { property } from './property.js';
         ...options,
+        // Add both `state` and `attribute` because we found a third party
+        // controller that is keying off of PropertyOptions.state to determine
+        // whether a field is a private internal property or not.
         state: true,
+        attribute: false,
     });
@@ -24,0 +28,0 @@ }

node/development/reactive-element.js

@@ -11,2 +11,4 @@ import { customElements, HTMLElement } from '@lit-labs/ssr-dom-shim';
 var _a;
+// TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
+const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
 // Lets a minifier replace globalThis references with a minified name
@@ -118,6 +120,3 @@ const global = globalThis;
  */
-const notEqual = (value, old) => {
-    // This ensures (old==NaN, value==NaN) always returns false
-    return old !== value && (old === old || value === value);
-};
+const notEqual = (value, old) => !is(value, old);
 const defaultPropertyDeclaration = {
@@ -137,6 +136,13 @@ attribute: true,
 const finalized = 'finalized';
+// Ensure metadata is enabled. TypeScript does not polyfill
+// Symbol.metadata, so we must ensure that it exists.
+Symbol.metadata ??= Symbol('metadata');
+// Map from a class's metadata object to property options
+// Note that we must use nullish-coalescing assignment so that we only use one
+// map even if we load multiple version of this module.
+global.litPropertyMetadata ??= new WeakMap();
 /**
  * Base element class which manages element properties and attributes. When
  * properties change, the `update` method is asynchronously called. This method
- * should be supplied by subclassers to render updates as desired.
+ * should be supplied by subclasses to render updates as desired.
  * @noInheritDoc
@@ -188,3 +194,3 @@ */
     static addInitializer(initializer) {
-        this.finalize();
+        this.__prepare();
         (this._initializers ??= []).push(initializer);
@@ -198,13 +204,9 @@ }
     static get observedAttributes() {
-        // note: piggy backing on this to ensure we're finalized.
+        // Ensure we've created all properties
         this.finalize();
-        const attributes = [];
-        for (const [p, v] of this.elementProperties) {
-            const attr = this.__attributeNameForProperty(p, v);
-            if (attr !== undefined) {
-                this.__attributeToPropertyMap.set(attr, p);
-                attributes.push(attr);
-            }
-        }
-        return attributes;
+        // this.__attributeToPropertyMap is only undefined after finalize() in
+        // ReactiveElement itself. ReactiveElement.observedAttributes is only
+        // accessed with ReactiveElement as the receiver when a subclass or mixin
+        // calls super.observedAttributes
+        return (this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()]);
     }
@@ -243,12 +245,5 @@ /**
         }
-        // Note, since this can be called by the `@property` decorator which
-        // is called before `finalize`, we ensure finalization has been kicked off.
-        this.finalize();
+        this.__prepare();
         this.elementProperties.set(name, options);
-        // Do not generate an accessor if the prototype already has one, since
-        // it would be lost otherwise and that would never be the user's intention;
-        // Instead, we expect users to call `requestUpdate` themselves from
-        // user-defined accessors. Note that if the super has an accessor we will
-        // still overwrite it
-        if (!options.noAccessor && !this.prototype.hasOwnProperty(name)) {
+        if (!options.noAccessor) {
             const key = // Use Symbol.for in dev mode to make it easier to maintain state
@@ -260,11 +255,3 @@ // when doing HMR.
             if (descriptor !== undefined) {
-                Object.defineProperty(this.prototype, name, descriptor);
-                {
-                    // If this class doesn't have its own set, create one and initialize
-                    // with the values in the set from the nearest ancestor class, if any.
-                    if (!this.hasOwnProperty('__reactivePropertyKeys')) {
-                        this.__reactivePropertyKeys = new Set(this.__reactivePropertyKeys ?? []);
-                    }
-                    this.__reactivePropertyKeys.add(name);
-                }
+                defineProperty(this.prototype, name, descriptor);
             }
@@ -301,10 +288,29 @@ }
     static getPropertyDescriptor(name, key, options) {
-        return {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? {
             get() {
                 return this[key];
             },
+            set(v) {
+                this[key] = v;
+            },
+        };
+        if (get == null) {
+            if ('value' in (getOwnPropertyDescriptor(this.prototype, name) ?? {})) {
+                throw new Error(`Field ${JSON.stringify(String(name))} on ` +
+                    `${this.name} was declared as a reactive property ` +
+                    `but it's actually declared as a value on the prototype. ` +
+                    `Usually this is due to using @property or @state on a method.`);
+            }
+            issueWarning('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
+                `${this.name} was declared as a reactive property ` +
+                `but it does not have a getter. This will be an error in a ` +
+                `future version of Lit.`);
+        }
+        return {
+            get() {
+                return get?.call(this);
+            },
             set(value) {
-                const oldValue = this[name];
-                this[key] = value;
+                const oldValue = get?.call(this);
+                set.call(this, value);
                 this.requestUpdate(name, oldValue, options);
@@ -331,17 +337,22 @@ },
     static getPropertyOptions(name) {
-        return this.elementProperties.get(name) || defaultPropertyDeclaration;
+        return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
     }
     /**
-     * Creates property accessors for registered properties, sets up element
-     * styling, and ensures any superclasses are also finalized. Returns true if
-     * the element was finalized.
+     * Initializes static own properties of the class used in bookkeeping
+     * for element properties, initializers, etc.
+     *
+     * Can be called multiple times by code that needs to ensure these
+     * properties exist before using them.
+     *
+     * This method ensures the superclass is finalized so that inherited
+     * property metadata can be copied down.
      * @nocollapse
      */
-    static finalize() {
-        if (this.hasOwnProperty(finalized)) {
-            return false;
+    static __prepare() {
+        if (this.hasOwnProperty('elementProperties')) {
+            // Already prepared
+            return;
         }
-        this[finalized] = true;
-        // finalize any superclasses
-        const superCtor = Object.getPrototypeOf(this);
+        // Finalize any superclasses
+        const superCtor = getPrototypeOf(this);
         superCtor.finalize();
@@ -354,26 +365,62 @@ // Create own set of initializers for this class if any exist on the
         }
+        // Initialize elementProperties from the superclass
         this.elementProperties = new Map(superCtor.elementProperties);
-        // initialize Map populated in observedAttributes
-        this.__attributeToPropertyMap = new Map();
-        // make any properties
-        // Note, only process "own" properties since this element will inherit
-        // any properties defined on the superClass, and finalization ensures
-        // the entire prototype chain is finalized.
+    }
+    /**
+     * Finishes setting up the class so that it's ready to be registered
+     * as a custom element and instantiated.
+     *
+     * This method is called by the ReactiveElement.observedAttributes getter.
+     * If you override the observedAttributes getter, you must either call
+     * super.observedAttributes to trigger finalization, or call finalize()
+     * yourself.
+     *
+     * @nocollapse
+     */
+    static finalize() {
+        if (this.hasOwnProperty(finalized)) {
+            return;
+        }
+        this[finalized] = true;
+        this.__prepare();
+        // Create properties from the static properties block:
         if (this.hasOwnProperty(JSCompiler_renameProperty('properties'))) {
             const props = this.properties;
-            // support symbols in properties (IE11 does not support this)
             const propKeys = [
-                ...Object.getOwnPropertyNames(props),
-                ...Object.getOwnPropertySymbols(props),
+                ...getOwnPropertyNames(props),
+                ...getOwnPropertySymbols(props),
             ];
-            // This for/of is ok because propKeys is an array
             for (const p of propKeys) {
-                // note, use of `any` is due to TypeScript lack of support for symbol in
-                // index types
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.createProperty(p, props[p]);
             }
         }
+        // Create properties from standard decorator metadata:
+        const metadata = this[Symbol.metadata];
+        if (metadata !== null) {
+            const properties = litPropertyMetadata.get(metadata);
+            if (properties !== undefined) {
+                for (const [p, options] of properties) {
+                    this.elementProperties.set(p, options);
+                }
+            }
+        }
+        // Create the attribute-to-property map
+        this.__attributeToPropertyMap = new Map();
+        for (const [p, options] of this.elementProperties) {
+            const attr = this.__attributeNameForProperty(p, options);
+            if (attr !== undefined) {
+                this.__attributeToPropertyMap.set(attr, p);
+            }
+        }
         this.elementStyles = this.finalizeStyles(this.styles);
-        return true;
+        {
+            if (this.hasOwnProperty('createProperty')) {
+                issueWarning('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
+                    'The override will not be called with standard decorators');
+            }
+            if (this.hasOwnProperty('getPropertyDescriptor')) {
+                issueWarning('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
+                    'The override will not be called with standard decorators');
+            }
+        }
     }
@@ -427,3 +474,3 @@ /**
         super();
-        this.__instanceProperties = new Map();
+        this.__instanceProperties = undefined;
         /**
@@ -445,3 +492,3 @@ * True if there is a pending update as a result of calling `requestUpdate()`.
         this.__reflectingProperty = null;
-        this._initialize();
+        this.__initialize();
     }
@@ -451,8 +498,8 @@ /**
      * are constructed.
-     *
-     * @internal
      */
-    _initialize() {
+    __initialize() {
         this.__updatePromise = new Promise((res) => (this.enableUpdating = res));
         this._$changedProperties = new Map();
+        // This enqueues a microtask that ust run before the first udpate, so it
+        // must be called before requestUpdate()
         this.__saveInstanceProperties();
@@ -505,2 +552,3 @@ // ensures first update will be caught by an early access of
     __saveInstanceProperties() {
+        const instanceProperties = new Map();
         const elementProperties = this.constructor
@@ -510,6 +558,9 @@ .elementProperties;
             if (this.hasOwnProperty(p)) {
-                this.__instanceProperties.set(p, this[p]);
+                instanceProperties.set(p, this[p]);
                 delete this[p];
             }
         }
+        if (instanceProperties.size > 0) {
+            this.__instanceProperties = instanceProperties;
+        }
     }
@@ -575,3 +626,4 @@ /**
     }
-    __propertyToAttribute(name, value, options = defaultPropertyDeclaration) {
+    __propertyToAttribute(name, value) {
+        const options = this.constructor.elementProperties.get(name);
         const attr = this.constructor.__attributeNameForProperty(name, options);
@@ -584,3 +636,3 @@ if (attr !== undefined && options.reflect === true) {
             const attrValue = converter.toAttribute(value, options.type);
-            if (this.constructor.enabledWarnings.indexOf('migration') >= 0 &&
+            if (this.constructor.enabledWarnings.includes('migration') &&
                 attrValue === undefined) {
@@ -635,45 +687,18 @@ issueWarning('undefined-attribute-value', `The attribute value for the ${name} property is ` +
     }
-    /**
-     * Requests an update which is processed asynchronously. This should be called
-     * when an element should update based on some state not triggered by setting
-     * a reactive property. In this case, pass no arguments. It should also be
-     * called when manually implementing a property setter. In this case, pass the
-     * property `name` and `oldValue` to ensure that any configured property
-     * options are honored.
-     *
-     * @param name name of requesting property
-     * @param oldValue old value of requesting property
-     * @param options property options to use instead of the previously
-     *     configured options
-     * @category updates
-     */
-    requestUpdate(name, oldValue, options) {
-        let shouldRequestUpdate = true;
+    /* @internal */
+    requestUpdate(name, oldValue, options, initial = false, initialValue) {
         // If we have a property key, perform property update steps.
         if (name !== undefined) {
-            options =
-                options ||
-                    this.constructor.getPropertyOptions(name);
-            const hasChanged = options.hasChanged || notEqual;
-            if (hasChanged(this[name], oldValue)) {
-                if (!this._$changedProperties.has(name)) {
-                    this._$changedProperties.set(name, oldValue);
-                }
-                // Add to reflecting properties set.
-                // Note, it's important that every change has a chance to add the
-                // property to `_reflectingProperties`. This ensures setting
-                // attribute + property reflects correctly.
-                if (options.reflect === true && this.__reflectingProperty !== name) {
-                    if (this.__reflectingProperties === undefined) {
-                        this.__reflectingProperties = new Map();
-                    }
-                    this.__reflectingProperties.set(name, options);
-                }
+            options ??= this.constructor.getPropertyOptions(name);
+            const hasChanged = options.hasChanged ?? notEqual;
+            const newValue = initial ? initialValue : this[name];
+            if (hasChanged(newValue, oldValue)) {
+                this._$changeProperty(name, oldValue, options);
             }
             else {
                 // Abort the request if the property should not be considered changed.
-                shouldRequestUpdate = false;
+                return;
             }
         }
-        if (!this.isUpdatePending && shouldRequestUpdate) {
+        if (this.isUpdatePending === false) {
             this.__updatePromise = this.__enqueueUpdate();
@@ -683,2 +708,19 @@ }
     /**
+     * @internal
+     */
+    _$changeProperty(name, oldValue, options) {
+        // TODO (justinfagnani): Create a benchmark of Map.has() + Map.set(
+        // vs just Map.set()
+        if (!this._$changedProperties.has(name)) {
+            this._$changedProperties.set(name, oldValue);
+        }
+        // Add to reflecting properties set.
+        // Note, it's important that every change has a chance to add the
+        // property to `__reflectingProperties`. This ensures setting
+        // attribute + property reflects correctly.
+        if (options.reflect === true && this.__reflectingProperty !== name) {
+            (this.__reflectingProperties ??= new Set()).add(name);
+        }
+    }
+    /**
      * Sets up the element to asynchronously update.
@@ -727,3 +769,11 @@ */
     scheduleUpdate() {
-        return this.performUpdate();
+        const result = this.performUpdate();
+        if (this.constructor.enabledWarnings.includes('async-perform-update') &&
+            typeof result?.then ===
+                'function') {
+            issueWarning('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
+                `This behavior is deprecated and will be removed in a future ` +
+                `version of ReactiveElement.`);
+        }
+        return result;
     }
@@ -738,9 +788,2 @@ /**
      *
-     * Note: To ensure `performUpdate()` synchronously completes a pending update,
-     * it should not be overridden. In LitElement 2.x it was suggested to override
-     * `performUpdate()` to also customizing update scheduling. Instead, you should now
-     * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
-     * scheduling updates via `performUpdate()` continues to work, but will make
-     * also calling `performUpdate()` to synchronously process updates difficult.
-     *
      * @category updates
@@ -756,12 +799,10 @@ */
         debugLogEvent?.({ kind: 'update' });
-        // create renderRoot before first update.
         if (!this.hasUpdated) {
-            // Produce warning if any class properties are shadowed by class fields
             {
-                const shadowedProperties = [];
-                this.constructor.__reactivePropertyKeys?.forEach((p) => {
-                    if (this.hasOwnProperty(p) && !this.__instanceProperties?.has(p)) {
-                        shadowedProperties.push(p);
-                    }
-                });
+                // Produce warning if any reactive properties on the prototype are
+                // shadowed by class fields. Instance fields set before upgrade are
+                // deleted by this point, so any own property is caused by class field
+                // initialization in the constructor.
+                const ctor = this.constructor;
+                const shadowedProperties = [...ctor.elementProperties.keys()].filter((p) => this.hasOwnProperty(p) && p in getPrototypeOf(this));
                 if (shadowedProperties.length) {
@@ -777,10 +818,30 @@ throw new Error(`The following properties on element ${this.localName} will not ` +
             }
+            // Mixin instance properties once, if they exist.
+            if (this.__instanceProperties) {
+                // TODO (justinfagnani): should we use the stored value? Could a new value
+                // have been set since we stored the own property value?
+                for (const [p, value] of this.__instanceProperties) {
+                    this[p] = value;
+                }
+                this.__instanceProperties = undefined;
+            }
+            // Trigger initial value reflection and populate the initial
+            // changedProperties map, but only for the case of experimental
+            // decorators on accessors, which will not have already populated the
+            // changedProperties map. We can't know if these accessors had
+            // initializers, so we just set them anyway - a difference from
+            // experimental decorators on fields and standard decorators on
+            // auto-accessors.
+            const elementProperties = this.constructor
+                .elementProperties;
+            if (elementProperties.size > 0) {
+                for (const [p, options] of elementProperties) {
+                    if (options.wrapped === true &&
+                        !this._$changedProperties.has(p) &&
+                        this[p] !== undefined) {
+                        this._$changeProperty(p, this[p], options);
+                    }
+                }
+            }
         }
-        // Mixin instance properties once, if they exist.
-        // The forEach() expression will only run when when __instanceProperties is
-        // defined, and it returns undefined, setting __instanceProperties to
-        // undefined
-        this.__instanceProperties &&= this.__instanceProperties.forEach(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (v, p) => (this[p] = v));
         let shouldUpdate = false;
@@ -844,3 +905,3 @@ const changedProperties = this._$changedProperties;
         if (this.isUpdatePending &&
-            this.constructor.enabledWarnings.indexOf('change-in-update') >= 0) {
+            this.constructor.enabledWarnings.includes('change-in-update')) {
             issueWarning('change-in-update', `Element ${this.localName} scheduled an update ` +
@@ -926,3 +987,3 @@ `(generally because a property was set) ` +
         // undefined
-        this.__reflectingProperties &&= this.__reflectingProperties.forEach((v, k) => this.__propertyToAttribute(k, this[k], v));
+        this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p]));
         this.__markUpdated();
@@ -961,3 +1022,5 @@ }
 /**
- * Marks class as having finished creating properties.
+ * Marks class as having been finalized, which includes creating properties
+ * from `static properties`, but does *not* include all properties created
+ * from decorators.
  */
@@ -995,3 +1058,6 @@ ReactiveElement[_a] = true;
     // Default warning set.
-    ReactiveElement.enabledWarnings = ['change-in-update'];
+    ReactiveElement.enabledWarnings = [
+        'change-in-update',
+        'async-perform-update',
+    ];
     const ensureOwnWarnings = function (ctor) {
@@ -1004,3 +1070,3 @@ if (!ctor.hasOwnProperty(JSCompiler_renameProperty('enabledWarnings'))) {
         ensureOwnWarnings(this);
-        if (this.enabledWarnings.indexOf(warning) < 0) {
+        if (!this.enabledWarnings.includes(warning)) {
             this.enabledWarnings.push(warning);
@@ -1019,3 +1085,3 @@ }
 // This line will be used in regexes to search for ReactiveElement usage.
-(global.reactiveElementVersions ??= []).push('2.0.0-pre.0');
+(global.reactiveElementVersions ??= []).push('2.0.0-pre.1');
 if (global.reactiveElementVersions.length > 1) {
@@ -1022,0 +1088,0 @@ issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +

node/reactive-element.js

@@ -6,3 +6,3 @@ import{customElements as t,HTMLElement as s}from"@lit-labs/ssr-dom-shim";import{getCompatibleStyle as i,adoptStyles as e}from"./css-tag.js";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from"./css-tag.js";
  * SPDX-License-Identifier: BSD-3-Clause
- */const h=globalThis;h.customElements??=t;const r=h.trustedTypes,o=r?r.emptyScript:"",n=h.reactiveElementPolyfillSupport,a={toAttribute(t,s){switch(s){case Boolean:t=t?o:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},c=(t,s)=>s!==t&&(s==s||t==t),l={attribute:!0,type:String,converter:a,reflect:!1,hasChanged:c},u="finalized";class d extends(globalThis.HTMLElement??s){static addInitializer(t){this.finalize(),(this.i??=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];for(const[s,i]of this.elementProperties){const e=this._$El(s,i);void 0!==e&&(this._$Eh.set(e,s),t.push(e))}return t}static createProperty(t,s=l){if(s.state&&(s.attribute=!1),this.finalize(),this.elementProperties.set(t,s),!s.noAccessor&&!this.prototype.hasOwnProperty(t)){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){return{get(){return this[s]},set(e){const h=this[t];this[s]=e,this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l}static finalize(){if(this.hasOwnProperty(u))return!1;this[u]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.i&&(this.i=[...t.i]),this.elementProperties=new Map(t.elementProperties),this._$Eh=new Map,this.hasOwnProperty("properties")){const t=this.properties,s=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of s)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)s.unshift(i(t))}else void 0!==t&&s.push(i(t));return s}static _$El(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this.v()}v(){this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),this.constructor.i?.forEach((t=>t(this)))}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){const t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(this._$Ep.set(s,this[s]),delete this[s])}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return e(t,this.constructor.elementStyles),t}connectedCallback(){void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EO(t,s,i=l){const e=this.constructor._$El(t,i);if(void 0!==e&&!0===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:a).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:a;this._$Em=e,this[e]=h.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i){let e=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||c)(this[t],s)?(this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;this.hasUpdated,this._$Ep&&=this._$Ep.forEach(((t,s)=>this[s]=t));let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$Ek()}catch(s){throw t=!1,this._$Ek(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){this._$EC&&=this._$EC.forEach(((t,s)=>this._$EO(s,this[s],t))),this._$Ek()}updated(t){}firstUpdated(t){}}d[u]=!0,d.elementProperties=new Map,d.elementStyles=[],d.shadowRootOptions={mode:"open"},n?.({ReactiveElement:d}),(h.reactiveElementVersions??=[]).push("2.0.0-pre.0");export{d as ReactiveElement,a as defaultConverter,c as notEqual};
+ */const{is:r,defineProperty:h,getOwnPropertyDescriptor:o,getOwnPropertyNames:n,getOwnPropertySymbols:a,getPrototypeOf:c}=Object,l=globalThis;l.customElements??=t;const p=l.trustedTypes,d=p?p.emptyScript:"",u=l.reactiveElementPolyfillSupport,f={toAttribute(t,s){switch(s){case Boolean:t=t?d:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},b=(t,s)=>!r(t,s),y={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:b},m="finalized";Symbol.metadata??=Symbol("metadata"),l.litPropertyMetadata??=new WeakMap;class g extends(globalThis.HTMLElement??s){static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&h(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=o(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const h=e?.call(this);r.call(this,s),this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty("elementProperties"))return;const t=c(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(m))return;if(this[m]=!0,this._$Ei(),this.hasOwnProperty("properties")){const t=this.properties,s=[...n(t),...a(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)s.unshift(i(t))}else void 0!==t&&s.push(i(t));return s}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$Eg=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1)}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return e(t,this.constructor.elementStyles),t}connectedCallback(){void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EO(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:f;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i,e=!1,r){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??b)(e?r:this[t],s))return;this.C(t,s,i)}!1===this.isUpdatePending&&(this._$Eg=this._$EP())}C(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$EP(){this.isUpdatePending=!0;try{await this._$Eg}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.C(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$ET()}catch(s){throw t=!1,this._$ET(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Eg}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EO(t,this[t]))),this._$ET()}updated(t){}firstUpdated(t){}}g[m]=!0,g.elementProperties=new Map,g.elementStyles=[],g.shadowRootOptions={mode:"open"},u?.({ReactiveElement:g}),(l.reactiveElementVersions??=[]).push("2.0.0-pre.1");export{g as ReactiveElement,f as defaultConverter,b as notEqual};
 //# sourceMappingURL=reactive-element.js.map

package.json

 {
   "name": "@lit/reactive-element",
-  "version": "2.0.0-pre.0",
+  "version": "2.0.0-pre.1",
   "publishConfig": {
@@ -159,2 +159,3 @@ "access": "public"
     "build:ts": "wireit",
+    "build:ts:std-decorators-tests": "wireit",
     "build:ts:types": "wireit",
@@ -178,4 +179,4 @@ "build:rollup": "wireit",
         "build:rollup",
-        "build:babel",
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:ts:types"
@@ -200,2 +201,3 @@ ]
         "!development/test/decorators-babel",
+        "!development/test/std-decorators",
         "tsconfig.tsbuildinfo",
@@ -214,5 +216,23 @@ "tsconfig.polyfill-support.tsbuildinfo"
         "*.d.ts{,.map}",
-        "decorators/*.d.ts{,.map}"
+        "decorators/*.d.ts{,.map}",
+        "legacy-decorators/*.d.ts{,.map}",
+        "std-decorators/*.d.ts{,.map}"
       ]
     },
+    "build:ts:std-decorators-tests": {
+      "#comment": "This is a separate script from build:ts because it needs a tsconfig without experimentalDecorators.",
+      "command": "tsc --pretty --project tsconfig.std-decorators-tests.json",
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "build:ts"
+      ],
+      "files": [
+        "src/test/decorators-modern/**/*.ts",
+        "tsconfig.std-decorators-tests.json"
+      ],
+      "output": [
+        "development/test/std-decorators",
+        "tsconfig.std-decorators-tests.tsbuildinfo"
+      ]
+    },
     "build:rollup": {
@@ -244,4 +264,5 @@ "command": "rollup -c",
     "build:babel": {
-      "command": "babel --extensions .ts src/test/decorators --out-dir development/test/decorators-babel",
+      "command": "babel --extensions .ts src/test/std-decorators --out-dir development/test/decorators-babel",
       "files": [
+        ".babelrc",
         "src/test/decorators/**/*.ts"
@@ -285,6 +306,6 @@ ],
     "test:dev": {
-      "command": "MODE=dev node ../tests/run-web-tests.js \"development/**/*_test.(js|html)\" --config ../tests/web-test-runner.config.js",
+      "command": "MODE=dev node ../tests/run-web-tests.js \"development/test/**/*_test.js\" --config ../tests/web-test-runner.config.js",
       "dependencies": [
         "build:ts",
-        "build:babel",
+        "build:ts:std-decorators-tests",
         "../tests:build"
@@ -304,4 +325,4 @@ ],
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:rollup",
-        "build:babel",
         "../tests:build"
@@ -321,2 +342,3 @@ ],
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:rollup"
@@ -331,2 +353,3 @@ ],
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:rollup"
@@ -341,2 +364,3 @@ ],
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:rollup"
@@ -351,2 +375,3 @@ ],
         "build:ts",
+        "build:ts:std-decorators-tests",
         "build:rollup"
@@ -373,7 +398,8 @@ ],
   "devDependencies": {
-    "@babel/cli": "^7.14.6",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.14.6",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.22.10",
+    "@babel/plugin-transform-class-static-block": "^7.22.11",
+    "@babel/plugin-transform-typescript": "^7.22.11",
     "@lit-internal/scripts": "^1.0.1-pre.0",
@@ -380,0 +406,0 @@ "@webcomponents/shadycss": "^1.8.0",

reactive-element.d.ts

@@ -145,3 +145,3 @@ /**
 export interface PropertyValueMap<T> extends Map<PropertyKey, unknown> {
-    get<K extends keyof T>(k: K): T[K];
+    get<K extends keyof T>(k: K): T[K] | undefined;
     set<K extends keyof T>(key: K, value: T[K]): this;
@@ -170,8 +170,16 @@ has<K extends keyof T>(k: K): boolean;
  */
-export type WarningKind = 'change-in-update' | 'migration';
+export type WarningKind = 'change-in-update' | 'migration' | 'async-perform-update';
 export type Initializer = (element: ReactiveElement) => void;
+declare global {
+    interface SymbolConstructor {
+        readonly metadata: unique symbol;
+    }
+}
+declare global {
+    var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration>>;
+}
 /**
  * Base element class which manages element properties and attributes. When
  * properties change, the `update` method is asynchronously called. This method
- * should be supplied by subclassers to render updates as desired.
+ * should be supplied by subclasses to render updates as desired.
  * @noInheritDoc
@@ -268,3 +276,5 @@ */
     /**
-     * Marks class as having finished creating properties.
+     * Marks class as having been finalized, which includes creating properties
+     * from `static properties`, but does *not* include all properties created
+     * from decorators.
      */
@@ -340,8 +350,2 @@ protected static [finalized]: boolean;
     /**
-     * The set of properties defined by this class that caused an accessor to be
-     * added during `createProperty`.
-     * @nocollapse
-     */
-    private static __reactivePropertyKeys?;
-    /**
      * Returns a list of attributes corresponding to the registered properties.
@@ -352,2 +356,3 @@ * @nocollapse
     static get observedAttributes(): string[];
+    private __instanceProperties?;
     /**
@@ -422,10 +427,28 @@ * Creates a property accessor on the element prototype if one does not exist
     static getPropertyOptions(name: PropertyKey): PropertyDeclaration<unknown, unknown>;
+    static [Symbol.metadata]: object & Record<PropertyKey, unknown>;
     /**
-     * Creates property accessors for registered properties, sets up element
-     * styling, and ensures any superclasses are also finalized. Returns true if
-     * the element was finalized.
+     * Initializes static own properties of the class used in bookkeeping
+     * for element properties, initializers, etc.
+     *
+     * Can be called multiple times by code that needs to ensure these
+     * properties exist before using them.
+     *
+     * This method ensures the superclass is finalized so that inherited
+     * property metadata can be copied down.
      * @nocollapse
      */
-    protected static finalize(): boolean;
+    private static __prepare;
     /**
+     * Finishes setting up the class so that it's ready to be registered
+     * as a custom element and instantiated.
+     *
+     * This method is called by the ReactiveElement.observedAttributes getter.
+     * If you override the observedAttributes getter, you must either call
+     * super.observedAttributes to trigger finalization, or call finalize()
+     * yourself.
+     *
+     * @nocollapse
+     */
+    protected static finalize(): void;
+    /**
      * Options used when calling `attachShadow`. Set this property to customize
@@ -467,3 +490,2 @@ * the options for the shadowRoot; for example, to create a closed
     private static __attributeNameForProperty;
-    private __instanceProperties?;
     private __updatePromise;
@@ -483,3 +505,3 @@ /**
     /**
-     * Map with keys of properties that should be reflected when updated.
+     * Properties that should be reflected when updated.
      */
@@ -497,2 +519,7 @@ private __reflectingProperties?;
     /**
+     * Internal only override point for customizing work done when elements
+     * are constructed.
+     */
+    private __initialize;
+    /**
      * Registers a `ReactiveController` to participate in the element's reactive
@@ -581,2 +608,4 @@ * update cycle. The element automatically calls into any registered
      *     configured options
+     * @param initial whether this call is for the initial value of the property.
+     *     Initial values do not reflect to an attribute.
      * @category updates
@@ -615,12 +644,5 @@ */
      *
-     * Note: To ensure `performUpdate()` synchronously completes a pending update,
-     * it should not be overridden. In LitElement 2.x it was suggested to override
-     * `performUpdate()` to also customizing update scheduling. Instead, you should now
-     * override `scheduleUpdate()`. For backwards compatibility with LitElement 2.x,
-     * scheduling updates via `performUpdate()` continues to work, but will make
-     * also calling `performUpdate()` to synchronously process updates difficult.
-     *
      * @category updates
      */
-    protected performUpdate(): void | Promise<unknown>;
+    protected performUpdate(): void;
     /**
@@ -627,0 +649,0 @@ * Invoked before `update()` to compute values needed during the update.

reactive-element.js

@@ -6,3 +6,3 @@ import{getCompatibleStyle as t,adoptStyles as s}from"./css-tag.js";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from"./css-tag.js";
  * SPDX-License-Identifier: BSD-3-Clause
- */const i=globalThis,e=i.trustedTypes,h=e?e.emptyScript:"",r=i.reactiveElementPolyfillSupport,o={toAttribute(t,s){switch(s){case Boolean:t=t?h:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},n=(t,s)=>s!==t&&(s==s||t==t),a={attribute:!0,type:String,converter:o,reflect:!1,hasChanged:n},c="finalized";class l extends HTMLElement{static addInitializer(t){this.finalize(),(this.i??=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];for(const[s,i]of this.elementProperties){const e=this._$El(s,i);void 0!==e&&(this._$Eh.set(e,s),t.push(e))}return t}static createProperty(t,s=a){if(s.state&&(s.attribute=!1),this.finalize(),this.elementProperties.set(t,s),!s.noAccessor&&!this.prototype.hasOwnProperty(t)){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){return{get(){return this[s]},set(e){const h=this[t];this[s]=e,this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||a}static finalize(){if(this.hasOwnProperty(c))return!1;this[c]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.i&&(this.i=[...t.i]),this.elementProperties=new Map(t.elementProperties),this._$Eh=new Map,this.hasOwnProperty("properties")){const t=this.properties,s=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of s)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static _$El(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this.v()}v(){this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),this.constructor.i?.forEach((t=>t(this)))}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){const t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(this._$Ep.set(s,this[s]),delete this[s])}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EO(t,s,i=a){const e=this.constructor._$El(t,i);if(void 0!==e&&!0===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:o).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:o;this._$Em=e,this[e]=h.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i){let e=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||n)(this[t],s)?(this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;this.hasUpdated,this._$Ep&&=this._$Ep.forEach(((t,s)=>this[s]=t));let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$Ek()}catch(s){throw t=!1,this._$Ek(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){this._$EC&&=this._$EC.forEach(((t,s)=>this._$EO(s,this[s],t))),this._$Ek()}updated(t){}firstUpdated(t){}}l[c]=!0,l.elementProperties=new Map,l.elementStyles=[],l.shadowRootOptions={mode:"open"},r?.({ReactiveElement:l}),(i.reactiveElementVersions??=[]).push("2.0.0-pre.0");export{l as ReactiveElement,o as defaultConverter,n as notEqual};
+ */const{is:i,defineProperty:e,getOwnPropertyDescriptor:r,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},u=(t,s)=>!i(t,s),f={attribute:!0,type:String,converter:d,reflect:!1,hasChanged:u},y="finalized";Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=f){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r)}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??f}static _$Ei(){if(this.hasOwnProperty("elementProperties"))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y))return;if(this[y]=!0,this._$Ei(),this.hasOwnProperty("properties")){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$Eg=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1)}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EO(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:d).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:d;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i,e=!1,r){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??u)(e?r:this[t],s))return;this.C(t,s,i)}!1===this.isUpdatePending&&(this._$Eg=this._$EP())}C(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$EP(){this.isUpdatePending=!0;try{await this._$Eg}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.C(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$ET()}catch(s){throw t=!1,this._$ET(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Eg}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EO(t,this[t]))),this._$ET()}updated(t){}firstUpdated(t){}}b[y]=!0,b.elementProperties=new Map,b.elementStyles=[],b.shadowRootOptions={mode:"open"},p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.0-pre.1");export{b as ReactiveElement,d as defaultConverter,u as notEqual};
 //# sourceMappingURL=reactive-element.js.map

No alert changes

Improved metrics

Total package byte prevSize

820857

increased by9.38%

Lines of code

6517

increased by3.72%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes