@salesforce/webapp-experimental 1.66.0 → 1.67.0

package/dist/design/design-mode-interactions.js

@@ -233,6 +233,28 @@
       }
       return true;
     }
+    /**
+     * Find all same elements that share the same data-source-file value.
+     * These are elements rendered by the same component at the same source location.
+     * @param element - The reference element
+     * @returns Array of same elements (excludes the element itself)
+     */
+    findSameElements(element) {
+      const sourceFile = element.getAttribute("data-source-file");
+      if (!sourceFile) {
+        return [];
+      }
+      const all = document.querySelectorAll(
+        `[data-source-file="${CSS.escape(sourceFile)}"]`
+      );
+      const sameElements = [];
+      for (const el of all) {
+        if (el !== element) {
+          sameElements.push(el);
+        }
+      }
+      return sameElements;
+    }
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element
@@ -243,7 +265,7 @@
         return null;
       }
       const closest = typeof target.closest === "function" ? target.closest("[data-source-file]") : null;
-      if (closest && closest !== document.body && closest !== document.documentElement) {
+      if (closest && closest !== document.body && closest !== document.documentElement && this.isHighlightableElement(closest)) {
         return closest;
       }
       let current = target;
@@ -349,14 +371,18 @@
       __publicField(this, "editableManager");
       __publicField(this, "communicationManager");
       __publicField(this, "currentHighlighted");
+      __publicField(this, "currentHighlightedSameElements");
       __publicField(this, "selectedElement");
+      __publicField(this, "selectedSameElements");
       this.isInteractionsActive = isInteractionsActive;
       this.componentMatcher = componentMatcher;
       this.styleManager = styleManager;
       this.editableManager = editableManager;
       this.communicationManager = communicationManager;
       this.currentHighlighted = null;
+      this.currentHighlightedSameElements = [];
       this.selectedElement = null;
+      this.selectedSameElements = [];
       this.handleMouseOver = this.handleMouseOver.bind(this);
       this.handleMouseLeave = this.handleMouseLeave.bind(this);
       this.handleClick = this.handleClick.bind(this);
@@ -390,10 +416,16 @@
         return;
       }
       if (this.currentHighlighted && !this.currentHighlighted.classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElement(this.currentHighlighted);
-      }
-      this.styleManager.highlightElement(element);
+        this.styleManager.unhighlightElements([
+          this.currentHighlighted,
+          ...this.currentHighlightedSameElements
+        ]);
+        this.currentHighlightedSameElements = [];
+      }
+      const sameElements = this.componentMatcher.findSameElements(element);
+      this.styleManager.highlightElements([element, ...sameElements]);
       this.currentHighlighted = element;
+      this.currentHighlightedSameElements = sameElements;
     }
     /**
      * Handle mouseleave event
@@ -403,8 +435,12 @@
         return;
       }
       if (this.currentHighlighted && !this.currentHighlighted.classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElement(this.currentHighlighted);
+        this.styleManager.unhighlightElements([
+          this.currentHighlighted,
+          ...this.currentHighlightedSameElements
+        ]);
         this.currentHighlighted = null;
+        this.currentHighlightedSameElements = [];
       }
     }
     /**
@@ -429,15 +465,21 @@
         return;
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElement(this.selectedElement);
+        this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
         this.editableManager.removeEditable(this.selectedElement);
       }
       if (this.currentHighlighted) {
-        this.styleManager.unhighlightElement(this.currentHighlighted);
+        this.styleManager.unhighlightElements([
+          this.currentHighlighted,
+          ...this.currentHighlightedSameElements
+        ]);
         this.currentHighlighted = null;
+        this.currentHighlightedSameElements = [];
       }
       this.selectedElement = element;
-      this.styleManager.selectElement(element);
+      const sameElements = this.componentMatcher.findSameElements(element);
+      this.selectedSameElements = sameElements;
+      this.styleManager.selectElements([element, ...sameElements]);
       this.editableManager.makeEditableIfText(element);
       this.communicationManager.notifyComponentSelected(element);
     }
@@ -446,13 +488,18 @@
      */
     clearAll() {
       if (this.currentHighlighted) {
-        this.styleManager.unhighlightElement(this.currentHighlighted);
+        this.styleManager.unhighlightElements([
+          this.currentHighlighted,
+          ...this.currentHighlightedSameElements
+        ]);
         this.currentHighlighted = null;
+        this.currentHighlightedSameElements = [];
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElement(this.selectedElement);
+        this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
         this.editableManager.removeEditable(this.selectedElement);
         this.selectedElement = null;
+        this.selectedSameElements = [];
       }
     }
     /**
@@ -462,6 +509,13 @@
     getSelectedElement() {
       return this.selectedElement;
     }
+    /**
+     * Get the same elements of the currently selected element
+     * @returns Array of same elements
+     */
+    getSelectedSameElements() {
+      return this.selectedSameElements;
+    }
   };
 
   // src/design/interactions/styleManager.ts
