element-vir 22.2.2 → 23.1.0

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

@@ -1,18 +1,37 @@
-import { directive, Directive } from '../../lit-exports/all-lit-exports';
-import { assertIsElementPartInfo } from './directive-helpers';
+import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onDomCreated';
-/** Only fires once, when the element has been created. */
-export const onDomCreated = directive(
-/** @internal */
-class extends Directive {
+/**
+ * A directive that fires its listener only once, when the element that it's attached to is
+ * constructed. This is particularly useful for getting references to internal elements immediately
+ * after they've rendered.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, onDomCreated} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div
+ *                 ${onDomCreated((element) => {
+ *                     console.log('created!', element);
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export const onDomCreated = directive(class extends Directive {
+    element;
     constructor(partInfo) {
         super(partInfo);
-        Object.defineProperty(this, "element", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         assertIsElementPartInfo(partInfo, directiveName);
     }
     update(partInfo, [callback]) {
@@ -25,6 +44,7 @@ class extends Directive {
         }
         return this.render(callback);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     render(callback) {
         return undefined;
     }

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

@@ -1,8 +1,38 @@
 import { MaybePromise } from '@augment-vir/common';
-import { PartInfo } from '../../lit-exports/all-lit-exports';
+import { PartInfo } from '../../lit-exports/all-lit-exports.js';
+/**
+ * The callback / listener passed to {@link onDomRendered}. The `element` parameter is a reference to
+ * the DOM element that the directive was attached to.
+ *
+ * @category Internal
+ */
 export type OnDomRenderedCallback = (element: Element) => MaybePromise<void>;
-/** Fires each time the element its attached to is rendered. */
-export declare const onDomRendered: (callback: OnDomRenderedCallback) => import("lit-html/directive").DirectiveResult<{
+/**
+ * A directive that fires its listener each time the element that it's attached to is rendered.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, onDomRendered} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div
+ *                 ${onDomRendered((element) => {
+ *                     console.log('rendered!', element);
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare const onDomRendered: (callback: OnDomRenderedCallback) => import("lit-html/directive.js").DirectiveResult<{
     new (partInfo: PartInfo): {
         update(partInfo: PartInfo, [callback]: [OnDomRenderedCallback]): undefined;
         render(callback: OnDomRenderedCallback): undefined;

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

@@ -1,10 +1,32 @@
-import { directive, Directive } from '../../lit-exports/all-lit-exports';
-import { assertIsElementPartInfo } from './directive-helpers';
+import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onDomRendered';
-/** Fires each time the element its attached to is rendered. */
-export const onDomRendered = directive(
-/** @internal */
-class extends Directive {
+/**
+ * A directive that fires its listener each time the element that it's attached to is rendered.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, onDomRendered} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div
+ *                 ${onDomRendered((element) => {
+ *                     console.log('rendered!', element);
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export const onDomRendered = directive(class extends Directive {
     constructor(partInfo) {
         super(partInfo);
         assertIsElementPartInfo(partInfo, directiveName);
@@ -16,6 +38,7 @@ class extends Directive {
         window.requestAnimationFrame(() => callback(element));
         return this.render(callback);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     render(callback) {
         return undefined;
     }

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

@@ -1,8 +1,41 @@
-import { PartInfo } from '../../lit-exports/all-lit-exports';
-export type OnResizeCallback = (
+import type { MaybePromise } from '@augment-vir/common';
+import { PartInfo } from '../../lit-exports/all-lit-exports.js';
+/**
+ * Callback called by the {@link onResize} directive.
+ *
+ * @category Internal
+ */
+export type OnResizeCallback = (size: Readonly<Pick<ResizeObserverEntry, 
 /** Only these two properties are supported in all major modern browsers */
-size: Readonly<Pick<ResizeObserverEntry, 'target' | 'contentRect'>>, element: Element) => void;
-export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive").DirectiveResult<{
+'target' | 'contentRect'>>, element: Element) => MaybePromise<void>;
+/**
+ * A directive that fires its listener any time the element that it's attached to is resized. This
+ * uses the [built-in `ResizeObserver`
+ * API](https://developer.mozilla.org/docs/Web/API/ResizeObserver), so it is very efficient.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, onResize} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div
+ *                 ${onResize((size, element) => {
+ *                     console.log('resized!', element, size);
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive.js").DirectiveResult<{
     new (partInfo: PartInfo): {
         element: Element | undefined;
         readonly resizeObserver: ResizeObserver;

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

@@ -1,29 +1,39 @@
-import { directive, Directive } from '../../lit-exports/all-lit-exports';
-import { assertIsElementPartInfo } from './directive-helpers';
+import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onResize';
-export const onResize = directive(
-/** @internal */
-class extends Directive {
+/**
+ * A directive that fires its listener any time the element that it's attached to is resized. This
+ * uses the [built-in `ResizeObserver`
+ * API](https://developer.mozilla.org/docs/Web/API/ResizeObserver), so it is very efficient.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, onResize} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div
+ *                 ${onResize((size, element) => {
+ *                     console.log('resized!', element, size);
+ *                 })}
+ *             >
+ *                 Some div
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export const onResize = directive(class extends Directive {
+    element;
+    resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
+    callback;
     constructor(partInfo) {
         super(partInfo);
-        Object.defineProperty(this, "element", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "resizeObserver", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new ResizeObserver((entries) => this.fireCallback(entries))
-        });
-        Object.defineProperty(this, "callback", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         assertIsElementPartInfo(partInfo, directiveName);
     }
     fireCallback(entries) {
@@ -32,7 +42,9 @@ class extends Directive {
             console.error(entries);
             throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
         }
-        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect }, this.element);
+        void this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect }, 
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.element);
     }
     update(partInfo, [callback]) {
         assertIsElementPartInfo(partInfo, directiveName);
@@ -49,6 +61,7 @@ class extends Directive {
         }
         return this.render(callback);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     render(callback) {
         return undefined;
     }

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

@@ -1,5 +1,45 @@
-import { AsyncProp } from './async-prop';
+import { AsyncProp } from './async-prop.js';
+/**
+ * Given a {@link AsyncProp} instance, call and return the output of the `resolutionRender` parameter
+ * once the {@link AsyncProp} has been resolved, call and return the output of the `errorRender`
+ * parameter if the {@link AsyncProp} errored out, return the `fallback` parameter in all other
+ * cases.
+ *
+ * This is the overload for when `resolutionRender` and `errorRender` are both provided.
+ *
+ * @category Async
+ */
 export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | ResolutionRenderResult | ErrorRenderResult;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender?: undefined): FallbackResult | ResolutionRenderResult | string;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: undefined, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | Awaited<T> | ErrorRenderResult;
-export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender?: undefined, errorRender?: undefined): FallbackResult | Awaited<T> | string;
+/**
+ * Given a {@link AsyncProp} instance, call and return the output of the `resolutionRender` parameter
+ * once the {@link AsyncProp} has been resolved, call and return the output of the `errorRender`
+ * parameter if the {@link AsyncProp} errored out, return the `fallback` parameter in all other
+ * cases.
+ *
+ * This is the overload for when `resolutionRender` is provided but `errorRender` is not.
+ *
+ * @category Async
+ */
+export declare function renderAsync<T, FallbackResult, ResolutionRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: (resolved: Awaited<T>) => ResolutionRenderResult, errorRender?: undefined): FallbackResult | ResolutionRenderResult | string;
+/**
+ * Given a {@link AsyncProp} instance, call and return the output of the `resolutionRender` parameter
+ * once the {@link AsyncProp} has been resolved, call and return the output of the `errorRender`
+ * parameter if the {@link AsyncProp} errored out, return the `fallback` parameter in all other
+ * cases.
+ *
+ * This is the overload for when `resolutionRender` is not provided but `errorRender` is.
+ *
+ * @category Async
+ */
+export declare function renderAsync<T, FallbackResult, ErrorRenderResult = never>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender: undefined, errorRender: (error: Error) => ErrorRenderResult): FallbackResult | Awaited<T> | ErrorRenderResult;
+/**
+ * Given a {@link AsyncProp} instance, call and return the output of the `resolutionRender` parameter
+ * once the {@link AsyncProp} has been resolved, call and return the output of the `errorRender`
+ * parameter if the {@link AsyncProp} errored out, return the `fallback` parameter in all other
+ * cases.
+ *
+ * This is the overload for when neither `resolutionRender` or `errorRender` are provided.
+ *
+ * @category Async
+ */
+export declare function renderAsync<T, FallbackResult>(asyncProp: Pick<AsyncProp<T, any>, 'value'>, fallback: FallbackResult, resolutionRender?: undefined, errorRender?: undefined): FallbackResult | Awaited<T> | string;

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

@@ -1,5 +1,15 @@
-import { extractErrorMessage, isPromiseLike } from '@augment-vir/common';
-// full function type
+import { check } from '@augment-vir/assert';
+import { extractErrorMessage } from '@augment-vir/common';
+/**
+ * Given a {@link AsyncProp} instance, call and return the output of the `resolutionRender` parameter
+ * once the {@link AsyncProp} has been resolved, call and return the output of the `errorRender`
+ * parameter if the {@link AsyncProp} errored out, return the `fallback` parameter in all other
+ * cases.
+ *
+ * This is the full function definition and implementation.
+ *
+ * @category Async
+ */
 export function renderAsync(asyncProp, 
 /** This value will be rendered if the async prop has not settled yet. */
 fallback, resolutionRender, errorRender) {
@@ -10,7 +20,7 @@ fallback, resolutionRender, errorRender) {
             : extractErrorMessage(asyncPropValue);
         return errorResult;
     }
-    else if (isPromiseLike(asyncPropValue)) {
+    else if (check.isPromiseLike(asyncPropValue)) {
         const fallbackResult = fallback;
         return fallbackResult;
     }

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

@@ -1 +1,32 @@
+/**
+ * A directive that, given a condition, chooses between two inputs: `ifTrue` and `ifFalse`. If
+ * `ifFalse` is omitted (which is allowed), the false case defaults to `undefined`, which won't get
+ * rendered at all inside of an HTML template.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, renderIf} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div>
+ *                 ${renderIf(
+ *                     Math.random() > 0.5,
+ *                     html`
+ *                         True!
+ *                     `,
+ *                     html`
+ *                         False!
+ *                     `,
+ *                 )}
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
 export declare function renderIf<TrueCondition = unknown, FalseCondition = undefined>(condition: boolean, ifTrue: TrueCondition, ifFalse?: FalseCondition): TrueCondition | FalseCondition;

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

@@ -1,4 +1,35 @@
-import { when } from '../../lit-exports/all-lit-exports';
+import { when } from '../../lit-exports/all-lit-exports.js';
+/**
+ * A directive that, given a condition, chooses between two inputs: `ifTrue` and `ifFalse`. If
+ * `ifFalse` is omitted (which is allowed), the false case defaults to `undefined`, which won't get
+ * rendered at all inside of an HTML template.
+ *
+ * @category Directives
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, renderIf} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div>
+ *                 ${renderIf(
+ *                     Math.random() > 0.5,
+ *                     html`
+ *                         True!
+ *                     `,
+ *                     html`
+ *                         False!
+ *                     `,
+ *                 )}
+ *             </div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
 export function renderIf(condition, ifTrue, ifFalse) {
     return when(condition, () => ifTrue, () => ifFalse);
 }

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

@@ -1,8 +1,52 @@
-export declare const testId: (attributeValue: string) => import("lit-html/directive").DirectiveResult<{
-    new (partInfo: import("lit-html/directive").PartInfo): {
+/**
+ * Assigns the given id as a test id attribute to the attached element.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, testId} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div ${testId('my-test')}>Some div</div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export declare const testId: (this: void, attributeValue: string) => import("lit-html/directive.js").DirectiveResult<{
+    new (partInfo: import("lit-html/directive.js").PartInfo): {
         readonly element: Element;
         render(attributeValue: string): symbol;
         readonly _$isConnected: boolean;
-        update(_part: import("lit-html").Part, props: unknown[]): unknown;
+        update(_part: import("lit-html").Part, props: Array<unknown>): unknown;
     };
-}>, testIdBy: (attributeValue: string) => string, testIdAttributeName: string;
+}>;
+/**
+ * Construct an attribute selector for the given test id.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, selectTestId} from 'element-vir';
+ * import {testWeb} from '@augment-vir/test';
+ * import {assert} from '@augment-vir/assert';
+ *
+ * const instance = testWeb.render(html`
+ *     <${MyElement}></${MyElement}>
+ * `);
+ * assert.instanceOf(instance, MyElement);
+ * instance.shadowRoot.querySelector(selectTestId('my-test'));
+ * ```
+ */
+export declare const testIdSelector: (this: void, attributeValue: string) => string;
+/**
+ * The test id attribute name.
+ *
+ * @category Test
+ */
+export declare const testIdAttributeName: string;

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

@@ -1,2 +1,47 @@
-import { createAttributeDirective } from './create-attribute-directive';
-export const { attributeDirective: testId, attributeSelector: testIdBy, attributeName: testIdAttributeName, } = createAttributeDirective('data-test-id');
+import { createAttributeDirective } from './create-attribute-directive.js';
+const { attributeDirective, attributeSelector, attributeName } = createAttributeDirective('data-test-id');
+/**
+ * Assigns the given id as a test id attribute to the attached element.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, defineElementNoInputs, testId} from 'element-vir';
+ *
+ * const MyElement = defineElementNoInputs({
+ *     tagName: 'my-element',
+ *     render() {
+ *         return html`
+ *             <div ${testId('my-test')}>Some div</div>
+ *         `;
+ *     },
+ * });
+ * ```
+ */
+export const testId = attributeDirective;
+/**
+ * Construct an attribute selector for the given test id.
+ *
+ * @category Test
+ * @example
+ *
+ * ```ts
+ * import {html, selectTestId} from 'element-vir';
+ * import {testWeb} from '@augment-vir/test';
+ * import {assert} from '@augment-vir/assert';
+ *
+ * const instance = testWeb.render(html`
+ *     <${MyElement}></${MyElement}>
+ * `);
+ * assert.instanceOf(instance, MyElement);
+ * instance.shadowRoot.querySelector(selectTestId('my-test'));
+ * ```
+ */
+export const testIdSelector = attributeSelector;
+/**
+ * The test id attribute name.
+ *
+ * @category Test
+ */
+export const testIdAttributeName = attributeName;

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

@@ -1,4 +1,4 @@
-import { DeclarativeElement } from './declarative-element';
+import { DeclarativeElement } from './declarative-element.js';
 export function hasDeclarativeElementParent(input) {
     const rootNode = input.getRootNode();
     if (!(rootNode instanceof ShadowRoot)) {

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

@@ -1,3 +1,17 @@
-import { DeclarativeElementDefinition } from './declarative-element';
+import { DeclarativeElementDefinition } from './declarative-element.js';
+/**
+ * Asserts that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link isDeclarativeElementDefinition}
+ */
 export declare function assertDeclarativeElementDefinition(input: unknown, failMessage?: string | undefined): asserts input is DeclarativeElementDefinition;
+/**
+ * Checks that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link assertDeclarativeElementDefinition}
+ */
 export declare function isDeclarativeElementDefinition(input: unknown): input is DeclarativeElementDefinition;

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

@@ -1,5 +1,5 @@
-import { getObjectTypedKeys, isTruthy, wrapInTry } from '@augment-vir/common';
-import { AssertionError, hasProperty, isRunTimeType } from 'run-time-assertions';
+import { AssertionError, check } from '@augment-vir/assert';
+import { getObjectTypedKeys, wrapInTry } from '@augment-vir/common';
 const expectedStaticProperties = getObjectTypedKeys({
     assign: '',
     assignedInputs: '',
@@ -9,8 +9,7 @@ const expectedStaticProperties = getObjectTypedKeys({
     hostClasses: '',
     init: '',
     inputsType: '',
-    isStrictInstance: '',
-    renderCallback: '',
+    render: '',
     slotNames: '',
     stateInitStatic: '',
     stateType: '',
@@ -18,26 +17,30 @@ const expectedStaticProperties = getObjectTypedKeys({
     tagName: '',
     updateStateType: '',
 });
+/**
+ * Asserts that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link isDeclarativeElementDefinition}
+ */
 export function assertDeclarativeElementDefinition(input, failMessage) {
-    if (!isRunTimeType(input, 'function')) {
-        throw new AssertionError([
-            'input is not an element constructor',
-            failMessage,
-        ]
-            .filter(isTruthy)
-            .join(': '));
+    if (!check.isFunction(input)) {
+        throw new AssertionError('Input is not a declarative element constructor', failMessage);
     }
     expectedStaticProperties.forEach((expectedProperty) => {
-        if (!hasProperty(input, expectedProperty)) {
-            throw new AssertionError([
-                `missing prop '${expectedProperty}'`,
-                failMessage,
-            ]
-                .filter(isTruthy)
-                .join(': '));
+        if (!check.hasKey(input, expectedProperty)) {
+            throw new AssertionError(`missing prop '${expectedProperty}'`, failMessage);
         }
     });
 }
+/**
+ * Checks that the given input is a declarative element definition.
+ *
+ * @category Util
+ * @see
+ * - {@link assertDeclarativeElementDefinition}
+ */
 export function isDeclarativeElementDefinition(input) {
     return wrapInTry(() => {
         assertDeclarativeElementDefinition(input);

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

@@ -1,11 +1,15 @@
-import { DeclarativeElement } from './declarative-element';
+import { DeclarativeElement } from './declarative-element.js';
 /**
  * Checks if the input is an instance of a DeclarativeElement, the super class of all custom
  * elements defined with element-vir.
+ *
+ * @category Util
  */
 export declare function isDeclarativeElement(input: unknown): input is DeclarativeElement;
 /**
  * Checks if the input is an instance of a DeclarativeElement, the super class of all custom
  * elements defined with element-vir.
+ *
+ * @category Util
  */
 export declare function assertIsDeclarativeElement(input: unknown): asserts input is DeclarativeElement;