element-vir 26.10.0 → 26.11.0

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

@@ -1,11 +1,11 @@
 import { type CSSResult } from '../lit-exports/base-lit-exports.js';
 import { type CustomElementTagName } from './custom-tag-name.js';
 import { type DeclarativeElementDefinitionOptions } from './definition-options.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type CssVarsInitMap } from './properties/css-vars.js';
 import { type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
 import { type HostClassesInitMap } from './properties/host-classes.js';
+import { type BaseStringName } from './properties/string-names.js';
 import { type StylesCallback } from './properties/styles.js';
 import { type InitCallback, type RenderCallback, type RenderParams } from './render-callback.js';
 /**
@@ -14,7 +14,7 @@ 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 BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+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>> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
@@ -25,6 +25,7 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInit | undefined;
     slotNames?: SlotNames | undefined;
+    testIds?: TestIds | undefined;
     /**
      * HTML host classes. Values can be callbacks to determine when a host class should be defined,
      * based on current instance state or inputs, or just false to indicate that the host class will
@@ -46,10 +47,10 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
      * Setup the element's initial state. This is only called once per element instance, before the
      * first render. The return type of this method becomes the element's state type.
      */
-    state?: (params: Omit<RenderParams<TagName, Inputs, any, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, 'state' | 'updateState'>) => Extract<keyof State, keyof HTMLElement> extends never ? Extract<keyof State, keyof Inputs> extends never ? State : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}` : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
+    state?: (params: Omit<RenderParams<TagName, Inputs, any, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>, 'state' | 'updateState'>) => Extract<keyof State, keyof HTMLElement> extends never ? Extract<keyof State, keyof Inputs> extends never ? State : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}` : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
     /** Called as part of the first render call, before the first render call. */
-    init?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> | undefined;
-    render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    cleanup?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> | undefined;
+    init?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> | undefined;
+    render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+    cleanup?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> | undefined;
     options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
 };

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

@@ -5,35 +5,34 @@ import { type MinimalDefinitionWithInputs } from '../template-transforms/minimal
 import { type CustomElementTagName } from './custom-tag-name.js';
 import { type DeclarativeElementInit } from './declarative-element-init.js';
 import { type DeclarativeElementDefinitionOptions } from './definition-options.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type CssVars } from './properties/css-vars.js';
 import { type EventDescriptorMap, type EventsInitMap } from './properties/element-events.js';
 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 RenderCallback, type RenderParams, type UpdateStateCallback } from './render-callback.js';
-import { type SlotNameMap } from './slot-names.js';
 /**
  * The `host` type for a declarative element. This references a declarative element instance's
  * top-level HTML element and always contains a shadow root (wherein the element is rendered).
  *
  * @category Internal
  */
-export type DeclarativeElementHost<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State extends PropertyInitMapBase = any, EventsInit extends EventsInitMap = any, HostClassKeys extends BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = SetRequiredAndNotNull<Omit<DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, Exclude<keyof StaticDeclarativeElementProperties<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<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'>;
 /**
  * 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 BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames extends ReadonlyArray<string> = any> = (new () => DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) & StaticDeclarativeElementProperties<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames> & {
-    InstanceType: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+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> & {
+    InstanceType: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
 };
 /**
  * Abstract class base for all declarative elements.
  *
  * @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 BaseCssPropertyName<TagName> = any, CssVarKeys extends BaseCssPropertyName<TagName> = any, SlotNames 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<TagName> = any, CssVarKeys extends BaseStringName<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.
      *
@@ -47,23 +46,24 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
      * `;
      * ```
      */
-    static readonly assign: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['assign'];
+    static readonly assign: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['assign'];
     static readonly assignedInputs: PropertyInitMapBase | undefined;