@@ -517,32 +571,40 @@
     `;
     }
     /**
-     * Apply highlight class to an element
-     * @param element - The element to highlight
+     * Apply highlight class to one or more elements
+     * @param elements - The elements to highlight
      */
-    highlightElement(element) {
-      element.classList.add("design-mode-highlight");
+    highlightElements(elements) {
+      for (const el of elements) {
+        el.classList.add("design-mode-highlight");
+      }
     }
     /**
-     * Remove highlight class from an element
-     * @param element - The element to unhighlight
+     * Remove highlight class from one or more elements
+     * @param elements - The elements to unhighlight
      */
-    unhighlightElement(element) {
-      element.classList.remove("design-mode-highlight");
+    unhighlightElements(elements) {
+      for (const el of elements) {
+        el.classList.remove("design-mode-highlight");
+      }
     }
     /**
-     * Apply selected class to an element
-     * @param element - The element to select
+     * Apply selected class to one or more elements
+     * @param elements - The elements to select
      */
-    selectElement(element) {
-      element.classList.add("design-mode-selected");
+    selectElements(elements) {
+      for (const el of elements) {
+        el.classList.add("design-mode-selected");
+      }
     }
     /**
-     * Remove selected class from an element
-     * @param element - The element to deselect
+     * Remove selected class from one or more elements
+     * @param elements - The elements to deselect
      */
-    deselectElement(element) {
-      element.classList.remove("design-mode-selected");
+    deselectElements(elements) {
+      for (const el of elements) {
+        el.classList.remove("design-mode-selected");
+      }
     }
   };
 
@@ -646,6 +708,9 @@
       const selectedElement = this.eventHandlers.getSelectedElement();
       if (selectedElement) {
         selectedElement.style[property] = value;
+        for (const sameElement of this.eventHandlers.getSelectedSameElements()) {
+          sameElement.style[property] = value;
+        }
       }
     }
     /**

package/dist/design/interactions/componentMatcher.d.ts

@@ -33,6 +33,13 @@ export declare class ComponentMatcher {
      * @returns True if the element should be highlighted
      */
     isHighlightableElement(element: HTMLElement | null | undefined): boolean;
+    /**
+     * Find all same elements that share the same data-source-file value.
+     * These are elements rendered by the same component at the same source location.
+     * @param element - The reference element
+     * @returns Array of same elements (excludes the element itself)
+     */
+    findSameElements(element: HTMLElement): HTMLElement[];
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element

package/dist/design/interactions/componentMatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;OAKG;IACH,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAM7D;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAgBxE;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA0BpF"}
+{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;OAKG;IACH,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAM7D;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAgBxE;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE;IAmBrD;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA+BpF"}

package/dist/design/interactions/componentMatcher.js

@@ -48,6 +48,26 @@ export class ComponentMatcher {
         }
         return true;
     }
+    /**
+     * Find all same elements that share the same data-source-file value.
+     * These are elements rendered by the same component at the same source location.
+     * @param element - The reference element
+     * @returns Array of same elements (excludes the element itself)
+     */
+    findSameElements(element) {
+        const sourceFile = element.getAttribute("data-source-file");
+        if (!sourceFile) {
+            return [];
+        }
+        const all = document.querySelectorAll(`[data-source-file="${CSS.escape(sourceFile)}"]`);
+        const sameElements = [];
+        for (const el of all) {
+            if (el !== element) {
+                sameElements.push(el);
+            }
+        }
+        return sameElements;
+    }
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element
@@ -61,7 +81,10 @@ export class ComponentMatcher {
         const closest = typeof target.closest === "function"
             ? target.closest("[data-source-file]")
             : null;
-        if (closest && closest !== document.body && closest !== document.documentElement) {
+        if (closest &&
+            closest !== document.body &&
+            closest !== document.documentElement &&
+            this.isHighlightableElement(closest)) {
             return closest;
         }
         // Fallback: manual walk.

package/dist/design/interactions/eventHandlers.d.ts

@@ -9,12 +9,13 @@
  */
 interface ComponentMatcherLike {
     findHighlightableElement: (target: HTMLElement) => HTMLElement | null;
+    findSameElements: (element: HTMLElement) => HTMLElement[];
 }
 interface StyleManagerLike {
-    highlightElement: (element: HTMLElement) => void;
-    unhighlightElement: (element: HTMLElement) => void;
-    selectElement: (element: HTMLElement) => void;
-    deselectElement: (element: HTMLElement) => void;
+    highlightElements: (elements: HTMLElement[]) => void;
+    unhighlightElements: (elements: HTMLElement[]) => void;
+    selectElements: (elements: HTMLElement[]) => void;
+    deselectElements: (elements: HTMLElement[]) => void;
 }
 interface EditableManagerLike {
     makeEditableIfText: (element: HTMLElement) => void;
@@ -30,7 +31,9 @@ export declare class EventHandlers {
     private editableManager;
     private communicationManager;
     private currentHighlighted;
+    private currentHighlightedSameElements;
     private selectedElement;
+    private selectedSameElements;
     constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, styleManager: StyleManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
     /**
      * Find the nearest highlightable element by walking up the DOM tree
@@ -61,6 +64,11 @@ export declare class EventHandlers {
      * @returns The selected element
      */
     getSelectedElement(): HTMLElement | null;
+    /**
+     * Get the same elements of the currently selected element
+     * @returns Array of same elements
+     */
+    getSelectedSameElements(): HTMLElement[];
 }
 export {};
 //# sourceMappingURL=eventHandlers.d.ts.map

package/dist/design/interactions/eventHandlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CACtE;AAED,UAAU,gBAAgB;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD;AAED,UAAU,mBAAmB;IAC5B,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,UAAU,wBAAwB;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACxD;AAED,qBAAa,aAAa;IACzB,OAAO,CAAC,oBAAoB,CAAgB;IAC5C,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,eAAe,CAAqB;gBAG3C,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAiB/C;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAIjC;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmCpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAcxB;;;OAGG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA6ChC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAahB;;;OAGG;IACH,kBAAkB,IAAI,WAAW,GAAG,IAAI;CAGxC"}
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;IACtE,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,EAAE,CAAC;CAC1D;AAED,UAAU,gBAAgB;IACzB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACpD;AAED,UAAU,mBAAmB;IAC5B,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,UAAU,wBAAwB;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACxD;AAED,qBAAa,aAAa;IACzB,OAAO,CAAC,oBAAoB,CAAgB;IAC5C,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,8BAA8B,CAAgB;IACtD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,oBAAoB,CAAgB;gBAG3C,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAmB/C;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAIjC;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAyCpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAkBxB;;;OAGG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmDhC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAkBhB;;;OAGG;IACH,kBAAkB,IAAI,WAAW,GAAG,IAAI;IAIxC;;;OAGG;IACH,uBAAuB,IAAI,WAAW,EAAE;CAGxC"}

package/dist/design/interactions/eventHandlers.js

@@ -10,7 +10,9 @@ export class EventHandlers {
     editableManager;
     communicationManager;
     currentHighlighted;
+    currentHighlightedSameElements;
     selectedElement;
+    selectedSameElements;
     constructor(isInteractionsActive, componentMatcher, styleManager, editableManager, communicationManager) {
         this.isInteractionsActive = isInteractionsActive;
         this.componentMatcher = componentMatcher;
@@ -18,7 +20,9 @@ export class EventHandlers {
         this.editableManager = editableManager;
         this.communicationManager = communicationManager;
         this.currentHighlighted = null;
+        this.currentHighlightedSameElements = [];
         this.selectedElement = null;
+        this.selectedSameElements = [];
         // Bind methods to preserve 'this' context
         this.handleMouseOver = this.handleMouseOver.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
@@ -55,10 +59,16 @@ export class EventHandlers {
         }
         if (this.currentHighlighted &&
             !this.currentHighlighted.classList.contains("design-mode-selected")) {
-            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.styleManager.unhighlightElements([
+                this.currentHighlighted,
+                ...this.currentHighlightedSameElements,
+            ]);
+            this.currentHighlightedSameElements = [];
         }
-        this.styleManager.highlightElement(element);
+        const sameElements = this.componentMatcher.findSameElements(element);
+        this.styleManager.highlightElements([element, ...sameElements]);
         this.currentHighlighted = element;
+        this.currentHighlightedSameElements = sameElements;
     }
     /**
      * Handle mouseleave event
@@ -69,8 +79,12 @@ export class EventHandlers {
         }
         if (this.currentHighlighted &&
             !this.currentHighlighted.classList.contains("design-mode-selected")) {
-            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.styleManager.unhighlightElements([
+                this.currentHighlighted,
+                ...this.currentHighlightedSameElements,
+            ]);
             this.currentHighlighted = null;
+            this.currentHighlightedSameElements = [];
         }
     }
     /**
@@ -94,19 +108,25 @@ export class EventHandlers {
         if (this.selectedElement && this.selectedElement === element) {
             return;
         }
-        // Deselect previous element
+        // Deselect previous element and its same elements
         if (this.selectedElement) {
-            this.styleManager.deselectElement(this.selectedElement);
+            this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
             this.editableManager.removeEditable(this.selectedElement);
         }
-        // Remove highlight from current highlighted
+        // Remove highlight from current highlighted and its same elements
         if (this.currentHighlighted) {
-            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.styleManager.unhighlightElements([
+                this.currentHighlighted,
+                ...this.currentHighlightedSameElements,
+            ]);
             this.currentHighlighted = null;
+            this.currentHighlightedSameElements = [];
         }
-        // Select new element
+        // Select new element and its same elements
         this.selectedElement = element;
-        this.styleManager.selectElement(element);
+        const sameElements = this.componentMatcher.findSameElements(element);
+        this.selectedSameElements = sameElements;
+        this.styleManager.selectElements([element, ...sameElements]);
         // Make text elements editable
         this.editableManager.makeEditableIfText(element);
         // Notify extension
@@ -117,13 +137,18 @@ export class EventHandlers {
      */
     clearAll() {
         if (this.currentHighlighted) {
-            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.styleManager.unhighlightElements([
+                this.currentHighlighted,
+                ...this.currentHighlightedSameElements,
+            ]);
             this.currentHighlighted = null;
+            this.currentHighlightedSameElements = [];
         }
         if (this.selectedElement) {
-            this.styleManager.deselectElement(this.selectedElement);
+            this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
             this.editableManager.removeEditable(this.selectedElement);
             this.selectedElement = null;
+            this.selectedSameElements = [];
         }
     }
     /**
@@ -133,4 +158,11 @@ export class EventHandlers {
     getSelectedElement() {
         return this.selectedElement;
     }
+    /**
+     * Get the same elements of the currently selected element
+     * @returns Array of same elements
+     */
+    getSelectedSameElements() {
+        return this.selectedSameElements;
+    }
 }

package/dist/design/interactions/interactionsController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,qBAAa,sBAAsB;IAClC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,UAAO;IAwD1B;;OAEG;IACH,UAAU,IAAI,IAAI;IAiBlB;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAOvD;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}
+{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,qBAAa,sBAAsB;IAClC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,UAAO;IAwD1B;;OAEG;IACH,UAAU,IAAI,IAAI;IAiBlB;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWvD;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}

package/dist/design/interactions/interactionsController.js

@@ -107,6 +107,9 @@ export class InteractionsController {
         const selectedElement = this.eventHandlers.getSelectedElement();
         if (selectedElement) {
             selectedElement.style[property] = value;
+            for (const sameElement of this.eventHandlers.getSelectedSameElements()) {
+                sameElement.style[property] = value;
+            }
         }
     }
     /**

package/dist/design/interactions/styleManager.d.ts

@@ -26,24 +26,24 @@ export declare class StyleManager {
      */
     private _getStyles;
     /**
-     * Apply highlight class to an element
-     * @param element - The element to highlight
+     * Apply highlight class to one or more elements
+     * @param elements - The elements to highlight
      */
-    highlightElement(element: HTMLElement): void;
+    highlightElements(elements: HTMLElement[]): void;
     /**
-     * Remove highlight class from an element
-     * @param element - The element to unhighlight
+     * Remove highlight class from one or more elements
+     * @param elements - The elements to unhighlight
      */
-    unhighlightElement(element: HTMLElement): void;
+    unhighlightElements(elements: HTMLElement[]): void;
     /**
-     * Apply selected class to an element
-     * @param element - The element to select
+     * Apply selected class to one or more elements
+     * @param elements - The elements to select
      */
-    selectElement(element: HTMLElement): void;
+    selectElements(elements: HTMLElement[]): void;
     /**
-     * Remove selected class from an element
-     * @param element - The element to deselect
+     * Remove selected class from one or more elements
+     * @param elements - The elements to deselect
      */
-    deselectElement(element: HTMLElement): void;
+    deselectElements(elements: HTMLElement[]): void;
 }
 //# sourceMappingURL=styleManager.d.ts.map

package/dist/design/interactions/styleManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleManager.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/styleManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,qBAAa,YAAY;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAU;;IAO7B;;OAEG;IACH,kBAAkB,IAAI,IAAI;IAY1B;;OAEG;IACH,qBAAqB,IAAI,IAAI;IAQ7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAiBlB;;;OAGG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAI9C;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAIzC;;;OAGG;IACH,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;CAG3C"}
+{"version":3,"file":"styleManager.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/styleManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,qBAAa,YAAY;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAU;;IAO7B;;OAEG;IACH,kBAAkB,IAAI,IAAI;IAY1B;;OAEG;IACH,qBAAqB,IAAI,IAAI;IAQ7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAiBlB;;;OAGG;IACH,iBAAiB,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;IAMhD;;;OAGG;IACH,mBAAmB,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;IAMlD;;;OAGG;IACH,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;IAM7C;;;OAGG;IACH,gBAAgB,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;CAK/C"}

package/dist/design/interactions/styleManager.js

@@ -59,31 +59,39 @@ export class StyleManager {
     `;
     }
     /**
-     * Apply highlight class to an element
-     * @param element - The element to highlight
+     * Apply highlight class to one or more elements
+     * @param elements - The elements to highlight
      */
