element-vir 5.6.0 → 6.0.0

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

@@ -0,0 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+function staticImplements() {
+    return (constructor) => {
+        constructor;
+    };
+}
+let DeclarativeElement = class DeclarativeElement extends LitElement {
+};
+DeclarativeElement = __decorate([
+    staticImplements()
+], DeclarativeElement);
+export { DeclarativeElement };

package/dist/declarative-element/define-element-no-inputs.d.ts

@@ -0,0 +1,5 @@
+import { DeclarativeElementDefinition } from './declarative-element';
+import { DeclarativeElementInit } from './declarative-element-init';
+import { EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+export declare function defineElementNoInputs<InputsGeneric extends PropertyInitMapBase = {}, StateGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = '', CssVarKeys extends string = ''>(initInput: DeclarativeElementInit<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): DeclarativeElementDefinition<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -0,0 +1,118 @@
+import { kebabCaseToCamelCase } from 'augment-vir';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DeclarativeElementMarkerSymbol } from '../declarative-element-marker-symbol';
+import { createCssVarNamesMap, createCssVarValuesMap } from './css-vars';
+import { DeclarativeElement, } from './declarative-element';
+import { defaultDeclarativeElementDefinitionOptions, IgnoreInputsNotBeenSetBeforeRenderWarningSymbol, } from './definition-options';
+import { assign } from './directives/assign.directive';
+import { createEventDescriptorMap } from './element-events';
+import { createElementUpdaterProxy } from './element-properties';
+import { hasDeclarativeElementParent } from './has-declarative-element-parent';
+import { createHostClassNamesMap } from './host-classes';
+import { createRenderParams } from './render-callback';
+import { applyHostClasses, hostClassNamesToStylesInput } from './styles';
+export function defineElementNoInputs(initInput) {
+    var _a;
+    const eventsMap = createEventDescriptorMap(initInput.events);
+    const hostClassNames = createHostClassNamesMap(initInput.tagName, initInput.hostClasses);
+    const cssVarNames = createCssVarNamesMap(initInput.tagName, initInput.cssVars);
+    const cssVarValues = createCssVarValuesMap(initInput.cssVars, cssVarNames);
+    const elementOptions = {
+        ...defaultDeclarativeElementDefinitionOptions,
+        ...initInput.options,
+    };
+    const calculatedStyles = typeof initInput.styles === 'function'
+        ? initInput.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
+        : initInput.styles || css ``;
+    const typedRenderCallback = initInput.renderCallback;
+    const anonymousClass = (_a = class extends DeclarativeElement {
+            constructor() {
+                super();
+                this.initCalled = false;
+                this.haveInputsBeenSet = false;
+                // this is set below in Object.defineProperties
+                this.creator = {};
+                this.instanceInputs = createElementUpdaterProxy(this, false);
+                this.instanceState = createElementUpdaterProxy(this, true);
+                const stateInit = initInput.stateInit || {};
+                Object.keys(stateInit).forEach((propName) => {
+                    property()(this, propName);
+                    this[propName] = stateInit[propName];
+                });
+            }
+            createRenderParams() {
+                return createRenderParams(this, eventsMap);
+            }
+            get instanceType() {
+                throw new Error(`"instanceType" was called on ${initInput.tagName} as a value but it is only for types.`);
+            }
+            static get inputsType() {
+                throw new Error(`"inputsType" was called on ${initInput.tagName} as a value but it is only for types.`);
+            }
+            markInputsAsHavingBeenSet() {
+                if (!this.haveInputsBeenSet) {
+                    this.haveInputsBeenSet = true;
+                }
+            }
+            render() {
+                if (
+                // This ignores elements at the root of a page, as they can't receive inputs from
+                // other elements (cause they have no custom element ancestors).
+                hasDeclarativeElementParent(this) &&
+                    !this.haveInputsBeenSet &&
+                    !elementOptions[IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]) {
+                    console.warn(this, `${initInput.tagName} got rendered before its input object was set. This was most likely caused by forgetting to use the "${assign.name}" directive on it. If no inputs are intended, use "${defineElementNoInputs.name}" to define ${initInput.tagName}.`);
+                }
+                const renderParams = this.createRenderParams();
+                if (!this.initCalled && initInput.initCallback) {
+                    this.initCalled = true;
+                    initInput.initCallback(renderParams);
+                }
+                const renderResult = initInput.renderCallback(renderParams);
+                applyHostClasses({
+                    host: renderParams.host,
+                    hostClassesInit: initInput.hostClasses,
+                    hostClassNames,
+                    state: renderParams.state,
+                    inputs: renderParams.inputs,
+                });
+                return renderResult;
+            }
+        },
+        _a.tagName = initInput.tagName,
+        _a.styles = calculatedStyles,
+        // this gets set below in Object.defineProperties
+        _a.isStrictInstance = () => false,
+        _a.events = eventsMap,
+        _a.renderCallback = typedRenderCallback,
+        _a.hostClasses = hostClassNames,
+        _a.cssVarNames = cssVarNames,
+        _a.stateInit = initInput.stateInit,
+        _a.cssVarValues = cssVarNames,
+        _a);
+    Object.defineProperties(anonymousClass, {
+        [DeclarativeElementMarkerSymbol]: {
+            value: true,
+            writable: false,
+        },
+        name: {
+            value: kebabCaseToCamelCase(initInput.tagName, {
+                capitalizeFirstLetter: true,
+            }),
+            writable: true,
+        },
+        creator: {
+            value: anonymousClass,
+            writable: false,
+        },
+        isStrictInstance: {
+            value: (element) => {
+                return element instanceof anonymousClass;
+            },
+            writable: false,
+        },
+    });
+    window.customElements.define(initInput.tagName, anonymousClass);
+    return anonymousClass;
+}

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

