lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

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, pxToInt } 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();
@@ -137,28 +155,46 @@ export class ElementProxy {
 
         const originalLeft = style.left.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.left.replace('px', ''), 10);
+            : pxToFloat(style.left);
         const originalTop = style.top.match(/auto|fixed/)
             ? '0'
-            : parseInt(style.top.replace('px', ''), 10);
+            : pxToFloat(style.top);
+        const zoomLevel = this.getElementZoomRatio();
+        const adjustForZoom = (value) => value / zoomLevel;
 
-        const marginOffset =
-            this.top < absPos.top
-                ? pxToInt(style.marginBottom)
-                : pxToInt(style.marginTop) * -1;
+        const marginTop = adjustForZoom(pxToFloat(style.marginTop));
 
-        let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + marginOffset + scrollTop);
+        //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;
         }
 
@@ -174,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';

package/src/lightning/positionLibrary/overlayDetector.js

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

package/src/lightning/positionLibrary/positionLibrary.js

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

package/src/lightning/positionLibrary/positionLibrary.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/positionLibrary/relationship.js

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

package/src/lightning/positionLibrary/reposition.js

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

package/src/lightning/positionLibrary/transformBuilder.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { Transformers, toTransformFunctions } from './transformers';
 import { Direction } from './direction';
 

package/src/lightning/positionLibrary/transformers.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 class Transformer {
     constructor(pad, boxDirections, transformX, transformY) {
         this.pad = pad || 0;

package/src/lightning/positionLibrary/util.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { assert } from 'lightning/utilsPrivate';
 import dir from '@salesforce/i18n/dir';
 
@@ -31,7 +36,11 @@ class BrowserWindow {
     }
 
     isWindow(element) {
-        return element && element.toString() === '[object Window]';
+        return (
+            element &&
+            (element.toString() === '[object Window]' ||
+                element instanceof Window)
+        );
     }
 }
 
@@ -247,3 +256,7 @@ function isPx(value) {
 export function pxToInt(value) {
     return value && isPx(value) ? parseInt(value, 10) : 0;
 }
+
+export function pxToFloat(value) {
+    return value && isPx(value) ? parseFloat(value) : 0;
+}

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import { api, track } from 'lwc';
@@ -53,6 +58,8 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
         super.connectedCallback();
         this.setAttribute('role', 'tooltip');
         this.setAttribute('aria-hidden', true);
+        // W-15856720 - slds-scope class is added to fix styling issue with lightning-out
+        this.setAttribute('class', 'slds-scope');
         this.state.inDOM = true;
     }
 
@@ -158,17 +165,11 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                             POPOVER_MIN_HEIGHT,
                             popoverParent.offsetHeight
                         ) + 'px';
-                    invisibleDiv.style.height =
-                        DEFAULT_INVISIBLE_DIV_STYLES.height;
                 } else {
-                    /* add a little bit of offset to move the <div> closer to the target, that way the mouse
-                     doesn't move into the small white space between the target and <div>, which would flicker the tooltip
-                    */
-                    invisibleDiv.style.top = '-1.1rem';
-                    invisibleDiv.style.height = '1.125rem';
+                    invisibleDiv.style.top = '-1rem';
                 }
             }
-
+            invisibleDiv.style.height = DEFAULT_INVISIBLE_DIV_STYLES.height;
             invisibleDiv.style.position = DEFAULT_INVISIBLE_DIV_STYLES.position;
             invisibleDiv.style.left = DEFAULT_INVISIBLE_DIV_STYLES.left;
             invisibleDiv.style.marginLeft =

package/src/lightning/primitiveBubble/primitiveBubble.js-meta.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
+        <capability>lightning__ServerRenderable</capability>
     </capabilities>
 </LightningComponentBundle>

package/src/lightning/primitiveBubble/tooltip.slds.css

@@ -57,6 +57,10 @@
  * Nubbin positioning
  */
 