-    highlightElement(element) {
-        element.classList.add("design-mode-highlight");
+    highlightElements(elements) {
+        for (const el of elements) {
+            el.classList.add("design-mode-highlight");
+        }
     }
     /**
-     * Remove highlight class from an element
-     * @param element - The element to unhighlight
+     * Remove highlight class from one or more elements
+     * @param elements - The elements to unhighlight
      */
-    unhighlightElement(element) {
-        element.classList.remove("design-mode-highlight");
+    unhighlightElements(elements) {
+        for (const el of elements) {
+            el.classList.remove("design-mode-highlight");
+        }
     }
     /**
-     * Apply selected class to an element
-     * @param element - The element to select
+     * Apply selected class to one or more elements
+     * @param elements - The elements to select
      */
-    selectElement(element) {
-        element.classList.add("design-mode-selected");
+    selectElements(elements) {
+        for (const el of elements) {
+            el.classList.add("design-mode-selected");
+        }
     }
     /**
-     * Remove selected class from an element
-     * @param element - The element to deselect
+     * Remove selected class from one or more elements
+     * @param elements - The elements to deselect
      */
-    deselectElement(element) {
-        element.classList.remove("design-mode-selected");
+    deselectElements(elements) {
+        for (const el of elements) {
+            el.classList.remove("design-mode-selected");
+        }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/webapp-experimental",
   "description": "[experimental] Core package for Salesforce Web Applications",
-  "version": "1.66.0",
+  "version": "1.67.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@salesforce/core": "^8.23.4",
-    "@salesforce/sdk-data": "^1.66.0",
+    "@salesforce/sdk-data": "^1.67.0",
     "axios": "^1.7.7",
     "micromatch": "^4.0.8",
     "path-to-regexp": "^8.3.0"