element-vir 26.15.1 → 26.17.0

package/README.md

@@ -38,7 +38,7 @@ All of [`lit`](https://lit.dev)'s syntax and functionality is available for use
 
 Use `defineElement` to define your element. Here is a bare-minimum example custom element:
 
-<!-- example-link: src/readme-examples/my-simple.element.ts -->
+<!-- example-link: src/readme-examples/my-simple.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -60,12 +60,12 @@ Make sure to export your element definition if you need to use it in other files
 
 To use already defined elements (like the example above), they must be interpolated into HTML templates like so:
 
-<!-- example-link: src/readme-examples/my-app.element.ts -->
+<!-- example-link: src/readme-examples/my-app.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MySimple} from './my-simple.element.js';
+import {MySimple} from './my-simple.example.js';
 
 export const MyApp = defineElement()({
     tagName: 'my-app',
@@ -84,7 +84,7 @@ This requirement ensures that the element is properly imported and registered wi
 
 Styles are added through the `styles` property when defining a declarative element (similar to [how they are defined in `lit`](https://lit.dev/docs/components/styles/)):
 
-<!-- example-link: src/readme-examples/my-with-styles.element.ts -->
+<!-- example-link: src/readme-examples/my-with-styles.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -116,12 +116,12 @@ export const MyWithStyles = defineElement()({
 
 Declarative element definitions can be used in the `css` tagged template just like in the `html` tagged template. This will be replaced by the element's tag name:
 
-<!-- example-link: src/readme-examples/my-with-styles-and-interpolated-selector.element.ts -->
+<!-- example-link: src/readme-examples/my-with-styles-and-interpolated-selector.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {css, html} from 'element-vir';
-import {MySimple} from './my-simple.element.js';
+import {MySimple} from './my-simple.example.js';
 
 export const MyWithStylesAndInterpolatedSelector = defineElement()({
     tagName: 'my-with-styles-and-interpolated-selector',
@@ -144,7 +144,7 @@ Define element inputs by using `defineElement` to define a declarative element.
 
 To use an element's inputs for use in its template, grab `inputs` from `render`'s parameters and interpolate it into your HTML template:
 
-<!-- example-link: src/readme-examples/my-with-inputs.element.ts -->
+<!-- example-link: src/readme-examples/my-with-inputs.example.ts -->
 
 ```TypeScript
 import {defineElement, html} from 'element-vir';
@@ -166,7 +166,7 @@ export const MyWithInputs = defineElement<{
 
 Define initial internal state values and types with the `stateInit` property when defining an element. Grab it with `state` in `render` to use state. Grab `updateState` in `render` to update state:
 
-<!-- example-link: src/readme-examples/my-with-update-state.element.ts -->
+<!-- example-link: src/readme-examples/my-with-update-state.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -204,12 +204,12 @@ export const MyWithUpdateState = defineElement()({
 
 Use the `assign` directive to assign values to child custom elements inputs:
 
-<!-- example-link: src/readme-examples/my-with-assignment.element.ts -->
+<!-- example-link: src/readme-examples/my-with-assignment.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MyWithInputs} from './my-with-inputs.element.js';
+import {MyWithInputs} from './my-with-inputs.example.js';
 
 export const MyWithAssignment = defineElement()({
     tagName: 'my-with-assignment',
@@ -232,7 +232,7 @@ There are two other callbacks you can define that are sort of similar to lifecyc
 -   `init`: called right before the first render and has all state and inputs setup. (This is similar to `connectedCallback` in standard HTMLElement classes but is fired much later, after inputs are assigned, to avoid race conditions.)
 -   `cleanup`: called when an element is removed from the DOM. (This is the same as the `disconnectedCallback` in standard HTMLElement classes.)
 
-<!-- example-link: src/readme-examples/my-with-cleanup-callback.element.ts -->
+<!-- example-link: src/readme-examples/my-with-cleanup-callback.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -262,7 +262,7 @@ When defining a declarative element, use `events` to setup event names and types
 
 To dispatch an event, grab `dispatch` and `events` from `render`'s parameters.
 
-<!-- example-link: src/readme-examples/my-with-events.element.ts -->
+<!-- example-link: src/readme-examples/my-with-events.example.ts -->
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
@@ -301,12 +301,12 @@ export const MyWithEvents = defineElement()({
 
 Use the `listen` directive to listen to events emitted by your custom elements:
 
-<!-- example-link: src/readme-examples/my-with-event-listening.element.ts -->
+<!-- example-link: src/readme-examples/my-with-event-listening.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html, listen} from 'element-vir';
-import {MyWithEvents} from './my-with-events.element.js';
+import {MyWithEvents} from './my-with-events.example.js';
 
 export const MyWithEventListening = defineElement()({
     tagName: 'my-with-event-listening',
@@ -340,7 +340,7 @@ export const MyWithEventListening = defineElement()({
 
 Create a custom event type with `defineTypedEvent`. Make sure to include the type parameter and call it twice, the second time with the event type name string to ensure type safety when using your event. Note that event type names should be unique, or they will clash with each other.
 
-<!-- example-link: src/readme-examples/my-custom-action.event.ts -->
+<!-- example-link: src/readme-examples/my-custom-action.example.ts -->
 
 ```TypeScript
 import {defineTypedEvent} from 'element-vir';
@@ -352,13 +352,13 @@ export const MyCustomActionEvent = defineTypedEvent<number>()('my-custom-action'
 
 Dispatching a custom event and listening to a custom event is the same as doing so for element events:
 
-<!-- example-link: src/readme-examples/my-with-custom-events.element.ts -->
+<!-- example-link: src/readme-examples/my-with-custom-events.example.ts -->
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
 import {defineElement} from 'element-vir';
 import {html, listen} from 'element-vir';
-import {MyCustomActionEvent} from './my-custom-action.event.js';
+import {MyCustomActionEvent} from './my-custom-action.example.js';
 
 export const MyWithCustomEvents = defineElement()({
     tagName: 'my-with-custom-events',
@@ -400,7 +400,7 @@ Host classes are defined by passing an object to `hostClasses` at element defini
 
 Apply host classes in the element's stylesheet by using a callback for the styles property:
 
-<!-- example-link: src/readme-examples/my-with-host-class-definition.element.ts -->
+<!-- example-link: src/readme-examples/my-with-host-class-definition.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -452,12 +452,12 @@ export const MyWithHostClassDefinition = defineElement()({
 
 To apply a host class in a consumer, access the child element's `.hostClasses` property:
 
-<!-- example-link: src/readme-examples/my-with-host-class-usage.element.ts -->
+<!-- example-link: src/readme-examples/my-with-host-class-usage.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MyWithHostClassDefinition} from './my-with-host-class-definition.element.js';
+import {MyWithHostClassDefinition} from './my-with-host-class-definition.example.js';
 
 export const MyWithHostClassUsage = defineElement()({
     tagName: 'my-with-host-class-usage',
@@ -475,7 +475,7 @@ export const MyWithHostClassUsage = defineElement()({
 
 Typed CSS variables are created in a similar manner to host classes:
 
-<!-- example-link: src/readme-examples/my-with-css-vars.element.ts -->
+<!-- example-link: src/readme-examples/my-with-css-vars.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -510,7 +510,7 @@ export const MyWithCssVars = defineElement()({
 
 Use `wrapDefineElement` to compose `defineElement`. This is particularly useful to adding restrictions on the element `tagName`, but it can be used for restricting any of the type parameters:
 
-<!-- example-link: src/readme-examples/my-custom-define.ts -->
+<!-- example-link: src/readme-examples/my-custom-define.example.ts -->
 
 ```TypeScript
 import {wrapDefineElement} from 'element-vir';
@@ -523,7 +523,7 @@ export const defineVirElement = wrapDefineElement<VirTagName>();
 export const defineVerifiedVirElement = wrapDefineElement<VirTagName>({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
-            throw new Error(`all custom elements must start with "vir-"`);
+            throw new Error('all custom elements must start with "vir-"');
         }
     },
 });
@@ -549,7 +549,7 @@ All [built-in `lit` directives](https://lit.dev/docs/templates/directives/) are
 
 This triggers only once when the element it's attached to has actually been created in the DOM. If the attached element changes, the callback will be triggered again.
 
-<!-- example-link: src/readme-examples/my-with-on-dom-created.element.ts -->
+<!-- example-link: src/readme-examples/my-with-on-dom-created.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -576,7 +576,7 @@ export const MyWithOnDomCreated = defineElement()({
 
 This directive fires its callback whenever the element it's attached to resizes. The callback is passed an object with a portion of the [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) properties.
 
-<!-- example-link: src/readme-examples/my-with-on-resize.element.ts -->
+<!-- example-link: src/readme-examples/my-with-on-resize.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -608,7 +608,7 @@ Listen to a specific event. This is explained in the **Listening to element even
 
 Use the `renderIf` directive to easily render a template if a given condition is true.
 
-<!-- example-link: src/readme-examples/my-with-render-if.element.ts -->
+<!-- example-link: src/readme-examples/my-with-render-if.example.ts -->
 
 ```TypeScript
 import {defineElement, html, renderIf} from 'element-vir';
@@ -632,7 +632,7 @@ export const MyWithRenderIf = defineElement<{shouldRender: boolean}>()({
 
 Use `renderAsync` or `isResolved` in conjunction with `asyncProp` to seamlessly render and update element state based on async values:
 
-<!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
+<!-- example-link: src/readme-examples/my-with-async-prop.example.ts -->
 
 ```TypeScript
 import {asyncProp, defineElement, html, listen, renderAsync} from 'element-vir';
@@ -694,18 +694,6 @@ export const MyWithAsyncProp = defineElement<{endpoint: string}>()({
 });
 ```
 
-## Require all child custom elements to be declarative elements
-
-To require all child elements to be declarative elements defined by this package, call `requireAllCustomElementsToBeDeclarativeElements` anywhere in your app. This is a global setting so do not enable it unless you want it to be true _everywhere_ in your current run-time. This should not be used if you're using custom elements from other libraries (unless they happen to also use this package to define their custom elements).
-
-<!-- example-link: src/readme-examples/require-declarative-element.ts -->
-
-```TypeScript
-import {requireAllCustomElementsToBeDeclarativeElements} from 'element-vir';
-
-requireAllCustomElementsToBeDeclarativeElements();
-```
-
 # Dev
 
 ## markdown out of date

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

@@ -14,17 +14,23 @@ import { type InitCallback, type RenderCallback, type RenderParams } from './ren
  *
  * @category Internal
  */
-export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
+export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
      */
     tagName: TagName;
     /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys> | undefined;
+    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys, SlotNames> | undefined;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInit | undefined;
-    slotNames?: SlotNames | undefined;
+    /**
+     * An array of slot names that for type safe usage in rendering HTML, CSS, and in consumers for
+     * assigning slots. Each slot name must be prefixed with the element's tag name. This prefix is
+     * enforced at compile time only: runtimes accept any strings so existing consumers do not
+     * break.
+     */
+    slotNames?: (SlotNames & ReadonlyArray<BaseStringName<TagName>>) | undefined;
     testIds?: TestIds | undefined;
     /**
      * HTML host classes. Values can be callbacks to determine when a host class should be defined,

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

@@ -10,7 +10,7 @@ import { type EventDescriptorMap, type EventsInitMap } from './properties/elemen
 import { type PropertyInitMapBase } from './properties/element-properties.js';
 import { type HostClassNamesMap } from './properties/host-classes.js';
 import { type ObservableListenerMap } from './properties/property-proxy.js';
-import { type BaseStringName, type StringNameMap } from './properties/string-names.js';
+import { type BaseStringName, type SlotNamesMap, type StringNameMap } from './properties/string-names.js';
 import { type RenderCallback, type RenderParams, type UpdateStateCallback } from './render-callback.js';
 /**
  * The `host` type for a declarative element. This references a declarative element instance's
@@ -18,13 +18,13 @@ import { type RenderCallback, type RenderParams, type UpdateStateCallback } from
  *
  * @category Internal
  */
-export type DeclarativeElementHost<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<TagName> = any, CssVarKeys extends BaseStringName<TagName> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> = SetRequiredAndNotNull<Omit<DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
+export type DeclarativeElementHost<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<NoInfer<TagName>> = any, CssVarKeys extends BaseStringName<NoInfer<TagName>> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> = SetRequiredAndNotNull<Omit<DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>, Exclude<keyof StaticDeclarativeElementProperties<any, any, any, any, any, any, any, any>, keyof HTMLElement>>, 'shadowRoot'>;
 /**
  * The full definition for a declarative element.
  *
  * @category Internal
  */
-export type DeclarativeElementDefinition<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<TagName> = any, CssVarKeys extends BaseStringName<TagName> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> = (new () => DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) & StaticDeclarativeElementProperties<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> & {
+export type DeclarativeElementDefinition<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<NoInfer<TagName>> = any, CssVarKeys extends BaseStringName<NoInfer<TagName>> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> = (new () => DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) & StaticDeclarativeElementProperties<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> & {
     InstanceType: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
 };
 /**
@@ -32,7 +32,7 @@ export type DeclarativeElementDefinition<TagName extends CustomElementTagName =
  *
  * @category Internal
  */
-export declare abstract class DeclarativeElement<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<TagName> = any, CssVarKeys extends BaseStringName<TagName> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> extends LitElement {
+export declare abstract class DeclarativeElement<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseStringName<NoInfer<TagName>> = any, CssVarKeys extends BaseStringName<NoInfer<TagName>> = any, SlotNames extends ReadonlyArray<string> = any, TestIds extends ReadonlyArray<string> = any> extends LitElement {
     /**
      * Assign inputs to an element instantiation. Use only on the opening tag.
      *
@@ -93,14 +93,14 @@ export type AssignMethod<TagName extends CustomElementTagName, Inputs extends Pr
  *
  * @category Internal
  */
-export type StaticDeclarativeElementProperties<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
+export type StaticDeclarativeElementProperties<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
     /** Assign inputs to an element directly on its interpolated tag. */
     readonly assign: AssignMethod<TagName, Inputs>;
     assignedInputs: Inputs | undefined;
     /** Pass through the render callback for direct unit testability */
     readonly render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly events: EventDescriptorMap<TagName, EventsInit>;
-    readonly slotNames: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    readonly slotNames: SlotNamesMap<TagName, SlotNames>;
     readonly testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
     readonly init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly elementOptions: DeclarativeElementDefinitionOptions;

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

@@ -38,4 +38,4 @@ export declare function defineElement<Inputs extends PropertyInitMapBase = {}>(
  * These `errorParams` is present when there are problems with the `Inputs` type. If it is
  * present, the error should be fixed. This should always be empty.
  */
-...errorParams: DeclarativeElementInputErrorParams<Inputs>): <const TagName extends CustomElementTagName, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(initInput: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+...errorParams: DeclarativeElementInputErrorParams<Inputs>): <const TagName extends CustomElementTagName, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseStringName<NoInfer<TagName>> = `${NoInfer<TagName>}-`, const CssVarKeys extends BaseStringName<NoInfer<TagName>> = `${NoInfer<TagName>}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(initInput: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

@@ -9,7 +9,7 @@ import { assignInputs } from './properties/assign-inputs.js';
 import { createEventDescriptorMap, } from './properties/element-events.js';
 import { createHostClassNamesMap } from './properties/host-classes.js';
 import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy.js';
-import { assertValidStringNames, createStringNameMap, } from './properties/string-names.js';
+import { assertValidStringNames, createSlotNamesMap, createStringNameMap, } from './properties/string-names.js';
 import { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
 import { createRenderParams } from './render-callback.js';
 /**
@@ -42,7 +42,7 @@ export function defineElement(
     return (initInput) => {
         const init = initInput;
         if (!check.isObject(init)) {
-            throw new TypeError('Cannot define element with non-object init: ${init}');
+            throw new TypeError(`Cannot define element with non-object init: ${String(init)}`);
         }
         return internalDefineElement({
             ...init,
@@ -54,7 +54,7 @@ export function defineElement(
 }
 function internalDefineElement(init) {
     if (!check.isObject(init)) {
-        throw new TypeError('Cannot define element with non-object init: ${init}');
+        throw new TypeError(`Cannot define element with non-object init: ${String(init)}`);
     }
     else if (!check.isString(init.tagName)) {
         throw new TypeError('Missing valid tagName (expected a string).');
@@ -70,10 +70,10 @@ function internalDefineElement(init) {
     const eventsMap = createEventDescriptorMap(init.tagName, init.events);
     const hostClassNames = createHostClassNamesMap(init.hostClasses);
     if (init.hostClasses) {
-        assertValidStringNames(init.tagName, init.hostClasses);
+        assertValidStringNames(init.tagName, Object.keys(init.hostClasses));
     }
     if (init.cssVars) {
-        assertValidStringNames(init.tagName, init.cssVars);
+        assertValidStringNames(init.tagName, Object.keys(init.cssVars));
     }
     /**
      * As casts here are to prevent defineCssVars from complaining that our CSS var names are too
@@ -82,12 +82,13 @@ function internalDefineElement(init) {
      * specific types externally.)
      */
     const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
-    const slotNamesMap = createStringNameMap(init.tagName, 'slot', init.slotNames);
+    const slotNamesMap = createSlotNamesMap(init.tagName, init.slotNames);
     const testIdsMap = createStringNameMap(init.tagName, 'test-id', init.testIds);
     const calculatedStyles = typeof init.styles === 'function'
         ? init.styles(createStylesCallbackInput({
             hostClassNames,
             cssVars,
+            slotNamesMap,
         }))
         : init.styles || css ``;
     const typedRenderCallback = init.render;
@@ -147,7 +148,7 @@ function internalDefineElement(init) {
                     this._stateCalled = true;
                     const stateInit = init.state(renderParams);
                     if (stateInit instanceof Promise) {
-                        throw new TypeError('init cannot be asynchronous');
+                        throw new TypeError('state cannot be asynchronous');
                     }
                     getObjectTypedKeys(stateInit).forEach((stateKey) => {
                         bindReactiveProperty(this, stateKey);
@@ -205,18 +206,27 @@ function internalDefineElement(init) {
                     stateValue.destroy();
                 }
             });
+            this._initCalled = false;
+            this._stateCalled = false;
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            if (init.cleanup && this._stateCalled) {
-                const renderParams = this.createRenderParams();
-                if (init.cleanup(renderParams) instanceof Promise) {
-                    throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
+            /**
+             * Always reset bookkeeping and run `destroy()`, even when `cleanup` throws — otherwise
+             * a throwing cleanup leaves `_initCalled` / `_stateCalled` stuck and corrupts the next
+             * mount.
+             */
+            try {
+                if (init.cleanup && this._stateCalled) {
+                    const renderParams = this.createRenderParams();
+                    if (init.cleanup(renderParams) instanceof Promise) {
+                        throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
+                    }
                 }
             }
-            this.destroy();
-            this._initCalled = false;
-            this._stateCalled = false;
+            finally {
+                this.destroy();
+            }
         }
         // this is set below in Object.defineProperties
         definition = {};

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

@@ -29,9 +29,5 @@ export function assertIsElementPartInfo(partInfo, directiveName) {
     const hostTagMessage = hostTagName ? `: in ${hostTagName}` : '';
     if (partInfo.type !== PartType.ELEMENT) {
         throw new Error(`${directiveName} directive can only be attached directly to an element${hostTagMessage}.`);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    }
-    else if (!partInfo.element) {
-        throw new Error(`${directiveName} directive found no element${hostTagMessage}.`);
     }
 }

package/dist/declarative-element/directives/on-intersect.directive.d.ts

@@ -59,6 +59,11 @@ export declare const onIntersect: (options: IntersectionObserverInit, callback:
         fireCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
         update(partInfo: PartInfo, [options, callback,]: [OnIntersectOptions, OnIntersectCallback]): undefined;
         render(options: OnIntersectOptions, callback: OnIntersectCallback): undefined;
+        disconnected(): void;
+        reconnected(): void;
+        isConnected: boolean;
+        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+        setValue(value: unknown): void;
         get _$isConnected(): boolean;
     };
 }>;

package/dist/declarative-element/directives/on-intersect.directive.js

@@ -1,5 +1,5 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
-import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { AsyncDirective, directive } from '../../lit-exports/all-lit-exports.js';
 import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onIntersect';
 /**
@@ -35,7 +35,7 @@ const directiveName = 'onIntersect';
  * });
  * ```
  */
-export const onIntersect = directive(class extends Directive {
+export const onIntersect = directive(class extends AsyncDirective {
     element;
     options;
     intersectionObserver;
@@ -86,4 +86,12 @@ export const onIntersect = directive(class extends Directive {
     render(options, callback) {
         return undefined;
     }
+    disconnected() {
+        this.intersectionObserver?.disconnect();
+    }
+    reconnected() {
+        if (this.element && this.intersectionObserver) {
+            this.intersectionObserver.observe(this.element);
+        }
+    }
 });

package/dist/declarative-element/directives/on-resize.directive.d.ts

@@ -42,6 +42,11 @@ export declare const onResize: (callback: OnResizeCallback) => import("lit-html/
         callback: OnResizeCallback | undefined;
         update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
         render(callback: OnResizeCallback): undefined;
+        disconnected(): void;
+        reconnected(): void;
+        isConnected: boolean;
+        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+        setValue(value: unknown): void;
         get _$isConnected(): boolean;
     };
 }>;

package/dist/declarative-element/directives/on-resize.directive.js

@@ -1,4 +1,4 @@
-import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { AsyncDirective, directive } from '../../lit-exports/all-lit-exports.js';
 import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onResize';
 /**
@@ -28,7 +28,7 @@ const directiveName = 'onResize';
  * });
  * ```
  */
-export const onResize = directive(class extends Directive {
+export const onResize = directive(class extends AsyncDirective {
     element;
     resizeObserver = new ResizeObserver((entries) => {
         if (this.element && this.callback) {
@@ -59,12 +59,20 @@ export const onResize = directive(class extends Directive {
     render(callback) {
         return undefined;
     }
+    disconnected() {
+        this.resizeObserver.disconnect();
+    }
+    reconnected() {
+        if (this.element) {
+            this.resizeObserver.observe(this.element);
+        }
+    }
 });
 function handleOnResizeCallback(element, callback, entries) {
     const resizeEntry = entries[0];
     if (!resizeEntry) {
         console.error(entries);
-        throw new Error(`Resize observation triggered but the first entry was empty.`);
+        throw new Error('Resize observation triggered but the first entry was empty.');
     }
     void callback({
         target: resizeEntry.target,

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

@@ -47,7 +47,7 @@ export function createEventDescriptorMap(tagName, eventsInit) {
             throw new TypeError(`Expected event key of type string but got type '${typeof currentElementEventKey}' for key ${String(currentElementEventKey)}`);
         }
         else if (currentElementEventKey === '') {
-            throw new Error(`Got empty string for events key.`);
+            throw new Error('Got empty string for events key.');
         }
         return true;
     })

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

@@ -77,7 +77,7 @@ export function createElementPropertyProxy(element, shouldAlreadyExist) {
             }
             else if (isObservableBase(oldValue)) {
                 /** Clear out old listener that is no longer used. */
-                element.observablePropertyListenerMap[propertyKey] = undefined;
+                delete element.observablePropertyListenerMap[propertyKey];
             }
             setValueOnElement(newValue);
             return true;

package/dist/declarative-element/properties/string-names.d.ts

@@ -11,7 +11,7 @@ export type BaseStringName<ElementTagName extends CustomElementTagName> = `${Ele
  *
  * @category Internal
  */
-export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: Record<BaseStringName<CustomElementTagName>, any>): void;
+export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: ReadonlyArray<string>): void;
 /**
  * Type safe mapping of string names to themself with the element tag name inserted.
  *
@@ -26,3 +26,23 @@ export type StringNameMap<ElementTagName extends CustomElementTagName, NameType
  * @category Internal
  */
 export declare function createStringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, nameType: NameType, stringNames: StringNames | undefined): StringNameMap<ElementTagName, NameType, StringNames>;
+/**
+ * Map of slot names to their runtime values. Slot names that already start with the element's tag
+ * name are kept as-is; legacy slot names without the tag-name prefix are auto-rewritten at runtime
+ * to `${ElementTagName}-slot-${Name}` and this type reflects that.
+ *
+ * @category Internal
+ */
+export type SlotNamesMap<ElementTagName extends string, SlotNames extends ReadonlyArray<string>> = Readonly<{
+    [Name in ArrayElement<SlotNames>]: Name extends `${ElementTagName}-${string}` ? Name : `${ElementTagName}-slot-${Name}`;
+}>;
+/**
+ * Converts an array of slot names into a {@link SlotNamesMap}.
+ *
+ * Slot names that start with the element's tag name pass through unchanged. Slot names that do not
+ * are transformed into the legacy `${tagName}-slot-${name}` format so existing elements that
+ * pre-date the tag prefix convention keep working.
+ *
+ * @category Internal
+ */
+export declare function createSlotNamesMap<ElementTagName extends CustomElementTagName, SlotNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, slotNames: SlotNames | undefined): SlotNamesMap<ElementTagName, SlotNames>;

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

@@ -9,7 +9,7 @@ export function assertValidStringNames(elementTagName, stringNames) {
         elementTagName,
         '-',
     ].join('');
-    Object.keys(stringNames).forEach((stringName) => {
+    stringNames.forEach((stringName) => {
         if (!stringName.startsWith(requiredNameStart)) {
             throw new Error(`Invalid element string name '${stringName}' in '${elementTagName}': element string names must begin with the element's tag name.`);
         }
@@ -38,3 +38,37 @@ export function createStringNameMap(elementTagName, nameType, stringNames) {
     });
     return stringNameMap;
 }
+/**
+ * Converts an array of slot names into a {@link SlotNamesMap}.
+ *
+ * Slot names that start with the element's tag name pass through unchanged. Slot names that do not
+ * are transformed into the legacy `${tagName}-slot-${name}` format so existing elements that
+ * pre-date the tag prefix convention keep working.
+ *
+ * @category Internal
+ */
+export function createSlotNamesMap(elementTagName, slotNames) {
+    if (!slotNames) {
+        return {};
+    }
+    const requiredNameStart = [
+        elementTagName,
+        '-',
+    ].join('');
+    const slotNamesMap = arrayToObject(slotNames, (slotName) => {
+        const value = slotName.startsWith(requiredNameStart)
+            ? slotName
+            : [
+                elementTagName,
+                'slot',
+                slotName,
+            ].join('-');
+        return {
+            key: slotName,
+            value,
+        };
+    }, {
+        useRequired: true,
+    });
+    return slotNamesMap;
+}