lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

package/src/lightning/pillContainer/listbox.slds.css

@@ -15,12 +15,25 @@
    :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-    background-color: var(--slds-g-color-surface-container-2);
     text-decoration: none;
+  }
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:hover {
+    background-color: var(--slds-c-listbox-option-color-background-hover, var(--slds-g-color-surface-container-2));
+  }
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+    background-color: var(--slds-c-listbox-option-color-background-focus, var(--slds-g-color-surface-container-2));
+    box-shadow: var(--slds-g-shadow-inset-focus-1);
+    outline: 0;
+  }
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"]:focus {
+    background-color: var(--slds-c-listbox-option-color-background-disabled, transparent);
   }
    :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
-    background-color: transparent;
     cursor: default;
   }
    /* Modifies the listbox option if it contains an entity object */
@@ -38,14 +51,25 @@
     padding-inline: var(--slds-g-spacing-3);
   }
    /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option {
+    color: var(--slds-c-listbox-option-color);
+    background-color: var(--slds-c-listbox-option-color-background);
+  }
    :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
     cursor: pointer;
+    color: var(--slds-c-listbox-option-color-hover);
+    background-color: var(--slds-c-listbox-option-color-background-hover);
   }
    :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
     outline: 0;
+    color: var(--slds-c-listbox-option-color-focus);
+    background-color: var(--slds-c-listbox-option-color-background-focus);
   }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
-    color: var(--slds-g-color-disabled-2);
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+  .slds-listbox__option[aria-disabled="true"]:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox__option[aria-disabled="true"]:focus {
+    color: var(--slds-c-listbox-option-color-disabled, var(--slds-g-color-disabled-2));
+    background-color: var(--slds-c-listbox-option-color-background-disabled);
   }
    /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
    /* the _vertical variations only apply to combobox's */
@@ -102,10 +126,17 @@
    :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
     display: block;
     margin-block-start: calc(var(--slds-g-spacing-1) * -1);
-    color: var(--slds-g-color-neutral-base-30);
+    color: var(--slds-c-listbox-option-meta-color, var(--slds-g-color-neutral-base-30));
   }
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentcolor;
+   :host([data-render-mode="shadow"]:hover) .slds-listbox__option-meta {
+    color: var(--slds-c-listbox-option-meta-color-hover);
+  }
+   :host([data-render-mode="shadow"]:focus) .slds-listbox__option-meta,:host([data-render-mode="shadow"].slds-has-focus) .slds-listbox__option-meta {
+    color: var(--slds-c-listbox-option-meta-color-focus);
+  }
+   :host([data-render-mode="shadow"][aria-disabled="true"]) .slds-listbox__option-meta,:host([data-render-mode="shadow"]) 
+  .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+    color: var(--slds-c-listbox-option-meta-color-disabled, currentColor);
    }
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
    /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
@@ -143,62 +174,3 @@
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
     line-height: 1;
   }
-   /* Media Object classes need to be pulled out for reusability */
-   :host([data-render-mode="shadow"]) .slds-media {
-    display: flex;
-    align-items: flex-start;
-  }
-   :host([data-render-mode="shadow"]) .slds-media__figure {
-    flex-shrink: 0;
-    margin-inline-end: var(--slds-g-spacing-3);
-  }
-   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
-    min-width: var(--slds-g-sizing-10);
-  }
-   :host([data-render-mode="shadow"]) .slds-media__body {
-    flex: 1;
-    min-width: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
-  .slds-media__body> :last-child {
-    margin-block-end: 0;
-  }
-   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
-    flex-shrink: 0;
-    flex-basis: auto;
-  }
-   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
-    margin-inline-end: var(--slds-g-spacing-1);
-  }
-   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
-    margin-inline-start: var(--slds-g-spacing-1);
-  }
-   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
-    margin-inline-end: var(--slds-g-spacing-5);
-  }
-   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
-    margin-inline-start: var(--slds-g-spacing-5);
-  }
-   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
-    flex: 0 1 auto;
-  }
-   :host([data-render-mode="shadow"]) .slds-media_center {
-    align-items: center;
-  }
-   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
-    margin-block: 0;
-    margin-inline-start: var(--slds-g-spacing-3);
-    margin-inline-end: 0;
-  }
-   @media (width <= 48em) {
-
-    :host([data-render-mode="shadow"]) .slds-media_responsive {
-      display: block;
-    }
-
-     :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
-       margin-block: 0;
-       margin-inline-start: var(--slds-g-spacing-3);
-       margin-inline-end: 0;
-     }
-   }