@@ -0,0 +1,5 @@
+import { DeclarativeElementDefinition } from './declarative-element';
+import { DeclarativeElementInit } from './declarative-element-init';
+import { EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+export declare function defineElement<InputsGeneric extends PropertyInitMapBase = {}>(): <PropertyInitGeneric extends PropertyInitMapBase = {}, EventsInitGeneric extends EventsInitMap = {}, HostClassKeys extends string = "", CssVarKeys extends string = "">(initInput: DeclarativeElementInit<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => DeclarativeElementDefinition<InputsGeneric, PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

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

@@ -0,0 +1,13 @@
+import { defineElementNoInputs } from './define-element-no-inputs';
+import { IgnoreInputsNotBeenSetBeforeRenderWarningSymbol } from './definition-options';
+export function defineElement() {
+    return (initInput) => {
+        return defineElementNoInputs({
+            ...initInput,
+            options: {
+                [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: false,
+            },
+            ...initInput.options,
+        });
+    };
+}

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

@@ -0,0 +1,5 @@
+export declare const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol: unique symbol;
+export declare type DeclarativeElementDefinitionOptions = {
+    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: boolean;
+};
+export declare const defaultDeclarativeElementDefinitionOptions: DeclarativeElementDefinitionOptions;

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

@@ -0,0 +1,4 @@
+export const IgnoreInputsNotBeenSetBeforeRenderWarningSymbol = Symbol('key for ignoring inputs not having been set yet');
+export const defaultDeclarativeElementDefinitionOptions = {
+    [IgnoreInputsNotBeenSetBeforeRenderWarningSymbol]: true,
+};

package/dist/declarative-element/directives/assign-with-clean-up.directive.d.ts

@@ -0,0 +1,23 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { PartInfo } from 'lit/directive.js';
+import { DeclarativeElementDefinition } from '../declarative-element';
+export declare type CleanupCallback<T> = (oldValue: T) => void;
+/**
+ * Assign values but include a cleanup callback which gets called when a new value gets assigned so
+ * the previous value can get cleaned up. An optional equality check callback can be provided. If it
+ * is provided, the clean up callback will then only be called if the equality check callback
+ * resolves to false (which indicates that the previous value and the new value are not equal).
+ *
+ * Example use case: 3D graphics applications with classes that setup buffers and the like.
+ */
+export declare function assignWithCleanup<DeclarativeElementGeneric extends DeclarativeElementDefinition>(elementDefinition: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never, cleanupCallback: CleanupCallback<DeclarativeElementGeneric extends DeclarativeElementDefinition<infer InputsGeneric> ? InputsGeneric : never>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    private readonly element;
+    private lastValue;
+    private lastCallback;
+    private hasBeenAssigned;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    render(elementDefinition: DeclarativeElementDefinition, inputsObject: Record<PropertyKey, unknown>, cleanupCallback: CleanupCallback<any>): symbol;
+}
+export {};

package/dist/declarative-element/directives/assign-with-clean-up.directive.js

@@ -0,0 +1,43 @@
+import { noChange } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { directive } from 'lit/directive.js';
+import { assignInputsObject } from './assign.directive';
+import { extractDeclarativeElement } from './directive-helpers';
+/**
+ * Assign values but include a cleanup callback which gets called when a new value gets assigned so
+ * the previous value can get cleaned up. An optional equality check callback can be provided. If it
+ * is provided, the clean up callback will then only be called if the equality check callback
+ * resolves to false (which indicates that the previous value and the new value are not equal).
+ *
+ * Example use case: 3D graphics applications with classes that setup buffers and the like.
+ */
+export function assignWithCleanup(elementDefinition, inputsObject, cleanupCallback) {
+    /**
+     * The directive generics (in listenDirective) are not strong enough to maintain their values.
+     * Thus, the directive call is wrapped in this function.
+     */
+    return assignWithCleanupDirective(elementDefinition, inputsObject, cleanupCallback);
+}
+class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.hasBeenAssigned = false;
+        this.element = extractDeclarativeElement(partInfo, 'assign');
+    }
+    disconnected() {
+        if (this.lastValue != undefined && this.lastCallback != undefined) {
+            this.lastCallback(this.lastValue);
+        }
+    }
+    render(elementDefinition, inputsObject, cleanupCallback) {
+        if (this.hasBeenAssigned) {
+            cleanupCallback(this.lastValue);
+        }
+        assignInputsObject(elementDefinition, this.element, inputsObject);
+        this.hasBeenAssigned = true;
+        this.lastValue = inputsObject;
+        this.lastCallback = cleanupCallback;
+        return noChange;
+    }
+}
+const assignWithCleanupDirective = directive(AssignWithCleanupDirectiveClass);

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

@@ -0,0 +1,12 @@
+import { PartInfo } from 'lit/directive.js';
+import { DeclarativeElement, DeclarativeElementDefinition } from '../declarative-element';
+/** Assign an object matching an element's inputs to its inputs. */
+export declare function assign<DeclarativeElementGeneric extends DeclarativeElementDefinition>(declarativeElement: DeclarativeElementGeneric, inputsObject: DeclarativeElementGeneric['inputsType']): import("lit-html/directive").DirectiveResult<{
+    new (partInfo: PartInfo): {
+        readonly element: DeclarativeElement<any, any, any, string, string>;
+        render(elementDefinition: DeclarativeElementDefinition<any, any, any, string, string>, inputsObject: Record<PropertyKey, unknown>): symbol;
+        readonly _$isConnected: boolean;
+        update(_part: import("lit-html").Part, props: unknown[]): unknown;
+    };
+}>;
+export declare function assignInputsObject<DeclarativeElementInstanceGeneric extends DeclarativeElement, DeclarativeElementDefinitionGeneric extends DeclarativeElementDefinition>(expectedElementConstructor: DeclarativeElementDefinitionGeneric, element: DeclarativeElementInstanceGeneric, assignmentObject: DeclarativeElementDefinitionGeneric['inputsType']): void;

package/dist/declarative-element/directives/assign.directive.js

@@ -0,0 +1,35 @@
+import { noChange } from 'lit';
+import { property } from 'lit/decorators.js';
+import { directive, Directive } from 'lit/directive.js';
+import { extractDeclarativeElement } from './directive-helpers';
+/** Assign an object matching an element's inputs to its inputs. */
+export function assign(declarativeElement, inputsObject) {
+    /**
+     * The directive generics (in listenDirective) are not strong enough to maintain their values.
+     * Thus, the directive call is wrapped in this function.
+     */
+    return assignDirective(declarativeElement, inputsObject);
+}
+const assignDirective = directive(class extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = extractDeclarativeElement(partInfo, 'assign');
+    }
+    render(elementDefinition, inputsObject) {
+        assignInputsObject(elementDefinition, this.element, inputsObject);
+        return noChange;
+    }
+});
+export function assignInputsObject(expectedElementConstructor, element, assignmentObject) {
+    if (element.tagName.toLowerCase() !== expectedElementConstructor.tagName.toLowerCase()) {
+        console.error(element, expectedElementConstructor);
+        throw new Error(`Assignment mismatch. Assignment was made for ${element.tagName.toLowerCase()} but it's attached to ${expectedElementConstructor.tagName.toLowerCase()}`);
+    }
+    Object.keys(assignmentObject).forEach((key) => {
+        if (!element.constructor.elementProperties.has(key)) {
+            property()(element, key);
+        }
+        element.instanceInputs[key] = assignmentObject[key];
+    });
+    element.markInputsAsHavingBeenSet();
+}

