@salesforce/ui-design-mode 10.13.0 → 10.14.0

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

@@ -110,13 +110,20 @@
   // src/runtime/interactions/editableManager.ts
   var TEXT_TAGS = EDITABLE_ELEMENT_TAGS;
   var EditableManager = class {
-    constructor(communicationManager) {
+    /**
+     * @param onContentChange - Called whenever editing changes an element's
+     * content (live typing, blur, Escape revert), so the caller can recompute
+     * anything tied to the element's size — e.g. the selection overlay.
+     */
+    constructor(communicationManager, onContentChange) {
       __publicField(this, "communicationManager");
+      __publicField(this, "onContentChange");
       __publicField(this, "boundHandleBlur");
       __publicField(this, "boundHandleKeydown");
       __publicField(this, "boundHandleInput");
       __publicField(this, "editableGroup");
       this.communicationManager = communicationManager;
+      this.onContentChange = onContentChange;
       this.boundHandleBlur = this._handleBlur.bind(this);
       this.boundHandleKeydown = this._handleKeydown.bind(this);
       this.boundHandleInput = this._handleInput.bind(this);
@@ -159,6 +166,7 @@
       for (let i = 1; i < this.editableGroup.length; i++) {
         this.editableGroup[i].textContent = text;
       }
+      this.onContentChange?.();
     }
     _handleBlur(e) {
       const element = e.target;
@@ -186,6 +194,7 @@
             el.textContent = el.dataset.originalText;
           }
         }
+        this.onContentChange?.();
         element.blur();
       }
     }
@@ -279,14 +288,7 @@
      */
     notifyComponentSelected(element) {
       const label = getLabelFromSource(element);
-      const wasSelected = element.classList.contains("design-mode-selected");
-      if (wasSelected) {
-        element.classList.remove("design-mode-selected");
-      }
       const styles = getElementStyles(element);
-      if (wasSelected) {
-        element.classList.add("design-mode-selected");
-      }
       const debugSource = getSourceFromDataAttributes(element);
       const textType = element.dataset?.textType ?? "none";
       const hasNonEditableText = TEXT_TAGS.includes(element.tagName) && (textType === "dynamic" || textType === "mixed");
@@ -444,10 +446,10 @@
 
   // src/runtime/interactions/eventHandlers.ts
   var EventHandlers = class {
-    constructor(isInteractionsActive, componentMatcher, styleManager, editableManager, communicationManager) {
+    constructor(isInteractionsActive, componentMatcher, overlayManager, editableManager, communicationManager) {
       __publicField(this, "isInteractionsActive");
       __publicField(this, "componentMatcher");
-      __publicField(this, "styleManager");
+      __publicField(this, "overlayManager");
       __publicField(this, "editableManager");
       __publicField(this, "communicationManager");
       __publicField(this, "currentHighlightedElements");
@@ -455,7 +457,7 @@
       __publicField(this, "selectedElements");
       this.isInteractionsActive = isInteractionsActive;
       this.componentMatcher = componentMatcher;
-      this.styleManager = styleManager;
+      this.overlayManager = overlayManager;
       this.editableManager = editableManager;
       this.communicationManager = communicationManager;
       this.currentHighlightedElements = [];
@@ -464,6 +466,26 @@
       this.handleMouseOver = this.handleMouseOver.bind(this);
       this.handleMouseLeave = this.handleMouseLeave.bind(this);
       this.handleClick = this.handleClick.bind(this);
+      this.handlePointerDown = this.handlePointerDown.bind(this);
+    }
+    /**
+     * Swallow pointer/mouse-down so the previewed app cannot react to it (e.g.
+     * Radix opens dropdowns on `pointerdown`, before our `click` handler runs).
+     * In design mode the app is inspected, not driven; selection still happens on
+     * `click`. Exception: events inside the element being inline-text-edited pass
+     * through so the caret can be placed.
+     */
+    handlePointerDown(e) {
+      if (!this.isInteractionsActive()) {
+        return;
+      }
+      const target = e.target;
+      if (target.isContentEditable) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation?.();
     }
     _findHighlightableElement(target) {
       return this.componentMatcher.findHighlightableElement(target);
@@ -475,29 +497,34 @@
       e.stopPropagation();
       const target = e.target;
       if (target.nodeType !== 1 || target.tagName === "HTML" || target.tagName === "BODY") {
+        this.clearHoverHighlight();
         return;
       }
       const element = this._findHighlightableElement(target);
       if (!element) {
+        this.clearHoverHighlight();
         return;
       }
       if (this.currentHighlightedElements.includes(element) || this.selectedElement && this.selectedElement === element) {
         return;
       }
-      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
-        this.currentHighlightedElements = [];
-      }
+      this.clearHoverHighlight();
       const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
-      this.styleManager.highlightElements(allElements);
+      this.overlayManager.highlightElements(allElements);
       this.currentHighlightedElements = allElements;
     }
     handleMouseLeave() {
       if (!this.isInteractionsActive()) {
         return;
       }
-      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+      this.clearHoverHighlight();
+    }
+    /**
+     * Remove the current hover highlight unless it belongs to the selected element.
+     */
+    clearHoverHighlight() {
+      if (this.currentHighlightedElements.length > 0 && !this.selectedElements.includes(this.currentHighlightedElements[0])) {
+        this.overlayManager.unhighlightElements();
         this.currentHighlightedElements = [];
       }
     }
@@ -519,27 +546,27 @@
         return;
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElements(this.selectedElements);
+        this.overlayManager.deselectElements();
         this.editableManager.removeEditable(this.selectedElement);
       }
       if (this.currentHighlightedElements.length > 0) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.overlayManager.unhighlightElements();
         this.currentHighlightedElements = [];
       }
       this.selectedElement = element;
       const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
       this.selectedElements = allElements;