package/src/lightning/pillContainer/pill.slds.css

@@ -80,7 +80,7 @@
   }
     :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
     --slds-c-avatar-sizing: var(--slds-g-sizing-6);
-    --slds-c-icon-sizing: calc(var(--slds-g-sizing-6) - var(--slds-g-sizing-border-2));
+    --slds-c-icon-sizing: var(--slds-g-sizing-6);
 
     color: var(--slds-c-pill-text-color, var(--slds-g-color-neutral-base-100));
     display: block;

package/src/lightning/pillContainer/pillContainer.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
 import { api } from 'lwc';
@@ -8,12 +13,14 @@ import {
     normalizeBoolean,
     normalizeString,
     reflectAttribute,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import barePillContainer from './barePillContainer.html';
 import standardPillContainer from './standardPillContainer.html';
 import { relatedTarget as pillRelatedTarget } from 'lightning/pill';
 
+const { setContext, assertContext } = privateContext;
 const PILL_SELECTOR = 'lightning-pill';
 const BARE = 'bare';
 const STANDARD = 'standard';
@@ -41,6 +48,11 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
     _pillsNotFittingCount;
     _pillContainerElementId;
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
@@ -83,18 +95,12 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
             );
         }
         const ul = this.template.querySelector('ul');
-        if (ul) {
-            if (this.pills.length === 0) {
-                // If no option is present, set ul has the focus (SLDS require UL has focus).
-                ul.tabIndex = 0;
-            } else {
-                ul.tabIndex = -1;
-                this.setFocusedItemTabIndex(0);
-                // Consider adding pills programmatically to empty pill container.
-                // UL has focus, so should shift focus to pill.
-                if (this.template.querySelector('ul:focus')) {
-                    this.focus();
-                }
+        if (ul && this.pills.length) {
+            this.setFocusedItemTabIndex(0);
+            // Consider adding pills programmatically to empty pill container.
+            // UL has focus, so should shift focus to pill.
+            if (this.template.querySelector('ul:focus')) {
+                this.focus();
             }
         }
     }
@@ -273,6 +279,7 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
     }
 
     fireEvent(index) {
+        assertContext(this);
         // Mouse click on non-focused pill, switch focus to it.
         this.switchFocus(index);
         // Request to remove the last one, if removed, should move focus to last.

package/src/lightning/pillContainer/pillItem.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 export default class LightningPillItem {
     constructor(item) {
         this._item = item;

package/src/lightning/pillContainer/standardPillContainer.html

@@ -5,6 +5,7 @@
         </template>
         <ul
             class={computedListboxClass}
+            tabindex="-1"
             aria-label={label}
             onclick={handleClick}
             onkeydown={handleKeyDown}

package/src/lightning/popup/__examples__/basic/basic.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement, track } from 'lwc';
 
 export default class PopupExample extends LightningElement {

package/src/lightning/popup/__examples__/walkthrough/walkthrough.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class PopupExample extends LightningElement {

package/src/lightning/popup/alignment.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { normalizeString, isUndefinedOrNull } from 'lightning/utilsPrivate';
 
 export const DEFAULT_POPUP_ALIGNMENT = {

package/src/lightning/popup/popover.slds.css

@@ -12,6 +12,17 @@
       border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
 
+  :host([data-render-mode="shadow"]) .slds-popover_edit {
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_edit .slds-popover__body {
+    padding: var(--slds-g-spacing-1);
+    padding-inline-start: 0;
+  }
+
   :host([data-render-mode="shadow"]) .slds-popover__meta {
       margin-block-end: var(--slds-g-sizing-4);
   }
@@ -41,7 +52,7 @@
 
   :host([data-render-mode="shadow"]) .slds-popover__footer {
       border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-      background-color: var(--slds--g-color-surface-container-2);
+      background-color: var(--slds-g-color-surface-container-2);
       border-end-start-radius: inherit;
       border-end-end-radius: inherit;
       padding-block: var(--slds-g-spacing-2);

package/src/lightning/popup/popup.html

@@ -1,11 +1,13 @@
 <template>
     <template if:true={_visible}>
-        <section aria-describedby={ariaDescribedBy}
-                 aria-label={_ariaLabel}
-                 aria-labelledby={ariaLabelledBy}
-                 onfocusout={_handleFocusOut}
-                 onfocusin={_handleFocusIn}
-                 role="dialog" onkeydown={_handlePopoverKeydown}>
+        <section
+            aria-label={_ariaLabel}
+            aria-modal="true"
+            onfocusout={_handleFocusOut}
+            onfocusin={_handleFocusIn}
+            role="dialog"
+            onkeydown={_handlePopoverKeydown}
+        >
             <!-- tabindex is set to 0 so that focus is not lost, and close on click out functionality works
               without needing to attach global listeners -->
             <lightning-focus-trap data-focus-trap tabindex="0">

package/src/lightning/popup/popup.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { AutoPosition } from 'lightning/positionLibrary';
@@ -6,7 +11,12 @@ import {
     DEFAULT_POPUP_ALIGNMENT,
 } from './alignment';
 import { getElementWithFocus } from 'lightning/focusUtils';
-import { isUndefinedOrNull, normalizeBoolean } from 'lightning/utilsPrivate';
+import {
+    isUndefinedOrNull,
+    normalizeBoolean,
+    isCSR,
+} from 'lightning/utilsPrivate';
+import AriaObserver from 'lightning/ariaObserver';
 
 export default class LightningPopup extends LightningShadowBaseClass {
     @track _visible;
@@ -19,6 +29,14 @@ export default class LightningPopup extends LightningShadowBaseClass {
     _alignmentOptions;
     _alignment;
     _hasFocus;
+    ariaObserver;
+    _rootAriaNode;
+    _rendered;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupAriaObserverIfAbsent();
+    }
 
     renderedCallback() {
         if (this._queueShow) {
@@ -37,10 +55,58 @@ export default class LightningPopup extends LightningShadowBaseClass {
                 this.focus();
             }
         }
+
+        if (!this._rendered) {
+            this.connectAriaAttributes();
+            this._rendered = true;
+        }
+
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
     }
 
     disconnectedCallback() {
         this._close();
+        this.removeAriaObserverIfPresent();
+    }
+
+    setupAriaObserverIfAbsent() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+            this.ariaObserver.root = this._rootAriaNode;
+            this.connectAriaAttributes();
+        }
+    }
+
+    removeAriaObserverIfPresent() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+
+    /**
+     * Root node of the context that owns the element referenced by aria-labelledby and aria-describedby
+     *
+     * @type {Node}
+     */
+    @api
+    get rootAriaNode() {
+        return this._rootAriaNode;
+    }
+
+    set rootAriaNode(root) {
+        this._rootAriaNode = root;
+        if (this.ariaObserver) {
+            this.ariaObserver.root = root;
+            this.ariaObserver.sync();
+        }
+    }
+
+    connectAriaAttributes() {
+        this.connectAriaLabelledBy();
+        this.connectAriaDescribedBy();
     }
 
     /**
@@ -55,6 +121,19 @@ export default class LightningPopup extends LightningShadowBaseClass {
 
     set ariaLabelledBy(value) {
         this._ariaLabelledBy = value;
+        if (this.ariaObserver) {
+            this.connectAriaLabelledBy();
+        }
+    }
+
+    connectAriaLabelledBy() {
+        if (isCSR) {
+            this.ariaObserver.connect({
+                targetSelector: 'section',
+                attribute: 'aria-labelledby',
+                relatedNodeIds: this._ariaLabelledBy,
+            });
+        }
     }
 
     /**
@@ -69,6 +148,19 @@ export default class LightningPopup extends LightningShadowBaseClass {
 
     set ariaDescribedBy(value) {
         this._ariaDescribedBy = value;
+        if (this.ariaObserver) {
+            this.connectAriaDescribedBy();
+        }
+    }
+
+    connectAriaDescribedBy() {
+        if (isCSR) {
+            this.ariaObserver.connect({
+                targetSelector: 'section',
+                attribute: 'aria-describedby',
+                relatedNodeIds: this._ariaDescribedBy,
+            });
+        }
     }
 
     /**
@@ -227,14 +319,10 @@ export default class LightningPopup extends LightningShadowBaseClass {
 
     _handlePopoverKeydown(event) {
         const hasModifier = event.ctrlKey || event.metaKey || event.shiftKey;
-        // The 'Esc' check is for IE11, remove once support is dropped
-        if (
-            !hasModifier &&
-            event.key &&
-            (event.key === 'Escape' || event.key === 'Esc')
-        ) {
+        if (!hasModifier && event.key && event.key === 'Escape') {
             this._returnFocus();
             this._closeAndDispatchCloseEvent();
+            event.stopPropagation();
         }
     }
 

package/src/lightning/positionLibrary/__examples__/components/components.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement, api } from 'lwc';
 
 export default class PlaygroundCompoennts extends LightningElement {

package/src/lightning/positionLibrary/__examples__/playground/playground.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class PlaygroundShadowScroll extends LightningElement {

package/src/lightning/positionLibrary/constraint.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { TransformBuilder } from './transformBuilder';
 
 export class Constraint {

package/src/lightning/positionLibrary/direction.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { normalizeString } from 'lightning/utilsPrivate';
 import { WindowManager } from './util';
 
@@ -109,9 +114,11 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
 
     // The boundary shrinks the available area to the edge of the target rather than the viewport.
     let rightAsBoundary = false;
+    let isRTL = false;
     if (document.dir === 'rtl') {
         rightAsBoundary = leftAsBoundary;
         leftAsBoundary = false;
+        isRTL = true;
     }
 
     // Bug Fix for https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07B0000008DxOhIAK/view
@@ -196,6 +203,21 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
         shouldAlignToLeft = spaceRemainingLeft < spaceRemainingRight;
     }
 
+    /* W-15328389 RTL is one area where there have been bugs since long ago, the following change is an impactful in
+    nature and spans multiple components, given the history of the impact this library creates we
+    wanted to localize the change to tooltip where this bug was reported, but going forward when we add multiple other
+    components we will remove this check provided we have similar bugs on other components */
+
+    if (
+        isRTL &&
+        !shouldAlignToLeft &&
+        !shouldAlignToRight &&
+        element.tagName === 'LIGHTNING-PRIMITIVE-BUBBLE'
+    ) {
+        shouldAlignToRight = spaceRemainingLeft > spaceRemainingRight;
+        shouldAlignToLeft = spaceRemainingLeft < spaceRemainingRight;
+    }
+
     // If there is no space above and below, recalculate space based on window
     // when there is still no space above and below based on window then select the maximum available space
 

package/src/lightning/positionLibrary/elementProxy.js

@@ -1,4 +1,9 @@
-import { isInDom, WindowManager, pxToFloat, getTransformValues } from './util';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { isInDom, WindowManager, pxToFloat } from './util';
 
 export class ElementProxy {
     constructor(el, id) {
@@ -126,6 +131,19 @@ export class ElementProxy {
         return this._dirty;
     }
 
+    getElementZoomRatio() {
+        const element = this._node;
+        const rect = element.getBoundingClientRect();
+
+        const offsetWidth = element.offsetWidth || rect.width || 1;
+        const offsetHeight = element.offsetHeight || rect.height || 1;
+        const actualWidth = rect.width;
+        const actualHeight = rect.height;
+        const widthRatio = Number((actualWidth / offsetWidth).toFixed(2));
+        const heightRatio = Number((actualHeight / offsetHeight).toFixed(2));
+        return Math.min(widthRatio, heightRatio);
+    }
+
     bake() {
         const w = WindowManager.window;
         const absPos = this._node.getBoundingClientRect();
@@ -141,36 +159,47 @@ export class ElementProxy {
         const originalTop = style.top.match(/auto|fixed/)
             ? '0'
             : pxToFloat(style.top);
-
-        const marginOffset =
-            this.top < absPos.top
-                ? pxToFloat(style.marginBottom) * -1
-                : pxToFloat(style.marginTop);
-
-        const transform = getTransformValues(style.transform);
-        const topOffset = transform.y;
-
-        let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + scrollTop) + topOffset;
+        const zoomLevel = this.getElementZoomRatio();
+        const adjustForZoom = (value) => value / zoomLevel;
+
+        const marginTop = adjustForZoom(pxToFloat(style.marginTop));
+
+        //since this.top dosent consist of marginTop , we need to subtract the margin to the top from absTop
+        const adjustedAbsPosTop =
+            adjustForZoom(absPos.top) +
+            scrollTop -
+            (adjustForZoom(this.top) < adjustForZoom(absPos.top) + scrollTop
+                ? marginTop
+                : -marginTop);
+        const marginAdjustment =
+            adjustForZoom(this.top) < adjustForZoom(adjustedAbsPosTop)
+                ? marginTop
+                : -marginTop;
+        const zoomAdjustedAbsLeft = adjustForZoom(absPos.left + scrollLeft);
+        const zoomAdjustedAbsTop = adjustForZoom(absPos.top + scrollTop);
+
+        let leftDif = Math.round(
+            adjustForZoom(this.left) - zoomAdjustedAbsLeft
+        );
+        const topDif = Math.round(
+            adjustForZoom(this.top) - (zoomAdjustedAbsTop + marginAdjustment)
+        );
 
         const viewPortWidth = w.innerWidth || document.body.clientWidth;
         let rightPos = parseInt(style.right, 10);
+        const elementWidth = this._node.offsetWidth;
+        const zoomAdjustedWidth = elementWidth * zoomLevel;
         if (
-            originalLeft + leftDif + parseInt(style.width, 10) >
-                viewPortWidth &&
+            originalLeft + leftDif + zoomAdjustedWidth > viewPortWidth &&
             rightPos <= 0
         ) {
             rightPos = rightPos < 0 ? -rightPos : leftDif;
-            this._node.style.right = -rightPos + 'px';
+            this._node.style.right = `${-rightPos}px`;
             leftDif = 0;
         }
 
         this._node.style.left = `${originalLeft + leftDif}px`;
         this._node.style.top = `${originalTop + topDif}px`;
-        // translate3d enables CSS Hardware Acceleration and switches to GPU
-        this._node.style.transform = `translate3d(0, ${
-            topOffset ? topOffset : marginOffset
-        }px, 0)`;
 
         if (this._restoreSize) {
             // Only store the first height/width which is the original height/width.
@@ -181,8 +210,12 @@ export class ElementProxy {
                 this.originalWidth = this._node.style.width;
             }
 
-            this._node.style.width = `${this.width}px`;
-            this._node.style.height = `${this.height}px`;
+            // Apply dimensions accounting for zoom
+            const adjustedWidth = adjustForZoom(this.width);
+            const adjustedHeight = adjustForZoom(this.height);
+
+            this._node.style.width = `${adjustedWidth}px`;
+            this._node.style.height = `${adjustedHeight}px`;
         }
 
         this._dirty = false;

package/src/lightning/positionLibrary/elementProxyCache.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { ElementProxy } from './elementProxy';
 import { timeout, WindowManager, POSITION_ATTR_NAME } from './util';
 import { assert } from 'lightning/utilsPrivate';