-    static readonly tagName: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['tagName'];
-    static readonly styles: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['styles'];
-    static readonly render: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['render'];
-    static readonly InputsType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['InputsType'];
-    static readonly StateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['StateType'];
-    static readonly UpdateStateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['UpdateStateType'];
-    static readonly events: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['events'];
-    static readonly init: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['init'];
-    static readonly elementOptions: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['elementOptions'];
-    static readonly hostClasses: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['hostClasses'];
-    static readonly cssVars: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['cssVars'];
-    static readonly slotNames: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseCssPropertyName<CustomElementTagName>, BaseCssPropertyName<CustomElementTagName>, ReadonlyArray<string>>['slotNames'];
+    static readonly tagName: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['tagName'];
+    static readonly styles: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['styles'];
+    static readonly render: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['render'];
+    static readonly InputsType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['InputsType'];
+    static readonly StateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['StateType'];
+    static readonly UpdateStateType: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['UpdateStateType'];
+    static readonly events: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['events'];
+    static readonly init: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['init'];
+    static readonly elementOptions: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['elementOptions'];
+    static readonly hostClasses: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['hostClasses'];
+    static readonly cssVars: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['cssVars'];
+    static readonly slotNames: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['slotNames'];
+    static readonly testIds: StaticDeclarativeElementProperties<CustomElementTagName, PropertyInitMapBase, PropertyInitMapBase, EventsInitMap, BaseStringName<CustomElementTagName>, BaseStringName<CustomElementTagName>, ReadonlyArray<string>, ReadonlyArray<string>>['testIds'];
     abstract _lastRenderError: Error | undefined;
     abstract _internalRenderCount: number;
-    abstract _lastRenderedProps: Readonly<Pick<RenderParams<any, Inputs, State, any, any, any, any>, 'inputs' | 'state'>>;
+    abstract _lastRenderedProps: Readonly<Pick<RenderParams<any, Inputs, State, any, any, any, any, any>, 'inputs' | 'state'>>;
     /**
      * Calls all destroy methods on all state properties, if they exist. This is automatically
      * called whenever the element is detached.
@@ -80,7 +80,7 @@ export declare abstract class DeclarativeElement<TagName extends CustomElementTa
      */
     abstract assignInputs(inputs: EmptyObject extends Required<Inputs> ? never : Partial<Inputs>): void;
     /** The element definition for this element instance. */
-    abstract readonly definition: DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    abstract readonly definition: DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
 }
 /**
  * The assign inputs method of a declarative element.
@@ -93,15 +93,16 @@ 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 BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+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>> = {
     /** 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>;
+    readonly render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly events: EventDescriptorMap<TagName, EventsInit>;
-    readonly slotNames: SlotNameMap<SlotNames>;
-    readonly init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    readonly slotNames: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    readonly testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
+    readonly init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly elementOptions: DeclarativeElementDefinitionOptions;
     readonly InputsType: Inputs;
     readonly StateType: Readonly<State>;

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

@@ -32,4 +32,5 @@ export class DeclarativeElement extends LitElement {
     static hostClasses;
     static cssVars;
     static slotNames;
+    static testIds;
 }

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

@@ -1,9 +1,9 @@
 import { type CustomElementTagName } from './custom-tag-name.js';
 import { type DeclarativeElementInit } from './declarative-element-init.js';
 import { type DeclarativeElementDefinition } from './declarative-element.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
+import { type BaseStringName } from './properties/string-names.js';
 /**
  * Verifies that the given `Inputs` type does not clash with built-in HTMLElement properties. This
  * is used within {@link defineElement}.
@@ -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 BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(initInput: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+...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>;

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

@@ -6,13 +6,12 @@ import { css } from '../template-transforms/vir-css/vir-css.js';
 import { DeclarativeElement, } from './declarative-element.js';
 import { defaultDeclarativeElementDefinitionOptions, } from './definition-options.js';
 import { assignInputs } from './properties/assign-inputs.js';
-import { assertValidCssProperties } from './properties/css-properties.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 { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
 import { createRenderParams } from './render-callback.js';
-import { createSlotNamesMap } from './slot-names.js';
 /**
  * Defines an element with inputs. Note that this function must be called twice, due to TypeScript
  * type inference limitations.
@@ -71,10 +70,10 @@ function internalDefineElement(init) {
     const eventsMap = createEventDescriptorMap(init.tagName, init.events);
     const hostClassNames = createHostClassNamesMap(init.hostClasses);
     if (init.hostClasses) {
-        assertValidCssProperties(init.tagName, init.hostClasses);
+        assertValidStringNames(init.tagName, init.hostClasses);
     }
     if (init.cssVars) {
-        assertValidCssProperties(init.tagName, init.cssVars);
+        assertValidStringNames(init.tagName, init.cssVars);
     }
     /**
      * As casts here are to prevent defineCssVars from complaining that our CSS var names are too
@@ -83,7 +82,8 @@ function internalDefineElement(init) {
      * specific types externally.)
      */
     const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
