element-vir 5.4.2 → 5.6.0

package/README.md

@@ -11,7 +11,7 @@ _**It's just TypeScript.**_
 
 Uses the power of _native_ JavaScript custom web elements, _native_ JavaScript template literals, _native_ JavaScript functions<sup>\*</sup>, _native_ HTML, and [lit-element](http://lit.dev).
 
-In reality this is basically a [lit-element](http://lit.dev) wrapper that adds type-safe element tag usage and I/O with functional-programming style component definition.
+In reality this is basically a [lit-element](http://lit.dev) wrapper that adds type-safe element tag usage and I/O with functional-programming style component definition. (As functional as possible, element property mutations are still possible cause without that, how would you do anything?)
 
 [Works in every major web browser except Internet Explorer.](https://caniuse.com/mdn-api_window_customelements)
 
@@ -150,7 +150,7 @@ export const MySimpleWithPropsElement = defineFunctionalElement({
 });
 ```
 
-## Updating properties
+### Updating properties
 
 Grab `setProps` from `renderCallback`'s parameters to update the values in `props`. This causes a re-render. (Note that this example also uses the `listen` directive to respond to click events.)
 
@@ -177,7 +177,7 @@ export const MySimpleWithPropsElement = defineFunctionalElement({
 });
 ```
 
-## Assigning to properties (inputs)
+### Assigning to properties (inputs)
 
 Use the `assign` directive to assign properties to child custom elements:
 
@@ -228,7 +228,7 @@ export const MySimpleWithEventsElement = defineFunctionalElement({
 });
 ```
 
-## Listening to typed events (outputs)
+### Listening to typed events (outputs)
 
 Use the `listen` directive to listen to typed events emitted by your custom functional elements:
 
@@ -303,6 +303,87 @@ export const MyElementWithCustomEvents = defineFunctionalElement({
 });
 ```
 
+## Host classes
+
+Host classes can be defined and used with type safety. Host classes are used to provide alternative styles for components. They are purely driven by CSS and are thus applied via the `class` HTML attribute.
+
+Host classes that are defined with a callback will automatically get applied if that callback returns true after a render is executed. These are executed _after_ `renderCallback` is executed. When a definition is set to `false`, it's left to the element's consumer to apply the host class.
+
+Apply host classes in the element's stylesheet by using a callback for the styles property.
+
+<!-- example-link: src/readme-examples/host-class-definition.ts -->
+
+```TypeScript
+import {css, defineFunctionalElement, html} from 'element-vir';
+
+export const MyAppWithHostClasses = defineFunctionalElement({
+    tagName: 'my-app-with-host-classes',
+    props: {
+        myProp: 'hello there',
+    },
+    hostClasses: {
+        /**
+         * Setting the value to false means this host class will not ever automatically be applied.
+         * It will simply be a static member on the element for manual application in consumers when desired.
+         */
+        styleVariationA: false,
+        /**
+         * This host class will be automatically applied if the given callback evaluated to true
+         * after a call to renderCallback.
+         */
+        automaticallyAppliedVariation: ({props}) => {
+            return props.myProp === 'foo';
+        },
+    },
+    /**
+     * Apply styles to the host classes by using a callback for "styles". The callback's argument
+     * contains the host classes defined above in the "hostClasses" property.
+     */
+    styles: ({hostClass}) => css`
+        ${hostClass.automaticallyAppliedVariation} {
+            color: blue;
+        }
+
+        ${hostClass.styleVariationA} {
+            color: red;
+        }
+    `,
+    renderCallback: ({props}) => html`
+        ${props.myProp}
+    `,
+});
+```
+
+## CSS Vars
+
+Typed CSS vars are created in a similar way as host classes:
+
+<!-- example-link: src/readme-examples/css-vars-definition.ts -->
+
+```TypeScript
+import {css, defineFunctionalElement, html} from 'element-vir';
+
+export const MyAppWithCssVars = defineFunctionalElement({
+    tagName: 'my-app-with-css-vars',
+    cssVars: {
+        /**
+         * The value assigned here ('blue') becomes the fallback value for this CSS var when used
+         * via "cssVarValue".
+         */
+        myCssVar: 'blue',
+    },
+    styles: ({cssVarName, cssVarValue}) => css`
+        :host {
+            /* Set CSS vars (or reference the name directly) via "cssVarName" */
+            ${cssVarName.myCssVar}: yellow;
+            /* Use CSS vars with "cssVarValue". This includes a "var" wrapper and the assigned fallback value (which in this case is 'blue'). */
+            color: ${cssVarValue.myCssVar};
+        }
+    `,
+    renderCallback: () => html``,
+});
+```
+
 ## Directives
 
 The following custom [`lit` directives](https://lit.dev/docs/templates/custom-directives/) are contained within this package.

package/dist/functional-element/css-vars.d.ts

@@ -0,0 +1,6 @@
+import { CSSResult } from 'lit';
+export declare type CssVarsInitMap<CssVarKeys extends string> = Record<CssVarKeys, string>;
+export declare type CssVarName<TagName extends string> = `--${TagName}-string`;
+export declare type CssVarNameOrValueMap<CssVarKeys extends string> = Record<CssVarKeys, CSSResult>;
+export declare function createCssVarNamesMap<TagName extends string, CssVarKeys extends string>(tagName: TagName, cssVarsInit: CssVarsInitMap<CssVarKeys> | undefined): CssVarNameOrValueMap<CssVarKeys>;
+export declare function createCssVarValuesMap<CssVarKeys extends string>(cssVarInitMap: CssVarsInitMap<CssVarKeys> | undefined, cssVarNamesMap: CssVarNameOrValueMap<CssVarKeys>): CssVarNameOrValueMap<CssVarKeys>;

package/dist/functional-element/css-vars.js

@@ -0,0 +1,22 @@
+import { mapObject } from 'augment-vir';
+import { unsafeCSS } from 'lit';
+import { toHtmlSafeWithTagName } from './tag-name';
+export function createCssVarNamesMap(tagName, cssVarsInit) {
+    if (cssVarsInit) {
+        return mapObject(cssVarsInit, (key) => {
+            return unsafeCSS(`--${toHtmlSafeWithTagName(tagName, String(key))}`);
+        });
+    }
+    else {
+        return {};
+    }
+}
+export function createCssVarValuesMap(cssVarInitMap, cssVarNamesMap) {
+    if (!cssVarInitMap) {
+        return {};
+    }
+    return mapObject(cssVarInitMap, (key, fallbackValue) => {
+        const name = cssVarNamesMap[key];
+        return unsafeCSS(`var(${name}, ${fallbackValue})`);
+    });
+}

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

@@ -0,0 +1,4 @@
+import { EventsInitMap } from './element-events';
+import { PropertyInitMapBase } from './element-properties';
+import { FunctionalElement, FunctionalElementInit } from './functional-element';
+export declare function defineFunctionalElement<HostClassKeys extends string = '', CssVarKeys extends string = '', EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;

package/dist/{esm/functional-element → functional-element}/define-functional-element.js

@@ -1,12 +1,34 @@
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
+import { createCssVarNamesMap, createCssVarValuesMap } from './css-vars';
 import { createEventDescriptorMap } from './element-events';
 import { createPropertyDescriptorMap, createPropertyProxy, } from './element-properties';
 import { FunctionalElementBaseClass, } from './functional-element';
+import { createHostClassNamesMap } from './host-classes';
 import { createRenderParams } from './render-callback';
+import { applyHostClasses, hostClassNamesToStylesInput } from './styles';
+const defaultInit = {
+    events: {},
+    props: {},
+};
 export function defineFunctionalElement(functionalElementInit) {
     var _a;
     const eventsMap = createEventDescriptorMap(functionalElementInit.events);
+    const hostClassNames = createHostClassNamesMap(functionalElementInit.tagName, functionalElementInit.hostClasses);
+    const cssVarNames = createCssVarNamesMap(functionalElementInit.tagName, functionalElementInit.cssVars);
+    const cssVarValues = createCssVarValuesMap(functionalElementInit.cssVars, cssVarNames);
+    console.log({ hostClassNames });
+    console.log(hostClassNamesToStylesInput({
+        hostClassNames,
+        cssVarNames,
+        cssVarValues,
+    }));
+    const calculatedStyles = typeof functionalElementInit.styles === 'function'
+        ? functionalElementInit.styles(hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues }))
+        : functionalElementInit.styles || css ``;
+    if (typeof functionalElementInit.styles === 'function') {
+        console.log({ calculatedStyles: String(calculatedStyles) });
+    }
     const anonymousClass = (_a = class extends FunctionalElementBaseClass {
             constructor() {
                 super();
@@ -28,15 +50,20 @@ export function defineFunctionalElement(functionalElementInit) {
                     this.initCalled = true;
                     functionalElementInit.initCallback(renderParams);
                 }
-                return functionalElementInit.renderCallback(renderParams);
+                const renderResult = functionalElementInit.renderCallback(renderParams);
+                applyHostClasses(renderParams.host, functionalElementInit.hostClasses, hostClassNames, renderParams.props);
+                return renderResult;
             }
         },
         _a.tagName = functionalElementInit.tagName,
-        _a.styles = functionalElementInit.styles || css ``,
-        _a.initInput = functionalElementInit,
+        _a.styles = calculatedStyles,
+        _a.init = { ...defaultInit, ...functionalElementInit },
         _a.events = eventsMap,
         _a.renderCallback = functionalElementInit.renderCallback,
         _a.props = createPropertyDescriptorMap(functionalElementInit.props),
+        _a.hostClasses = hostClassNames,
+        _a.cssVarNames = cssVarNames,
+        _a.cssVarValues = cssVarNames,
         _a);
     window.customElements.define(functionalElementInit.tagName, anonymousClass);
     return anonymousClass;

package/dist/{types/functional-element → functional-element}/directives/assign.directive.d.ts

@@ -1,13 +1,13 @@
 import { PartInfo } from 'lit/directive.js';
 import { PropertyInitMapBase, StaticElementPropertyDescriptor } from '../element-properties';
-import { FunctionalElementInstance } from '../functional-element';
+import { FunctionalElementInstanceFromInit } from '../functional-element';
 /**
  * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
  * the directive call is wrapped in this function.
  */
 export declare function assign<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue']): import("lit-html/directive").DirectiveResult<{
     new (partInfo: PartInfo): {
-        readonly element: FunctionalElementInstance<PropertyInitMapBase>;
+        readonly element: FunctionalElementInstanceFromInit<PropertyInitMapBase>;
         render(propName: string, value: unknown): symbol;
         readonly _$isConnected: boolean;
         update(_part: import("lit-html").Part, props: unknown[]): unknown;

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

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

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

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

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

@@ -1,20 +1,31 @@
+import { RequiredBy } from 'augment-vir';
 import { CSSResult, LitElement, TemplateResult } from 'lit';
+import { CssVarNameOrValueMap, CssVarsInitMap } from './css-vars';
 import { EventDescriptorMap, EventsInitMap } from './element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
+import { HostClassesInitMap, HostClassNamesMap } from './host-classes';
 import { InitCallback, RenderCallback } from './render-callback';
+import { StylesCallback } from './styles';
 export declare type CustomElementTagName = `${string}-${string}`;
-export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
      */
     tagName: CustomElementTagName;
     /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | undefined;
-    /** Initializer for element properties. (These can be thought of as "inputs".) */
-    props?: PropertyInitGeneric | undefined;
-    /** Initializer for events that the element can dispatch. (These can be thought of as "outputs".) */
-    events?: EventsInitGeneric | undefined;
+    styles?: CSSResult | StylesCallback<HostClassKeys, CssVarKeys>;
+    /** Element properties. (These can be thought of as "inputs".) */
+    props?: PropertyInitGeneric;
+    /** Events that the element can dispatch. (These can be thought of as "outputs".) */
+    events?: EventsInitGeneric;
+    /**
+     * CSS host classes. Values can be callbacks to determine when a host class should be defined,
+     * based on current instance props, or just undefined to indicate that the host class will only
+     * be manually set.
+     */
+    hostClasses?: HostClassesInitMap<HostClassKeys, PropertyInitGeneric>;
+    cssVars?: CssVarsInitMap<CssVarKeys>;
     /** Called as part of the first renderCallback call, before the first renderCallback call. */
     initCallback?: InitCallback<PropertyInitGeneric, EventsInitGeneric>;
     renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
@@ -25,14 +36,18 @@ export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric ext
     abstract render(): TemplateResult | Promise<TemplateResult>;
     abstract readonly instanceProps: PropertyInitGeneric;
 }
-export declare type FunctionalElementInstance<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<PropertyInitGeneric> & PropertyInitGeneric;
-export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any> = (new () => FunctionalElementInstance<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric>;
-export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = Readonly<{
+export declare type FunctionalElementInstanceFromInit<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<NonNullable<Required<PropertyInitGeneric>>> & PropertyInitGeneric;
+export declare type FunctionalElementInstance<FunctionalElementGeneric extends FunctionalElement> = FunctionalElementInstanceFromInit<FunctionalElementGeneric['init']['props']>;
+export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = string, CssVarKeys extends string = string> = (new () => FunctionalElementInstanceFromInit<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
+export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = Readonly<{
     /** Pass through the render callback for direct unit testability */
     renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
     props: ElementPropertyDescriptorMap<PropertyInitGeneric>;
-    initInput: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>;
+    init: RequiredBy<FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, 'props' | 'events'>;
+    hostClasses: HostClassNamesMap<string, HostClassKeys>;
+    cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
+    cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
     /**
      * Static properties have to be copied here cause they get nuked in the "new () =>
      * FunctionalElementInstance<PropertyInitGeneric>" type.

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

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

package/dist/functional-element/host-classes.js

@@ -0,0 +1,12 @@
+import { mapObject } from 'augment-vir';
+import { toHtmlSafeWithTagName } from './tag-name';
+export function createHostClassNamesMap(tagName, hostClassesInit) {
+    if (hostClassesInit) {
+        return mapObject(hostClassesInit, (key) => {
+            return toHtmlSafeWithTagName(tagName, String(key));
+        });
+    }
+    else {
+        return {};
+    }
+}

package/dist/{types/functional-element → functional-element}/render-callback.d.ts

@@ -2,7 +2,7 @@ import { TemplateResult } from 'lit';
 import { TypedEvent } from '../typed-event/typed-event';
 import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
 import { PropertyInitMapBase } from './element-properties';
-import { FunctionalElementInstance } from './functional-element';
+import { FunctionalElementInstanceFromInit } from './functional-element';
 export declare type RenderCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => TemplateResult;
 export declare type InitCallback<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (params: RenderParams<PropertyInitGeneric, EventsInitGeneric>) => void;
 export declare type SetPropCallback<PropertyInitGeneric extends PropertyInitMapBase> = (props: Partial<PropertyInitGeneric>) => void;
@@ -10,7 +10,7 @@ export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase
     props: Readonly<PropertyInitGeneric>;
     setProps: SetPropCallback<PropertyInitGeneric>;
     events: EventDescriptorMap<EventsInitGeneric>;
-    host: FunctionalElementInstance<PropertyInitGeneric>;
+    host: FunctionalElementInstanceFromInit<PropertyInitGeneric>;
     dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
     /**
      * Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
@@ -18,4 +18,4 @@ export declare type RenderParams<PropertyInitGeneric extends PropertyInitMapBase
      */
     genericDispatch: (event: Event) => boolean;
 };
-export declare function createRenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap>(element: FunctionalElementInstance<PropertyInitGeneric>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<PropertyInitGeneric, EventsInitGeneric>;
+export declare function createRenderParams<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap>(element: FunctionalElementInstanceFromInit<PropertyInitGeneric>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<PropertyInitGeneric, EventsInitGeneric>;

package/dist/functional-element/styles.d.ts

@@ -0,0 +1,16 @@
+import { CSSResult } from 'lit';
+import { CssVarNameOrValueMap } from './css-vars';
+import { PropertyInitMapBase } from './element-properties';
+import { HostClassesInitMap, HostClassNamesMap } from './host-classes';
+export declare type StylesCallbackInput<HostClassKeys extends string, CssVarKeys extends string> = {
+    hostClass: Record<HostClassKeys, CSSResult>;
+    cssVarName: Record<CssVarKeys, CSSResult>;
+    cssVarValue: Record<CssVarKeys, CSSResult>;
+};
+export declare type StylesCallback<HostClassKeys extends string, CssVarKeys extends string> = (input: StylesCallbackInput<HostClassKeys, CssVarKeys>) => CSSResult;
+export declare function hostClassNamesToStylesInput<HostClassKeys extends string, CssVarKeys extends string>({ hostClassNames, cssVarNames, cssVarValues, }: {
+    hostClassNames: HostClassNamesMap<string, HostClassKeys>;
+    cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
+    cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
+}): StylesCallbackInput<HostClassKeys, CssVarKeys>;
+export declare function applyHostClasses<PropertyInitGeneric extends PropertyInitMapBase, HostClassKeys extends string>(host: HTMLElement, hostClassesInit: Readonly<HostClassesInitMap<HostClassKeys, PropertyInitGeneric>> | undefined, hostClassNames: HostClassNamesMap<string, HostClassKeys>, props: Readonly<PropertyInitGeneric>): void;

package/dist/functional-element/styles.js

@@ -0,0 +1,29 @@
+import { getObjectTypedKeys, mapObject } from 'augment-vir';
+import { unsafeCSS } from 'lit';
+export function hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues, }) {
+    return {
+        hostClass: mapObject(hostClassNames, (key, name) => {
+            return unsafeCSS(`:host(.${name})`);
+        }),
+        cssVarName: cssVarNames,
+        cssVarValue: cssVarValues,
+    };
+}
+export function applyHostClasses(host, hostClassesInit, hostClassNames, props) {
+    if (!hostClassesInit) {
+        return;
+    }
+    getObjectTypedKeys(hostClassesInit).forEach((hostClassKey) => {
+        const maybeCallback = hostClassesInit[hostClassKey];
+        const hostClassName = hostClassNames[hostClassKey];
+        if (typeof maybeCallback === 'function') {
+            const shouldApplyHostClass = maybeCallback({ props });
+            if (shouldApplyHostClass) {
+                host.classList.add(hostClassName);
+            }
+            else {
+                host.classList.remove(hostClassName);
+            }
+        }
+    });
+}

package/dist/functional-element/tag-name.d.ts

@@ -0,0 +1,2 @@
+export declare type WithTagName<TagName extends string, Suffix extends string> = `${TagName}-${Suffix}`;
+export declare function toHtmlSafeWithTagName<TagName extends string>(tagName: TagName, forHtmlSafe: string): WithTagName<TagName, string>;

package/dist/functional-element/tag-name.js

@@ -0,0 +1,4 @@
+import { camelCaseToKebabCase } from 'augment-vir';
+export function toHtmlSafeWithTagName(tagName, forHtmlSafe) {
+    return `${tagName}-${camelCaseToKebabCase(forHtmlSafe)}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "5.4.2",
+    "version": "5.6.0",
     "keywords": [
         "custom",
         "web",
@@ -22,11 +22,10 @@
         "name": "electrovir",
         "url": "https://github.com/electrovir"
     },
-    "main": "dist/cjs/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/types/index.d.ts",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "scripts": {
-        "compile": "rm -rf dist && tsc --project tsconfig.json && tsc --project tsconfig.cjs.json && tsc --project tsconfig.esm.json",
+        "compile": "rm -rf dist && tsc --project tsconfig.json",
         "format": "virmator format write",
         "jest": "jest --config ./src/jest/jest.config.ts",
         "prepublishOnly": "npm run compile && npm run test:full",
@@ -38,12 +37,12 @@
         "update-docs": "virmator code-in-markdown README.md --index src/index.ts"
     },
     "dependencies": {
-        "augment-vir": "2.2.0",
-        "lit": "2.2.3"
+        "augment-vir": "2.2.1",
+        "lit": "2.2.7"
     },
     "devDependencies": {
-        "jest-environment-jsdom": "28.1.0",
+        "jest-environment-jsdom": "28.1.2",
         "virmator": "2.0.7",
-        "vite": "2.9.8"
+        "vite": "2.9.13"
     }
 }

package/dist/cjs/augments/array.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterOutArrayIndexes = void 0;
-function filterOutArrayIndexes(array, indexes) {
-    return array.filter((_, index) => !indexes.includes(index));
-}
-exports.filterOutArrayIndexes = filterOutArrayIndexes;

package/dist/cjs/augments/type.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/functional-element/define-functional-element.d.ts

@@ -1,4 +0,0 @@
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-import { FunctionalElement, FunctionalElementInit } from './functional-element';
-export declare function defineFunctionalElement<EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric>;