@tempots/dom 34.0.0 → 34.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "34.0.0",
+  "version": "34.2.0",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -37,6 +37,6 @@
     "url": "git+https://github.com/fponticelli/tempots.git"
   },
   "peerDependencies": {
-    "@tempots/core": "^1.0.0"
+    "@tempots/core": "^1.1.0"
   }
 }

package/renderable/iframe.d.ts

@@ -0,0 +1,87 @@
+import { 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 {
+    /**
+     * The URL of the page to embed in the iframe.
+     */
+    src?: Value<string>;
+    /**
+     * The name of the iframe.
+     */
+    name?: Value<string>;
+    /**
+     * The width of the iframe.
+     */
+    width?: Value<string | number>;
+    /**
+     * The height of the iframe.
+     */
+    height?: Value<string | number>;
+    /**
+     * The sandbox attribute for the iframe.
+     */
+    sandbox?: Value<string>;
+    /**
+     * The allow attribute for the iframe.
+     */
+    allow?: Value<string>;
+    /**
+     * The referrerpolicy attribute for the iframe.
+     */
+    referrerpolicy?: Value<ReferrerPolicy>;
+    /**
+     * The loading attribute for the iframe.
+     */
+    loading?: Value<'eager' | 'lazy'>;
+    /**
+     * Callback function that is called when the iframe is loaded.
+     * Receives the iframe element and its contentDocument.
+     */
+    onLoad?: (iframe: HTMLIFrameElement) => void;
+}
+/**
+ * Creates an iframe element and optionally renders content into its document.
+ *
+ * When children are provided, they are rendered into the iframe's contentDocument.
+ * This allows you to create isolated DOM contexts with their own styles and scripts.
+ *
+ * @example
+ * ```typescript
+ * // Simple iframe with src
+ * IFrame({ src: 'https://example.com', width: 800, height: 600 })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Iframe with rendered content
+ * IFrame(
+ *   { width: 800, height: 600 },
+ *   html.div(
+ *     html.style('body { font-family: sans-serif; }'),
+ *     html.h1('Hello from iframe!'),
+ *     html.p('This content is rendered inside the iframe')
+ *   )
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Iframe with onLoad callback
+ * IFrame(
+ *   {
+ *     width: 800,
+ *     height: 600,
+ *     onLoad: (iframe, doc) => {
+ *       console.log('Iframe loaded:', doc.title)
+ *     }
+ *   },
+ *   html.div('Content')
+ * )
+ * ```
+ *
+ * @param options - Configuration options for the iframe
+ * @param children - Optional content to render inside the iframe's document
+ * @returns A renderable that creates and manages the iframe
+ * @public
+ */
+export declare function IFrame({ src, name, width, height, sandbox, allow, referrerpolicy, loading, onLoad, }?: IFrameOptions, ...children: TNode[]): import('..').Renderable;

package/renderable/shadow-root.d.ts

@@ -0,0 +1,9 @@
+import { TNode } from '../types/domain';
+export interface ShadowRootOptions {
+    mode: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    slotAssignment?: 'named' | 'manual';
+    clonable?: boolean;
+    serializable?: boolean;
+}
+export declare function ShadowRoot({ mode, delegatesFocus, slotAssignment, clonable, serializable, }: ShadowRootOptions, ...children: TNode[]): import('..').Renderable;

package/types/domain.d.ts

@@ -1,7 +1,7 @@
 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, Value, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, AnySignal, Signal, Prop, Computed, };
-export { makeProviderMark };
+export type { Clear, ProviderMark, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, AnySignal, };
+export { makeProviderMark, Computed, Value, Signal, Prop };
 /**
  * Symbol to brand DOM renderables and prevent mixing with other contexts
  * @public