sibujs 4.6.0 → 4.8.0

package/dist/{chunk-VVWPJ543.js → chunk-VWT3VXPL.js}

@@ -1,15 +1,18 @@
 import {
   bindAttribute,
   setSafeAttribute
-} from "./chunk-47M47FOM.js";
+} from "./chunk-O6TRVMJI.js";
+import {
+  isBlockedElement
+} from "./chunk-3ACAAQIN.js";
 import {
   isEventHandlerAttr,
-  sanitizeCSSValue,
+  sanitizeCSSDeclaration,
   sanitizeStyleAttribute
-} from "./chunk-2INLLLMZ.js";
+} from "./chunk-EXXSN3BW.js";
 import {
   reactiveBinding
-} from "./chunk-5Q4R7HCL.js";
+} from "./chunk-TQQUN4WR.js";
 import {
   DEV,
   devWarn,
@@ -189,10 +192,6 @@ function bindChildNode(placeholder, getter) {
 
 // src/core/rendering/tagFactory.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-var BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "frame", "frameset"]);
-function isBlockedTag(tag) {
-  return BLOCKED_TAGS.has(tag.toLowerCase());
-}
 var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "config",
   "location",
@@ -219,8 +218,35 @@ function toKebab(prop) {
 }
 function applyStyle(el, style) {
   if (typeof style === "function") {
+    const getter = style;
+    let written = [];
+    let wroteString = false;
     const teardown = reactiveBinding(() => {
-      el.setAttribute("style", sanitizeStyleAttribute(String(style()), { element: el }));
+      const value = getter();
+      if (value === null || typeof value !== "object") {
+        written = [];
+        wroteString = true;
+        el.setAttribute("style", sanitizeStyleAttribute(String(value), { element: el }));
+        return;
+      }
+      const decl = el.style;
+      if (wroteString) {
+        el.removeAttribute("style");
+        wroteString = false;
+      }
+      const next = [];
+      for (const prop in value) {
+        if (!Object.hasOwn(value, prop)) continue;
+        const val = value[prop];
+        if (val == null) continue;
+        const name = toKebab(prop);
+        next.push(name);
+        decl.setProperty(name, sanitizeCSSDeclaration(name, String(val), { element: el }));
+      }
+      for (let i = 0; i < written.length; i++) {
+        if (next.indexOf(written[i]) === -1) decl.removeProperty(written[i]);
+      }
+      written = next;
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -231,25 +257,27 @@ function applyStyle(el, style) {
   }
   const htmlEl = el;
   for (const prop in style) {
+    if (!Object.hasOwn(style, prop)) continue;
     const val = style[prop];
     const name = toKebab(prop);
     if (typeof val === "function") {
       const getter = val;
       const teardown = reactiveBinding(() => {
-        htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter()), { property: name, element: el }));
+        htmlEl.style.setProperty(name, sanitizeCSSDeclaration(name, String(getter()), { element: el }));
       }, el);
       registerDisposer(el, teardown);
     } else {
-      htmlEl.style.setProperty(name, sanitizeCSSValue(String(val), { property: name, element: el }));
+      htmlEl.style.setProperty(name, sanitizeCSSDeclaration(name, String(val), { element: el }));
     }
   }
 }
 function resolveClassValue(cls) {
   if (typeof cls === "string") return cls;
-  if (typeof cls === "function") return cls();
+  if (typeof cls === "function") return cls() || "";
   if (!cls) return "";
   let out = "";
   for (const name in cls) {
+    if (!Object.hasOwn(cls, name)) continue;
     const val = cls[name];
     const active = typeof val === "function" ? val() : val;
     if (active) out = out ? `${out} ${name}` : name;
@@ -263,7 +291,9 @@ function applyClass(el, cls) {
   }
   if (typeof cls === "function") {
     const teardown = reactiveBinding(() => {
-      el.setAttribute("class", cls());
+      const value = cls();
+      if (value == null || value === false) el.removeAttribute("class");
+      else el.setAttribute("class", value);
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -272,6 +302,7 @@ function applyClass(el, cls) {
   let hasReactive = false;
   let result = "";
   for (const name in obj) {
+    if (!Object.hasOwn(obj, name)) continue;
     const val = obj[name];
     if (typeof val === "function") {
       hasReactive = true;
@@ -283,6 +314,7 @@ function applyClass(el, cls) {
     const update = () => {
       let r = "";
       for (const name in obj) {
+        if (!Object.hasOwn(obj, name)) continue;
         const val = obj[name];
         const active = typeof val === "function" ? val() : val;
         if (active) r = r ? `${r} ${name}` : name;
@@ -345,8 +377,8 @@ function appendChildren(el, nodes) {
     }
   }
 }
-var tagFactory = (tag, ns) => {
-  const blocked = isBlockedTag(tag);
+function tagFactory(tag, ns) {
+  const blocked = isBlockedElement(tag);
   return (first, second) => {
     if (blocked) {
       throw new Error(`tagFactory: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
@@ -394,7 +426,9 @@ var tagFactory = (tag, ns) => {
     const pClass = props.class;
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
-    if (pId != null) {
+    if (typeof pId === "function") {
+      registerDisposer(el, bindAttribute(el, "id", pId));
+    } else if (pId != null) {
       if (DEV && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
         devWarn(
           `tagFactory: element id="${pId}" matches a common global and may cause DOM clobbering. Avoid setting ids from untrusted input.`
@@ -407,6 +441,7 @@ var tagFactory = (tag, ns) => {
     const pOn = props.on;
     if (pOn) {
       for (const ev in pOn) {
+        if (!Object.hasOwn(pOn, ev)) continue;
         const handler = pOn[ev];
         if (typeof handler === "function") {
           el.addEventListener(ev, handler);
@@ -433,6 +468,7 @@ var tagFactory = (tag, ns) => {
           continue;
         // already handled above / below
         default: {
+          if (!Object.hasOwn(props, key)) continue;
           const value = props[key];
           if (value == null) continue;
           if (isEventHandlerAttr(key)) continue;
@@ -444,12 +480,10 @@ var tagFactory = (tag, ns) => {
         }
       }
     }
-    if (props.onElement && typeof props.onElement === "function") {
-      props.onElement(el);
-    }
+    if (typeof props.onElement === "function") props.onElement(el);
     return el;
   };
-};
+}
 
 export {
   captureFocusWithin,
@@ -457,5 +491,6 @@ export {
   bindChildNode,
   SVG_NS,
   resolveClassValue,
+  appendChildren,
   tagFactory
 };

package/dist/{chunk-SXXVZMKZ.js → chunk-ZVLHNEEL.js}

@@ -1,29 +1,33 @@
 import {
   domBinding
-} from "./chunk-3ISI6ACU.js";
+} from "./chunk-C7AA2CZX.js";
 import {
   bindAttribute,
   setSafeAttribute
-} from "./chunk-47M47FOM.js";
+} from "./chunk-O6TRVMJI.js";
 import {
-  derived
-} from "./chunk-QE4TTDU3.js";
+  isBlockedElement
+} from "./chunk-3ACAAQIN.js";
 import {
-  isEventHandlerAttr
-} from "./chunk-2INLLLMZ.js";
+  derived
+} from "./chunk-KJ3UKABJ.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
+import {
+  isEventHandlerAttr,
+  sanitizeStylesheetText
+} from "./chunk-EXXSN3BW.js";
 import {
   adoptThenable
 } from "./chunk-5HZXGZ6T.js";
 import {
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-DSID757X.js";
 import {
   reactiveBinding,
   track
-} from "./chunk-5Q4R7HCL.js";
+} from "./chunk-TQQUN4WR.js";
 import {
   dispose,
   disposeNodeOwn,
@@ -745,31 +749,6 @@ function announce(message, priority = "polite") {
 
 // src/ui/scopedStyle.ts
 var _scope = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.scopedStyle.v1"), () => ({ n: 0 }));
-function decodeCssEscapes(css) {
-  return css.replace(/\\([0-9a-f]{1,6})[ \t\n\r\f]?|\\([^\n])/gi, (_match, hex, ch) => {
-    if (hex) {
-      const code = Number.parseInt(hex, 16);
-      if (Number.isFinite(code) && code > 0 && code <= 1114111) {
-        try {
-          return String.fromCodePoint(code);
-        } catch {
-          return "";
-        }
-      }
-      return "";
-    }
-    return ch || "";
-  });
-}
-function sanitizeCSS(css) {
-  let sanitized = decodeCssEscapes(css);
-  sanitized = sanitized.replace(/@import\s+[^;]+;/gi, "/* @import removed */");
-  sanitized = sanitized.replace(/url\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* url() removed */");
-  sanitized = sanitized.replace(/expression\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* expression() removed */");
-  sanitized = sanitized.replace(/-moz-binding\s*:[^;]+;/gi, "/* -moz-binding removed */");
-  sanitized = sanitized.replace(/behavior\s*:[^;]+;/gi, "/* behavior removed */");
-  return sanitized;
-}
 function firstCompoundEnd(selector) {
   let parens = 0;
   let brackets = 0;
@@ -931,7 +910,7 @@ function scopeStylesheet(css, attr) {
 function scopedStyle(css) {
   const id = `sibu-s${_scope.n++}`;
   const attr = `data-${id}`;
-  const safeCss = sanitizeCSS(css);
+  const safeCss = sanitizeStylesheetText(css);
   const scopedCSS = scopeStylesheet(safeCss, attr);
   if (typeof document !== "undefined") {
     const styleEl = document.createElement("style");
@@ -989,7 +968,7 @@ function bindBoolAttr(el, attr, getter) {
       reportError(err, { phase: "binding", name: "bindBoolAttr", node: el });
       return;
     }
-    setSafeAttribute(el, attr, Boolean(value), { label: "bindBoolAttr" });
+    setSafeAttribute(el, attr, Boolean(value), { label: "bindBoolAttr", reactive: true });
   }
   return reactiveBinding(commit, el);
 }
@@ -1472,6 +1451,9 @@ function defineElement(name, component, options = {}) {
   customElements.define(name, SibuElement);
 }
 function svgElement(tag, props = {}, ...nodes) {
+  if (isBlockedElement(tag)) {
+    throw new Error(`svgElement: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
+  }
   const el = document.createElementNS(SVG_NS, tag);
   for (const [key, value] of Object.entries(props)) {
     if (key === "nodes") continue;

package/dist/{contracts-DRIuclVT.d.cts → contracts-CLqzJnOV.d.ts}

@@ -1,8 +1,15 @@
+import { C as Component } from './types-CJFViL6Q.js';
+
 /**
  * Higher-order component utilities for SibuJS.
  * These functions wrap or compose components to add behavior.
+ *
+ * Each helper is generic over the wrapped component's root type `R`, so a
+ * component returning `div()` keeps its `HTMLDivElement` root and an SVG
+ * component works as well. `R` defaults to `HTMLElement`, the type these
+ * helpers used before, for callers that pass the type arguments explicitly.
  */
-type Component<P = unknown> = (props: P) => HTMLElement;
+
 /**
  * Wraps a component with additional behavior that runs before/after rendering.
  *
@@ -18,7 +25,7 @@ type Component<P = unknown> = (props: P) => HTMLElement;
  * });
  * ```
  */
-declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (component: Component<P>, props: P) => HTMLElement): Component<P>;
+declare function withWrapper<P, R extends Node = HTMLElement, W extends Node = R>(WrappedComponent: Component<P, R>, wrapper: (component: Component<P, R>, props: P) => W): Component<P, W>;
 /**
  * Adds default props to a component. Missing props are filled from defaults.
  *
@@ -38,9 +45,9 @@ declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (compon
  * optional status.
  */
 type WithDefaultsProps<P, D> = Omit<P, keyof D> & Partial<Pick<P, Extract<keyof P, keyof D>>>;
-declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>>(component: Component<P>, defaults: D & {
+declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>, R extends Node = HTMLElement>(component: Component<P, R>, defaults: D & {
     [K in Exclude<keyof D, keyof P>]: never;
-}): Component<WithDefaultsProps<P, D>>;
+}): Component<WithDefaultsProps<P, D>, R>;
 /**
  * Composes multiple HOC wrappers into a single wrapper.
  * Applied from right to left (like function composition).
@@ -54,7 +61,7 @@ declare function withDefaults<P extends object, const D extends Partial<P> = Par
  * const EnhancedPage = enhance(Page);
  * ```
  */
-declare function compose(...wrappers: Array<(component: Component) => Component>): (component: Component) => Component;
+declare function compose<C extends Component<never, Node> = Component<unknown, HTMLElement>>(...wrappers: Array<(component: C) => C>): (component: C) => C;
 
 /**
  * RenderProp implements the render-prop pattern.
@@ -83,6 +90,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * Provides utilities to define typed components with prop defaults,
  * nodes slots, and prop mapping — all with full TypeScript inference.
  */
+
 /**
  * Extract the props type from a component defined with defineComponent.
  *
@@ -94,7 +102,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * type ButtonProps = ComponentProps<typeof Button>; // { label: string }
  * ```
  */
-type ComponentProps<T> = T extends (props: infer P) => HTMLElement ? P : never;
+type ComponentProps<T> = T extends (props: infer P) => Node ? P : never;
 /**
  * Props that include an optional nodes slot.
  */
@@ -104,11 +112,14 @@ type WithNodes<Props> = Props & {
 /**
  * Define a typed component with props inference, defaults, and a setup function.
  *
- * The `setup` function receives merged props (defaults + provided) and must
- * return an HTMLElement. TypeScript infers the full props type from the generic.
+ * The `setup` function receives merged props (defaults + provided) and
+ * returns the component's root. TypeScript infers the full props type from the
+ * generic. `R` is the root type; it defaults to `HTMLElement` (every HTML tag
+ * factory's result fits) — pass it explicitly for an SVG root
+ * (`defineComponent<Props, SVGSVGElement>`).
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props and returns an HTMLElement
+ * @returns A component function that accepts props and returns the root
  *
  * @example
  * ```ts
@@ -125,10 +136,10 @@ type WithNodes<Props> = Props & {
  * // Usage: Button({ label: 'Click me' }) — TypeScript infers props
  * ```
  */
-declare function defineComponent<Props extends object>(config: {
+declare function defineComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: Props) => HTMLElement;
-}): (props: Props) => HTMLElement;
+    setup: (props: Props) => R;
+}): Component<Props, R>;
 /**
  * Create a component with nodes slot support.
  *
@@ -137,7 +148,7 @@ declare function defineComponent<Props extends object>(config: {
  * wraps arbitrary child content.
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props (including nodes) and returns an HTMLElement
+ * @returns A component function that accepts props (including nodes) and returns the root
  *
  * @example
  * ```ts
@@ -156,10 +167,10 @@ declare function defineComponent<Props extends object>(config: {
  * // Usage: Card({ title: 'Hello', nodes: p('World') })
  * ```
  */
-declare function defineSlottedComponent<Props extends object>(config: {
+declare function defineSlottedComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: WithNodes<Props>) => HTMLElement;
-}): (props: WithNodes<Props>) => HTMLElement;
+    setup: (props: WithNodes<Props>) => R;
+}): Component<WithNodes<Props>, R>;
 /**
  * Higher-order helper to create a component that maps outer props to inner props.
  *
@@ -185,7 +196,7 @@ declare function defineSlottedComponent<Props extends object>(config: {
  * // Usage: SmallIconButton({ icon: 'star', label: 'Favorite' })
  * ```
  */
-declare function withProps<OuterProps extends object, InnerProps extends object>(component: (props: InnerProps) => HTMLElement, mapProps: (outer: OuterProps) => InnerProps): (props: OuterProps) => HTMLElement;
+declare function withProps<OuterProps extends object, InnerProps extends object, R extends Node = HTMLElement>(component: Component<InnerProps, R>, mapProps: (outer: OuterProps) => InnerProps): Component<OuterProps, R>;
 
 /**
  * Runtime prop validation and strict typing contracts for SibuJS.

package/dist/{contracts-DRIuclVT.d.ts → contracts-CTOJXu-x.d.cts}

@@ -1,8 +1,15 @@
+import { C as Component } from './types-CJFViL6Q.cjs';
+
 /**
  * Higher-order component utilities for SibuJS.
  * These functions wrap or compose components to add behavior.
+ *
+ * Each helper is generic over the wrapped component's root type `R`, so a
+ * component returning `div()` keeps its `HTMLDivElement` root and an SVG
+ * component works as well. `R` defaults to `HTMLElement`, the type these
+ * helpers used before, for callers that pass the type arguments explicitly.
  */
-type Component<P = unknown> = (props: P) => HTMLElement;
+
 /**
  * Wraps a component with additional behavior that runs before/after rendering.
  *
@@ -18,7 +25,7 @@ type Component<P = unknown> = (props: P) => HTMLElement;
  * });
  * ```
  */
-declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (component: Component<P>, props: P) => HTMLElement): Component<P>;
+declare function withWrapper<P, R extends Node = HTMLElement, W extends Node = R>(WrappedComponent: Component<P, R>, wrapper: (component: Component<P, R>, props: P) => W): Component<P, W>;
 /**
  * Adds default props to a component. Missing props are filled from defaults.
  *
@@ -38,9 +45,9 @@ declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (compon
  * optional status.
  */
 type WithDefaultsProps<P, D> = Omit<P, keyof D> & Partial<Pick<P, Extract<keyof P, keyof D>>>;
-declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>>(component: Component<P>, defaults: D & {
+declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>, R extends Node = HTMLElement>(component: Component<P, R>, defaults: D & {
     [K in Exclude<keyof D, keyof P>]: never;
-}): Component<WithDefaultsProps<P, D>>;
+}): Component<WithDefaultsProps<P, D>, R>;
 /**
  * Composes multiple HOC wrappers into a single wrapper.
  * Applied from right to left (like function composition).
@@ -54,7 +61,7 @@ declare function withDefaults<P extends object, const D extends Partial<P> = Par
  * const EnhancedPage = enhance(Page);
  * ```
  */
-declare function compose(...wrappers: Array<(component: Component) => Component>): (component: Component) => Component;
+declare function compose<C extends Component<never, Node> = Component<unknown, HTMLElement>>(...wrappers: Array<(component: C) => C>): (component: C) => C;
 
 /**
  * RenderProp implements the render-prop pattern.
@@ -83,6 +90,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * Provides utilities to define typed components with prop defaults,
  * nodes slots, and prop mapping — all with full TypeScript inference.
  */
+
 /**
  * Extract the props type from a component defined with defineComponent.
  *
@@ -94,7 +102,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * type ButtonProps = ComponentProps<typeof Button>; // { label: string }
  * ```
  */
-type ComponentProps<T> = T extends (props: infer P) => HTMLElement ? P : never;
+type ComponentProps<T> = T extends (props: infer P) => Node ? P : never;
 /**
  * Props that include an optional nodes slot.
  */
@@ -104,11 +112,14 @@ type WithNodes<Props> = Props & {
 /**
  * Define a typed component with props inference, defaults, and a setup function.
  *
- * The `setup` function receives merged props (defaults + provided) and must
- * return an HTMLElement. TypeScript infers the full props type from the generic.
+ * The `setup` function receives merged props (defaults + provided) and
+ * returns the component's root. TypeScript infers the full props type from the
+ * generic. `R` is the root type; it defaults to `HTMLElement` (every HTML tag
+ * factory's result fits) — pass it explicitly for an SVG root
+ * (`defineComponent<Props, SVGSVGElement>`).
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props and returns an HTMLElement
+ * @returns A component function that accepts props and returns the root
  *
  * @example
  * ```ts
@@ -125,10 +136,10 @@ type WithNodes<Props> = Props & {
  * // Usage: Button({ label: 'Click me' }) — TypeScript infers props
  * ```
  */
-declare function defineComponent<Props extends object>(config: {
+declare function defineComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: Props) => HTMLElement;
-}): (props: Props) => HTMLElement;
+    setup: (props: Props) => R;
+}): Component<Props, R>;
 /**
  * Create a component with nodes slot support.
  *
@@ -137,7 +148,7 @@ declare function defineComponent<Props extends object>(config: {
  * wraps arbitrary child content.
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props (including nodes) and returns an HTMLElement
+ * @returns A component function that accepts props (including nodes) and returns the root
  *
  * @example
  * ```ts
@@ -156,10 +167,10 @@ declare function defineComponent<Props extends object>(config: {
  * // Usage: Card({ title: 'Hello', nodes: p('World') })
  * ```
  */
-declare function defineSlottedComponent<Props extends object>(config: {
+declare function defineSlottedComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: WithNodes<Props>) => HTMLElement;
-}): (props: WithNodes<Props>) => HTMLElement;
+    setup: (props: WithNodes<Props>) => R;
+}): Component<WithNodes<Props>, R>;
 /**
  * Higher-order helper to create a component that maps outer props to inner props.
  *
@@ -185,7 +196,7 @@ declare function defineSlottedComponent<Props extends object>(config: {
  * // Usage: SmallIconButton({ icon: 'star', label: 'Favorite' })
  * ```
  */
-declare function withProps<OuterProps extends object, InnerProps extends object>(component: (props: InnerProps) => HTMLElement, mapProps: (outer: OuterProps) => InnerProps): (props: OuterProps) => HTMLElement;
+declare function withProps<OuterProps extends object, InnerProps extends object, R extends Node = HTMLElement>(component: Component<InnerProps, R>, mapProps: (outer: OuterProps) => InnerProps): Component<OuterProps, R>;
 
 /**
  * Runtime prop validation and strict typing contracts for SibuJS.

package/dist/{customElement-MmInOW1U.d.ts → customElement-pYDKUzWl.d.cts}

@@ -277,9 +277,11 @@ declare function announce(message: string, priority?: "polite" | "assertive"): v
  * and prefixing all selectors.
  * Returns the scope attribute name and injects the CSS into the document.
  *
- * CSS is sanitized to remove dangerous patterns (`url()`, `@import`,
- * `expression()`, `-moz-binding`, `behavior`). If you need `url()` for
- * background images, use inline styles via the `style` prop instead.
+ * CSS is sanitized by the framework's stylesheet-text policy
+ * (`sanitizeStylesheetText`): `url()`, `image-set()`, `image()`, `src()`,
+ * `expression()`, `@import`, `behavior`, `-moz-binding` and `progid:` filters
+ * are removed. For a content image use an `<img>`; for a decorative one, a
+ * stylesheet you ship.
  */
 declare function scopedStyle(css: string): {
     scope: string;
@@ -484,6 +486,7 @@ declare function eventBus<T extends object>(): {
 interface CustomElementOptions {
     shadow?: boolean;
     mode?: "open" | "closed";
+    /** Stylesheet source for the element's shadow root, applied unsanitized — developer CSS, not runtime data. */
     styles?: string;
     observedAttributes?: string[];
 }
@@ -504,6 +507,11 @@ declare function defineElement(name: string, component: (props: Record<string, u
  *
  * Function-valued `on*` props keep their existing meaning — `addEventListener`,
  * never an attribute.
+ *
+ * The TAG is policed like a tag factory's, through the shared element policy:
+ * `svgElement("script", { href })` is refused. SVG has its own `<script>`, which
+ * the browser fetches and runs when it is inserted, so an unrestricted tag name
+ * here was a way around the tag factories' block on script elements.
  */
 declare function svgElement(tag: string, props?: Record<string, unknown>, ...nodes: (SVGElement | string)[]): SVGElement;
 

package/dist/{customElement-MmInOW1U.d.cts → customElement-pYDKUzWl.d.ts}

@@ -277,9 +277,11 @@ declare function announce(message: string, priority?: "polite" | "assertive"): v
  * and prefixing all selectors.
  * Returns the scope attribute name and injects the CSS into the document.
  *
- * CSS is sanitized to remove dangerous patterns (`url()`, `@import`,
- * `expression()`, `-moz-binding`, `behavior`). If you need `url()` for
- * background images, use inline styles via the `style` prop instead.
+ * CSS is sanitized by the framework's stylesheet-text policy
+ * (`sanitizeStylesheetText`): `url()`, `image-set()`, `image()`, `src()`,
+ * `expression()`, `@import`, `behavior`, `-moz-binding` and `progid:` filters
+ * are removed. For a content image use an `<img>`; for a decorative one, a
+ * stylesheet you ship.
  */
 declare function scopedStyle(css: string): {
     scope: string;
@@ -484,6 +486,7 @@ declare function eventBus<T extends object>(): {
 interface CustomElementOptions {
     shadow?: boolean;
     mode?: "open" | "closed";
+    /** Stylesheet source for the element's shadow root, applied unsanitized — developer CSS, not runtime data. */
     styles?: string;
     observedAttributes?: string[];
 }
@@ -504,6 +507,11 @@ declare function defineElement(name: string, component: (props: Record<string, u
  *
  * Function-valued `on*` props keep their existing meaning — `addEventListener`,
  * never an attribute.
+ *
+ * The TAG is policed like a tag factory's, through the shared element policy:
+ * `svgElement("script", { href })` is refused. SVG has its own `<script>`, which
+ * the browser fetches and runs when it is inserted, so an unrestricted tag name
+ * here was a way around the tag factories' block on script elements.
  */
 declare function svgElement(tag: string, props?: Record<string, unknown>, ...nodes: (SVGElement | string)[]): SVGElement;