-    const slotNamesMap = createSlotNamesMap(init.slotNames);
+    const slotNamesMap = createStringNameMap(init.tagName, 'slot', init.slotNames);
+    const testIdsMap = createStringNameMap(init.tagName, 'test-id', init.testIds);
     const calculatedStyles = typeof init.styles === 'function'
         ? init.styles(createStylesCallbackInput({ hostClassNames, cssVars }))
         : init.styles || css ``;
@@ -103,7 +103,13 @@ function internalDefineElement(init) {
         _lastRenderError = undefined;
         _internalRenderCount = 0;
         createRenderParams() {
-            return createRenderParams({ element: this, eventsMap, cssVars, slotNamesMap });
+            return createRenderParams({
+                element: this,
+                eventsMap,
+                cssVars,
+                slotNamesMap,
+                testIdsMap,
+            });
         }
         static assign = typedAssignCallback;
         static events = eventsMap;
@@ -112,6 +118,7 @@ function internalDefineElement(init) {
         static cssVars = cssVars;
         static init = init;
         static slotNames = slotNamesMap;
+        static testIds = testIdsMap;
         get InstanceType() {
             throw new Error(`'InstanceType' was called on ${init.tagName} as a value but it is only a type.`);
         }

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

@@ -11,6 +11,7 @@ const expectedStaticProperties = getObjectTypedKeys({
     InputsType: '',
     render: '',
     slotNames: '',
+    testIds: '',
     StateType: '',
     styles: '',
     tagName: '',

package/dist/declarative-element/properties/css-vars.d.ts

@@ -1,16 +1,16 @@
 import { type Values } from '@augment-vir/common';
 import { type CssVarDefinitions, type CssVarsSetup } from 'lit-css-vars';
 import { type CustomElementTagName } from '../custom-tag-name.js';
-import { type BaseCssPropertyName } from './css-properties.js';
+import { type BaseStringName } from './string-names.js';
 /**
  * Base type for a declarative element definition's CSS vars.
  *
  * @category Internal
  */
-export type CssVarsInitMap<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseCssPropertyName<ElementTagName>> = Readonly<Record<CssVarKeys, Values<CssVarsSetup>>>;
+export type CssVarsInitMap<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseStringName<ElementTagName>> = Readonly<Record<CssVarKeys, Values<CssVarsSetup>>>;
 /**
  * CSS vars ready for use within a declarative element's `render` or `styles` method.
  *
  * @category Internal
  */
-export type CssVars<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseCssPropertyName<ElementTagName>> = CssVarDefinitions<CssVarsInitMap<ElementTagName, CssVarKeys>>;
+export type CssVars<ElementTagName extends CustomElementTagName, CssVarKeys extends BaseStringName<ElementTagName>> = CssVarDefinitions<CssVarsInitMap<ElementTagName, CssVarKeys>>;

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

@@ -1,13 +1,13 @@
 import { type CustomElementTagName } from '../custom-tag-name.js';
-import { type BaseCssPropertyName } from './css-properties.js';
 import { type PropertyInitMapBase } from './element-properties.js';
+import { type BaseStringName } from './string-names.js';
 import { type WithTagName } from './tag-name.js';
 /**
  * Base init map for defining host classes in an element definition.
  *
  * @category Internal
  */
-export type HostClassesInitMap<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase> = Record<HostClassKeys, 
+export type HostClassesInitMap<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, Inputs extends PropertyInitMapBase, State 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.
@@ -28,7 +28,7 @@ export type HostClassNamesMap<TagName extends string, HostClassKeys extends stri
  *
  * @category Internal
  */
-export declare function createHostClassNamesMap<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, HostClassesInit extends HostClassesInitMap<TagName, HostClassKeys, 
+export declare function createHostClassNamesMap<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, HostClassesInit extends HostClassesInitMap<TagName, 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

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

@@ -0,0 +1,28 @@
+import { type ArrayElement } from '@augment-vir/common';
+import { type CustomElementTagName } from '../custom-tag-name.js';
+/**
+ * Base requirement for all string names with the element tag name prepended.
+ *
+ * @category Internal
+ */
+export type BaseStringName<ElementTagName extends CustomElementTagName> = `${ElementTagName}-${string}`;
+/**
+ * Asserts that all the given string names for the given element are valid.
+ *
+ * @category Internal
+ */
+export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: Record<BaseStringName<CustomElementTagName>, any>): void;
+/**
+ * Type safe mapping of string names to themself with the element tag name inserted.
+ *
+ * @category Internal
+ */
+export type StringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>> = Readonly<{
+    [StringName in ArrayElement<StringNames>]: `${ElementTagName}-${NameType}-${StringName}`;
+}>;
+/**
+ * Converts an array of string names into a `StringNameMap`.
+ *
+ * @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>;

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

@@ -0,0 +1,40 @@
+import { arrayToObject } from '@augment-vir/common';
+/**
+ * Asserts that all the given string names for the given element are valid.
+ *
+ * @category Internal
+ */
+export function assertValidStringNames(elementTagName, stringNames) {
+    const requiredNameStart = [
+        elementTagName,
+        '-',
+    ].join('');
+    Object.keys(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.`);
+        }
+    });
+}
+/**
+ * Converts an array of string names into a `StringNameMap`.
+ *
+ * @category Internal
+ */
+export function createStringNameMap(elementTagName, nameType, stringNames) {
+    if (!stringNames) {
+        return {};
+    }
+    const stringNameMap = arrayToObject(stringNames, (stringName) => {
+        return {
+            key: stringName,
+            value: [
+                elementTagName,
+                nameType,
+                stringName,
+            ].join('-'),
+        };
+    }, {
+        useRequired: true,
+    });
+    return stringNameMap;
+}

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

@@ -1,9 +1,9 @@
 import { type CSSResult } from '../../lit-exports/base-lit-exports.js';
 import { type CustomElementTagName } from '../custom-tag-name.js';
-import { type BaseCssPropertyName } from './css-properties.js';
 import { type CssVars } from './css-vars.js';
 import { type PropertyInitMapBase } from './element-properties.js';
 import { type HostClassNamesMap, type HostClassesInitMap } from './host-classes.js';
+import { type BaseStringName } from './string-names.js';
 /**
  * A host class instance to be referenced inside of an element definition's `styles` callback.
  *
@@ -18,7 +18,7 @@ export type HostClass = {
  *
  * @category Internal
  */
-export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>> = {
+export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = {
     hostClasses: Record<HostClassKeys, HostClass>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
 };
@@ -27,13 +27,13 @@ export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassK
  *
  * @category Internal
  */
-export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>> = (input: StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>) => CSSResult;
+export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = (input: StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>) => CSSResult;
 /**
  * Creates the input for an element definition's `styles` callback.
  *
  * @category Internal
  */
-export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>>({ hostClassNames, cssVars, }: {
+export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>>({ hostClassNames, cssVars, }: {
     hostClassNames: HostClassNamesMap<TagName, HostClassKeys>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
 }): StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>;
@@ -42,7 +42,7 @@ export declare function createStylesCallbackInput<TagName extends CustomElementT
  *
  * @category Internal
  */
-export declare function applyHostClasses<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, HostClassKeys extends BaseCssPropertyName<TagName>>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
+export declare function applyHostClasses<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, HostClassKeys extends BaseStringName<TagName>>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
     host: HTMLElement;
     hostClassesInit: Readonly<HostClassesInitMap<TagName, HostClassKeys, Inputs, State>> | undefined;
     hostClassNames: HostClassNamesMap<string, HostClassKeys>;

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

@@ -2,23 +2,22 @@ import { type HtmlInterpolation } from '../template-transforms/vir-html/html-int
 import { type TypedEvent } from '../typed-event/typed-event.js';
 import { type CustomElementTagName } from './custom-tag-name.js';
 import { type DeclarativeElement, type DeclarativeElementHost } from './declarative-element.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type CssVars } from './properties/css-vars.js';
 import { type EventDescriptorMap, type EventInitMapEventDetailExtractor, type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
-import { type SlotNameMap } from './slot-names.js';
+import { type BaseStringName, type StringNameMap } from './properties/string-names.js';
 /**
  * Type for the `render` element definition method.
  *
  * @category Internal
  */
-export type RenderCallback<TagName extends CustomElementTagName = any, Inputs extends PropertyInitMapBase = any, State 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, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => HtmlInterpolation;
+export type RenderCallback<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> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => HtmlInterpolation;
 /**
  * Type for the `init` and `cleanup` element definition methods.
  *
  * @category Internal
  */
-export type InitCallback<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => undefined | void;
+export type InitCallback<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>> = (params: RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => undefined | void;
 /**
  * Type for the `updateState` render parameter.
  *
@@ -30,13 +29,14 @@ export type UpdateStateCallback<State extends PropertyInitMapBase> = (newState:
  *
  * @category Internal
  */
-export type RenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>> = {
+export type RenderParams<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>> = {
     state: Readonly<State>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
     updateState: UpdateStateCallback<State>;
     events: EventDescriptorMap<TagName, EventsInit>;
-    host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    slotNames: SlotNameMap<SlotNames>;
+    host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+    slotNames: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
     /** Dispatch an event from the current element. */
     dispatch: <EventTypeName extends keyof EventsInit>(event: TypedEvent<EventTypeName extends string ? EventTypeName : never, EventInitMapEventDetailExtractor<EventTypeName, EventsInit>> | Event) => boolean;
     inputs: Readonly<Inputs>;
@@ -47,9 +47,10 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
  *
  * @category Internal
  */
-export declare function createRenderParams<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseCssPropertyName<TagName>, CssVarKeys extends BaseCssPropertyName<TagName>, SlotNames extends ReadonlyArray<string>>({ element, eventsMap, cssVars, slotNamesMap, }: {
-    element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare function createRenderParams<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>>({ element, eventsMap, cssVars, slotNamesMap, testIdsMap, }: {
+    element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     eventsMap: EventDescriptorMap<TagName, EventsInit>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-    slotNamesMap: SlotNameMap<SlotNames>;
-}): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+    slotNamesMap: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    testIdsMap: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
+}): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

@@ -5,7 +5,7 @@ import { getObjectTypedKeys } from '@augment-vir/common';
  *
  * @category Internal
  */
-export function createRenderParams({ element, eventsMap, cssVars, slotNamesMap, }) {
+export function createRenderParams({ element, eventsMap, cssVars, slotNamesMap, testIdsMap, }) {
     function updateState(newStatePartial) {
         getObjectTypedKeys(newStatePartial).forEach((stateKey) => {
             const newValue = newStatePartial[stateKey];
@@ -15,6 +15,7 @@ export function createRenderParams({ element, eventsMap, cssVars, slotNamesMap,
     const renderParams = {
         cssVars,
         slotNames: slotNamesMap,
+        testIds: testIdsMap,
         dispatch: (event) => element.dispatchEvent(event),
         events: eventsMap,
         host: element,

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

@@ -2,9 +2,9 @@ import { type PartialWithNullable } from '@augment-vir/common';
 import { type CustomElementTagName } from './custom-tag-name.js';
 import { type DeclarativeElementInit } from './declarative-element-init.js';
 import { type DeclarativeElementInputErrorParams } from './define-element.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
 import { type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
+import { type BaseStringName } from './properties/string-names.js';
 /**
  * Options for {@link wrapDefineElement}.
  *
@@ -15,12 +15,12 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
      * An optional callback which asserts that an element definition init object given to the
      * wrapped element definition functions is valid.
      */
-    assertInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => void;
+    assertInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>) => void;
     /**
      * An optional callback which transforms a element definition init object given to the wrapped
      * element definition.
      */
-    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>;
+    transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseStringName<TagNameRequirement>, BaseStringName<TagNameRequirement>, ReadonlyArray<string>, ReadonlyArray<string>>;
 }>;
 /**
  * Wraps {@link defineElement} in a superset of requirements. For example:
@@ -33,4 +33,4 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
  *
  * @category Element Definition
  */
-export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

package/dist/index.d.ts

@@ -20,16 +20,15 @@ export * from './declarative-element/directives/render-if.directive.js';
 export * from './declarative-element/directives/test-id.directive.js';
 export * from './declarative-element/is-declarative-element-definition.js';
 export * from './declarative-element/is-declarative-element.js';
-export * from './declarative-element/properties/css-properties.js';
 export * from './declarative-element/properties/css-vars.js';
 export * from './declarative-element/properties/element-events.js';
 export * from './declarative-element/properties/element-properties.js';
 export * from './declarative-element/properties/host-classes.js';
 export * from './declarative-element/properties/property-proxy.js';
+export * from './declarative-element/properties/string-names.js';
 export * from './declarative-element/properties/styles.js';
 export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';
-export * from './declarative-element/slot-names.js';
 export * from './declarative-element/wrap-define-element.js';
 export * from './lit-exports/all-lit-exports.js';
 export * from './require-declarative-element.js';

package/dist/index.js

@@ -20,16 +20,15 @@ export * from './declarative-element/directives/render-if.directive.js';
 export * from './declarative-element/directives/test-id.directive.js';
 export * from './declarative-element/is-declarative-element-definition.js';
 export * from './declarative-element/is-declarative-element.js';
-export * from './declarative-element/properties/css-properties.js';
 export * from './declarative-element/properties/css-vars.js';
 export * from './declarative-element/properties/element-events.js';
 export * from './declarative-element/properties/element-properties.js';
 export * from './declarative-element/properties/host-classes.js';
 export * from './declarative-element/properties/property-proxy.js';
+export * from './declarative-element/properties/string-names.js';
 export * from './declarative-element/properties/styles.js';
 export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';
-export * from './declarative-element/slot-names.js';
 export * from './declarative-element/wrap-define-element.js';
 export * from './lit-exports/all-lit-exports.js';
 export * from './require-declarative-element.js';

package/dist/readme-examples/my-app.element.d.ts

@@ -1 +1 @@
-export declare const MyApp: import("element-vir").DeclarativeElementDefinition<"my-app", {}, {}, {}, "my-app-", "my-app-", readonly []>;
+export declare const MyApp: import("element-vir").DeclarativeElementDefinition<"my-app", {}, {}, {}, "my-app-", "my-app-", readonly [], readonly []>;

package/dist/readme-examples/my-custom-define.d.ts

@@ -1,4 +1,4 @@
 export type VirTagName = `vir-${string}`;
-export declare const defineVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-export declare const defineVerifiedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-export declare const defineTransformedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+export declare const defineVerifiedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
+export declare const defineTransformedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

package/dist/readme-examples/my-simple.element.d.ts

@@ -1 +1 @@
-export declare const MySimple: import("element-vir").DeclarativeElementDefinition<"my-simple", {}, {}, {}, "my-simple-", "my-simple-", readonly []>;
+export declare const MySimple: import("element-vir").DeclarativeElementDefinition<"my-simple", {}, {}, {}, "my-simple-", "my-simple-", readonly [], readonly []>;

package/dist/readme-examples/my-with-assignment.element.d.ts

@@ -1 +1 @@
-export declare const MyWithAssignment: import("element-vir").DeclarativeElementDefinition<"my-with-assignment", {}, {}, {}, "my-with-assignment-", "my-with-assignment-", readonly []>;
+export declare const MyWithAssignment: import("element-vir").DeclarativeElementDefinition<"my-with-assignment", {}, {}, {}, "my-with-assignment-", "my-with-assignment-", readonly [], readonly []>;

package/dist/readme-examples/my-with-async-prop.element.d.ts

@@ -6,5 +6,5 @@ export declare const MyWithAsyncProp: import("../index.js").DeclarativeElementDe
         endpoint: string;
     }>;
     hi: string;
-}, {}, "my-with-async-prop-", "my-with-async-prop-", readonly []>;
+}, {}, "my-with-async-prop-", "my-with-async-prop-", readonly [], readonly []>;
 export {};

package/dist/readme-examples/my-with-cleanup-callback.element.d.ts

@@ -1,3 +1,3 @@
 export declare const MyWithAssignmentCleanupCallback: import("element-vir").DeclarativeElementDefinition<"my-with-cleanup-callback", {}, {
     intervalId: number;
-}, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly []>;
+}, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly [], readonly []>;

package/dist/readme-examples/my-with-css-vars.element.d.ts

@@ -1 +1 @@
-export declare const MyWithCssVars: import("element-vir").DeclarativeElementDefinition<"my-with-css-vars", {}, {}, {}, "my-with-css-vars-", "my-with-css-vars-my-var", readonly []>;
+export declare const MyWithCssVars: import("element-vir").DeclarativeElementDefinition<"my-with-css-vars", {}, {}, {}, "my-with-css-vars-", "my-with-css-vars-my-var", readonly [], readonly []>;

package/dist/readme-examples/my-with-custom-events.element.d.ts

@@ -1 +1 @@
-export declare const MyWithCustomEvents: import("element-vir").DeclarativeElementDefinition<"my-with-custom-events", {}, {}, {}, "my-with-custom-events-", "my-with-custom-events-", readonly []>;
+export declare const MyWithCustomEvents: import("element-vir").DeclarativeElementDefinition<"my-with-custom-events", {}, {}, {}, "my-with-custom-events-", "my-with-custom-events-", readonly [], readonly []>;

package/dist/readme-examples/my-with-event-listening.element.d.ts

@@ -1,3 +1,3 @@
 export declare const MyWithEventListening: import("element-vir").DeclarativeElementDefinition<"my-with-event-listening", {}, {
     myNumber: number;
-}, {}, "my-with-event-listening-", "my-with-event-listening-", readonly []>;
+}, {}, "my-with-event-listening-", "my-with-event-listening-", readonly [], readonly []>;

package/dist/readme-examples/my-with-events.element.d.ts

@@ -1,4 +1,4 @@
 export declare const MyWithEvents: import("element-vir").DeclarativeElementDefinition<"my-with-events", {}, {}, {
     logoutClick: import("element-vir").DefineEvent<void>;
     randomNumber: import("element-vir").DefineEvent<number>;
-}, "my-with-events-", "my-with-events-", readonly []>;
+}, "my-with-events-", "my-with-events-", readonly [], readonly []>;

package/dist/readme-examples/my-with-host-class-definition.element.d.ts

@@ -1,3 +1,3 @@
 export declare const MyWithHostClassDefinition: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-definition", {}, {
     myProp: string;
-}, {}, "my-with-host-class-definition-a" | "my-with-host-class-definition-automatic", "my-with-host-class-definition-", readonly []>;
+}, {}, "my-with-host-class-definition-a" | "my-with-host-class-definition-automatic", "my-with-host-class-definition-", readonly [], readonly []>;

package/dist/readme-examples/my-with-host-class-usage.element.d.ts

@@ -1 +1 @@
-export declare const MyWithHostClassUsage: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-usage", {}, {}, {}, "my-with-host-class-usage-", "my-with-host-class-usage-", readonly []>;
+export declare const MyWithHostClassUsage: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-usage", {}, {}, {}, "my-with-host-class-usage-", "my-with-host-class-usage-", readonly [], readonly []>;

package/dist/readme-examples/my-with-inputs.element.d.ts

@@ -1,4 +1,4 @@
 export declare const MyWithInputs: import("../index.js").DeclarativeElementDefinition<"my-with-inputs", {
     username: string;
     email: string;
-}, {}, {}, "my-with-inputs-", "my-with-inputs-", readonly []>;
+}, {}, {}, "my-with-inputs-", "my-with-inputs-", readonly [], readonly []>;

package/dist/readme-examples/my-with-on-dom-created.element.d.ts

@@ -1 +1 @@
-export declare const MyWithOnDomCreated: import("element-vir").DeclarativeElementDefinition<"my-with-on-dom-created", {}, {}, {}, "my-with-on-dom-created-", "my-with-on-dom-created-", readonly []>;
+export declare const MyWithOnDomCreated: import("element-vir").DeclarativeElementDefinition<"my-with-on-dom-created", {}, {}, {}, "my-with-on-dom-created-", "my-with-on-dom-created-", readonly [], readonly []>;

package/dist/readme-examples/my-with-on-resize.element.d.ts

@@ -1 +1 @@
-export declare const MyWithOnResize: import("element-vir").DeclarativeElementDefinition<"my-with-on-resize", {}, {}, {}, "my-with-on-resize-", "my-with-on-resize-", readonly []>;
+export declare const MyWithOnResize: import("element-vir").DeclarativeElementDefinition<"my-with-on-resize", {}, {}, {}, "my-with-on-resize-", "my-with-on-resize-", readonly [], readonly []>;

package/dist/readme-examples/my-with-render-if.element.d.ts

@@ -1,3 +1,3 @@
 export declare const MyWithRenderIf: import("../index.js").DeclarativeElementDefinition<"my-with-render-if", {
     shouldRender: boolean;
-}, {}, {}, "my-with-render-if-", "my-with-render-if-", readonly []>;
+}, {}, {}, "my-with-render-if-", "my-with-render-if-", readonly [], readonly []>;

package/dist/readme-examples/my-with-styles-and-interpolated-selector.element.d.ts

@@ -1 +1 @@
-export declare const MyWithStylesAndInterpolatedSelector: import("element-vir").DeclarativeElementDefinition<"my-with-styles-and-interpolated-selector", {}, {}, {}, "my-with-styles-and-interpolated-selector-", "my-with-styles-and-interpolated-selector-", readonly []>;
+export declare const MyWithStylesAndInterpolatedSelector: import("element-vir").DeclarativeElementDefinition<"my-with-styles-and-interpolated-selector", {}, {}, {}, "my-with-styles-and-interpolated-selector-", "my-with-styles-and-interpolated-selector-", readonly [], readonly []>;

package/dist/readme-examples/my-with-styles.element.d.ts

@@ -1 +1 @@
-export declare const MyWithStyles: import("element-vir").DeclarativeElementDefinition<"my-with-styles", {}, {}, {}, "my-with-styles-", "my-with-styles-", readonly []>;
+export declare const MyWithStyles: import("element-vir").DeclarativeElementDefinition<"my-with-styles", {}, {}, {}, "my-with-styles-", "my-with-styles-", readonly [], readonly []>;

package/dist/readme-examples/my-with-update-state.element.d.ts

@@ -5,4 +5,4 @@ export declare const MyWithUpdateState: import("element-vir").DeclarativeElement
      * type. This is particularly useful when, as below, the initial value is undefined.
      */
     email: string | undefined;
-}, {}, "my-with-update-state-", "my-with-update-state-", readonly []>;
+}, {}, "my-with-update-state-", "my-with-update-state-", readonly [], readonly []>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "26.10.0",
+    "version": "26.11.0",
     "keywords": [
         "custom",
         "web",
@@ -39,19 +39,19 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.38.0",
-        "@augment-vir/common": "^31.38.0",
-        "date-vir": "^7.4.2",
+        "@augment-vir/assert": "^31.40.0",
+        "@augment-vir/common": "^31.40.0",
+        "date-vir": "^8.0.0",
         "lit": "^3.3.1",
         "lit-css-vars": "^3.0.11",
         "lit-html": "^3.3.1",
-        "object-shape-tester": "^6.5.0",
-        "observavir": "^2.1.1",
+        "object-shape-tester": "^6.9.2",
+        "observavir": "^2.1.2",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.38.0",
-        "@augment-vir/web": "^31.38.0",
+        "@augment-vir/test": "^31.40.0",
+        "@augment-vir/web": "^31.40.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -60,10 +60,10 @@
         "html-spec-tags": "^2.2.3",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^5.0.1",
-        "typedoc": "^0.28.13",
-        "typescript": "5.9.2",
-        "vite": "^7.1.7",
+        "type-fest": "^5.1.0",
+        "typedoc": "^0.28.14",
+        "typescript": "5.9.3",
+        "vite": "^7.1.9",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "engines": {

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

@@ -1,13 +0,0 @@
-import { type CustomElementTagName } from '../custom-tag-name.js';
-/**
- * Base requirement for all CSS property names (like CSS var names).
- *
- * @category Internal
- */
-export type BaseCssPropertyName<ElementTagName extends CustomElementTagName> = `${ElementTagName}-${string}`;
-/**
- * Asserts that all the given CSS properties for the given element are valid.
- *
- * @category Internal
- */
-export declare function assertValidCssProperties(elementTagName: CustomElementTagName, cssProperties: Record<BaseCssPropertyName<CustomElementTagName>, any>): void;

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

@@ -1,16 +0,0 @@
-/**
- * Asserts that all the given CSS properties for the given element are valid.
- *
- * @category Internal
- */
-export function assertValidCssProperties(elementTagName, cssProperties) {
-    const requiredCssPropKeyStart = [
-        elementTagName,
-        '-',
-    ].join('');
-    Object.keys(cssProperties).forEach((cssPropName) => {
-        if (!cssPropName.startsWith(requiredCssPropKeyStart)) {
-            throw new Error(`Invalid CSS property name '${cssPropName}' in '${elementTagName}': CSS property names must begin with the element's tag name.`);
-        }
-    });
-}

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

@@ -1,15 +0,0 @@
-import { type ArrayElement } from '@augment-vir/common';
-/**
- * Type safe mapping of slot names to themselves.
- *
- * @category Internal
- */
-export type SlotNameMap<SlotNames extends ReadonlyArray<string>> = Readonly<{
-    [SlotName in ArrayElement<SlotNames>]: SlotName;
-}>;
-/**
- * Converts an array of slot names into a `SlotNameMap`.
- *
- * @category Internal
- */
-export declare function createSlotNamesMap<SlotNames extends ReadonlyArray<string>>(slotNames: SlotNames | undefined): SlotNameMap<SlotNames>;

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

@@ -1,15 +0,0 @@
-/**
- * Converts an array of slot names into a `SlotNameMap`.
- *
- * @category Internal
- */
-export function createSlotNamesMap(slotNames) {
-    if (!slotNames) {
-        return {};
-    }
-    const slotNameMap = slotNames.reduce((accum, slotName) => {
-        accum[slotName] = slotName;
-        return accum;
-    }, {});
-    return slotNameMap;
-}