@tempots/dom 37.0.4 → 37.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "37.0.4",
+  "version": "37.2.0",
   "type": "module",
   "sideEffects": false,
   "main": "./index.cjs",
@@ -15,8 +15,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@tempots/core": "^3.0.1",
-    "@tempots/render": "^0.0.5"
+    "@tempots/core": "^3.2.0",
+    "@tempots/render": "^0.0.6"
   },
   "description": "Fully-typed frontend framework alternative to React and Angular",
   "keywords": [

package/renderable/attribute.d.ts

@@ -191,7 +191,7 @@ export declare const attr: {
 /**
  * Creates a renderable for a data attribute with the specified name and value.
  *
- * This is the functional equivalent of using `dataAttr[name](value)` with a dynamic attribute name.
+ * This is an alias for `dataAttr(name, value)` that accepts `unknown` values.
  *
  * @param name - The name of the data attribute (without the 'data-' prefix).
  * @param value - The value of the attribute (can be a literal or Signal).
@@ -204,22 +204,23 @@ export declare const attr: {
  * ```
  * @public
  */
-export declare const DataAttr: (name: string, value: unknown) => Renderable;
+export declare const DataAttr: (name: string, value: Value<string>) => Renderable;
 /**
- * The `data` object allows to create any `data-` attributes. Either a literal value
- * or `Signal<string>` can be passed as a value.
+ * Creates a renderable for a `data-` attribute with the specified name and value.
  *
+ * @param name - The name of the data attribute (without the 'data-' prefix).
+ * @param value - The value of the attribute (can be a literal or Signal).
+ * @returns A renderable that sets the data attribute.
  * @example
  * ```ts
  * const button = html.button(
- *   dataAttr.myinfo('something'), // maps to the `data-myinfo` attribute
+ *   dataAttr('myinfo', 'something'), // maps to the `data-myinfo` attribute
  * )
  * ```
  * @public
+ * @deprecated
  */
-export declare const dataAttr: {
-    [x: string]: (value: Value<string>) => Renderable;
-};
+export declare const dataAttr: (name: string, value: Value<string>) => Renderable;
 /**
  * Creates a renderable for an ARIA attribute with the specified name and value.
  *

package/renderable/inertia.d.ts

@@ -0,0 +1,13 @@
+import { Renderable } from '../types/domain';
+import { InertiaConfig } from '../dom/inertia';
+/**
+ * A Tempo renderable that attaches inertia-based pointer drag handlers to
+ * the parent element. On pointer up, the surface continues scrolling with
+ * exponential velocity decay.
+ *
+ * @param onDelta - Called with `(dx, dy)` deltas each frame during drag and decay.
+ * @param config - Optional friction and threshold settings.
+ * @returns A renderable.
+ * @public
+ */
+export declare const Inertia: (onDelta: (dx: number, dy: number) => void, config?: InertiaConfig) => Renderable;

package/renderable/pinch-zoom.d.ts

@@ -0,0 +1,13 @@
+import { Prop } from '@tempots/core';
+import { Renderable } from '../types/domain';
+import { PinchZoomState, PinchZoomConfig } from '../dom/pinch-zoom';
+/**
+ * A Tempo renderable that attaches pinch-to-zoom touch handlers to the
+ * parent element. The handlers are automatically removed on disposal.
+ *
+ * @param state - A `Prop` holding the current zoom/pan state.
+ * @param config - Optional scale limits.
+ * @returns A renderable.
+ * @public
+ */
+export declare const PinchZoom: (state: Prop<PinchZoomState>, config?: PinchZoomConfig) => Renderable;

package/renderable/transition-keyed-foreach.d.ts

@@ -0,0 +1,37 @@
+import { Signal, KeyedPosition } from '@tempots/core';
+import { Renderable, TNode } from '../types/domain';
+/**
+ * Configuration for enter/exit transitions.
+ * @public
+ */
+export type TransitionConfig = {
+    /** CSS class added to items during their exit animation. */
+    readonly exitClass?: string;
+    /** Duration in milliseconds before an exiting item is removed from the DOM. */
+    readonly exitDuration?: number;
+    /** CSS class added to items during their enter animation. */
+    readonly enterClass?: string;
+    /** Duration in milliseconds before the enter class is removed. */
+    readonly enterDuration?: number;
+    /**
+     * When `true`, listens for `animationend` / `transitionend` events to
+     * determine when to remove exiting items, instead of using `exitDuration`.
+     */
+    readonly useAnimationEvents?: boolean;
+};
+/**
+ * A drop-in replacement for `KeyedForEach` that supports enter and exit
+ * animations by delaying DOM removal. Items that leave the list are kept in
+ * the DOM with an `isExiting` signal set to `true`, allowing CSS transitions
+ * or class-based animations to play before removal.
+ *
+ * @typeParam T - The type of items in the list.
+ * @param items - A signal of the current item array.
+ * @param key - A function that returns a unique key for each item.
+ * @param renderFn - Renders each item. Receives the item signal, keyed position,
+ *   and an `isExiting` signal.
+ * @param config - Transition configuration (classes, durations).
+ * @returns A renderable.
+ * @public
+ */
+export declare function TransitionKeyedForEach<T>(items: Signal<T[]>, key: (item: T) => string | number, renderFn: (item: Signal<T>, position: KeyedPosition, isExiting: Signal<boolean>) => TNode, config: TransitionConfig): Renderable;

package/types/domain.d.ts

@@ -127,7 +127,7 @@ export declare const domRenderable: <CTX extends DOMContext = DOMContext>(render
  * @typeParam CTX - The type of DOMContext (defaults to DOMContext)
  * @public
  */
-export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | number | boolean | Signal<string> | Signal<number> | Signal<boolean> | undefined | null | Renderable<CTX>[];
+export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | number | boolean | Signal<string> | Signal<number> | Signal<boolean> | Signal<string | Nil> | Signal<number | Nil> | Signal<boolean | Nil> | undefined | null | Renderable<CTX>[];
 export type { Providers } from '@tempots/render';
 /**
  * Represents the size of an object with width and height.