+  /* certain slds-nubbin styles are also used in `primitive-datatable-tooltip-bubble.css` file.
+   if these classes are updated, cross-reference with that file and update classes there as well
+*/
+
   /* stylelint-disable */
 
   :host([data-render-mode="shadow"]) .slds-nubbin_top::before {

package/src/lightning/primitiveButton/primitiveButton.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 {
@@ -209,21 +214,29 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     /**
      * Indicates whether an element that the button controls is expanded or collapsed.
      * Valid values are 'true' or 'false'. The default value is undefined.
+     * The return value can be a string or null.
      *
-     * @type {string}
+     * @type {string|boolean}
+     * @returns {string|null}
      * @default undefined
      */
     @api
     get ariaExpanded() {
-        return this.originalAriaExpanded;
+        return this.originalAriaExpanded !== undefined
+            ? String(this.originalAriaExpanded)
+            : null;
     }
 
     set ariaExpanded(value) {
         this.originalAriaExpanded = value;
-        this.state.ariaExpanded = normalizeString(value, {
-            fallbackValue: null,
-            validValues: ['true', 'false'],
-        });
+        if (typeof value === 'string') {
+            this.state.ariaExpanded = normalizeString(value, {
+                fallbackValue: null,
+                validValues: ['true', 'false'],
+            });
+        } else if (typeof value === 'boolean') {
+            this.state.ariaExpanded = normalizeBoolean(value);
+        }
     }
 
     get computedAriaExpanded() {

package/src/lightning/primitiveButton/primitiveButton.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveCellActions/primitiveCellActions.html

@@ -1,5 +1,6 @@
 <template>
     <lightning-button-menu
+        lwc:ref="buttonMenu"
         icon-size="x-small"
         alternative-text={buttonAlternateText}
         menu-alignment={computedMenuAlignment}

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -1,7 +1,13 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelLoadingActions from '@salesforce/label/LightningPrimitiveCellActions.loadingActions';
 import labelShowActions from '@salesforce/label/LightningPrimitiveCellActions.showActions';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeString } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_MENU_ALIGNMENT = 'auto-right';
 const VALID_MENU_ALIGNMENT = [
@@ -24,7 +30,7 @@ const i18n = {
 /**
  * A cell-level action.
  */
-export default class PrimitiveCellActions extends LightningElement {
+export default class PrimitiveCellActions extends LightningShadowBaseClass {
     // Tracked objects
     @track containerRect;
     @track _actions = [];
@@ -68,7 +74,7 @@ export default class PrimitiveCellActions extends LightningElement {
     @api
     focus() {
         if (this._connected) {
-            this.template.querySelector('lightning-button-menu').focus();
+            this.refs.buttonMenu.focus();
         }
     }
 
@@ -81,7 +87,7 @@ export default class PrimitiveCellActions extends LightningElement {
             // focus/click without changing tabindex doesnt work W-6185168
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             setTimeout(() => {
-                this.template.querySelector('lightning-button-menu').click();
+                this.refs.buttonMenu.click();
             }, 0);
         }
     }
@@ -141,9 +147,7 @@ export default class PrimitiveCellActions extends LightningElement {
      * Handles the opening of an action menu
      */
     handleMenuOpen() {
-        this.elementRect = this.template
-            .querySelector('lightning-button-menu')
-            .getBoundingClientRect();
+        this.elementRect = this.refs.buttonMenu.getBoundingClientRect();
 
         const detail = {
             rowKeyValue: this.rowKeyValue,
@@ -178,6 +182,7 @@ export default class PrimitiveCellActions extends LightningElement {
     /************************** LIFECYCLE HOOKS **************************/
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 

package/src/lightning/primitiveCellActions/primitiveCellActions.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveCellButton/primitiveCellButton.html

@@ -1,6 +1,7 @@
 <template>
     <template if:true={isButtonIconType}>
         <lightning-button-icon
+            lwc:ref="buttonIcon"
             variant={variant}
             alternative-text={alternativeText}
             icon-name={iconName}
@@ -14,6 +15,7 @@
     </template>
     <template if:false={isButtonIconType}>
         <lightning-button
+            lwc:ref="button"
             variant={variant}
             label={label}
             icon-name={iconName}

package/src/lightning/primitiveCellButton/primitiveCellButton.js

@@ -1,7 +1,13 @@
-import { LightningElement, api } from 'lwc';
-import { normalizeBoolean } from 'lightning/utilsPrivate';
-
-export default class PrivateCellButton extends LightningElement {
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import { normalizeBoolean, isCSR } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+
+export default class PrivateCellButton extends LightningShadowBaseClass {
     static delegatesFocus = true;
     @api rowKeyValue;
     @api colKeyValue;
@@ -34,7 +40,7 @@ export default class PrivateCellButton extends LightningElement {
     set disabled(value) {
         const newValue = normalizeBoolean(value);
         const oldValue = this._disabled;
-        if (oldValue === false && newValue === true && this.buttonHasFocus) {
+        if (oldValue === false && newValue === true && this.buttonHasFocus && isCSR) {
             this.fireCellFalseBlurred();
         }
         this._disabled = newValue;
@@ -52,6 +58,7 @@ export default class PrivateCellButton extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 
@@ -61,11 +68,9 @@ export default class PrivateCellButton extends LightningElement {
 
     get buttonCustomElement() {
         if (this._connected) {
-            const qs = this.isButtonIconType
-                ? 'lightning-button-icon'
-                : 'lightning-button';
-
-            return this.template.querySelector(qs);
+            return this.isButtonIconType
+                ? this.refs.buttonIcon
+                : this.refs.button;
         }
         return undefined;
     }

package/src/lightning/primitiveCellButton/primitiveCellButton.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveCellCheckbox/checkbox.css

@@ -1,2 +1,4 @@
 @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsVisibility';
+@import './checkbox.lbc.native.css';
+

package/src/lightning/primitiveCellCheckbox/checkbox.html

@@ -1,10 +1,13 @@
 <template>
     <span
         class="slds-checkbox"
+        part="input-checkbox"
         onclick={handleCheckboxContainerClick}
         onmousedown={handleCheckboxContainerMouseDown}
     >
-        <input type="checkbox"
+        <input lwc:ref="input"
+               type="checkbox"
+               part="checkbox"
                name={computedOptionName}
                id="primitive-cell-checkbox-id"
                tabindex={internalTabIndex}
@@ -13,13 +16,14 @@
                onclick={handleCheckboxClick}
                disabled={isDisabled}
                checked={isSelected}>
-        <label
+        <label lwc:ref="label"
             id={labelId}
             class="slds-checkbox__label"
+            part="label-container"
             for="primitive-cell-checkbox-id"
         >
-            <span class="slds-checkbox_faux"></span>
-            <span class="slds-form-element__label slds-assistive-text">
+            <span part="indicator" class="slds-checkbox_faux"></span>
+            <span part="label" class="slds-form-element__label slds-assistive-text">
                 {selectItemAssistiveText}
             </span>
         </label>

package/src/lightning/primitiveCellCheckbox/checkbox.lbc.native.css

@@ -0,0 +1 @@
+@import './input-checkbox.slds.css';