-      this.styleManager.selectElements(allElements);
+      this.overlayManager.selectElements(allElements);
       this.editableManager.makeEditableIfText(element);
       this.communicationManager.notifyComponentSelected(element);
     }
     clearAll() {
       if (this.currentHighlightedElements.length > 0) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.overlayManager.unhighlightElements();
         this.currentHighlightedElements = [];
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElements(this.selectedElements);
+        this.overlayManager.deselectElements();
         this.editableManager.removeEditable(this.selectedElement);
         this.selectedElement = null;
         this.selectedElements = [];
@@ -550,92 +577,207 @@
     }
   };
 
-  // src/runtime/interactions/styleManager.ts
-  var StyleManager = class {
+  // src/runtime/interactions/overlayManager.ts
+  var BORDER_WIDTH = 2;
+  var TAB_HEIGHT_ESTIMATE = 18;
+  var OVERLAY_Z_INDEX = 2147483647;
+  var COLOR_HOVER = "#005a9e";
+  var COLOR_SELECTED = "#c2410c";
+  var BORDER_INSET = BORDER_WIDTH / 2;
+  var raf = typeof requestAnimationFrame === "function" ? (cb) => requestAnimationFrame(cb) : (cb) => setTimeout(cb, 16);
+  var OverlayManager = class {
     constructor() {
-      __publicField(this, "styleId");
-      __publicField(this, "stylesAdded");
-      this.styleId = "design-mode-styles";
-      this.stylesAdded = false;
+      __publicField(this, "hostId");
+      __publicField(this, "host");
+      __publicField(this, "shadow");
+      __publicField(this, "hover");
+      __publicField(this, "selected");
+      __publicField(this, "repositionScheduled");
+      __publicField(this, "boundReposition");
+      this.hostId = "design-mode-overlay";
+      this.host = null;
+      this.shadow = null;
+      this.hover = { entries: /* @__PURE__ */ new Map() };
+      this.selected = { entries: /* @__PURE__ */ new Map() };
+      this.repositionScheduled = false;
+      this.boundReposition = this.scheduleReposition.bind(this);
     }
     /**
-     * Add CSS styles for highlighting to the document
+     * Create the overlay host + shadow root and start tracking scroll/resize.
      */
-    addHighlightStyles() {
-      if (this.stylesAdded) {
+    mountOverlay() {
+      if (this.host) {
         return;
       }
+      const host = document.createElement("div");
+      host.id = this.hostId;
+      host.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;margin:0;padding:0;border:0;pointer-events:none;";
+      const shadow = host.attachShadow({ mode: "open" });
       const style = document.createElement("style");
-      style.id = this.styleId;
       style.textContent = this._getStyles();
-      document.head.appendChild(style);
-      this.stylesAdded = true;
+      shadow.appendChild(style);
+      document.documentElement.appendChild(host);
+      this.host = host;
+      this.shadow = shadow;
+      window.addEventListener("scroll", this.boundReposition, { capture: true, passive: true });
+      window.addEventListener("resize", this.boundReposition);
     }
     /**
-     * Remove highlight styles from the document
+     * Tear down the overlay host and stop tracking scroll/resize.
      */
-    removeHighlightStyles() {
-      const style = document.getElementById(this.styleId);
-      if (style) {
-        style.remove();
-        this.stylesAdded = false;
-      }
+    unmountOverlay() {
+      window.removeEventListener("scroll", this.boundReposition, true);
+      window.removeEventListener("resize", this.boundReposition);
+      this._clearLayer(this.hover);
+      this._clearLayer(this.selected);
+      this.host?.remove();
+      this.host = null;
+      this.shadow = null;
     }
     /**
-     * Get the CSS styles for highlighting
-     * @private
-     * @returns CSS styles
+     * Shadow-root styles for the border box and tag tab. `:host { all: initial }`
+     * resets inherited properties (e.g. `text-transform`, `letter-spacing`) so the
+     * host app's typography never leaks into the tab.
      */
     _getStyles() {
       return `
-      .design-mode-highlight {
-        outline: 4px dashed #007acc !important;
-        outline-offset: -4px !important;
-        transition: all 0.2s ease !important;
-        position: relative !important;
-        cursor: pointer !important;
-      }
-      .design-mode-selected {
-        outline: 5px dashed #ff6b35 !important;
-        outline-offset: -5px !important;
-        position: relative !important;
-      }
+      :host { all: initial; }
+      .design-mode-box {
+        position: fixed;
+        box-sizing: border-box;
+        pointer-events: none;
+        z-index: ${OVERLAY_Z_INDEX};
+      }
+      .design-mode-box.hover { border: ${BORDER_WIDTH}px solid ${COLOR_HOVER}; }
+      .design-mode-box.selected { border: ${BORDER_WIDTH}px solid ${COLOR_SELECTED}; }
+      .design-mode-tab {
+        position: fixed;
+        pointer-events: none;
+        z-index: ${OVERLAY_Z_INDEX};
+        white-space: nowrap;
+        width: auto;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 11px;
+        line-height: 1;
+        padding: 2px 6px;
+        color: #fff;
+      }
+      .design-mode-tab.hover { background: ${COLOR_HOVER}; }
+      .design-mode-tab.selected { background: ${COLOR_SELECTED}; }
     `;
     }
     /**
-     * Apply highlight class to one or more elements
-     * @param elements - The elements to highlight
+     * Show the hover overlay over `elements` — each gets a border box and tag tab.
      */
     highlightElements(elements) {
-      for (const el of elements) {
-        el.classList.add("design-mode-highlight");
-      }
+      this._renderLayer(this.hover, "hover", elements);
     }
     /**
-     * Remove highlight class from one or more elements
-     * @param elements - The elements to unhighlight
+     * Hide the hover overlay.
      */
-    unhighlightElements(elements) {
-      for (const el of elements) {
-        el.classList.remove("design-mode-highlight");
-      }
+    unhighlightElements() {
+      this._clearLayer(this.hover);
     }
     /**
-     * Apply selected class to one or more elements
-     * @param elements - The elements to select
+     * Show the selection overlay over `elements` — each gets a border box and tag tab.
      */
     selectElements(elements) {
+      this._renderLayer(this.selected, "selected", elements);
+    }
+    /**
+     * Hide the selection overlay.
+     */
+    deselectElements() {
+      this._clearLayer(this.selected);
+    }
+    _renderLayer(layer, kind, elements) {
+      if (!this.shadow) {
+        this.mountOverlay();
+      }
+      if (!this.shadow) {
+        return;
+      }
+      this._clearLayer(layer);
       for (const el of elements) {
-        el.classList.add("design-mode-selected");
+        const box = document.createElement("div");
+        box.className = `design-mode-box ${kind}`;
+        const tab = document.createElement("div");
+        tab.className = `design-mode-tab ${kind}`;
+        tab.textContent = el.tagName.toLowerCase();
+        this.shadow.appendChild(box);
+        this.shadow.appendChild(tab);
+        layer.entries.set(el, { box, tab });
+        this._positionBox(box, el);
+        this._positionTab(tab, el);
+      }
+    }
+    _clearLayer(layer) {
+      for (const { box, tab } of layer.entries.values()) {
+        box.remove();
+        tab.remove();
+      }
+      layer.entries.clear();
+    }
+    /** True when the element's rect is fully outside the viewport (scrolled away). */
+    _isOffscreen(rect) {
+      return rect.bottom < 0 || rect.right < 0 || rect.top > window.innerHeight || rect.left > window.innerWidth;
+    }
+    _positionBox(box, el) {
+      const rect = el.getBoundingClientRect();
+      if (this._isOffscreen(rect)) {
+        box.style.display = "none";
+        return;
+      }
+      box.style.display = "";
+      box.style.top = `${rect.top - BORDER_INSET}px`;
+      box.style.left = `${rect.left - BORDER_INSET}px`;
+      box.style.width = `${rect.width + BORDER_INSET * 2}px`;
+      box.style.height = `${rect.height + BORDER_INSET * 2}px`;
+    }
+    _positionTab(tab, el) {
+      const rect = el.getBoundingClientRect();
+      if (this._isOffscreen(rect)) {
+        tab.style.display = "none";
+        return;
+      }
+      tab.style.display = "";
+      const tabHeight = tab.offsetHeight || TAB_HEIGHT_ESTIMATE;
+      const topAbove = rect.top - BORDER_INSET - tabHeight;
+      const flipBelow = topAbove < 0;
+      tab.style.top = flipBelow ? `${rect.bottom + BORDER_INSET}px` : `${topAbove}px`;
+      tab.style.borderRadius = flipBelow ? "0 0 2px 2px" : "2px 2px 0 0";
+      const tabWidth = tab.offsetWidth;
+      const leftAligned = rect.left - BORDER_INSET;
+      if (tabWidth > 0 && leftAligned + tabWidth > window.innerWidth) {
+        tab.style.left = `${rect.right + BORDER_INSET - tabWidth}px`;
+      } else {
+        tab.style.left = `${leftAligned}px`;
       }
     }
     /**
-     * Remove selected class from one or more elements
-     * @param elements - The elements to deselect
+     * Recompute overlay geometry — call after a programmatic change (style/text/
+     * media edit) resizes or moves a highlighted element, since that does not fire
+     * scroll/resize. rAF-throttled and reads layout after the change is applied.
      */
-    deselectElements(elements) {
-      for (const el of elements) {
-        el.classList.remove("design-mode-selected");
+    reposition() {
+      this.scheduleReposition();
+    }
+    scheduleReposition() {
+      if (this.repositionScheduled) {
+        return;
+      }
+      this.repositionScheduled = true;
+      raf(() => {
+        this.repositionScheduled = false;
+        this._reposition();
+      });
+    }
+    _reposition() {
+      for (const layer of [this.hover, this.selected]) {
+        for (const [el, { box, tab }] of layer.entries) {
+          this._positionBox(box, el);
+          this._positionTab(tab, el);
+        }
       }
     }
   };
@@ -665,7 +807,7 @@
       __publicField(this, "enabled");
       __publicField(this, "isActive");
       __publicField(this, "componentMatcher");
-      __publicField(this, "styleManager");
+      __publicField(this, "overlayManager");
       __publicField(this, "communicationManager");
       __publicField(this, "editableManager");
       __publicField(this, "eventHandlers");
@@ -708,13 +850,16 @@
           "img"
         ]
       });
-      this.styleManager = new StyleManager();
+      this.overlayManager = new OverlayManager();
       this.communicationManager = new CommunicationManager();
-      this.editableManager = new EditableManager(this.communicationManager);
+      this.editableManager = new EditableManager(
+        this.communicationManager,
+        () => this.overlayManager.reposition()
+      );
       this.eventHandlers = new EventHandlers(
         () => this.isActive,
         this.componentMatcher,
-        this.styleManager,
+        this.overlayManager,
         this.editableManager,
         this.communicationManager
       );
@@ -728,9 +873,11 @@
         return;
       }
       console.log("Initializing Design Mode Interactions...");
-      this.styleManager.addHighlightStyles();
+      this.overlayManager.mountOverlay();
       document.addEventListener("mouseover", this.eventHandlers.handleMouseOver);
       document.addEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+      document.addEventListener("pointerdown", this.eventHandlers.handlePointerDown, true);
+      document.addEventListener("mousedown", this.eventHandlers.handlePointerDown, true);
       document.addEventListener("click", this.eventHandlers.handleClick, true);
       console.log("Design Mode Interactions initialized!");
       this.communicationManager.notifyInitializationComplete();
@@ -767,11 +914,13 @@
       for (const el of this.resolveTargets(sourceLocation)) {
         el.style[property] = value;
       }
+      this.overlayManager.reposition();
     }
     applyTextChange(text, sourceLocation) {
       for (const el of this.resolveTargets(sourceLocation)) {
         el.textContent = text;
       }
+      this.overlayManager.reposition();
     }
     /**
      * Apply attribute changes to all elements at the given source location whose
@@ -797,6 +946,7 @@
         if (el.tagName !== tagNameUpper) continue;
         applier(el, attributes);
       }
+      this.overlayManager.reposition();
     }
     /**
      * Cleanup and remove event listeners
@@ -804,8 +954,10 @@
     destroy() {
       document.removeEventListener("mouseover", this.eventHandlers.handleMouseOver);
       document.removeEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+      document.removeEventListener("pointerdown", this.eventHandlers.handlePointerDown, true);
+      document.removeEventListener("mousedown", this.eventHandlers.handlePointerDown, true);
       document.removeEventListener("click", this.eventHandlers.handleClick, true);
-      this.styleManager.removeHighlightStyles();
+      this.overlayManager.unmountOverlay();
       this.eventHandlers.clearAll();
     }
   };

package/dist/runtime/interactions/communicationManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"communicationManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/communicationManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAIN,KAAK,SAAS,EACd,MAAM,gBAAgB,CAAC;AAUxB,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAexE;AAED,qBAAa,oBAAoB;;IAKhC;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IA0DnD;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAyBnF;;OAEG;IACH,4BAA4B,IAAI,IAAI;CAepC"}
+{"version":3,"file":"communicationManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/communicationManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAIN,KAAK,SAAS,EACd,MAAM,gBAAgB,CAAC;AAUxB,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAexE;AAED,qBAAa,oBAAoB;;IAKhC;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAiDnD;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAyBnF;;OAEG;IACH,4BAA4B,IAAI,IAAI;CAepC"}

package/dist/runtime/interactions/editableManager.d.cts

@@ -10,11 +10,17 @@ interface CommunicationManagerLike {
 export declare const TEXT_TAGS: readonly string[];
 export declare class EditableManager {
     private communicationManager?;
+    private onContentChange?;
     private boundHandleBlur;
     private boundHandleKeydown;
     private boundHandleInput;
     private editableGroup;
-    constructor(communicationManager?: CommunicationManagerLike);
+    /**
+     * @param onContentChange - Called whenever editing changes an element's
+     * content (live typing, blur, Escape revert), so the caller can recompute
+     * anything tied to the element's size — e.g. the selection overlay.
+     */
+    constructor(communicationManager?: CommunicationManagerLike, onContentChange?: () => void);
     makeEditableIfText(element: HTMLElement): void;
     removeEditable(element: HTMLElement): void;
     private _isTextElement;

package/dist/runtime/interactions/editableManager.d.ts

@@ -10,11 +10,17 @@ interface CommunicationManagerLike {
 export declare const TEXT_TAGS: readonly string[];
 export declare class EditableManager {
     private communicationManager?;
+    private onContentChange?;
     private boundHandleBlur;
     private boundHandleKeydown;
     private boundHandleInput;
     private editableGroup;
-    constructor(communicationManager?: CommunicationManagerLike);
+    /**
+     * @param onContentChange - Called whenever editing changes an element's
+     * content (live typing, blur, Escape revert), so the caller can recompute
+     * anything tied to the element's size — e.g. the selection overlay.
+     */
+    constructor(communicationManager?: CommunicationManagerLike, onContentChange?: () => void);
     makeEditableIfText(element: HTMLElement): void;
     removeEditable(element: HTMLElement): void;
     private _isTextElement;

package/dist/runtime/interactions/editableManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editableManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/editableManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,UAAU,wBAAwB;IACjC,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,yGAAyG;AACzG,eAAO,MAAM,SAAS,mBAAwB,CAAC;AAE/C,qBAAa,eAAe;IAC3B,OAAO,CAAC,oBAAoB,CAAC,CAA2B;IACxD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,oBAAoB,CAAC,EAAE,wBAAwB;IAQ3D,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAoB9C,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAe1C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,cAAc;CAiBtB"}
+{"version":3,"file":"editableManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/editableManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,UAAU,wBAAwB;IACjC,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,yGAAyG;AACzG,eAAO,MAAM,SAAS,mBAAwB,CAAC;AAE/C,qBAAa,eAAe;IAC3B,OAAO,CAAC,oBAAoB,CAAC,CAA2B;IACxD,OAAO,CAAC,eAAe,CAAC,CAAa;IACrC,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,aAAa,CAAgB;IAErC;;;;OAIG;gBACS,oBAAoB,CAAC,EAAE,wBAAwB,EAAE,eAAe,CAAC,EAAE,MAAM,IAAI;IASzF,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAoB9C,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAe1C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,cAAc;CAmBtB"}

package/dist/runtime/interactions/eventHandlers.d.cts

@@ -6,11 +6,11 @@
 interface ComponentMatcherLike {
     findHighlightableElement: (target: HTMLElement) => HTMLElement | null;
 }
-interface StyleManagerLike {
+interface OverlayManagerLike {
     highlightElements: (elements: HTMLElement[]) => void;
-    unhighlightElements: (elements: HTMLElement[]) => void;
+    unhighlightElements: () => void;
     selectElements: (elements: HTMLElement[]) => void;
-    deselectElements: (elements: HTMLElement[]) => void;
+    deselectElements: () => void;
 }
 interface EditableManagerLike {
     makeEditableIfText: (element: HTMLElement) => void;
@@ -22,16 +22,28 @@ interface CommunicationManagerLike {
 export declare class EventHandlers {
     private isInteractionsActive;
     private componentMatcher;
-    private styleManager;
+    private overlayManager;
     private editableManager;
     private communicationManager;
     private currentHighlightedElements;
     private selectedElement;
     private selectedElements;
-    constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, styleManager: StyleManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
+    constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, overlayManager: OverlayManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
+    /**
+     * Swallow pointer/mouse-down so the previewed app cannot react to it (e.g.
+     * Radix opens dropdowns on `pointerdown`, before our `click` handler runs).
+     * In design mode the app is inspected, not driven; selection still happens on
+     * `click`. Exception: events inside the element being inline-text-edited pass
+     * through so the caret can be placed.
+     */
+    handlePointerDown(e: Event): void;
     private _findHighlightableElement;
     handleMouseOver(e: MouseEvent): void;
     handleMouseLeave(): void;
+    /**
+     * Remove the current hover highlight unless it belongs to the selected element.
+     */
+    private clearHoverHighlight;
     handleClick(e: MouseEvent): void;
     clearAll(): void;
     getSelectedElement(): HTMLElement | null;

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

@@ -6,11 +6,11 @@
 interface ComponentMatcherLike {
     findHighlightableElement: (target: HTMLElement) => HTMLElement | null;
 }
-interface StyleManagerLike {
+interface OverlayManagerLike {
     highlightElements: (elements: HTMLElement[]) => void;
-    unhighlightElements: (elements: HTMLElement[]) => void;
+    unhighlightElements: () => void;
     selectElements: (elements: HTMLElement[]) => void;
-    deselectElements: (elements: HTMLElement[]) => void;
+    deselectElements: () => void;
 }
 interface EditableManagerLike {
     makeEditableIfText: (element: HTMLElement) => void;
@@ -22,16 +22,28 @@ interface CommunicationManagerLike {
 export declare class EventHandlers {
     private isInteractionsActive;
     private componentMatcher;
-    private styleManager;
+    private overlayManager;
     private editableManager;
     private communicationManager;
     private currentHighlightedElements;
     private selectedElement;
     private selectedElements;
-    constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, styleManager: StyleManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
+    constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, overlayManager: OverlayManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
+    /**
+     * Swallow pointer/mouse-down so the previewed app cannot react to it (e.g.
+     * Radix opens dropdowns on `pointerdown`, before our `click` handler runs).
+     * In design mode the app is inspected, not driven; selection still happens on
+     * `click`. Exception: events inside the element being inline-text-edited pass
+     * through so the caret can be placed.
+     */
+    handlePointerDown(e: Event): void;
     private _findHighlightableElement;
     handleMouseOver(e: MouseEvent): void;
     handleMouseLeave(): void;
+    /**
+     * Remove the current hover highlight unless it belongs to the selected element.
+     */
+    private clearHoverHighlight;
     handleClick(e: MouseEvent): void;
     clearAll(): void;
     getSelectedElement(): HTMLElement | null;

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

@@ -1 +1 @@
-{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CACtE;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,0BAA0B,CAAgB;IAClD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAgB;gBAGvC,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAkB/C,OAAO,CAAC,yBAAyB;IAIjC,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAqCpC,gBAAgB,IAAI,IAAI;IAcxB,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA+ChC,QAAQ,IAAI,IAAI;IAchB,kBAAkB,IAAI,WAAW,GAAG,IAAI;CAGxC"}
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CACtE;AAED,UAAU,kBAAkB;IAC3B,iBAAiB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC7B;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,cAAc,CAAqB;IAC3C,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,0BAA0B,CAAgB;IAClD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAgB;gBAGvC,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,cAAc,EAAE,kBAAkB,EAClC,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAmB/C;;;;;;OAMG;IACH,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAejC,OAAO,CAAC,yBAAyB;IAIjC,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmCpC,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAU3B,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA+ChC,QAAQ,IAAI,IAAI;IAchB,kBAAkB,IAAI,WAAW,GAAG,IAAI;CAGxC"}

package/dist/runtime/interactions/interactionsController.d.cts

@@ -3,7 +3,7 @@ export declare class InteractionsController {
     private enabled;
     private isActive;
     private componentMatcher;
-    private styleManager;
+    private overlayManager;
     private communicationManager;
     private editableManager;
     private eventHandlers;

package/dist/runtime/interactions/interactionsController.d.ts

@@ -3,7 +3,7 @@ export declare class InteractionsController {
     private enabled;
     private isActive;
     private componentMatcher;
-    private styleManager;
+    private overlayManager;
     private communicationManager;
     private editableManager;
     private eventHandlers;

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

@@ -1 +1 @@
-{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,EAGN,KAAK,cAAc,EACnB,MAAM,qBAAqB,CAAC;AAuC7B,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,OAAO,CAAC,cAAc;IAWtB;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI;IAMxF,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI;IAMpE;;;;;;;;;;;;;;;OAeG;IACH,gBAAgB,CACf,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,EAC9C,cAAc,CAAC,EAAE,cAAc,GAC7B,IAAI;IAUP;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}
+{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,EAGN,KAAK,cAAc,EACnB,MAAM,qBAAqB,CAAC;AAuC7B,qBAAa,sBAAsB;IAClC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,UAAO;IA0D1B;;OAEG;IACH,UAAU,IAAI,IAAI;IAoBlB;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,cAAc;IAWtB;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI;IAOxF,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI;IAOpE;;;;;;;;;;;;;;;OAeG;IACH,gBAAgB,CACf,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,EAC9C,cAAc,CAAC,EAAE,cAAc,GAC7B,IAAI;IAWP;;OAEG;IACH,OAAO,IAAI,IAAI;CASf"}

package/dist/runtime/interactions/overlayManager.d.cts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export declare class OverlayManager {
+    private hostId;
+    private host;
+    private shadow;
+    private hover;
+    private selected;
+    private repositionScheduled;
+    private boundReposition;
+    constructor();
+    /**
+     * Create the overlay host + shadow root and start tracking scroll/resize.
+     */
+    mountOverlay(): void;
+    /**
+     * Tear down the overlay host and stop tracking scroll/resize.
+     */
+    unmountOverlay(): void;
+    /**
+     * Shadow-root styles for the border box and tag tab. `:host { all: initial }`
+     * resets inherited properties (e.g. `text-transform`, `letter-spacing`) so the
+     * host app's typography never leaks into the tab.
+     */
+    private _getStyles;
+    /**
+     * Show the hover overlay over `elements` — each gets a border box and tag tab.
+     */
+    highlightElements(elements: HTMLElement[]): void;
+    /**
+     * Hide the hover overlay.
+     */
+    unhighlightElements(): void;
+    /**
+     * Show the selection overlay over `elements` — each gets a border box and tag tab.
+     */
+    selectElements(elements: HTMLElement[]): void;
+    /**
+     * Hide the selection overlay.
+     */
+    deselectElements(): void;
+    private _renderLayer;
+    private _clearLayer;
+    /** True when the element's rect is fully outside the viewport (scrolled away). */
+    private _isOffscreen;
+    private _positionBox;
+    private _positionTab;
+    /**
+     * Recompute overlay geometry — call after a programmatic change (style/text/
+     * media edit) resizes or moves a highlighted element, since that does not fire
+     * scroll/resize. rAF-throttled and reads layout after the change is applied.
+     */
+    reposition(): void;
+    private scheduleReposition;
+    private _reposition;
+}
+//# sourceMappingURL=overlayManager.d.ts.map

package/dist/runtime/interactions/overlayManager.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export declare class OverlayManager {
+    private hostId;
+    private host;
+    private shadow;
+    private hover;
+    private selected;
+    private repositionScheduled;
+    private boundReposition;
+    constructor();
+    /**
+     * Create the overlay host + shadow root and start tracking scroll/resize.
+     */
+    mountOverlay(): void;
+    /**
+     * Tear down the overlay host and stop tracking scroll/resize.
+     */
+    unmountOverlay(): void;
+    /**
+     * Shadow-root styles for the border box and tag tab. `:host { all: initial }`
+     * resets inherited properties (e.g. `text-transform`, `letter-spacing`) so the
+     * host app's typography never leaks into the tab.
+     */
+    private _getStyles;
+    /**
+     * Show the hover overlay over `elements` — each gets a border box and tag tab.
+     */
+    highlightElements(elements: HTMLElement[]): void;
+    /**
+     * Hide the hover overlay.
+     */
+    unhighlightElements(): void;
+    /**
+     * Show the selection overlay over `elements` — each gets a border box and tag tab.
+     */
+    selectElements(elements: HTMLElement[]): void;
+    /**
+     * Hide the selection overlay.
+     */
+    deselectElements(): void;
+    private _renderLayer;
+    private _clearLayer;
+    /** True when the element's rect is fully outside the viewport (scrolled away). */
+    private _isOffscreen;
+    private _positionBox;
+    private _positionTab;
+    /**
+     * Recompute overlay geometry — call after a programmatic change (style/text/
+     * media edit) resizes or moves a highlighted element, since that does not fire
+     * scroll/resize. rAF-throttled and reads layout after the change is applied.
+     */
+    reposition(): void;
+    private scheduleReposition;
+    private _reposition;
+}
+//# sourceMappingURL=overlayManager.d.ts.map

package/dist/runtime/interactions/overlayManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/overlayManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAuCH,qBAAa,cAAc;IAC1B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,mBAAmB,CAAU;IACrC,OAAO,CAAC,eAAe,CAAa;;IAYpC;;OAEG;IACH,YAAY,IAAI,IAAI;IAyBpB;;OAEG;IACH,cAAc,IAAI,IAAI;IAYtB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IA4BlB;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;IAIhD;;OAEG;IACH,mBAAmB,IAAI,IAAI;IAI3B;;OAEG;IACH,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI;IAI7C;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAIxB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,WAAW;IAQnB,kFAAkF;IAClF,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,YAAY;IA6BpB;;;;OAIG;IACH,UAAU,IAAI,IAAI;IAIlB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,WAAW;CAQnB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/ui-design-mode",
   "description": "Hybrid editor (design-mode) authoring UI, iframe runtime, source-locator, and protocol for Salesforce UI Bundles",
-  "version": "10.13.0",
+  "version": "10.14.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "exports": {

package/dist/runtime/interactions/styleManager.d.cts

@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-/**
- * Style Manager Module
- * Handles CSS injection and style management for highlighting
- */
-export declare class StyleManager {
-    private styleId;
-    private stylesAdded;
-    constructor();
-    /**
-     * Add CSS styles for highlighting to the document
-     */
-    addHighlightStyles(): void;
-    /**
-     * Remove highlight styles from the document
-     */
-    removeHighlightStyles(): void;
-    /**
-     * Get the CSS styles for highlighting
-     * @private
-     * @returns CSS styles
-     */
-    private _getStyles;
-    /**
-     * Apply highlight class to one or more elements
-     * @param elements - The elements to highlight
-     */
-    highlightElements(elements: HTMLElement[]): void;
-    /**
-     * Remove highlight class from one or more elements
-     * @param elements - The elements to unhighlight
-     */
-    unhighlightElements(elements: HTMLElement[]): void;
-    /**
-     * Apply selected class to one or more elements
-     * @param elements - The elements to select
-     */
-    selectElements(elements: HTMLElement[]): void;
-    /**
-     * Remove selected class from one or more elements
-     * @param elements - The elements to deselect
-     */
-    deselectElements(elements: HTMLElement[]): void;
-}
-//# sourceMappingURL=styleManager.d.ts.map

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

@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-/**
- * Style Manager Module
- * Handles CSS injection and style management for highlighting
- */
-export declare class StyleManager {
-    private styleId;
-    private stylesAdded;
-    constructor();
-    /**
-     * Add CSS styles for highlighting to the document
-     */
-    addHighlightStyles(): void;
-    /**
-     * Remove highlight styles from the document
-     */
-    removeHighlightStyles(): void;
-    /**
-     * Get the CSS styles for highlighting
-     * @private
-     * @returns CSS styles
-     */
-    private _getStyles;
-    /**
-     * Apply highlight class to one or more elements
-     * @param elements - The elements to highlight
-     */
-    highlightElements(elements: HTMLElement[]): void;
-    /**
-     * Remove highlight class from one or more elements
-     * @param elements - The elements to unhighlight
-     */
-    unhighlightElements(elements: HTMLElement[]): void;
-    /**
-     * Apply selected class to one or more elements
-     * @param elements - The elements to select
-     */
-    selectElements(elements: HTMLElement[]): void;
-    /**
-     * Remove selected class from one or more elements
-     * @param elements - The elements to deselect
-     */
-    deselectElements(elements: HTMLElement[]): void;
-}
-//# sourceMappingURL=styleManager.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styleManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/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"}