package/dist/{functional-element/directives/directive-util.d.ts → declarative-element/directives/directive-helpers.d.ts}

@@ -1,6 +1,5 @@
 import { ElementPartInfo, PartInfo } from 'lit/directive.js';
-import { PropertyInitMapBase } from '../element-properties';
-import { FunctionalElementInstanceFromInit } from '../functional-element';
+import { DeclarativeElement } from '../declarative-element';
 /** For some reason these aren't defined in lit's types already. */
 export declare type ExtraPartInfoProperties = {
     element: Element;
@@ -10,6 +9,6 @@ export declare type ExtraPartInfoProperties = {
         isConnected: boolean;
     };
 };
-export declare function extractFunctionalElement<PropertyInitGeneric extends PropertyInitMapBase>(partInfo: PartInfo, directiveName: string): FunctionalElementInstanceFromInit<PropertyInitGeneric>;
+export declare function extractDeclarativeElement(partInfo: PartInfo, directiveName: string): DeclarativeElement;
 export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
 export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;

package/dist/{functional-element/directives/directive-util.js → declarative-element/directives/directive-helpers.js}

@@ -1,7 +1,7 @@
 import { PartType } from 'lit/directive.js';
-import { FunctionalElementBaseClass } from '../functional-element';
-export function extractFunctionalElement(partInfo, directiveName) {
-    return extractElement(partInfo, directiveName, FunctionalElementBaseClass);
+import { DeclarativeElement } from '../declarative-element';
+export function extractDeclarativeElement(partInfo, directiveName) {
+    return extractElement(partInfo, directiveName, DeclarativeElement);
 }
 export function extractElement(partInfo, directiveName, constructorClass) {
     assertsIsElementPartInfo(partInfo, directiveName);
@@ -16,6 +16,6 @@ export function assertsIsElementPartInfo(partInfo, directiveName) {
         throw new Error(`${directiveName} directive can only be attached directly to an element.`);
     }
     if (!partInfo.element) {
-        throw new Error(`${directiveName} directive found no element`);
+        throw new Error(`${directiveName} directive found no element.`);
     }
 }

package/dist/{functional-element → declarative-element}/directives/listen.directive.d.ts

@@ -4,8 +4,8 @@ import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
  * 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).
  *
