element-vir 25.10.0 → 25.12.0

package/README.md

@@ -30,20 +30,21 @@ Make sure to install this as a normal dependency (not just a dev dependency) bec
 
 # Usage
 
-Most usage of this package is done through the `defineElement` or `defineElementNoInputs` functions. See the [`DeclarativeElementInit`](https://github.com/electrovir/element-vir/blob/dev/packages/src/declarative-element/declarative-element-init.ts) type for that function's full inputs. The inputs are also described below with examples.
+Most usage of this package is done through the `defineElement` functions. See the [`DeclarativeElementInit`](https://github.com/electrovir/element-vir/blob/dev/packages/src/declarative-element/declarative-element-init.ts) type for that function's full inputs. The inputs are also described below with examples.
 
 All of [`lit`](https://lit.dev)'s syntax and functionality is available for use if you wish.
 
 ## Simple element definition
 
-Use `defineElementNoInputs` to define your element if it's not going to accept any inputs (or if you're just getting started). It's only input is an object with at least `tagName` and `render` properties (the types enforce this). Here is a bare-minimum example custom element:
+Use `defineElement` to define your element. Here is a bare-minimum example custom element:
 
 <!-- example-link: src/readme-examples/my-simple.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html} from 'element-vir';
 
-export const MySimple = defineElementNoInputs({
+export const MySimple = defineElement()({
     tagName: 'my-simple',
     render() {
         return html`
@@ -62,10 +63,11 @@ To use already defined elements (like the example above), they must be interpola
 <!-- example-link: src/readme-examples/my-app.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html} from 'element-vir';
 import {MySimple} from './my-simple.element.js';
 
-export const MyApp = defineElementNoInputs({
+export const MyApp = defineElement()({
     tagName: 'my-app',
     render() {
         return html`
@@ -85,9 +87,10 @@ Styles are added through the `styles` property when defining a declarative eleme
 <!-- example-link: src/readme-examples/my-with-styles.element.ts -->
 
 ```TypeScript
-import {css, defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {css, html} from 'element-vir';
 
-export const MyWithStyles = defineElementNoInputs({
+export const MyWithStyles = defineElement()({
     tagName: 'my-with-styles',
     styles: css`
         :host {
@@ -116,10 +119,11 @@ Declarative element definitions can be used in the `css` tagged template just li
 <!-- example-link: src/readme-examples/my-with-styles-and-interpolated-selector.element.ts -->
 
 ```TypeScript
-import {css, defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {css, html} from 'element-vir';
 import {MySimple} from './my-simple.element.js';
 
-export const MyWithStylesAndInterpolatedSelector = defineElementNoInputs({
+export const MyWithStylesAndInterpolatedSelector = defineElement()({
     tagName: 'my-with-styles-and-interpolated-selector',
     styles: css`
         ${MySimple} {
@@ -136,7 +140,7 @@ export const MyWithStylesAndInterpolatedSelector = defineElementNoInputs({
 
 ## Defining and using Inputs
 
-Define element inputs by using `defineElement` to define a declarative element. Pass your input type as a generic to the `defineElement` call. Then call _that_ with the normal definition input (like when using `defineElementNoInputs`).
+Define element inputs by using `defineElement` to define a declarative element. Pass your input type, if any, as a generic to the `defineElement` call. Then call _that_ with the normal definition input.
 
 To use an element's inputs for use in its template, grab `inputs` from `render`'s parameters and interpolate it into your HTML template:
 
@@ -165,9 +169,10 @@ Define initial internal state values and types with the `stateInit` property whe
 <!-- example-link: src/readme-examples/my-with-update-state.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html, listen} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html, listen} from 'element-vir';
 
-export const MyWithUpdateState = defineElementNoInputs({
+export const MyWithUpdateState = defineElement()({
     tagName: 'my-with-update-state',
     state() {
         return {
@@ -200,10 +205,11 @@ Use the `assign` directive to assign values to child custom elements inputs:
 <!-- example-link: src/readme-examples/my-with-assignment.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html} from 'element-vir';
 import {MyWithInputs} from './my-with-inputs.element.js';
 
-export const MyWithAssignment = defineElementNoInputs({
+export const MyWithAssignment = defineElement()({
     tagName: 'my-with-assignment',
     render() {
         return html`
@@ -227,9 +233,10 @@ There are two other callbacks you can define that are sort of similar to lifecyc
 <!-- example-link: src/readme-examples/my-with-cleanup-callback.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html} from 'element-vir';
 
-export const MyWithAssignmentCleanupCallback = defineElementNoInputs({
+export const MyWithAssignmentCleanupCallback = defineElement()({
     tagName: 'my-with-cleanup-callback',
     state() {
         return {
@@ -257,9 +264,10 @@ To dispatch an event, grab `dispatch` and `events` from `render`'s parameters.
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
-import {defineElementEvent, defineElementNoInputs, html, listen} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {defineElementEvent, html, listen} from 'element-vir';
 
-export const MyWithEvents = defineElementNoInputs({
+export const MyWithEvents = defineElement()({
     tagName: 'my-with-events',
     events: {
         logoutClick: defineElementEvent<void>(),
@@ -287,10 +295,11 @@ Use the `listen` directive to listen to events emitted by your custom elements:
 <!-- example-link: src/readme-examples/my-with-event-listening.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html, listen} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html, listen} from 'element-vir';
 import {MyWithEvents} from './my-with-events.element.js';
 
-export const MyWithEventListening = defineElementNoInputs({
+export const MyWithEventListening = defineElement()({
     tagName: 'my-with-event-listening',
     state() {
         return {
@@ -336,10 +345,11 @@ Dispatching a custom event and listening to a custom event is the same as doing
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
-import {defineElementNoInputs, html, listen} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html, listen} from 'element-vir';
 import {MyCustomActionEvent} from './my-custom-action.event.js';
 
-export const MyWithCustomEvents = defineElementNoInputs({
+export const MyWithCustomEvents = defineElement()({
     tagName: 'my-with-custom-events',
     render({dispatch}) {
         return html`
@@ -375,9 +385,10 @@ Apply host classes in the element's stylesheet by using a callback for the style
 <!-- example-link: src/readme-examples/my-with-host-class-definition.element.ts -->
 
 ```TypeScript
-import {css, defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {css, html} from 'element-vir';
 
-export const MyWithHostClassDefinition = defineElementNoInputs({
+export const MyWithHostClassDefinition = defineElement()({
     tagName: 'my-with-host-class-definition',
     state() {
         return {
@@ -426,10 +437,11 @@ To apply a host class in a consumer, access the child element's `.hostClasses` p
 <!-- example-link: src/readme-examples/my-with-host-class-usage.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html} from 'element-vir';
 import {MyWithHostClassDefinition} from './my-with-host-class-definition.element.js';
 
-export const MyWithHostClassUsage = defineElementNoInputs({
+export const MyWithHostClassUsage = defineElement()({
     tagName: 'my-with-host-class-usage',
     render() {
         return html`
@@ -448,9 +460,10 @@ Typed CSS variables are created in a similar manner to host classes:
 <!-- example-link: src/readme-examples/my-with-css-vars.element.ts -->
 
 ```TypeScript
-import {css, defineElementNoInputs, html} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {css, html} from 'element-vir';
 
-export const MyWithCssVars = defineElementNoInputs({
+export const MyWithCssVars = defineElement()({
     tagName: 'my-with-css-vars',
     cssVars: {
         /** The value assigned here ('blue') becomes the fallback value for this CSS var. */
@@ -477,7 +490,7 @@ export const MyWithCssVars = defineElementNoInputs({
 
 ## Custom Type Requirements
 
-Use `wrapDefineElement` to compose `defineElement` and `defineElementNoInputs`. This is particularly useful to adding restrictions on the element `tagName`, but it can be used for restricting any of the type parameters:
+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 -->
 
@@ -486,14 +499,10 @@ import {wrapDefineElement} from 'element-vir';
 
 export type VirTagName = `vir-${string}`;
 
-export const {defineElement: defineVirElement, defineElementNoInputs: defineVirElementNoInputs} =
-    wrapDefineElement<VirTagName>();
+export const {defineElement: defineVirElement} = wrapDefineElement<VirTagName>();
 
 // add an optional assert callback
-export const {
-    defineElement: defineVerifiedVirElement,
-    defineElementNoInputs: defineVerifiedVirElementNoInputs,
-} = wrapDefineElement<VirTagName>({
+export const {defineElement: defineVerifiedVirElement} = wrapDefineElement<VirTagName>({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
             throw new Error(`all custom elements must start with "vir-"`);
@@ -502,10 +511,7 @@ export const {
 });
 
 // add an optional transform callback
-export const {
-    defineElement: defineTransformedVirElement,
-    defineElementNoInputs: defineTransformedVirElementNoInputs,
-} = wrapDefineElement<VirTagName>({
+export const {defineElement: defineTransformedVirElement} = wrapDefineElement<VirTagName>({
     transformInputs: (inputs) => {
         return {
             ...inputs,
@@ -528,9 +534,10 @@ This triggers only once when the element it's attached to has actually been crea
 <!-- example-link: src/readme-examples/my-with-on-dom-created.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html, onDomCreated} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html, onDomCreated} from 'element-vir';
 
-export const MyWithOnDomCreated = defineElementNoInputs({
+export const MyWithOnDomCreated = defineElement()({
     tagName: 'my-with-on-dom-created',
     render() {
         return html`
@@ -554,9 +561,10 @@ This directive fires its callback whenever the element it's attached to resizes.
 <!-- example-link: src/readme-examples/my-with-on-resize.element.ts -->
 
 ```TypeScript
-import {defineElementNoInputs, html, onResize} from 'element-vir';
+import {defineElement} from 'element-vir';
+import {html, onResize} from 'element-vir';
 
-export const MyWithOnResize = defineElementNoInputs({
+export const MyWithOnResize = defineElement()({
     tagName: 'my-with-on-resize',
     render() {
         return html`

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

@@ -7,20 +7,7 @@ import { type PropertyInitMapBase } from './properties/element-properties.js';
 /**
  * Defines an element without any inputs.
  *
- * @category Element Definition
- * @example
- *
- * ```ts
- * import {defineElementNoInputs, html} from 'element-vir';
- *
- * const MyElement = defineElementNoInputs({
- *     tagName: 'my-element',
- *     render() {
- *         return html`
- *             <p>hi</p>
- *         `;
- *     },
- * });
- * ```
+ * @deprecated Use plain `defineElement` instead.
+ * @category Internal
  */
 export declare function defineElementNoInputs<const TagName extends CustomElementTagName = '-', Inputs extends PropertyInitMapBase = {}, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>): DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -16,21 +16,8 @@ import { createSlotNamesMap } from './slot-names.js';
 /**
  * Defines an element without any inputs.
  *
- * @category Element Definition
- * @example
- *
- * ```ts
- * import {defineElementNoInputs, html} from 'element-vir';
- *
- * const MyElement = defineElementNoInputs({
- *     tagName: 'my-element',
- *     render() {
- *         return html`
- *             <p>hi</p>
- *         `;
- *     },
- * });
- * ```
+ * @deprecated Use plain `defineElement` instead.
+ * @category Internal
  */
 export function defineElementNoInputs(init) {
     if (!check.isObject(init)) {

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

@@ -14,9 +14,8 @@ export type DeclarativeElementInputErrorParams<Inputs extends PropertyInitMapBas
     'ERROR: Cannot define an element input property that clashes with native HTMLElement properties.'
 ];
 /**
- * Defines an element with inputs. If the element actually has no inputs, use
- * {@link defineElementNoInputs} instead. Note that this function must be called twice, due to
- * TypeScript type inference limitations.
+ * Defines an element with inputs. Note that this function must be called twice, due to TypeScript
+ * type inference limitations.
  *
  * @category Element Definition
  * @example

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

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import { assert, check } from '@augment-vir/assert';
+// eslint-disable-next-line sonarjs/deprecation
 import { defineElementNoInputs } from './define-element-no-inputs.js';
 /**
- * Defines an element with inputs. If the element actually has no inputs, use
- * {@link defineElementNoInputs} instead. Note that this function must be called twice, due to
- * TypeScript type inference limitations.
+ * Defines an element with inputs. Note that this function must be called twice, due to TypeScript
+ * type inference limitations.
  *
  * @category Element Definition
  * @example
@@ -34,6 +34,7 @@ export function defineElement(
         if (!check.isObject(init)) {
             throw new TypeError('Cannot define element with non-object init: ${init}');
         }
+        // eslint-disable-next-line sonarjs/deprecation, @typescript-eslint/no-deprecated
         return defineElementNoInputs({
             ...init,
             options: {

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

@@ -11,9 +11,9 @@ type ListenCallbackReturn = MaybePromise<any>;
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, listen} from 'element-vir';
+ * import {html, defineElement, listen} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`
@@ -54,9 +54,9 @@ listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, listen} from 'element-vir';
+ * import {html, defineElement, listen} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -16,9 +16,9 @@ export type OnDomCreatedCallback = (element: Element) => MaybePromise<void>;
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onDomCreated} from 'element-vir';
+ * import {html, defineElement, onDomCreated} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

package/dist/declarative-element/directives/on-dom-created.directive.js

@@ -10,9 +10,9 @@ const directiveName = 'onDomCreated';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onDomCreated} from 'element-vir';
+ * import {html, defineElement, onDomCreated} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -14,9 +14,9 @@ export type OnDomRenderedCallback = (element: Element) => MaybePromise<void>;
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onDomRendered} from 'element-vir';
+ * import {html, defineElement, onDomRendered} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

package/dist/declarative-element/directives/on-dom-rendered.directive.js

@@ -8,9 +8,9 @@ const directiveName = 'onDomRendered';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onDomRendered} from 'element-vir';
+ * import {html, defineElement, onDomRendered} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -28,9 +28,9 @@ export type OnIntersectOptions = IntersectionObserverInit;
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onIntersect} from 'element-vir';
+ * import {html, defineElement, onIntersect} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -13,9 +13,9 @@ const directiveName = 'onIntersect';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onIntersect} from 'element-vir';
+ * import {html, defineElement, onIntersect} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -17,9 +17,9 @@ export type OnResizeCallback = (size: Readonly<Pick<ResizeObserverEntry,
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onResize} from 'element-vir';
+ * import {html, defineElement, onResize} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -10,9 +10,9 @@ const directiveName = 'onResize';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, onResize} from 'element-vir';
+ * import {html, defineElement, onResize} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -7,9 +7,9 @@
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, renderIf} from 'element-vir';
+ * import {html, defineElement, renderIf} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

package/dist/declarative-element/directives/render-if.directive.js

@@ -8,9 +8,9 @@ import { when } from '../../lit-exports/all-lit-exports.js';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, renderIf} from 'element-vir';
+ * import {html, defineElement, renderIf} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

package/dist/declarative-element/directives/test-id.directive.d.ts

@@ -5,9 +5,9 @@
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, testId} from 'element-vir';
+ * import {html, defineElement, testId} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

package/dist/declarative-element/directives/test-id.directive.js

@@ -7,9 +7,9 @@ const { attributeDirective, attributeSelector, attributeName } = createAttribute
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, testId} from 'element-vir';
+ * import {html, defineElement, testId} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     render() {
  *         return html`

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

@@ -13,9 +13,9 @@ export type EventsInitMap = Record<string, DefineEvent<any>>;
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, defineElementEvent, listen} from 'element-vir';
+ * import {html, defineElement, defineElementEvent, listen} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     events: {
  *         myOutput: defineElementEvent<number>(),

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

@@ -6,9 +6,9 @@ import { defineTypedEvent, } from '../../typed-event/typed-event.js';
  * @example
  *
  * ```ts
- * import {html, defineElementNoInputs, defineElementEvent, listen} from 'element-vir';
+ * import {html, defineElement, defineElementEvent, listen} from 'element-vir';
  *
- * const MyElement = defineElementNoInputs({
+ * const MyElement = defineElement()({
  *     tagName: 'my-element',
  *     events: {
  *         myOutput: defineElementEvent<number>(),

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

@@ -23,8 +23,7 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
     transformInputs: (inputInit: DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>) => DeclarativeElementInit<TagNameRequirement, InputsRequirement, StateRequirement, EventsInitRequirement, BaseCssPropertyName<TagNameRequirement>, BaseCssPropertyName<TagNameRequirement>, ReadonlyArray<string>>;
 }>;
 /**
- * Wraps {@link defineElement} and {@link defineElementNoInputs} in a superset of requirements. For
- * example:
+ * Wraps {@link defineElement} in a superset of requirements. For example:
  *
  * - You could create element definition functions that require all elements to start with a common
  *   prefix, like `vir-`.
@@ -37,6 +36,10 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
 export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): {
     /** A wrapped function for defining an element with inputs. */
     defineElement: <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>;
-    /** A wrapped function for defining an element without inputs. */
+    /**
+     * A wrapped function for defining an element without inputs.
+     *
+     * @deprecated Use `defineElement` instead.
+     */
     defineElementNoInputs: <const TagName extends TagNameRequirement, Inputs extends InputsRequirement, 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>;
 };

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

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
-import { defineElementNoInputs } from './define-element-no-inputs.js';
 import { defineElement } from './define-element.js';
+// eslint-disable-next-line sonarjs/deprecation
+import { defineElementNoInputs } from './define-element-no-inputs.js';
 /**
- * Wraps {@link defineElement} and {@link defineElementNoInputs} in a superset of requirements. For
- * example:
+ * Wraps {@link defineElement} in a superset of requirements. For example:
  *
  * - You could create element definition functions that require all elements to start with a common
  *   prefix, like `vir-`.
@@ -26,9 +26,14 @@ export function wrapDefineElement(options) {
                 return defineElement(...errorParams)(transformInputs(inputs));
             };
         },
-        /** A wrapped function for defining an element without inputs. */
+        /**
+         * A wrapped function for defining an element without inputs.
+         *
+         * @deprecated Use `defineElement` instead.
+         */
         defineElementNoInputs: (inputs) => {
             assertInputs(inputs);
+            // eslint-disable-next-line sonarjs/deprecation, @typescript-eslint/no-deprecated
             return defineElementNoInputs(transformInputs(inputs));
         },
     };

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

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

package/dist/readme-examples/my-app.element.js

@@ -1,6 +1,7 @@
-import { defineElementNoInputs, html } from '../index.js';
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
 import { MySimple } from './my-simple.element.js';
-export const MyApp = defineElementNoInputs({
+export const MyApp = defineElement()({
     tagName: 'my-app',
     render() {
         return html `

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>, defineVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${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>, defineVerifiedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${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>, defineTransformedVirElementNoInputs: <const TagName extends `vir-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${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").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>;

package/dist/readme-examples/my-custom-define.js

@@ -1,7 +1,7 @@
 import { wrapDefineElement } from '../index.js';
-export const { defineElement: defineVirElement, defineElementNoInputs: defineVirElementNoInputs } = wrapDefineElement();
+export const { defineElement: defineVirElement } = wrapDefineElement();
 // add an optional assert callback
-export const { defineElement: defineVerifiedVirElement, defineElementNoInputs: defineVerifiedVirElementNoInputs, } = wrapDefineElement({
+export const { defineElement: defineVerifiedVirElement } = wrapDefineElement({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
             throw new Error(`all custom elements must start with "vir-"`);
@@ -9,7 +9,7 @@ export const { defineElement: defineVerifiedVirElement, defineElementNoInputs: d
     },
 });
 // add an optional transform callback
-export const { defineElement: defineTransformedVirElement, defineElementNoInputs: defineTransformedVirElementNoInputs, } = wrapDefineElement({
+export const { defineElement: defineTransformedVirElement } = wrapDefineElement({
     transformInputs: (inputs) => {
         return {
             ...inputs,

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

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

package/dist/readme-examples/my-simple.element.js

@@ -1,5 +1,6 @@
-import { defineElementNoInputs, html } from '../index.js';
-export const MySimple = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
+export const MySimple = defineElement()({
     tagName: 'my-simple',
     render() {
         return html `

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

@@ -1 +1 @@
-export declare const MyWithAssignment: import("../index.js").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 []>;

package/dist/readme-examples/my-with-assignment.element.js

@@ -1,6 +1,7 @@
-import { defineElementNoInputs, html } from '../index.js';
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
 import { MyWithInputs } from './my-with-inputs.element.js';
-export const MyWithAssignment = defineElementNoInputs({
+export const MyWithAssignment = defineElement()({
     tagName: 'my-with-assignment',
     render() {
         return html `

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

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

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

@@ -1,5 +1,6 @@
-import { defineElementNoInputs, html } from '../index.js';
-export const MyWithAssignmentCleanupCallback = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
+export const MyWithAssignmentCleanupCallback = defineElement()({
     tagName: 'my-with-cleanup-callback',
     state() {
         return {

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

@@ -1 +1 @@
-export declare const MyWithCssVars: import("../index.js").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 []>;

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

@@ -1,5 +1,6 @@
-import { css, defineElementNoInputs, html } from '../index.js';
-export const MyWithCssVars = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
+export const MyWithCssVars = defineElement()({
     tagName: 'my-with-css-vars',
     cssVars: {
         /** The value assigned here ('blue') becomes the fallback value for this CSS var. */

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

@@ -1 +1 @@
-export declare const MyWithCustomEvents: import("../index.js").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 []>;

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

@@ -1,7 +1,8 @@
 import { randomInteger } from '@augment-vir/common';
-import { defineElementNoInputs, html, listen } from '../index.js';
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
 import { MyCustomActionEvent } from './my-custom-action.event.js';
-export const MyWithCustomEvents = defineElementNoInputs({
+export const MyWithCustomEvents = defineElement()({
     tagName: 'my-with-custom-events',
     render({ dispatch }) {
         return html `

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

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

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

@@ -1,6 +1,7 @@
-import { defineElementNoInputs, html, listen } from '../index.js';
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
 import { MyWithEvents } from './my-with-events.element.js';
-export const MyWithEventListening = defineElementNoInputs({
+export const MyWithEventListening = defineElement()({
     tagName: 'my-with-event-listening',
     state() {
         return {

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

@@ -1,4 +1,4 @@
-export declare const MyWithEvents: import("../index.js").DeclarativeElementDefinition<"my-with-events", {}, {}, {
-    logoutClick: import("../index.js").DefineEvent<void>;
-    randomNumber: import("../index.js").DefineEvent<number>;
+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 []>;

package/dist/readme-examples/my-with-events.element.js

@@ -1,6 +1,7 @@
 import { randomInteger } from '@augment-vir/common';
-import { defineElementEvent, defineElementNoInputs, html, listen } from '../index.js';
-export const MyWithEvents = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { defineElementEvent, html, listen } from '../index.js';
+export const MyWithEvents = defineElement()({
     tagName: 'my-with-events',
     events: {
         logoutClick: defineElementEvent(),

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

@@ -1,3 +1,3 @@
-export declare const MyWithHostClassDefinition: import("../index.js").DeclarativeElementDefinition<"my-with-host-class-definition", {}, {
+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 []>;

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

@@ -1,5 +1,6 @@
-import { css, defineElementNoInputs, html } from '../index.js';
-export const MyWithHostClassDefinition = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
+export const MyWithHostClassDefinition = defineElement()({
     tagName: 'my-with-host-class-definition',
     state() {
         return {

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

@@ -1 +1 @@
-export declare const MyWithHostClassUsage: import("../index.js").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 []>;

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

@@ -1,6 +1,7 @@
-import { defineElementNoInputs, html } from '../index.js';
+import { defineElement } from 'element-vir';
+import { html } from '../index.js';
 import { MyWithHostClassDefinition } from './my-with-host-class-definition.element.js';
-export const MyWithHostClassUsage = defineElementNoInputs({
+export const MyWithHostClassUsage = defineElement()({
     tagName: 'my-with-host-class-usage',
     render() {
         return html `

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

@@ -1 +1 @@
-export declare const MyWithOnDomCreated: import("../index.js").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 []>;

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

@@ -1,5 +1,6 @@
-import { defineElementNoInputs, html, onDomCreated } from '../index.js';
-export const MyWithOnDomCreated = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { html, onDomCreated } from '../index.js';
+export const MyWithOnDomCreated = defineElement()({
     tagName: 'my-with-on-dom-created',
     render() {
         return html `

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

@@ -1 +1 @@
-export declare const MyWithOnResize: import("../index.js").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 []>;

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

@@ -1,5 +1,6 @@
-import { defineElementNoInputs, html, onResize } from '../index.js';
-export const MyWithOnResize = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { html, onResize } from '../index.js';
+export const MyWithOnResize = defineElement()({
     tagName: 'my-with-on-resize',
     render() {
         return html `

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

@@ -1 +1 @@
-export declare const MyWithStylesAndInterpolatedSelector: import("../index.js").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 []>;

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

@@ -1,6 +1,7 @@
-import { css, defineElementNoInputs, html } from '../index.js';
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
 import { MySimple } from './my-simple.element.js';
-export const MyWithStylesAndInterpolatedSelector = defineElementNoInputs({
+export const MyWithStylesAndInterpolatedSelector = defineElement()({
     tagName: 'my-with-styles-and-interpolated-selector',
     styles: css `
         ${MySimple} {

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

@@ -1 +1 @@
-export declare const MyWithStyles: import("../index.js").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 []>;

package/dist/readme-examples/my-with-styles.element.js

@@ -1,5 +1,6 @@
-import { css, defineElementNoInputs, html } from '../index.js';
-export const MyWithStyles = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { css, html } from '../index.js';
+export const MyWithStyles = defineElement()({
     tagName: 'my-with-styles',
     styles: css `
         :host {

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

@@ -1,4 +1,4 @@
-export declare const MyWithUpdateState: import("../index.js").DeclarativeElementDefinition<"my-with-update-state", {}, {
+export declare const MyWithUpdateState: import("element-vir").DeclarativeElementDefinition<"my-with-update-state", {}, {
     username: string;
     /**
      * Use "as" to create state properties that can be types other than the initial value's

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

@@ -1,5 +1,6 @@
-import { defineElementNoInputs, html, listen } from '../index.js';
-export const MyWithUpdateState = defineElementNoInputs({
+import { defineElement } from 'element-vir';
+import { html, listen } from '../index.js';
+export const MyWithUpdateState = defineElement()({
     tagName: 'my-with-update-state',
     state() {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "25.10.0",
+    "version": "25.12.0",
     "keywords": [
         "custom",
         "web",
@@ -39,8 +39,8 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.21.0",
-        "@augment-vir/common": "^31.21.0",
+        "@augment-vir/assert": "^31.21.1",
+        "@augment-vir/common": "^31.21.1",
         "date-vir": "^7.3.1",
         "lit": "^3.3.0",
         "lit-css-vars": "^3.0.11",
@@ -50,8 +50,8 @@
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.21.0",
-        "@augment-vir/web": "^31.21.0",
+        "@augment-vir/test": "^31.21.1",
+        "@augment-vir/web": "^31.21.1",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",