zs3-ui-components 1.1.9 → 1.1.10

package/README.md

@@ -167,19 +167,23 @@ La classe `ZS3` proporciona una API similar a jQuery per a la manipulacio d'elem
 ```typescript
 // Seleccionar elements amb la funcio $
 const element = $('selector')            // Retorna ZS3 | null (cerca des de document)
-const element = $('selector', rootEl)    // Cerca dins d'un HTMLElement concret
+const element = $('selector', rootEl)    // Cerca dins d'un HTMLElement, Document o ShadowRoot
 const element = new ZS3('selector')      // Constructor directe (cerca des de document)
-const element = new ZS3('selector', rootEl) // Constructor amb element arrel
+const element = new ZS3('selector', rootEl) // Constructor amb element arrel (HTMLElement, Document o ShadowRoot)
 
 // Crear ZS3 des d'un HTMLElement
 const zs3 = ZS3.fromElement(htmlElement)
 ```
 
-El segon parametre (`root`) es opcional i per defecte es `document`. Permet limitar el `querySelectorAll` a un subarbre del DOM concret, util per exemple dins de Shadow DOM o components:
+El segon parametre (`root`) es opcional i per defecte es `document`. Accepta `Document`, `HTMLElement` o `ShadowRoot`, la qual cosa permet limitar la cerca a un subarbre del DOM concret, incloent shadow roots de Web Components:
 
 ```typescript
 const container = document.getElementById('app')
 const buttons = $('button', container) // Nomes els botons dins de #app
+
+// Dins d'un Web Component (shadow DOM)
+const btn = $('button', this.root)  // this.root pot ser ShadowRoot o HTMLElement
+btn?.addEvent('click', handler)
 ```
 
 ### Propietats
@@ -376,8 +380,8 @@ El mateix parell `selector:eventType` pot estar actiu en múltiples roots simult
 
 | Metode | Signatura | Descripcio |
 |--------|-----------|------------|
-| `start()` | `(selector: string, eventType: keyof HTMLElementEventMap, root?: Document \| HTMLElement) => void` | Inicia el debug. Es poden registrar múltiples roots per al mateix selector+event. |
-| `stop()` | `(selector: string, eventType: keyof HTMLElementEventMap, root?: Document \| HTMLElement) => void` | Atura el debug per al root indicat. Si hi ha més roots actius per al mateix selector+event, els altres continuen. |
+| `start()` | `(selector: string, eventType: keyof HTMLElementEventMap, root?: Document \| HTMLElement \| ShadowRoot) => void` | Inicia el debug. Es poden registrar múltiples roots per al mateix selector+event. |
+| `stop()` | `(selector: string, eventType: keyof HTMLElementEventMap, root?: Document \| HTMLElement \| ShadowRoot) => void` | Atura el debug per al root indicat. Si hi ha més roots actius per al mateix selector+event, els altres continuen. |
 | `stopAll()` | `() => void` | Atura tot el debugging, per a tots els selectors, events i roots actius. |
 | `list()` | `() => string[]` | Llista tots els debugs actius en format `selector:eventType`. Si hi ha múltiples roots per al mateix parell, apareix una entrada per cada root. |
 
@@ -2073,7 +2077,7 @@ ZS3 suporta handlers d'events inline directament als atributs HTML dels componen
 
 | Variable | Tipus | Descripcio |
 |----------|-------|------------|
-| `$` | `(selector: string, root?: Document \| HTMLElement) => ZS3 \| null` | Funcio de seleccio d'elements. El segon parametre opcional limita la cerca a un element arrel. |
+| `$` | `(selector: string, root?: Document \| HTMLElement \| ShadowRoot) => ZS3 \| null` | Funcio de seleccio d'elements. El segon parametre opcional limita la cerca a un element arrel. |
 | `log` | `$Log` | Sistema de logging. |
 | `debug` | `$Debug` | Utilitat de debugging. |
 | `params` | `$Parameters` | Gestio de parametres d'URL. |

package/dist/index.js

@@ -2,7 +2,7 @@ class E {
   /**
    * Creates a new instance by selecting elements using a CSS selector.
    * @param {string} selector - CSS selector string.
-   * @param {Document | HTMLElement} [root=document] - Element arrel des d'on es fa el querySelectorAll. Per defecte és document.
+   * @param {Document | HTMLElement | ShadowRoot} [root=document] - Element arrel des d'on es fa el querySelectorAll. Per defecte és document.
    */
   constructor(t, s = document) {
     this.list = [];
@@ -14,7 +14,7 @@ class E {
    * @returns {string} Library version.
    */
   static version() {
-    return "1.1.9";
+    return "1.1.10";
   }
   /**
    * Creates a ZS3 instance from an HTMLElement.

package/dist/zs3.d.ts

@@ -27,9 +27,9 @@ export declare class ZS3 {
     /**
      * Creates a new instance by selecting elements using a CSS selector.
      * @param {string} selector - CSS selector string.
-     * @param {Document | HTMLElement} [root=document] - Element arrel des d'on es fa el querySelectorAll. Per defecte és document.
+     * @param {Document | HTMLElement | ShadowRoot} [root=document] - Element arrel des d'on es fa el querySelectorAll. Per defecte és document.
      */
-    constructor(selector: string, root?: Document | HTMLElement);
+    constructor(selector: string, root?: Document | HTMLElement | ShadowRoot);
     /**
      * Returns the current library version.
      * @returns {string} Library version.
@@ -276,7 +276,7 @@ export declare class ZS3 {
  * @param selector Selector CSS
  * @param root Element arrel des d'on es fa el querySelectorAll (opcional, per defecte document)
  */
-export declare const $: (selector?: string, root?: Document | HTMLElement) => ZS3 | null;
+export declare const $: (selector?: string, root?: Document | HTMLElement | ShadowRoot) => ZS3 | null;
 /**
  * Retorna informació de l'entorn d'execució.
  */
@@ -317,7 +317,7 @@ export declare class $Parameters {
 type DebugEntry = {
     selector: string;
     eventType: keyof HTMLElementEventMap;
-    root: Document | HTMLElement;
+    root: Document | HTMLElement | ShadowRoot;
 };
 export declare class $Debug {
     /** Mapa de sessions de debug actives, indexades per "selector:eventType". Cada entrada pot tenir múltiples roots. */
@@ -330,7 +330,7 @@ export declare class $Debug {
      * @param eventType Tipus d'event
      * @param root Element arrel des d'on es fa la cerca (opcional, per defecte document)
      */
-    start: (selector: string, eventType: keyof HTMLElementEventMap, root?: Document | HTMLElement) => void;
+    start: (selector: string, eventType: keyof HTMLElementEventMap, root?: Document | HTMLElement | ShadowRoot) => void;
     /**
      * Atura el debug d'un event sobre un selector per a un root concret.
      * Si el selector+eventType té més d'un root actiu, només s'elimina el root indicat.
@@ -338,7 +338,7 @@ export declare class $Debug {
      * @param eventType Tipus d'event
      * @param root Element arrel (opcional, per defecte document)
      */
-    stop: (selector: string, eventType: keyof HTMLElementEventMap, root?: Document | HTMLElement) => void;
+    stop: (selector: string, eventType: keyof HTMLElementEventMap, root?: Document | HTMLElement | ShadowRoot) => void;
     /**
      * Atura tot el debugging, per a tots els selectors, events i roots actius.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zs3-ui-components",
-    "version": "1.1.9",
+    "version": "1.1.10",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",