- * @param definedTypedEvent Needs to come either from a functional element (like
- *   MyFunctionalElement.events.eventName) or from a typed event created via the defineTypedEvent function.
+ * @param definedTypedEvent Needs to come either from a declarative element (like
+ *   MyDeclarativeElement.events.eventName) or from a typed event created via the defineTypedEvent function.
  * @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.
  */

package/dist/{functional-element → declarative-element}/directives/listen.directive.js

@@ -1,6 +1,6 @@
 import { noChange } from 'lit';
 import { directive, Directive } from 'lit/directive.js';
-import { extractElement } from './directive-util';
+import { extractElement } from './directive-helpers';
 export function listen(eventType, listener) {
     return listenDirective(eventType, listener);
 }

package/dist/{functional-element → declarative-element}/directives/on-dom-created.directive.js

@@ -1,5 +1,5 @@
 import { directive, Directive } from 'lit/directive.js';
-import { assertsIsElementPartInfo } from './directive-util';
+import { assertsIsElementPartInfo } from './directive-helpers';
 const directiveName = 'onDomCreated';
 /** Only fires once, when the element has been created. */
 export const onDomCreated = directive(class extends Directive {

package/dist/{functional-element → declarative-element}/directives/on-resize.directive.js

@@ -1,5 +1,5 @@
 import { directive, Directive } from 'lit/directive.js';
-import { assertsIsElementPartInfo } from './directive-util';
+import { assertsIsElementPartInfo } from './directive-helpers';
 const directiveName = 'onResize';
 export const onResize = directive(class extends Directive {
     constructor(partInfo) {

package/dist/{functional-element → declarative-element}/element-events.js

@@ -9,7 +9,7 @@ export function createEventDescriptorMap(eventsInit) {
     return Object.keys(eventsInit)
         .filter((currentElementEventKey) => {
         if (typeof currentElementEventKey !== 'string') {
-            throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${currentElementEventKey}`);
+            throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${String(currentElementEventKey)}`);
         }
         if (currentElementEventKey === '') {
             throw new Error(`Got empty string for events key.`);

package/dist/{functional-element → declarative-element}/element-properties.d.ts

@@ -1,5 +1,5 @@
-import { FunctionalElementInstanceFromInit } from './functional-element';
-export declare type PropertyInitMapBase = Record<string, unknown>;
+import { DeclarativeElement } from './declarative-element';
+export declare type PropertyInitMapBase = Record<PropertyKey, unknown>;
 export declare type ElementProperty<KeyGeneric extends string | number | symbol, ValueGeneric> = {
     name: KeyGeneric;
     setProp(value: ValueGeneric): void;
@@ -12,5 +12,5 @@ export declare type StaticElementPropertyDescriptor<PropName extends string, Pro
 export declare type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
     [Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
 };
-export declare function createPropertyProxy<PropertyInitGeneric extends PropertyInitMapBase>(propsInitMap: PropertyInitGeneric | undefined, element: FunctionalElementInstanceFromInit<PropertyInitGeneric>): PropertyInitGeneric;
+export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;
 export declare function createPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase>(propertyInit: PropertyInitGeneric | undefined): ElementPropertyDescriptorMap<PropertyInitGeneric>;

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

@@ -0,0 +1,53 @@
+function assertValidPropertyName(propKey, element, elementTagName) {
+    if (typeof propKey !== 'string' && typeof propKey !== 'number' && typeof propKey !== 'symbol') {
+        throw new Error(`Property name must be a string, got type "${typeof propKey}" from: "${String(propKey)}" for ${elementTagName.toLowerCase()}`);
+    }
+    if (!(propKey in element)) {
+        throw new Error(`Property "${String(propKey)}" does not exist on ${elementTagName.toLowerCase()}.`);
+    }
+}
+export function createElementUpdaterProxy(element, verifyExists) {
+    /**
+     * 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
+     * back in here.
+     */
+    const elementAsProps = element;
+    const propsProxy = new Proxy({}, {
+        get: (_target, propertyName) => {
+            if (verifyExists) {
+                assertValidPropertyName(propertyName, element, element.tagName);
+            }
+            return elementAsProps[propertyName];
+        },
+        set: (_target, propertyName, value) => {
+            if (verifyExists) {
+                assertValidPropertyName(propertyName, element, element.tagName);
+            }
+            elementAsProps[propertyName] = value;
+            return true;
+        },
+    });
+    return propsProxy;
+}
+export function createPropertyDescriptorMap(propertyInit) {
+    if (!propertyInit) {
+        return {};
+    }
+    return Object.keys(propertyInit)
+        .filter((key) => {
+        if (typeof key === 'string') {
+            return true;
+        }
+        else {
+            throw new Error(`Property init cannot have non string keys: "${key}"`);
+        }
+    })
+        .reduce((accum, currentKey) => {
+        accum[currentKey] = {
+            propName: currentKey,
+            initValue: propertyInit[currentKey],
+        };
+        return accum;
+    }, {});
+}

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

@@ -0,0 +1 @@
+export declare function hasDeclarativeElementParent(input: Element): boolean;

package/dist/declarative-element/has-declarative-element-parent.js

@@ -0,0 +1,16 @@
+import { DeclarativeElement } from './declarative-element';
+export function hasDeclarativeElementParent(input) {
+    const rootNode = input.getRootNode();
+    if (!(rootNode instanceof ShadowRoot)) {
+        // declarative elements all use shadow DOM, so if a shadow root doesn't exist then we're not
+        // in a declarative element.
+        return false;
+    }
+    const host = rootNode.host;
+    if (host instanceof DeclarativeElement) {
+        return true;
+    }
+    else {
+        return hasDeclarativeElementParent(host);
+    }
+}

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

@@ -0,0 +1,21 @@
+import { PropertyInitMapBase } from './element-properties';
+import { WithTagName } from './tag-name';
+export declare type HostClassToggleCallbackInput<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = {
+    state: Readonly<StateGeneric>;
+    inputs: Readonly<InputsGeneric>;
+};
+export declare type HostClassToggleCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = (inputs: HostClassToggleCallbackInput<InputsGeneric, StateGeneric>) => boolean;
+export declare type HostClassesInitMap<HostClassKeys extends string, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = Record<HostClassKeys, 
+/**
+ * Callback to determine when host class should be enabled (based on current inputs and state),
+ * or just undefined to mark that this host class name will only be manually applied.
+ */
+HostClassToggleCallback<InputsGeneric, StateGeneric> | false>;
+export declare type HostClassName<TagName extends string, HostClassPropName extends string> = `${TagName}-${HostClassPropName}`;
+export declare type HostClassNamesMap<TagName extends string, HostClassKeys extends string> = Record<HostClassKeys, WithTagName<TagName, string>>;
+export declare function createHostClassNamesMap<TagName extends string, HostClassKeys extends string, HostClassesInitGeneric extends HostClassesInitMap<HostClassKeys, 
+/**
+ * We can use any here because we don't care what the state or input names are, we just care
+ * what the host class names are
+ */
+any, any>>(tagName: TagName, hostClassesInit?: HostClassesInitGeneric): HostClassNamesMap<TagName, HostClassKeys>;

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

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import { TypedEvent } from '../typed-event/typed-event';
+import { DeclarativeElement } from './declarative-element';
+import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+export declare type RenderCallback<InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => TemplateResult;
+export declare type InitCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
+export declare type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<StateGeneric>) => void;
+export declare type RenderParams<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
+    state: Readonly<StateGeneric>;
+    updateState: UpdateStateCallback<StateGeneric>;
+    events: EventDescriptorMap<EventsInitGeneric>;
+    host: DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+    dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
+    inputs: InputsGeneric;
+    /**
+     * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
+     * even events from other custom elements.
+     */
+    genericDispatch: (event: Event) => boolean;
+};
+export declare function createRenderParams<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

package/dist/{functional-element → declarative-element}/render-callback.js

@@ -7,13 +7,14 @@ export function createRenderParams(element, eventsMap) {
          */
         dispatch: (event) => element.dispatchEvent(event),
         genericDispatch: (event) => element.dispatchEvent(event),
-        setProps: (partialProps) => {
+        updateState: (partialProps) => {
             getObjectTypedKeys(partialProps).forEach((propKey) => {
-                element.instanceProps[propKey] = partialProps[propKey];
+                element.instanceState[propKey] = partialProps[propKey];
             });
         },
+        inputs: element.instanceInputs,
         host: element,
-        props: element.instanceProps,
+        state: element.instanceState,
         events: eventsMap,
     };
     return renderParams;

package/dist/{functional-element → declarative-element}/styles.d.ts

@@ -13,4 +13,10 @@ export declare function hostClassNamesToStylesInput<HostClassKeys extends string
     cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
     cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
 }): StylesCallbackInput<HostClassKeys, CssVarKeys>;
-export declare function applyHostClasses<PropertyInitGeneric extends PropertyInitMapBase, HostClassKeys extends string>(host: HTMLElement, hostClassesInit: Readonly<HostClassesInitMap<HostClassKeys, PropertyInitGeneric>> | undefined, hostClassNames: HostClassNamesMap<string, HostClassKeys>, props: Readonly<PropertyInitGeneric>): void;
+export declare function applyHostClasses<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, HostClassKeys extends string>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
+    host: HTMLElement;
+    hostClassesInit: Readonly<HostClassesInitMap<HostClassKeys, InputsGeneric, StateGeneric>> | undefined;
+    hostClassNames: HostClassNamesMap<string, HostClassKeys>;
+    state: Readonly<StateGeneric>;
+    inputs: Readonly<InputsGeneric>;
+}): void;

package/dist/{functional-element → declarative-element}/styles.js

@@ -9,7 +9,7 @@ export function hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVa
         cssVarValue: cssVarValues,
     };
 }
-export function applyHostClasses(host, hostClassesInit, hostClassNames, props) {
+export function applyHostClasses({ host, hostClassesInit, hostClassNames, state, inputs, }) {
     if (!hostClassesInit) {
         return;
     }
@@ -17,7 +17,7 @@ export function applyHostClasses(host, hostClassesInit, hostClassNames, props) {
         const maybeCallback = hostClassesInit[hostClassKey];
         const hostClassName = hostClassNames[hostClassKey];
         if (typeof maybeCallback === 'function') {
-            const shouldApplyHostClass = maybeCallback({ props });
+            const shouldApplyHostClass = maybeCallback({ state, inputs });
             if (shouldApplyHostClass) {
                 host.classList.add(hostClassName);
             }

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

@@ -0,0 +1 @@
+export declare const DeclarativeElementMarkerSymbol: unique symbol;

package/dist/declarative-element-marker-symbol.js

@@ -0,0 +1 @@
+export const DeclarativeElementMarkerSymbol = Symbol('this-is-an-element-vir-declarative-element');

package/dist/index.d.ts

@@ -1,15 +1,17 @@
-export * from './functional-element/define-functional-element';
-export * from './functional-element/directives/assign-with-clean-up.directive';
-export * from './functional-element/directives/assign.directive';
-export * from './functional-element/directives/directive-util';
-export * from './functional-element/directives/listen.directive';
-export * from './functional-element/directives/on-dom-created.directive';
-export * from './functional-element/directives/on-resize.directive';
-export * from './functional-element/element-events';
-export * from './functional-element/element-properties';
-export * from './functional-element/functional-element';
-export * from './functional-element/render-callback';
-export { requireAllCustomElementsToBeFunctionalElement } from './require-functional-element';
+export * from './declarative-element/declarative-element';
+export * from './declarative-element/define-element';
+export * from './declarative-element/define-element-no-inputs';
+export type { DeclarativeElementDefinitionOptions } from './declarative-element/definition-options';
+export * from './declarative-element/directives/assign-with-clean-up.directive';
+export * from './declarative-element/directives/assign.directive';
+export * from './declarative-element/directives/directive-helpers';
+export * from './declarative-element/directives/listen.directive';
+export * from './declarative-element/directives/on-dom-created.directive';
+export * from './declarative-element/directives/on-resize.directive';
+export * from './declarative-element/element-events';
+export * from './declarative-element/element-properties';
+export * from './declarative-element/render-callback';
+export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
 export * from './template-transforms/vir-css/vir-css';
 export * from './template-transforms/vir-html/vir-html';
 export * from './typed-event/typed-event';