element-vir 20.0.9 → 22.0.0

package/LICENSE-MIT

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 electrovir
+Copyright (c) 2024 electrovir
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -268,9 +268,7 @@ export const MyWithEvents = defineElementNoInputs({
     },
     renderCallback({dispatch, events}) {
         return html`
-            <button ${listen('click', () => dispatch(new events.logoutClick(undefined)))}>
-                log out
-            </button>
+            <button ${listen('click', () => dispatch(new events.logoutClick()))}>log out</button>
             <button ${listen('click', () => dispatch(new events.randomNumber(Math.random())))}>
                 generate random number
             </button>
@@ -630,13 +628,13 @@ export const MyWithAsyncProp = defineElement<{endpoint: string}>()({
             },
         }),
     },
-    renderCallback({inputs, state, updateState}) {
+    renderCallback({inputs, state}) {
         /**
          * This causes the a promise which automatically updates the state.data prop once the
          * promise resolves. It only creates a new promise if the first input, the trigger, value
          * changes from previous calls.
          */
-        state.data.updateTrigger(inputs);
+        state.data.update(inputs);
         return html`
             Here's the data:
             <br />

package/dist/declarative-element/declarative-element.d.ts

@@ -11,7 +11,7 @@ import { EventDescriptorMap, EventsInitMap } from './properties/element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './properties/element-properties';
 import { FlattenElementVirStateSetup } from './properties/element-vir-state-setup';
 import { HostClassNamesMap } from './properties/host-classes';
-import { ObservablePropListenerMap } from './properties/observable-prop/observable-prop';
+import { ObservableListenerMap } from './properties/property-proxy';
 import type { RenderCallback, RenderParams, UpdateStateCallback } from './render-callback';
 import { SlotNameMap } from './slot-names';
 export type DeclarativeElementHost<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, StateInit extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = RequiredAndNotNullBy<Omit<DeclarativeElement<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
@@ -38,9 +38,10 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
     abstract _lastRenderError: Error | undefined;
     abstract _internalRenderCount: number;
     abstract _lastRenderedProps: Readonly<Pick<RenderParams<any, Inputs, StateInit, any, any, any, any>, 'inputs' | 'state'>>;
+    abstract destroy(): void;
     abstract render(): unknown;
     abstract readonly instanceState: FlattenElementVirStateSetup<StateInit>;
-    abstract readonly observablePropertyListenerMap: ObservablePropListenerMap<StateInit & Inputs>;
+    abstract readonly observablePropertyListenerMap: ObservableListenerMap<StateInit & Inputs>;
     abstract readonly instanceInputs: Inputs;
     abstract assignInputs(inputs: {} extends Required<Inputs> ? never : Partial<Inputs>): void;
     abstract _haveInputsBeenSet: boolean;

package/dist/declarative-element/define-element-no-inputs.js

@@ -4,7 +4,7 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 import { ensureErrorAndPrependMessage, extractErrorMessage, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
 import { defineCssVars } from 'lit-css-vars';
-import { isRunTimeType } from 'run-time-assertions';
+import { hasProperty, isRunTimeType } from 'run-time-assertions';
 import { css } from '../template-transforms/vir-css/vir-css';
 import { DeclarativeElement, } from './declarative-element';
 import { defaultDeclarativeElementDefinitionOptions, } from './definition-options';
@@ -12,8 +12,8 @@ import { hasDeclarativeElementParent } from './has-declarative-element-parent';
 import { assignInputs } from './properties/assign-inputs';
 import { assertValidCssProperties } from './properties/css-properties';
 import { createEventDescriptorMap, } from './properties/element-events';
-import { bindReactiveProperty, createElementUpdaterProxy } from './properties/element-updater-proxy';
 import { createHostClassNamesMap } from './properties/host-classes';
+import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy';
 import { applyHostClasses, hostClassNamesToStylesInput } from './properties/styles';
 import { createRenderParams } from './render-callback';
 import { createSlotNamesMap } from './slot-names';
@@ -128,6 +128,14 @@ export function defineElementNoInputs(initInput) {
                     }
                 }
             }
+            destroy() {
+                Object.values(this.instanceState).forEach((stateValue) => {
+                    if (hasProperty(stateValue, 'destroy') &&
+                        isRunTimeType(stateValue.destroy, 'function')) {
+                        stateValue.destroy();
+                    }
+                });
+            }
             disconnectedCallback() {
                 super.disconnectedCallback();
                 if (init.cleanupCallback) {
@@ -136,6 +144,7 @@ export function defineElementNoInputs(initInput) {
                         throw new Error(`cleanupCallback in '${init.tagName}' cannot be asynchronous`);
                     }
                 }
+                this.destroy();
                 this._initCalled = false;
             }
             assignInputs(inputs) {
@@ -196,13 +205,13 @@ export function defineElementNoInputs(initInput) {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: createElementUpdaterProxy(this, false)
+                    value: createElementPropertyProxy(this, false)
                 });
                 Object.defineProperty(this, "instanceState", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: createElementUpdaterProxy(this, !elementOptions.allowPolymorphicState)
+                    value: createElementPropertyProxy(this, !elementOptions.allowPolymorphicState)
                 });
                 const stateInitStatic = init.stateInitStatic || {};
                 getObjectTypedKeys(stateInitStatic).forEach((stateKey) => {

package/dist/declarative-element/directives/async-prop.d.ts

@@ -1,36 +1,12 @@
-import { JsonCompatibleObject, MaybePromise } from '@augment-vir/common';
+import { CallbackObservable, CallbackObservableInit } from 'observavir';
+import { Constructor } from 'type-fest';
 import { ElementVirStateSetup } from '../properties/element-vir-state-setup';
-import { ObservableProp } from '../properties/observable-prop/observable-prop';
-export type AsyncPropValue<ValueType> = Error | MaybePromise<Awaited<ValueType>>;
-export type AsyncPropTriggerInputBase = JsonCompatibleObject;
-export type AsyncPropUpdateCallback<TriggerInput extends AsyncPropTriggerInputBase, UpdaterInput, ReturnType> = Exclude<TriggerInput, undefined> extends never ? () => ReturnType : Exclude<UpdaterInput, undefined> extends never ? (trigger: TriggerInput) => ReturnType : (trigger: TriggerInput, inputs: UpdaterInput) => ReturnType;
-export type AsyncPropInit<ValueType, TriggerInput extends AsyncPropTriggerInputBase, UpdaterInput> = {
-    /** Starting value */
-    defaultValue: MaybePromise<Awaited<ValueType>>;
-} | {
-    /**
-     * When a trigger changes (according to deep equality checking through JSON stringify),
-     * the updateCallback callback will be called and the element's state will be updated
-     * again. Otherwise, the updateCallback callback will only be called the first time.
-     *
-     * Set this to undefined to disabled automatic updating. Meaning, updateCallback will only
-     * be called the first time.
-     */
-    updateCallback: AsyncPropUpdateCallback<TriggerInput, UpdaterInput, Promise<Awaited<ValueType>>>;
-};
-export type AsyncObservableProp<ValueType, TriggerInput extends AsyncPropTriggerInputBase, UpdaterInput> = ObservableProp<AsyncPropValue<ValueType>> & {
-    setNewPromise(newPromise: Promise<Awaited<ValueType>>): void;
-    updateTrigger: AsyncPropUpdateCallback<TriggerInput, UpdaterInput, void>;
-    setResolvedValue(resolvedValue: Awaited<ValueType>): void;
-    /**
-     * Forces the updater callback to re-run with the last given trigger and updaterInput. If this
-     * asyncProp has no updater callback defined, this will result in an error.
-     */
-    forceUpdate: AsyncPropUpdateCallback<TriggerInput, UpdaterInput, void>;
-    /**
-     * The last value that was resolved. This will be undefined if there has never, so far, been a
-     * resolved value.
-     */
-    latestResolvedValue: ValueType extends Promise<any> ? Awaited<ValueType> | undefined : ValueType;
-};
-export declare function asyncProp<ValueType, TriggerInput extends AsyncPropTriggerInputBase = {}, UpdaterInput = undefined>(...args: [AsyncPropInit<ValueType, TriggerInput, UpdaterInput>] | []): ElementVirStateSetup<AsyncObservableProp<ValueType, TriggerInput, UpdaterInput>>;
+export type { AsyncValue } from 'observavir';
+/** Class for constructing async props. Should not be referenced directly, use `AsyncProp` instead. */
+declare class _AsyncPropClass<Value, Params> extends CallbackObservable<Value, Params> {
+}
+export type AsyncProp<Value, Params> = Omit<_AsyncPropClass<Value, Params>, 
+/** Hide these properties to make the `AsyncProp` interface much simpler. */
+'dispatch' | 'equalityCheck' | 'getListenerCount' | 'updateCallback' | 'removeListener' | 'removeAllListeners' | 'listenToEvent' | 'listen'>;
+export declare const AsyncProp: Constructor<AsyncProp<unknown, unknown>, ConstructorParameters<typeof _AsyncPropClass<unknown, unknown>>>;
+export declare function asyncProp<Value, Params = void>(init?: CallbackObservableInit<Value, Params>): ElementVirStateSetup<AsyncProp<Value, Params>>;

package/dist/declarative-element/directives/async-prop.js

@@ -1,133 +1,13 @@
-import { areJsonEqual, createDeferredPromiseWrapper, ensureError, } from '@augment-vir/common';
-import { isPromise } from 'run-time-assertions';
-import { createSetterObservableProp } from '../properties/observable-prop/setter-observable-prop';
-const notSetSymbol = Symbol('not set');
-function setupAsyncProp(init) {
-    let lastTrigger = notSetSymbol;
-    let lastSetPromise;
-    const promiseUpdater = init && 'updateCallback' in init ? init.updateCallback : undefined;
-    let waitingForValuePromise = createDeferredPromiseWrapper();
-    const baseObservableProp = createSetterObservableProp(waitingForValuePromise.promise);
-    function resetWaitingForValuePromise() {
-        waitingForValuePromise = createDeferredPromiseWrapper();
-        baseObservableProp.setValue(waitingForValuePromise.promise);
-    }
-    function resolveValue(value) {
-        waitingForValuePromise.resolve(value);
-        baseObservableProp.setValue(value);
-        asyncProp.latestResolvedValue = value;
-    }
-    function rejectValue(error) {
-        waitingForValuePromise.reject(error);
-        baseObservableProp.setValue(error);
-    }
-    function setPromise(newPromise) {
-        if (newPromise === lastSetPromise) {
-            /** Abort setting the promise if we already have set this promise. */
-            return;
-        }
-        lastSetPromise = newPromise;
-        if (waitingForValuePromise.isSettled()) {
-            resetWaitingForValuePromise();
-        }
-        newPromise
-            .then((value) => {
-            /** Make sure we're still actually waiting for this promise. */
-            if (lastSetPromise === newPromise) {
-                resolveValue(value);
-            }
-        })
-            .catch((reason) => {
-            /** Make sure we're still actually waiting for this promise. */
-            if (lastSetPromise === newPromise) {
-                waitingForValuePromise.promise.catch(() => {
-                    /**
-                     * Don't actually do anything, we just want to make sure the error is
-                     * handled so it doesn't throw errors in the browser.
-                     */
-                });
-                const error = ensureError(reason);
-                console.error(error);
-                rejectValue(error);
-            }
-        });
-    }
-    function updateTrigger(triggerInput, updaterInput) {
-        if (!promiseUpdater) {
-            console.error(init);
-            throw new Error(`Trigger was updated for asyncProp but no updateCallback has been defined.`);
-        }
-        /**
-         * This will expand proxies so that `inputs` or `state` can be used directly as a
-         * serializableTrigger without issues.
-         */
-        const expandedTrigger = {
-            ...triggerInput,
-        };
-        const expandedInputs = { ...updaterInput };
-        if (lastTrigger === notSetSymbol ||
-            !areJsonEqual(expandedTrigger, lastTrigger, {
-                ignoreNonSerializableProperties: true,
-            })) {
-            lastTrigger = expandedTrigger;
-            const newValue = promiseUpdater(lastTrigger, expandedInputs);
-            setPromise(newValue);
-        }
-    }
-    function forceUpdate(triggerInput, updaterInput) {
-        lastTrigger = notSetSymbol;
-        updateTrigger(triggerInput, updaterInput);
-    }
-    const extraProperties = {
-        latestResolvedValue: (init && 'defaultValue' in init && !isPromise(init.defaultValue)
-            ? init.defaultValue
-            : undefined),
-        setNewPromise(newPromise) {
-            setPromise(newPromise);
-        },
-        setResolvedValue(value) {
-            if (value !== baseObservableProp.value) {
-                if (waitingForValuePromise.isSettled()) {
-                    resetWaitingForValuePromise();
-                }
-                waitingForValuePromise.resolve(value);
-                resolveValue(value);
-            }
-        },
-        updateTrigger: (promiseUpdater
-            ? updateTrigger
-            : () => {
-                throw new Error('Cannot run updateTrigger when updateCallback was not set on the asyncProp.');
-            }),
-        forceUpdate: (promiseUpdater
-            ? forceUpdate
-            : () => {
-                throw new Error('Cannot run forceUpdate when updateCallback was not set on the asyncProp.');
-            }),
-    };
-    const asyncProp = Object.assign(baseObservableProp, extraProperties);
-    const initValue = init && 'defaultValue' in init
-        ? init.defaultValue
-        : /** A promise that doesn't resolve because we're waiting for the first value still. */
-            new Promise(() => { });
-    if (initValue instanceof Promise) {
-        setPromise(initValue);
-    }
-    else {
-        resolveValue(initValue);
-    }
-    if (isPromise(initValue)) {
-        setPromise(initValue);
-    }
-    else {
-        resolveValue(initValue);
-    }
-    return asyncProp;
+import { CallbackObservable } from 'observavir';
+import { stateSetupKey } from '../properties/element-vir-state-setup';
+/** Class for constructing async props. Should not be referenced directly, use `AsyncProp` instead. */
+class _AsyncPropClass extends CallbackObservable {
 }
-export function asyncProp(...args) {
+export const AsyncProp = _AsyncPropClass;
+export function asyncProp(init) {
     return {
-        _elementVirStateSetup() {
-            return setupAsyncProp(...args);
+        [stateSetupKey]() {
+            return new _AsyncPropClass(init);
         },
     };
 }

package/dist/declarative-element/directives/is-resolved.directive.d.ts

@@ -1,4 +1,4 @@
-import { AsyncPropValue } from './async-prop';
-export declare function isResolved<Value extends AsyncPropValue<any>>(asyncPropInput: Value): asyncPropInput is Exclude<Value, Promise<any>>;
-export declare function isError(asyncPropInput: unknown): asyncPropInput is Error;
-export declare function resolvedOrUndefined<Value extends AsyncPropValue<any>>(asyncPropInput: Value): Exclude<Value, Promise<any>> | undefined;
+import { AsyncProp, AsyncValue } from './async-prop';
+export declare function isResolved<Value extends AsyncValue<any>>(asyncValue: Value extends AsyncProp<any, any> ? 'Error: pass AsyncProp.value, not AsyncProp itself.' : Value): asyncValue is Exclude<typeof asyncValue, Promise<any>>;
+export declare function isAsyncError<Value extends AsyncValue<any>>(asyncValue: Value extends AsyncProp<any, any> ? 'Error: pass AsyncProp.value, not AsyncProp itself.' : Value): asyncValue is Extract<typeof asyncValue, Error>;
+export declare function resolvedOrUndefined<Value extends AsyncValue<any>>(asyncValue: Value extends AsyncProp<any, any> ? 'Error: pass AsyncProp.value, not AsyncProp itself.' : Value): Exclude<typeof asyncValue, Promise<any>> | undefined;

package/dist/declarative-element/directives/is-resolved.directive.js

@@ -1,13 +1,19 @@
-import { isPromiseLike } from '@augment-vir/common';
-export function isResolved(asyncPropInput) {
-    return !isPromiseLike(asyncPropInput);
+import { AsyncProp } from './async-prop';
+export function isResolved(asyncValue) {
+    if (asyncValue instanceof AsyncProp) {
+        throw new TypeError('Pass AsyncProp.value, not AsyncProp itself.');
+    }
+    return !(asyncValue instanceof Promise);
 }
-export function isError(asyncPropInput) {
-    return asyncPropInput instanceof Error;
+export function isAsyncError(asyncValue) {
+    if (asyncValue instanceof AsyncProp) {
+        throw new TypeError('Pass AsyncProp.value, not AsyncProp itself.');
+    }
+    return asyncValue instanceof Error;
 }
-export function resolvedOrUndefined(asyncPropInput) {
-    if (isResolved(asyncPropInput)) {
-        return asyncPropInput;
+export function resolvedOrUndefined(asyncValue) {
+    if (isResolved(asyncValue)) {
+        return asyncValue;
     }
     else {
         return undefined;

package/dist/declarative-element/directives/listen.directive.d.ts

@@ -1,5 +1,8 @@
+import { MaybePromise } from '@augment-vir/common';
 import { DirectiveResult } from '../../lit-exports/all-lit-exports';
 import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
+/** We don't care at all what this returns, just allow anything! */
+type ListenCallbackReturn = MaybePromise<any>;
 /**
  * Listen to events. These can be native DOM events (use a string for the inputType argument) or
  * typed events (pass in a return value from defineTypedEvent).
@@ -10,5 +13,6 @@ import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
  * @param listener The callback to fire when an event is caught. Assuming the definedTypedEvent
  *   input is properly typed, the event given to this callback will also be typed.
  */
-export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
-export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => ListenCallbackReturn): DirectiveResult<any>;
+export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => ListenCallbackReturn): DirectiveResult<any>;
+export {};

package/dist/declarative-element/directives/render-async.directive.d.ts

@@ -1,5 +1,5 @@
-import { AsyncObservableProp } from './async-prop';
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: AsyncObservableProp<T, any, any>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | ResolutionRenderResult | ErrorRenderResult;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: AsyncObservableProp<T, any, any>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender?: undefined): FallbackResult | ResolutionRenderResult | string;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: AsyncObservableProp<T, any, any>, fallback: FallbackResult, resolutionRender: undefined, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | Awaited<T> | ErrorRenderResult;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: AsyncObservableProp<T, any, any>, fallback: FallbackResult, resolutionRender?: undefined, errorRender?: undefined): FallbackResult | Awaited<T> | string;
+import { AsyncProp } from './async-prop';
+export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | ResolutionRenderResult | ErrorRenderResult;
+export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender?: undefined): FallbackResult | ResolutionRenderResult | string;
+export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: undefined, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | Awaited<T> | ErrorRenderResult;
+export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender?: undefined, errorRender?: undefined): FallbackResult | Awaited<T> | string;

package/dist/declarative-element/is-declarative-element-definition.d.ts

@@ -0,0 +1,3 @@
+import { DeclarativeElementDefinition } from './declarative-element';
+export declare function assertDeclarativeElementDefinition(input: unknown, failMessage?: string | undefined): asserts input is DeclarativeElementDefinition;
+export declare function isDeclarativeElementDefinition(input: unknown): input is DeclarativeElementDefinition;

package/dist/declarative-element/is-declarative-element-definition.js

@@ -0,0 +1,48 @@
+import { getObjectTypedKeys, isTruthy, wrapInTry } from '@augment-vir/common';
+import { AssertionError, hasProperty, isRunTimeType } from 'run-time-assertions';
+const expectedStaticProperties = getObjectTypedKeys({
+    assign: '',
+    assignedInputs: '',
+    cssVars: '',
+    elementOptions: '',
+    events: '',
+    hostClasses: '',
+    init: '',
+    inputsType: '',
+    isStrictInstance: '',
+    renderCallback: '',
+    slotNames: '',
+    stateInitStatic: '',
+    stateType: '',
+    styles: '',
+    tagName: '',
+    updateStateType: '',
+});
+export function assertDeclarativeElementDefinition(input, failMessage) {
+    if (!isRunTimeType(input, 'function')) {
+        throw new AssertionError([
+            'input is not an element constructor',
+            failMessage,
+        ]
+            .filter(isTruthy)
+            .join(': '));
+    }
+    expectedStaticProperties.forEach((expectedProperty) => {
+        if (!hasProperty(input, expectedProperty)) {
+            throw new AssertionError([
+                `missing prop '${expectedProperty}'`,
+                failMessage,
+            ]
+                .filter(isTruthy)
+                .join(': '));
+        }
+    });
+}
+export function isDeclarativeElementDefinition(input) {
+    return wrapInTry(() => {
+        assertDeclarativeElementDefinition(input);
+        return true;
+    }, {
+        fallbackValue: false,
+    });
+}

package/dist/declarative-element/properties/element-vir-state-setup.d.ts

@@ -1,11 +1,14 @@
 import { PropertyInitMapBase } from './element-properties';
+export declare const stateSetupKey: unique symbol;
 export type ElementVirStateSetup<InnerValue> = {
-    _elementVirStateSetup(): InnerValue;
+    [key in typeof stateSetupKey]: () => InnerValue;
 };
 export declare function isElementVirStateSetup<T = unknown>(input: unknown): input is ElementVirStateSetup<T>;
+export type UnwrapElementVirStateSetup<T> = T extends ElementVirStateSetup<infer U> ? U : T;
+export type MaybeElementVirStateSetup<T> = UnwrapElementVirStateSetup<T> | ElementVirStateSetup<UnwrapElementVirStateSetup<T>>;
 export type FlattenElementVirStateSetup<OriginalObject extends PropertyInitMapBase> = {
     [Prop in keyof OriginalObject]: Extract<OriginalObject[Prop], ElementVirStateSetup<any>> extends never ? OriginalObject[Prop] : Extract<OriginalObject[Prop], ElementVirStateSetup<any>> extends ElementVirStateSetup<infer InnerValue> ? InnerValue | Exclude<OriginalObject[Prop], ElementVirStateSetup<any>> : OriginalObject[Prop];
 };
-export type AllowElementVirStateSetup<OriginalObject extends PropertyInitMapBase, CurrentType extends Record<keyof OriginalObject, unknown>> = {
-    [Prop in keyof CurrentType]: Prop extends keyof OriginalObject ? Extract<OriginalObject[Prop], ElementVirStateSetup<any>> extends never ? OriginalObject[Prop] : Extract<OriginalObject[Prop], ElementVirStateSetup<any>> extends ElementVirStateSetup<infer SetValue> ? CurrentType[Prop] extends ElementVirStateSetup<SetValue> ? CurrentType[Prop] : SetValue : OriginalObject[Prop] : never;
+export type AllowElementVirStateSetup<OriginalObject extends PropertyInitMapBase> = {
+    [Prop in keyof OriginalObject]: MaybeElementVirStateSetup<OriginalObject[Prop]>;
 };

package/dist/declarative-element/properties/element-vir-state-setup.js

@@ -1,8 +1,8 @@
 import { isObject } from '@augment-vir/common';
-const checkKey = '_elementVirStateSetup';
+export const stateSetupKey = Symbol('element-vir-state-setup');
 export function isElementVirStateSetup(input) {
     if (!isObject(input)) {
         return false;
     }
-    return checkKey in input;
+    return stateSetupKey in input;
 }

package/dist/declarative-element/properties/per-instance.js

@@ -1,10 +1,11 @@
+import { stateSetupKey } from './element-vir-state-setup';
 /**
  * A state prop helper that sets up the given callback for each instance of the element that this
  * state is contained within.
  */
 export function perInstance(creationCallback) {
     const stateSetup = {
-        _elementVirStateSetup: creationCallback,
+        [stateSetupKey]: creationCallback,
     };
     return stateSetup;
 }

package/dist/declarative-element/properties/property-proxy.d.ts

@@ -0,0 +1,7 @@
+import { ObservableListener } from 'observavir';
+import { DeclarativeElement } from '../declarative-element';
+import { PropertyInitMapBase } from './element-properties';
+export type ObservableListenerMap<OriginalPropertyMap extends PropertyInitMapBase> = Partial<Record<keyof OriginalPropertyMap, ObservableListener<any> | undefined>>;
+/** Binds the given property key as a reactive property on the given element. */
+export declare function bindReactiveProperty(element: HTMLElement, propertyKey: PropertyKey): void;
+export declare function createElementPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, shouldAlreadyExist: boolean): PropertyInitGeneric;

package/dist/declarative-element/properties/{element-updater-proxy.js → property-proxy.js}

@@ -1,6 +1,6 @@
+import { isObservableBase } from 'observavir';
 import { property } from '../../lit-exports/all-lit-exports';
-import { isElementVirStateSetup } from './element-vir-state-setup';
-import { isObservableProp } from './observable-prop/observable-prop';
+import { isElementVirStateSetup, stateSetupKey } from './element-vir-state-setup';
 /** Binds the given property key as a reactive property on the given element. */
 export function bindReactiveProperty(element, propertyKey) {
     if (!(propertyKey in element)) {
@@ -15,7 +15,7 @@ function assertValidPropertyName(propKey, element, elementTagName) {
         throw new Error(`Property '${String(propKey)}' does not exist on '${elementTagName.toLowerCase()}'.`);
     }
 }
-export function createElementUpdaterProxy(element, verifyExists) {
+export function createElementPropertyProxy(element, shouldAlreadyExist) {
     /**
      * Lit element updates state and inputs by setting them directly on the element, so we must do
      * that here. DeclarativeElement's types, however, do not expose this behavior, so we add that
@@ -23,7 +23,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
      */
     const elementAsProps = element;
     function verifyProperty(propertyKey) {
-        if (verifyExists) {
+        if (shouldAlreadyExist) {
             assertValidPropertyName(propertyKey, element, element.tagName);
         }
         else {
@@ -38,7 +38,7 @@ export function createElementUpdaterProxy(element, verifyExists) {
         get: valueGetter,
         set(target, propertyKey, rawNewValue) {
             const newValue = isElementVirStateSetup(rawNewValue)
-                ? rawNewValue._elementVirStateSetup()
+                ? rawNewValue[stateSetupKey]()
                 : rawNewValue;
             verifyProperty(propertyKey);
             const oldValue = elementAsProps[propertyKey];
@@ -52,26 +52,24 @@ export function createElementUpdaterProxy(element, verifyExists) {
                 elementAsProps[propertyKey] = value;
             }
             const existingPropertyListener = element.observablePropertyListenerMap[propertyKey];
-            if (oldValue !== newValue &&
-                isObservableProp(oldValue) &&
-                existingPropertyListener?.length) {
+            if (oldValue !== newValue && isObservableBase(oldValue) && existingPropertyListener) {
                 /** Stop listening to the old value now that we have a new value */
                 oldValue.removeListener(existingPropertyListener);
             }
-            if (isObservableProp(newValue)) {
+            if (isObservableBase(newValue)) {
                 /** If we're using an existing observable property */
                 if (existingPropertyListener) {
-                    newValue.addListener(existingPropertyListener);
+                    newValue.listen(existingPropertyListener);
                 }
                 else {
                     function newListener() {
                         element.requestUpdate();
                     }
                     element.observablePropertyListenerMap[propertyKey] = newListener;
-                    newValue.addListener(newListener);
+                    newValue.listen(newListener);
                 }
             }
-            else if (isObservableProp(oldValue)) {
+            else if (isObservableBase(oldValue)) {
                 /** Clear out old listener that is no longer used. */
                 element.observablePropertyListenerMap[propertyKey] = undefined;
             }

package/dist/declarative-element/render-callback.d.ts

@@ -10,7 +10,7 @@ import { AllowElementVirStateSetup, FlattenElementVirStateSetup } from './proper
 import { SlotNameMap } from './slot-names';
 export type RenderCallback<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, StateInit extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = (params: RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => HtmlInterpolation;
 export type InitCallback<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = (params: RenderParams<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => void;
-export type UpdateStateCallback<StateInit extends PropertyInitMapBase> = <const SpecificState extends Partial<Record<keyof StateInit, unknown>>>(newState: Partial<AllowElementVirStateSetup<StateInit, SpecificState>>) => void;
+export type UpdateStateCallback<StateInit extends PropertyInitMapBase> = (newState: Partial<AllowElementVirStateSetup<StateInit>>) => void;
 export type RenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, StateInit extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
     state: Readonly<FlattenElementVirStateSetup<StateInit>>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from 'observavir';
 export * from './declarative-element/custom-tag-name';
 export * from './declarative-element/declarative-element';
 export * from './declarative-element/declarative-element-init';
@@ -15,16 +16,13 @@ export * from './declarative-element/directives/render-async.directive';
 export * from './declarative-element/directives/render-if.directive';
 export * from './declarative-element/directives/test-id.directive';
 export * from './declarative-element/is-declarative-element';
+export * from './declarative-element/is-declarative-element-definition';
 export * from './declarative-element/properties/css-properties';
 export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';
 export * from './declarative-element/properties/element-vir-state-setup';
 export * from './declarative-element/properties/host-classes';
-export * from './declarative-element/properties/observable-prop/interval-observable-prop';
-export * from './declarative-element/properties/observable-prop/observable-prop';
-export * from './declarative-element/properties/observable-prop/setter-observable-prop';
-export * from './declarative-element/properties/observable-prop/updatable-observable-prop';
 export * from './declarative-element/properties/per-instance';
 export * from './declarative-element/properties/styles';
 export * from './declarative-element/properties/tag-name';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from 'observavir';
 export * from './declarative-element/custom-tag-name';
 export * from './declarative-element/declarative-element';
 export * from './declarative-element/declarative-element-init';
@@ -14,16 +15,13 @@ export * from './declarative-element/directives/render-async.directive';
 export * from './declarative-element/directives/render-if.directive';
 export * from './declarative-element/directives/test-id.directive';
 export * from './declarative-element/is-declarative-element';
+export * from './declarative-element/is-declarative-element-definition';
 export * from './declarative-element/properties/css-properties';
 export * from './declarative-element/properties/css-vars';
 export * from './declarative-element/properties/element-events';
 export * from './declarative-element/properties/element-properties';
 export * from './declarative-element/properties/element-vir-state-setup';
 export * from './declarative-element/properties/host-classes';
-export * from './declarative-element/properties/observable-prop/interval-observable-prop';
-export * from './declarative-element/properties/observable-prop/observable-prop';
-export * from './declarative-element/properties/observable-prop/setter-observable-prop';
-export * from './declarative-element/properties/observable-prop/updatable-observable-prop';
 export * from './declarative-element/properties/per-instance';
 export * from './declarative-element/properties/styles';
 export * from './declarative-element/properties/tag-name';

package/dist/template-transforms/minimal-element-definition.d.ts

@@ -2,7 +2,11 @@ import { DeclarativeElementDefinitionOptions } from '../declarative-element/defi
 import { PropertyInitMapBase } from '../declarative-element/properties/element-properties';
 export type MinimalElementDefinition = {
     tagName: string;
-    elementOptions: DeclarativeElementDefinitionOptions;
+    elementOptions?: DeclarativeElementDefinitionOptions | undefined;
+    /** This is used when wrapping interpolated raw tag name strings. */
+    tagInterpolationKey?: {
+        tagName: string;
+    } | undefined;
 };
 export type MinimalDefinitionWithInputs = {
     _elementVirIsMinimalDefinitionWithInputs: true;
@@ -10,4 +14,4 @@ export type MinimalDefinitionWithInputs = {
     inputs: PropertyInitMapBase;
 };
 export declare function isMinimalDefinitionWithInputs(value: unknown): value is MinimalDefinitionWithInputs;
-export declare function isMinimalElementDefinition(value: unknown): value is MinimalElementDefinition;
+export declare function hasTagName(value: unknown): value is MinimalElementDefinition;

package/dist/template-transforms/minimal-element-definition.js

@@ -3,9 +3,6 @@ export function isMinimalDefinitionWithInputs(value) {
     return (typedHasProperty(value, '_elementVirIsMinimalDefinitionWithInputs') &&
         !!value._elementVirIsMinimalDefinitionWithInputs);
 }
-export function isMinimalElementDefinition(value) {
-    return (typedHasProperty(value, 'tagName') &&
-        !!value.tagName &&
-        typeof value.tagName === 'string' &&
-        value.tagName.includes('-'));
+export function hasTagName(value) {
+    return (typedHasProperty(value, 'tagName') && !!value.tagName && typeof value.tagName === 'string');
 }

package/dist/template-transforms/nested-mapped-templates.js

@@ -1,15 +1,15 @@
-import { isMinimalDefinitionWithInputs, isMinimalElementDefinition, } from './minimal-element-definition';
+import { filterMap, isTruthy } from '@augment-vir/common';
+import { hasTagName, isMinimalDefinitionWithInputs } from './minimal-element-definition';
 function extractElementKeys(values) {
-    return values
-        .map((value) => {
+    return filterMap(values, (value) => {
         if (isMinimalDefinitionWithInputs(value)) {
             return value.definition;
         }
-        return value;
-    })
-        .filter((value) => {
-        return isMinimalElementDefinition(value);
-    });
+        if (hasTagName(value)) {
+            return value.tagInterpolationKey || value;
+        }
+        return undefined;
+    }, isTruthy);
 }
 /**
  * The transformed templates are written to a map so that we can preserve reference equality between

package/dist/template-transforms/vir-css/css-transform.js

@@ -1,7 +1,7 @@
-import { isMinimalElementDefinition } from '../minimal-element-definition';
+import { hasTagName } from '../minimal-element-definition';
 import { transformTemplate } from '../transform-template';
 function transformCss(...[lastNewString, currentLitString, currentValue,]) {
-    if (!isMinimalElementDefinition(currentValue)) {
+    if (!hasTagName(currentValue)) {
         return undefined;
     }
     return {

package/dist/template-transforms/vir-html/html-interpolation.d.ts

@@ -2,7 +2,7 @@ import { AnyFunction } from '@augment-vir/common';
 import { CSSResult, TemplateResult, nothing } from 'lit';
 import { EmptyObject } from 'type-fest';
 import { DeclarativeElementDefinition } from '../../declarative-element/declarative-element';
-import { MinimalDefinitionWithInputs } from '../minimal-element-definition';
+import { MinimalDefinitionWithInputs, MinimalElementDefinition } from '../minimal-element-definition';
 /**
  * Unfortunately the type for `DirectiveResult` means it's just an empty object. So in order to
  * block actual objects, we have to narrow `DirectiveResult` further to this empty object type.
@@ -12,4 +12,4 @@ export type DirectiveOutput = EmptyObject;
  * This is used in order to block accidental object interpolations into HTML, which get stringified
  * into `'[object Object]'`, which nobody ever wants that.
  */
-export type HtmlInterpolation = null | undefined | string | number | boolean | bigint | CSSResult | Readonly<CSSResult> | Element | Readonly<Element> | TemplateResult | Readonly<TemplateResult> | MinimalDefinitionWithInputs | Readonly<MinimalDefinitionWithInputs> | DeclarativeElementDefinition | Readonly<DeclarativeElementDefinition> | DirectiveOutput | Readonly<DirectiveOutput> | AnyFunction | typeof nothing | HtmlInterpolation[] | ReadonlyArray<HtmlInterpolation>;
+export type HtmlInterpolation = null | undefined | string | number | boolean | bigint | CSSResult | Readonly<CSSResult> | Element | Readonly<Element> | TemplateResult | Readonly<TemplateResult> | MinimalElementDefinition | Readonly<MinimalElementDefinition> | MinimalDefinitionWithInputs | Readonly<MinimalDefinitionWithInputs> | DeclarativeElementDefinition | Readonly<DeclarativeElementDefinition> | DirectiveOutput | Readonly<DirectiveOutput> | AnyFunction | typeof nothing | HtmlInterpolation[] | ReadonlyArray<HtmlInterpolation>;

package/dist/template-transforms/vir-html/html-transform.d.ts

@@ -1,3 +1,5 @@
 import { HTMLTemplateResult } from '../../lit-exports/all-lit-exports';
 import { TemplateTransform } from '../template-transform-type';
+import { HtmlInterpolation } from './html-interpolation';
+export declare function mapHtmlValues(inputTemplateStrings: TemplateStringsArray, inputValues: HtmlInterpolation[]): HtmlInterpolation[];
 export declare function transformHtmlTemplate(litTemplate: HTMLTemplateResult): TemplateTransform;

package/dist/template-transforms/vir-html/html-transform.js

@@ -1,28 +1,65 @@
-import { collapseWhiteSpace, isTruthy, safeMatch } from '@augment-vir/common';
+import { collapseWhiteSpace, getOrSet, isTruthy, safeMatch } from '@augment-vir/common';
+import { isRunTimeType } from 'run-time-assertions';
 import { assign } from '../../declarative-element/directives/assign.directive';
 import { declarativeElementRequired } from '../../require-declarative-element';
-import { isMinimalDefinitionWithInputs, isMinimalElementDefinition, } from '../minimal-element-definition';
+import { hasTagName, isMinimalDefinitionWithInputs, } from '../minimal-element-definition';
 import { transformTemplate } from '../transform-template';
-function transformHtml(...[lastNewString, currentLitString, rawCurrentValue,]) {
+import { tagNameKeys } from './tag-name-keys';
+export function mapHtmlValues(inputTemplateStrings, inputValues) {
+    return inputValues.map((currentValue, currentValueIndex) => {
+        const lastString = inputTemplateStrings[currentValueIndex];
+        const nextString = inputTemplateStrings[currentValueIndex + 1];
+        if (lastString && nextString) {
+            const { shouldHaveTagNameHere } = classifyValue(lastString, nextString);
+            if (shouldHaveTagNameHere && isRunTimeType(currentValue, 'string')) {
+                const replacement = {
+                    tagName: currentValue,
+                    tagInterpolationKey: getOrSet(tagNameKeys, currentValue, () => {
+                        return { tagName: currentValue };
+                    }),
+                };
+                return replacement;
+            }
+        }
+        return currentValue;
+    });
+}
+function classifyValue(lastNewString, currentTemplateString) {
+    const isOpeningTag = lastNewString.trim().endsWith('<') && !!currentTemplateString.match(/^[\s\n>]/);
+    const isClosingTag = lastNewString?.trim().endsWith('</') && currentTemplateString.trim().startsWith('>');
+    const shouldHaveTagNameHere = isOpeningTag || isClosingTag;
+    return {
+        isOpeningTag,
+        shouldHaveTagNameHere,
+    };
+}
+function transformHtml(...[lastNewString, currentTemplateString, rawCurrentValue,]) {
     const currentValue = isMinimalDefinitionWithInputs(rawCurrentValue)
         ? rawCurrentValue.definition
         : rawCurrentValue;
-    const isOpeningTag = lastNewString.trim().endsWith('<') && !!currentLitString.match(/^[\s\n>]/);
-    const isClosingTag = lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>');
-    const shouldHaveTagNameHere = isOpeningTag || isClosingTag;
-    const staticTagName = isMinimalElementDefinition(currentValue);
-    if (shouldHaveTagNameHere && !staticTagName) {
+    const { isOpeningTag, shouldHaveTagNameHere } = classifyValue(lastNewString, currentTemplateString);
+    const isTagNameWrapper = hasTagName(currentValue);
+    if (isTagNameWrapper && shouldHaveTagNameHere && currentValue.tagInterpolationKey) {
+        return {
+            replacement: currentValue.tagName,
+            getExtraValues: undefined,
+        };
+    }
+    if (shouldHaveTagNameHere && !isTagNameWrapper) {
         console.error({
             lastNewString,
-            currentLitString,
+            currentTemplateString,
             currentValue,
         });
-        throw new Error(`Got interpolated tag name but found no tag name on the given value: '${currentValue.prototype.constructor.name}'`);
+        throw new Error(`Got interpolated tag name but found no tag name on the given value: '${currentValue?.tagName ||
+            currentValue?.prototype?.constructor?.name ||
+            currentValue?.constructor?.name}'`);
     }
-    if (!shouldHaveTagNameHere || !staticTagName) {
+    if (!shouldHaveTagNameHere || !isTagNameWrapper) {
         return undefined;
     }
     if (isOpeningTag &&
+        currentValue.elementOptions &&
         !currentValue.elementOptions.ignoreUnsetInputs &&
         !isMinimalDefinitionWithInputs(rawCurrentValue)) {
         throw new Error(`Missing inputs for '${currentValue.tagName}'`);

package/dist/template-transforms/vir-html/tag-name-keys.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Used to create objects for each interpolated tag name string (tag names that aren't wrapped in a
+ * `DeclarativeElementDefinition`) so that we can use them as keys for the mapped template weakmap.
+ */
+export declare const tagNameKeys: Record<string, {
+    tagName: string;
+}>;

package/dist/template-transforms/vir-html/tag-name-keys.js

@@ -0,0 +1,5 @@
+/**
+ * Used to create objects for each interpolated tag name string (tag names that aren't wrapped in a
+ * `DeclarativeElementDefinition`) so that we can use them as keys for the mapped template weakmap.
+ */
+export const tagNameKeys = {};

package/dist/template-transforms/vir-html/vir-html.js

@@ -1,6 +1,6 @@
 import { html as litHtml } from 'lit';
 import { getTransformedTemplate } from '../transform-template';
-import { transformHtmlTemplate } from './html-transform';
+import { mapHtmlValues, transformHtmlTemplate } from './html-transform';
 /**
  * Interprets a template literal as an HTML template which is lazily rendered to the DOM.
  *
@@ -8,8 +8,9 @@ import { transformHtmlTemplate } from './html-transform';
  * `DeclarativeElementDefinition` for tag names.
  */
 export function html(inputTemplateStrings, ...inputValues) {
-    const litTemplate = litHtml(inputTemplateStrings, ...inputValues);
-    const transformedTemplate = getTransformedTemplate(inputTemplateStrings, inputValues, () => {
+    const mappedValues = mapHtmlValues(inputTemplateStrings, inputValues);
+    const litTemplate = litHtml(inputTemplateStrings, ...mappedValues);
+    const transformedTemplate = getTransformedTemplate(inputTemplateStrings, mappedValues, () => {
         return transformHtmlTemplate(litTemplate);
     });
     const htmlTemplate = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "20.0.9",
+    "version": "22.0.0",
     "keywords": [
         "custom",
         "web",
@@ -35,35 +35,38 @@
         "test": "virmator test-web",
         "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
-        "test:types": "npm run compile"
+        "test:types": "tsc --pretty --noEmit"
     },
     "dependencies": {
-        "@augment-vir/common": "^23.3.4",
-        "date-vir": "^5.1.2",
+        "@augment-vir/common": "^26.2.1",
+        "date-vir": "^5.1.3",
         "lit": "^3.1.2",
-        "lit-css-vars": "^3.0.8",
+        "lit-css-vars": "^3.0.9",
         "lit-html": "^3.1.2",
-        "object-shape-tester": "^2.3.1",
-        "run-time-assertions": "^1.0.0"
+        "object-shape-tester": "^2.3.2",
+        "observavir": "^1.0.0",
+        "run-time-assertions": "^1.2.0",
+        "typed-event-target": "^3.2.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^23.3.4",
-        "@augment-vir/node-js": "^23.3.4",
+        "@augment-vir/browser-testing": "^26.2.1",
+        "@augment-vir/node-js": "^26.2.1",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "@open-wc/testing": "^4.0.0",
-        "@types/chai": "^4.3.11",
+        "@types/chai": "^4.3.14",
         "@types/mocha": "^10.0.6",
         "@web/dev-server-esbuild": "^1.0.2",
-        "@web/test-runner": "^0.18.0",
+        "@web/test-runner": "^0.18.1",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.9.0",
+        "html-spec-tags": "^2.2.0",
         "istanbul-smart-text-reporter": "^1.1.4",
         "markdown-code-example-inserter": "^1.0.0",
-        "type-fest": "^4.10.2",
-        "typedoc": "^0.25.8",
-        "typescript": "^5.3.3",
+        "type-fest": "^4.14.0",
+        "typedoc": "^0.25.12",
+        "typescript": "5.3.3",
         "vite": "^4.5.0",
-        "vite-tsconfig-paths": "^4.3.1"
+        "vite-tsconfig-paths": "^4.3.2"
     }
 }

package/dist/declarative-element/properties/element-updater-proxy.d.ts

@@ -1,5 +0,0 @@
-import { DeclarativeElement } from '../declarative-element';
-import { PropertyInitMapBase } from './element-properties';
-/** Binds the given property key as a reactive property on the given element. */
-export declare function bindReactiveProperty(element: HTMLElement, propertyKey: PropertyKey): void;
-export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;

package/dist/declarative-element/properties/observable-prop/interval-observable-prop.d.ts

@@ -1,37 +0,0 @@
-import { Duration, DurationUnit } from 'date-vir';
-import { TriggerUpdateFunction, UpdatableObservableProp, UpdatableObservablePropSetup } from './updatable-observable-prop';
-export type IntervalObservablePropSetup<ValueType, UpdateInputType> = UpdatableObservablePropSetup<ValueType, UpdateInputType> & {
-    /** Update interval. */
-    updateInterval: Duration<DurationUnit.Milliseconds>;
-    /**
-     * If set to true, the interval observable prop will not automatically start its internal
-     * interval.
-     */
-    startPaused?: boolean | undefined;
-    /**
-     * The minimum duration between triggers. If an automatic or manual trigger happens twice within
-     * this duration, the second one will not do anything.
-     */
-    rateLimit?: Duration<DurationUnit.Milliseconds> | undefined;
-};
-export type IntervalObservableProp<ValueType, UpdateInputType> = Omit<UpdatableObservableProp<ValueType, UpdateInputType>, 'triggerUpdate'> & {
-    /** Manually force the observable prop to update outside of its normal interval. */
-    forceUpdate: TriggerUpdateFunction<ValueType, UpdateInputType>;
-    /**
-     * Pauses the update interval, if it isn't already paused. Use .resumeInterval() to start the
-     * interval again. Under the hood, this actually clears the interval entirely.
-     */
-    pauseInterval(): void;
-    /**
-     * Resumes the update interval if it was paused. Under the hood, this creates a new interval
-     * entirely, as .pauseInterval() actually clears it.
-     */
-    resumeInterval(): void;
-    /** Cleans up the interval observable prop. */
-    destroy(): void;
-};
-/**
- * This creates an updatable observable prop that will automatically update itself at the given
- * interval.
- */
-export declare function createIntervalObservableProp<ValueType, UpdateInputType = undefined>(setup: IntervalObservablePropSetup<ValueType, UpdateInputType>): IntervalObservableProp<ValueType, UpdateInputType>;

package/dist/declarative-element/properties/observable-prop/interval-observable-prop.js

@@ -1,56 +0,0 @@
-import { createUpdatableObservableProp, } from './updatable-observable-prop';
-/**
- * This creates an updatable observable prop that will automatically update itself at the given
- * interval.
- */
-export function createIntervalObservableProp(setup) {
-    let latestInputs = setup.initInput;
-    const baseObservableProp = createUpdatableObservableProp(setup);
-    let latestIntervalId = undefined;
-    let lastUpdateTimestamp = 0;
-    const shouldRunInterval = setup.updateInterval.milliseconds > 0 &&
-        Math.abs(setup.updateInterval.milliseconds) !== Infinity;
-    let lastOutput = baseObservableProp.value;
-    baseObservableProp.addListener((value) => (lastOutput = value));
-    function updateValue(...newInputs) {
-        if (newInputs.length) {
-            latestInputs = newInputs[0];
-        }
-        const now = Date.now();
-        const shouldIgnoreDueToRateLimiting = setup.rateLimit &&
-            setup.rateLimit.milliseconds > 0 &&
-            now - lastUpdateTimestamp < setup.rateLimit?.milliseconds;
-        if (shouldIgnoreDueToRateLimiting) {
-            return lastOutput;
-        }
-        lastUpdateTimestamp = now;
-        return baseObservableProp.triggerUpdate(latestInputs);
-    }
-    function resumeInterval() {
-        if (shouldRunInterval && latestIntervalId == undefined) {
-            latestIntervalId = window.setInterval(() => {
-                updateValue();
-            }, Math.ceil(setup.updateInterval.milliseconds));
-        }
-    }
-    function pauseInterval() {
-        if (latestIntervalId != undefined) {
-            window.clearInterval(latestIntervalId);
-            latestIntervalId = undefined;
-        }
-    }
-    if (!setup.startPaused) {
-        resumeInterval();
-    }
-    const originalDestroy = baseObservableProp.destroy;
-    const observablePropertyWithInterval = Object.assign(baseObservableProp, {
-        forceUpdate: updateValue,
-        pauseInterval,
-        resumeInterval,
-        destroy() {
-            pauseInterval();
-            originalDestroy();
-        },
-    });
-    return observablePropertyWithInterval;
-}

package/dist/declarative-element/properties/observable-prop/observable-prop.d.ts

@@ -1,13 +0,0 @@
-import { PropertyInitMapBase } from '../element-properties';
-export type ObservablePropListener<T> = (value: T) => void;
-export type ObservablePropListenerMap<OriginalPropertyMap extends PropertyInitMapBase> = Partial<Record<keyof OriginalPropertyMap, ObservablePropListener<any> | undefined>>;
-export type ObservableProp<ValueType> = {
-    /** Add the given listener. Returns a callback which will remove the listener. */
-    addListener(listener: ObservablePropListener<ValueType>): () => boolean;
-    /** Remove the given listener by reference. */
-    removeListener(listener: ObservablePropListener<ValueType>): boolean;
-    destroy(): void;
-    value: ValueType;
-};
-export declare const basicObservablePropShape: import("object-shape-tester").ShapeDefinition<ObservableProp<any>, false>;
-export declare function isObservableProp<ValueType = unknown>(input: unknown): input is ObservableProp<ValueType>;

package/dist/declarative-element/properties/observable-prop/observable-prop.js

@@ -1,14 +0,0 @@
-import { defineShape, isValidShape, unknownShape } from 'object-shape-tester';
-export const basicObservablePropShape = defineShape({
-    addListener() {
-        return () => false;
-    },
-    removeListener() {
-        return false;
-    },
-    destroy() { },
-    value: unknownShape(),
-});
-export function isObservableProp(input) {
-    return isValidShape(input, basicObservablePropShape, { allowExtraKeys: true });
-}

package/dist/declarative-element/properties/observable-prop/setter-observable-prop.d.ts

@@ -1,18 +0,0 @@
-import { referenceEqualityCheck } from '../../../util/equality';
-import { ObservableProp } from './observable-prop';
-/** A simple ObservableProp with a setter. */
-export type SetterObservableProp<ValueType> = ObservableProp<ValueType> & {
-    setValue(newValue: ValueType): void;
-};
-/**
- * Easy and quick way to create an ObservableProp. Includes a setValue method with equality checking
- * for easily emitting changes.
- */
-export declare function createSetterObservableProp<ValueType>(
-/** The value at which the `SetterObservableProp` will start at. */
-initValue: ValueType, 
-/**
- * The function used to determine if a set value is actually new. Defaults to simple reference
- * equality.
- */
-equalityCallback?: typeof referenceEqualityCheck): SetterObservableProp<ValueType>;

package/dist/declarative-element/properties/observable-prop/setter-observable-prop.js

@@ -1,42 +0,0 @@
-import { referenceEqualityCheck } from '../../../util/equality';
-/**
- * Easy and quick way to create an ObservableProp. Includes a setValue method with equality checking
- * for easily emitting changes.
- */
-export function createSetterObservableProp(
-/** The value at which the `SetterObservableProp` will start at. */
-initValue, 
-/**
- * The function used to determine if a set value is actually new. Defaults to simple reference
- * equality.
- */
-equalityCallback = referenceEqualityCheck) {
-    const listeners = new Set();
-    function fireListeners() {
-        listeners.forEach((listener) => listener(observableProperty.value));
-    }
-    function removeListener(listener) {
-        return listeners.delete(listener);
-    }
-    const observableProperty = {
-        value: initValue,
-        setValue(newValue) {
-            if (!equalityCallback(observableProperty.value, newValue)) {
-                observableProperty.value = newValue;
-                fireListeners();
-            }
-        },
-        addListener(listener) {
-            const shouldAddListener = !listeners.has(listener);
-            if (shouldAddListener) {
-                listeners.add(listener);
-            }
-            return () => removeListener(listener);
-        },
-        removeListener,
-        destroy() {
-            listeners.clear();
-        },
-    };
-    return observableProperty;
-}

package/dist/declarative-element/properties/observable-prop/updatable-observable-prop.d.ts

@@ -1,40 +0,0 @@
-import { referenceEqualityCheck } from '../../../util/equality';
-import { ObservableProp } from './observable-prop';
-/** Callback for updating the `UpdatableObservableProp`. */
-export type UpdaterCallback<ValueType, UpdateInputType> = (inputs: UpdateInputType, lastValue: ValueType | undefined) => ValueType;
-/** Function for updating the `UpdatableObservableProp`. */
-export type TriggerUpdateFunction<ValueType, UpdateInputType> = (inputs?: UpdateInputType) => ValueType;
-export type UpdatableObservableProp<ValueType, UpdateInputType> = ObservableProp<ValueType | Awaited<ValueType>> & {
-    /**
-     * Trigger the `UpdatableObservableProp` to update itself. Requires the inputs that the
-     * observable prop's updateCallback requires.
-     */
-    triggerUpdate: TriggerUpdateFunction<ValueType, UpdateInputType>;
-    /** The number of times that the prop has been updated. Mostly only useful for debugging. */
-    readonly updateCount: number;
-    /**
-     * The last value that was resolved. This will be undefined if there has never, so far, been a
-     * resolved value.
-     */
-    latestResolvedValue: ValueType extends Promise<any> ? Awaited<ValueType> | undefined : ValueType;
-};
-/** Setup required for creating an `UpdatableObservableProp`. */
-export type UpdatableObservablePropSetup<ValueType, UpdateInputType> = {
-    /** Initial value for the observable prop. */
-    initInput: UpdateInputType;
-    /** The callback which will be called in order to update the observable prop. */
-    updateCallback: UpdaterCallback<ValueType, UpdateInputType>;
-    /**
-     * The function used to determine if a new value is actually new. Defaults to simple reference
-     * equality.
-     */
-    equalityCallback?: typeof referenceEqualityCheck | undefined;
-};
-/**
- * An ObservableProp that requires an updater callback on setup. Future updates then call this
- * updater callback rather than directly setting a value (`SetterObservableProp` merely sets a
- * value).
- */
-export declare function createUpdatableObservableProp<ValueType, UpdateInputType = undefined>(
-/** Setup object required for creating the UpdatableObservableProp. */
-setup: UpdatableObservablePropSetup<ValueType, UpdateInputType>): UpdatableObservableProp<ValueType, UpdateInputType>;

package/dist/declarative-element/properties/observable-prop/updatable-observable-prop.js

@@ -1,61 +0,0 @@
-import { referenceEqualityCheck } from '../../../util/equality';
-import { createSetterObservableProp } from './setter-observable-prop';
-/**
- * An ObservableProp that requires an updater callback on setup. Future updates then call this
- * updater callback rather than directly setting a value (`SetterObservableProp` merely sets a
- * value).
- */
-export function createUpdatableObservableProp(
-/** Setup object required for creating the UpdatableObservableProp. */
-setup) {
-    const areEqual = setup.equalityCallback ?? referenceEqualityCheck;
-    let lastInputs = setup.initInput;
-    let internalUpdateCount = 0;
-    const innerSimpleObservableProp = createSetterObservableProp(undefined, areEqual);
-    function updateValue(...inputs) {
-        internalUpdateCount++;
-        if (inputs.length) {
-            lastInputs = inputs[0];
-        }
-        const newValue = setup.updateCallback(lastInputs, innerSimpleObservableProp.value);
-        if (newValue instanceof Promise) {
-            const wrappedPromise = new Promise(async (resolve, reject) => {
-                try {
-                    const resolvedValue = await newValue;
-                    observableWithUpdater.latestResolvedValue =
-                        resolvedValue;
-                    innerSimpleObservableProp.setValue(resolvedValue);
-                    resolve(resolvedValue);
-                }
-                catch (error) {
-                    reject(error);
-                }
-            });
-            /** Set the promise so consumers know it's loading. */
-            innerSimpleObservableProp.setValue(wrappedPromise);
-            return wrappedPromise;
-        }
-        else {
-            innerSimpleObservableProp.setValue(newValue);
-            observableWithUpdater.latestResolvedValue = newValue;
-            return newValue;
-        }
-    }
-    const observableWithUpdater = Object.assign(innerSimpleObservableProp, {
-        triggerUpdate: updateValue,
-        latestResolvedValue: undefined,
-        updateCount: internalUpdateCount,
-    });
-    Object.defineProperty(observableWithUpdater, 'updateCount', {
-        get() {
-            return internalUpdateCount;
-        },
-    });
-    try {
-        updateValue(setup.initInput);
-    }
-    catch (error) {
-        console.error(error);
-    }
-    return observableWithUpdater;
-}

package/dist/util/equality.d.ts

@@ -1 +0,0 @@
-export declare function referenceEqualityCheck<T>(a: T, b: T): boolean;

package/dist/util/equality.js

@@ -1,3 +0,0 @@
-export function referenceEqualityCheck(a, b) {
-    return a === b;
-}