element-vir 26.15.0 → 26.16.0

package/README.md

@@ -523,7 +523,7 @@ export const defineVirElement = wrapDefineElement<VirTagName>();
 export const defineVerifiedVirElement = wrapDefineElement<VirTagName>({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
-            throw new Error(`all custom elements must start with "vir-"`);
+            throw new Error('all custom elements must start with "vir-"');
         }
     },
 });

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

@@ -14,17 +14,23 @@ import { type InitCallback, type RenderCallback, type RenderParams } from './ren
  *
  * @category Internal
  */
-export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
+export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs extends PropertyInitMapBase, State extends PropertyInitMapBase, EventsInit extends EventsInitMap, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>, TestIds extends ReadonlyArray<string>> = {
     /**
      * HTML tag name. This should not be used directly, as interpolating it with the html tagged
      * template from this package is preferred.
      */
     tagName: TagName;
     /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys> | undefined;
+    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys, SlotNames> | undefined;
     /** Events that the element can dispatch. (These can be thought of as "outputs".) */
     events?: EventsInit | undefined;
-    slotNames?: SlotNames | undefined;
+    /**
+     * An array of slot names that for type safe usage in rendering HTML, CSS, and in consumers for
+     * assigning slots. Each slot name must be prefixed with the element's tag name. This prefix is
+     * enforced at compile time only: runtimes accept any strings so existing consumers do not
+     * break.
+     */
+    slotNames?: (SlotNames & ReadonlyArray<BaseStringName<TagName>>) | undefined;
     testIds?: TestIds | undefined;
     /**
      * HTML host classes. Values can be callbacks to determine when a host class should be defined,
@@ -50,17 +56,6 @@ export type DeclarativeElementInit<TagName extends CustomElementTagName, Inputs
     state?: (params: Omit<RenderParams<TagName, Inputs, any, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>, 'state' | 'updateState'>) => Extract<keyof State, keyof HTMLElement> extends never ? Extract<keyof State, keyof Inputs> extends never ? State : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}` : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
     /** Called as part of the first render call, before the first render call. */
     init?: InitCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds> | undefined;
-    /**
-     * Optional callback to create a cache key from the current inputs and state. When provided, and
-     * the callback returns a non-undefined and non-null value, the element's render output is
-     * automatically wrapped in {@link keyedCache}, preserving DOM state (typed input values,
-     * checkbox state, etc.) across key changes. If `undefined` or `null` are returned,
-     * {@link keyedCache} will not be used.
-     */
-    cacheKey?: ((params: Readonly<{
-        inputs: Readonly<Inputs>;
-        state: Readonly<State>;
-    }>) => PropertyKey | undefined | null) | undefined;
     /** Called whenever an element updates. This creates the element's HTML. */
     render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     /** Called whenever an element is detached from the DOM. */

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

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

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

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

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

@@ -3,15 +3,13 @@ import { assert, check } from '@augment-vir/assert';
 import { StringCase, ensureErrorAndPrependMessage, extractErrorMessage, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
 import { defineCssVars } from 'lit-css-vars';
 import { css } from '../template-transforms/vir-css/vir-css.js';
-import { html } from '../template-transforms/vir-html/vir-html.js';
 import { DeclarativeElement, } from './declarative-element.js';
 import { defaultDeclarativeElementDefinitionOptions, } from './definition-options.js';
-import { keyedCache } from './directives/keyed-cache.directive.js';
 import { assignInputs } from './properties/assign-inputs.js';
 import { createEventDescriptorMap, } from './properties/element-events.js';
 import { createHostClassNamesMap } from './properties/host-classes.js';
 import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy.js';
-import { assertValidStringNames, createStringNameMap, } from './properties/string-names.js';
+import { assertValidStringNames, createSlotNamesMap, createStringNameMap, } from './properties/string-names.js';
 import { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
 import { createRenderParams } from './render-callback.js';
 /**
@@ -72,10 +70,10 @@ function internalDefineElement(init) {
     const eventsMap = createEventDescriptorMap(init.tagName, init.events);
     const hostClassNames = createHostClassNamesMap(init.hostClasses);
     if (init.hostClasses) {
-        assertValidStringNames(init.tagName, init.hostClasses);
+        assertValidStringNames(init.tagName, Object.keys(init.hostClasses));
     }
     if (init.cssVars) {
-        assertValidStringNames(init.tagName, init.cssVars);
+        assertValidStringNames(init.tagName, Object.keys(init.cssVars));
     }
     /**
      * As casts here are to prevent defineCssVars from complaining that our CSS var names are too
@@ -84,12 +82,13 @@ function internalDefineElement(init) {
      * specific types externally.)
      */
     const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
-    const slotNamesMap = createStringNameMap(init.tagName, 'slot', init.slotNames);
+    const slotNamesMap = createSlotNamesMap(init.tagName, init.slotNames);
     const testIdsMap = createStringNameMap(init.tagName, 'test-id', init.testIds);
     const calculatedStyles = typeof init.styles === 'function'
         ? init.styles(createStylesCallbackInput({
             hostClassNames,
             cssVars,
+            slotNamesMap,
         }))
         : init.styles || css ``;
     const typedRenderCallback = init.render;
@@ -162,19 +161,10 @@ function internalDefineElement(init) {
                         throw new TypeError('init cannot be asynchronous');
                     }
                 }
-                const rawRenderResult = typedRenderCallback(renderParams);
-                if (rawRenderResult instanceof Promise) {
+                const renderResult = typedRenderCallback(renderParams);
+                if (renderResult instanceof Promise) {
                     throw new TypeError('render cannot be asynchronous');
                 }
-                const computedCacheKey = init.cacheKey?.({
-                    inputs: renderParams.inputs,
-                    state: renderParams.state,
-                });
-                const renderResult = computedCacheKey == undefined
-                    ? rawRenderResult
-                    : html `
-                              ${keyedCache(computedCacheKey, rawRenderResult)}
-                          `;
                 applyHostClasses({
                     host: renderParams.host,
                     hostClassesInit: init.hostClasses,

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

@@ -64,7 +64,7 @@ function handleOnResizeCallback(element, callback, entries) {
     const resizeEntry = entries[0];
     if (!resizeEntry) {
         console.error(entries);
-        throw new Error(`Resize observation triggered but the first entry was empty.`);
+        throw new Error('Resize observation triggered but the first entry was empty.');
     }
     void callback({
         target: resizeEntry.target,

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

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

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

@@ -11,7 +11,7 @@ export type BaseStringName<ElementTagName extends CustomElementTagName> = `${Ele
  *
  * @category Internal
  */
-export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: Record<BaseStringName<CustomElementTagName>, any>): void;
+export declare function assertValidStringNames(elementTagName: CustomElementTagName, stringNames: ReadonlyArray<string>): void;
 /**
  * Type safe mapping of string names to themself with the element tag name inserted.
  *
@@ -26,3 +26,25 @@ export type StringNameMap<ElementTagName extends CustomElementTagName, NameType
  * @category Internal
  */
 export declare function createStringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, nameType: NameType, stringNames: StringNames | undefined): StringNameMap<ElementTagName, NameType, StringNames>;
+/**
+ * Identity map of slot names. Slot names are defined with the element's tag name as a prefix, so no
+ * extra string generation is required: each map key maps to itself.
+ *
+ * Note that if a slot name is _incorrectly_ defined without the element's tag name as the prefix,
+ * then the runtime value will actually be `${ElementTagName}-slot-${Name}`.
+ *
+ * @category Internal
+ */
+export type SlotNamesMap<SlotNames extends ReadonlyArray<string>> = Readonly<{
+    [Name in ArrayElement<SlotNames>]: Name;
+}>;
+/**
+ * Converts an array of slot names into a {@link SlotNamesMap}.
+ *
+ * Slot names that start with the element's tag name pass through unchanged. Slot names that do not
+ * are transformed into the legacy `${tagName}-slot-${name}` format so existing elements that
+ * pre-date the tag prefix convention keep working.
+ *
+ * @category Internal
+ */
+export declare function createSlotNamesMap<ElementTagName extends CustomElementTagName, SlotNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, slotNames: SlotNames | undefined): SlotNamesMap<SlotNames>;

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

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

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

@@ -1,9 +1,10 @@
+import { type ArrayElement } from '@augment-vir/common';
 import { type CSSResult } from '../../lit-exports/base-lit-exports.js';
 import { type CustomElementTagName } from '../custom-tag-name.js';
 import { type CssVars } from './css-vars.js';
 import { type PropertyInitMapBase } from './element-properties.js';
 import { type HostClassNamesMap, type HostClassesInitMap } from './host-classes.js';
-import { type BaseStringName } from './string-names.js';
+import { type BaseStringName, type SlotNamesMap } from './string-names.js';
 /**
  * A host class instance to be referenced inside of an element definition's `styles` callback.
  *
@@ -18,25 +19,27 @@ export type HostClass = {
  *
  * @category Internal
  */
-export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = {
+export type StylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>> = {
     hostClasses: Record<HostClassKeys, HostClass>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
+    slotNames: Readonly<Record<ArrayElement<SlotNames>, CSSResult>>;
 };
 /**
  * The type for an element definition's `styles` callback.
  *
  * @category Internal
  */
-export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>> = (input: StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>) => CSSResult;
+export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>> = (input: StylesCallbackInput<TagName, HostClassKeys, CssVarKeys, SlotNames>) => CSSResult;
 /**
  * Creates the input for an element definition's `styles` callback.
  *
  * @category Internal
  */
-export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<TagName>, CssVarKeys extends BaseStringName<TagName>>({ hostClassNames, cssVars, }: {
+export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>>({ hostClassNames, cssVars, slotNamesMap, }: {
     hostClassNames: HostClassNamesMap<TagName, HostClassKeys>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-}): StylesCallbackInput<TagName, HostClassKeys, CssVarKeys>;
+    slotNamesMap: SlotNamesMap<SlotNames>;
+}): StylesCallbackInput<TagName, HostClassKeys, CssVarKeys, SlotNames>;
 /**
  * Used inside of an element instance to apply host classes on each render.
  *

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

@@ -5,7 +5,7 @@ import { unsafeCSS } from '../../lit-exports/base-lit-exports.js';
  *
  * @category Internal
  */
-export function createStylesCallbackInput({ hostClassNames, cssVars, }) {
+export function createStylesCallbackInput({ hostClassNames, cssVars, slotNamesMap, }) {
     return {
         hostClasses: mapObjectValues(hostClassNames, (key, name) => {
             return {
@@ -14,6 +14,9 @@ export function createStylesCallbackInput({ hostClassNames, cssVars, }) {
             };
         }),
         cssVars,
+        slotNames: mapObjectValues(slotNamesMap, (key, name) => {
+            return unsafeCSS(name);
+        }),
     };
 }
 /**

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

@@ -5,7 +5,7 @@ import { type DeclarativeElement, type DeclarativeElementHost } from './declarat
 import { type CssVars } from './properties/css-vars.js';
 import { type EventDescriptorMap, type EventInitMapEventDetailExtractor, type EventsInitMap } from './properties/element-events.js';
 import { type PropertyInitMapBase } from './properties/element-properties.js';
-import { type BaseStringName, type StringNameMap } from './properties/string-names.js';
+import { type BaseStringName, type SlotNamesMap, type StringNameMap } from './properties/string-names.js';
 /**
  * Type for the `render` element definition method.
  *
@@ -35,7 +35,7 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
     updateState: UpdateStateCallback<State>;
     events: EventDescriptorMap<TagName, EventsInit>;
     host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
-    slotNames: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    slotNames: SlotNamesMap<SlotNames>;
     testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
     /** Dispatch an event from the current element. */
     dispatch: <EventTypeName extends keyof EventsInit>(event: TypedEvent<EventTypeName extends string ? EventTypeName : never, EventInitMapEventDetailExtractor<EventTypeName, EventsInit>> | Event) => boolean;
@@ -51,6 +51,6 @@ export declare function createRenderParams<TagName extends CustomElementTagName,
     element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     eventsMap: EventDescriptorMap<TagName, EventsInit>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-    slotNamesMap: Readonly<StringNameMap<TagName, 'slot', SlotNames>>;
+    slotNamesMap: SlotNamesMap<SlotNames>;
     testIdsMap: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
 }): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

package/dist/lit-exports/lit-repeat-fix.d.ts

@@ -21,7 +21,7 @@ declare class RepeatDirective extends Directive {
     /** Updates the repeated templates. */
     update<T>(containerPart: ChildPart, [items, keyFnOrTemplate, template,]: [
         Iterable<T>,
-        (KeyFn<T> | ItemTemplate<T>),
+        KeyFn<T> | ItemTemplate<T>,
         ItemTemplate<T>
     ]): HtmlInterpolation[] | typeof noChange;
 }

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

@@ -4,7 +4,7 @@ export const defineVirElement = wrapDefineElement();
 export const defineVerifiedVirElement = wrapDefineElement({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
-            throw new Error(`all custom elements must start with "vir-"`);
+            throw new Error('all custom elements must start with "vir-"');
         }
     },
 });

package/dist/template-transforms/nested-mapped-templates.js

@@ -47,7 +47,7 @@ function getNestedValues(map, keys, index = 0) {
     else if (index === keys.length - 1) {
         return {
             value: currentTemplateAndNested,
-            reason: `reached end of keys array`,
+            reason: 'reached end of keys array',
         };
     }
     else if (!currentTemplateAndNested.nested) {
@@ -85,7 +85,7 @@ function getCurrentKeyAndValue(map, keys, index) {
     return {
         currentKey,
         currentTemplateAndNested,
-        reason: `key and value exists`,
+        reason: 'key and value exists',
     };
 }
 function setNestedValues(map, keys, valueToSet, index = 0) {
@@ -107,7 +107,7 @@ function setNestedValues(map, keys, valueToSet, index = 0) {
         nestedAndTemplate.template = valueToSet;
         return {
             result: true,
-            reason: `set value at end of keys array`,
+            reason: 'set value at end of keys array',
         };
     }
     const nestedWeakMap = nestedAndTemplate.nested ?? new WeakMap();

package/dist/template-transforms/vir-html/html-interpolation.d.ts

@@ -28,12 +28,18 @@ export type VerifyHtmlValues<Values extends HtmlInterpolation[], WaitingForEndTa
     infer CurrentDefinition extends DeclarativeElementDefinition,
     ...infer Rest extends HtmlInterpolation[]
 ] ? CurrentDefinition extends DeclarativeElementDefinition<infer TagName, infer Inputs> ? HasRequiredKeys<Inputs> extends true ? IsNever<Decrement<WaitingForEndTags[TagName]>> extends true ? [
-    `ERROR: This element is missing its inputs.`,
+    'ERROR: This element is missing its inputs.',
     ...VerifyHtmlValues<Rest, WaitingForEndTags>
 ] : [
     CurrentDefinition,
     ...VerifyHtmlValues<Rest, Overwrite<WaitingForEndTags, Record<TagName, Decrement<WaitingForEndTags[TagName]>>>>
-] : [CurrentDefinition, ...VerifyHtmlValues<Rest, WaitingForEndTags>] : [CurrentDefinition, ...VerifyHtmlValues<Rest, WaitingForEndTags>] : Values extends [
+] : [
+    CurrentDefinition,
+    ...VerifyHtmlValues<Rest, WaitingForEndTags>
+] : [
+    CurrentDefinition,
+    ...VerifyHtmlValues<Rest, WaitingForEndTags>
+] : Values extends [
     infer CurrentDefinition extends MinimalDefinitionWithInputs,
     ...infer Rest extends HtmlInterpolation[]
 ] ? [

package/dist/util/increment.d.ts

@@ -46,10 +46,16 @@ export type Incrementable = [
  *
  * @category Internal
  */
-export type Increment<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? IsNever<T> extends true ? 1 : never : Incrementable extends [any, ...infer Rest] ? T extends keyof Rest ? Rest[T] extends undefined ? never : Rest[T] : 1 : 1;
+export type Increment<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? IsNever<T> extends true ? 1 : never : Incrementable extends [
+    any,
+    ...infer Rest
+] ? T extends keyof Rest ? Rest[T] extends undefined ? never : Rest[T] : 1 : 1;
 /**
  * Decrements the given number. If an invalid type parameter is given, `never` is the output.
  *
  * @category Internal
  */
-export type Decrement<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? never : T extends keyof Incrementable ? [never, ...Incrementable][T] : never;
+export type Decrement<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? never : T extends keyof Incrementable ? [
+    never,
+    ...Incrementable
+][T] : never;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "26.15.0",
+    "version": "26.16.0",
     "keywords": [
         "custom",
         "web",
@@ -39,19 +39,19 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.68.2",
-        "@augment-vir/common": "^31.68.2",
-        "date-vir": "^8.2.1",
+        "@augment-vir/assert": "^31.70.0",
+        "@augment-vir/common": "^31.70.0",
+        "date-vir": "^8.3.2",
         "lit": "^3.3.2",
         "lit-css-vars": "^3.6.2",
         "lit-html": "^3.3.2",
-        "object-shape-tester": "^6.11.0",
+        "object-shape-tester": "^6.12.1",
         "observavir": "^2.3.2",
         "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.68.2",
-        "@augment-vir/web": "^31.68.2",
+        "@augment-vir/test": "^31.70.0",
+        "@augment-vir/web": "^31.70.0",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -59,11 +59,11 @@
         "@web/test-runner-visual-regression": "^0.10.0",
         "html-spec-tags": "^2.2.3",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^5.5.0",
-        "typedoc": "^0.28.18",
+        "markdown-code-example-inserter": "^3.0.5",
+        "type-fest": "^5.6.0",
+        "typedoc": "^0.28.19",
         "typescript": "5.9.3",
-        "vite": "^8.0.3",
+        "vite": "^8.0.11",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "engines": {