@tempots/dom 34.3.0 → 35.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "34.3.0",
+  "version": "35.0.1",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -35,8 +35,5 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fponticelli/tempots.git"
-  },
-  "peerDependencies": {
-    "@tempots/core": "^1.2.0"
   }
 }

package/renderable/iframe.d.ts

@@ -1,4 +1,4 @@
-import { TNode, Value } from '../types/domain';
+import { SplitValue, TNode, Value } from '../types/domain';
 export type ReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
 export interface IFrameOptions {
     /**
@@ -12,11 +12,11 @@ export interface IFrameOptions {
     /**
      * The width of the iframe.
      */
-    width?: Value<string | number>;
+    width?: SplitValue<string | number>;
     /**
      * The height of the iframe.
      */
-    height?: Value<string | number>;
+    height?: SplitValue<string | number>;
     /**
      * The sandbox attribute for the iframe.
      */

package/renderable/provider.d.ts

@@ -96,8 +96,8 @@ export declare const WithProvider: (fn: (opts: ProviderOptions) => TNode | void)
  * )
  * ```
  *
- * @template T - The type of value provided by the provider
- * @template O - The type of options passed to the provider
+ * @typeParam T - The type of value provided by the provider
+ * @typeParam O - The type of options passed to the provider
  * @param provider - The provider definition containing mark and create function
  * @param options - Options to pass to the provider's create function
  * @param child - Function that returns the child components that can access the provider
@@ -153,7 +153,7 @@ export declare const Provide: <T, O>(provider: Provider<T, O>, options: O, child
  *   )
  * ```
  *
- * @template T - The type of value provided by the provider
+ * @typeParam T - The type of value provided by the provider
  * @param provider - The provider to consume (must be available in parent components)
  * @param child - Function that receives the provider value and returns content to render
  * @returns A renderable that consumes the provider and renders the child content
@@ -226,7 +226,7 @@ export declare const Use: <T>(provider: Provider<T>, child: (provider: T) => TNo
  *   )
  * ```
  *
- * @template T - Tuple type representing the types of all providers
+ * @typeParam T - Tuple type representing the types of all providers
  * @param providers - Variable number of providers to consume
  * @returns Function that takes a child function and returns a renderable
  * @throws {ProviderNotFoundError} When any of the providers is not found in the component tree

package/types/domain.d.ts

@@ -1,3 +1,4 @@
+import { ReadSignal } from '../../../tempots-core/dist/signal';
 import { DOMContext } from '../dom/dom-context';
 import { AnySignal, Computed, Prop, Signal, Value, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, Clear, ProviderMark, makeProviderMark, Renderable as CoreRenderable } from '@tempots/core';
 export type { Clear, ProviderMark, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, AnySignal, };
@@ -55,7 +56,7 @@ export declare const DOM_RENDERABLE_TYPE: unique symbol;
  * }
  * ```
  *
- * @template CTX - The type of DOMContext (defaults to DOMContext)
+ * @typeParam CTX - The type of DOMContext (defaults to DOMContext)
  * @public
  */
 export type Renderable<CTX extends DOMContext = DOMContext> = CoreRenderable<CTX, typeof DOM_RENDERABLE_TYPE>;
@@ -124,10 +125,10 @@ export declare const domRenderable: <CTX extends DOMContext = DOMContext>(render
  * }
  * ```
  *
- * @template CTX - The type of DOMContext (defaults to DOMContext)
+ * @typeParam CTX - The type of DOMContext (defaults to DOMContext)
  * @public
  */
-export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | Value<string> | undefined | null | Renderable<CTX>[];
+export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | ReadSignal<string> | undefined | null | Renderable<CTX>[];
 /**
  * Represents a collection of providers.
  * The keys of the record are ProviderMark types, and the values are of unknown type.
@@ -156,6 +157,7 @@ export type Size = {
  * @typeParam T - The type of the value.
  * @public
  */
-export type NValue<T> = Value<NonNullable<T>> | AnySignal<T> | AnySignal<T | null> | AnySignal<T | undefined> | AnySignal<T | null | undefined> | null | undefined;
+export type NValue<T> = Value<NonNullable<T>> | ReadSignal<T> | ReadSignal<T | null> | ReadSignal<T | undefined> | ReadSignal<T | null | undefined> | null | undefined;
 type TupleToUnion<T extends unknown[]> = T[number];
 export type SplitNValue<T> = (T extends unknown ? TupleToUnion<NValue<T>[]> : never) | NValue<T>;
+export type SplitValue<T> = (T extends unknown ? TupleToUnion<Value<T>[]> : never) | Value<T>;

package/types/html-attributes.d.ts

@@ -1,6 +1,10 @@
 /**
  * Represents the HTML attributes that can be used in an HTML element.
  *
+ * **Security Warning:** Some properties like `innerHTML` and `outerHTML` can introduce
+ * Cross-Site Scripting (XSS) vulnerabilities if used with untrusted user input.
+ * Always sanitize user-provided content before using these properties.
+ *
  * @public
  */
 export type HTMLAttributes = {
@@ -148,7 +152,16 @@ export type HTMLAttributes = {
     wrap: string;
     textContent: string;
     innerText: string;
+    /**
+     * **⚠️ XSS Warning:** Setting innerHTML with untrusted user input can lead to
+     * Cross-Site Scripting (XSS) attacks. Always sanitize content before use.
+     * Consider using `textContent` or `innerText` for plain text content instead.
+     */
     innerHTML: string;
+    /**
+     * **⚠️ XSS Warning:** Setting outerHTML with untrusted user input can lead to
+     * Cross-Site Scripting (XSS) attacks. Always sanitize content before use.
+     */
     outerHTML: string;
 };
 /**