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

package/src/lightning/buttonIconStateful/buttonIconStateful.html

@@ -14,7 +14,7 @@
                 aria-atomic={computedAriaAtomic}
                 part="button button-icon">
 
-            <lightning-primitive-icon icon-name={iconName} svg-class="slds-button__icon" variant="bare"></lightning-primitive-icon>
+            <lightning-primitive-icon aria-hidden="true" icon-name={iconName} svg-class="slds-button__icon" variant="bare"></lightning-primitive-icon>
 
             <template if:true={alternativeText}>
                 <span class="slds-assistive-text">{alternativeText}</span>

package/src/lightning/buttonIconStateful/buttonIconStateful.js

@@ -1,9 +1,15 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeString,
     normalizeBoolean,
     reflectAttribute,
+    privateContext,
 } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
@@ -12,11 +18,15 @@ import LightningPrimitiveButton from 'lightning/primitiveButton';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_VARIANT = 'border';
 
+const { setContext, assertContext } = privateContext;
+
 /**
  * An icon-only button that retains state.
  */
 export default class LightningButtonIconStateful extends LightningPrimitiveButton {
     static delegatesFocus = true;
+    // This variable ensures the tooltip is retriggered after being created, as the tooltip variable is now private.
+    _tooltipCreated = false;
 
     /**
      * The name for the button element.
@@ -153,6 +163,7 @@ export default class LightningButtonIconStateful extends LightningPrimitiveButto
 
     // remove-next-line-for-c-namespace
     set tooltip(value) {
+        assertContext(this);
         this.tooltipValue = value;
         if (this._tooltip) {
             this._tooltip.value = value;
@@ -188,7 +199,13 @@ export default class LightningButtonIconStateful extends LightningPrimitiveButto
         this.template.querySelector('button').focus();
     }
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     renderedCallback() {
+        assertContext(this);
         // initialize aria attributes in primitiveButton
         super.renderedCallback();
         // button inherits from primitiveButton, button.css not working in this case.

package/src/lightning/buttonMenu/__docs__/buttonMenu.md

@@ -189,26 +189,9 @@ This example adds padding around the button menu using an SLDS class.
 </lightning-button-menu>
 ```
 
-To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. 
 
-```html
-<lightning-button-menu class="my-button-menu" alternative-text="Show menu">
-    <lightning-menu-item value="Edit" label="Edit"></lightning-menu-item>
-    <lightning-menu-item value="Save" label="Save"></lightning-menu-item>
-</lightning-button-menu>
-```
-
-Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button using the `sds-c-button-color-background` custom property.
-
-```css
-.my-button-menu {
-    --slds-c-button-color-background: orange;
-}
-```
-
-`lightning-button-menu` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties.
-
-Custom properties for button menus work only with particular `lightning-button-menu` variants.
+See [Buttons: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.`lightning-button-menu` contains the same customizable elements as `lightning-button`, which supports `--slds-c-button-*` custom properties. Custom properties for button menus work only with particular `lightning-button-menu` variants.
 
 | CSS Custom Property               | `lightning-button-menu` Variants                                                                            |
 | --------------------------------- | ----------------------------------------------------------------------------------------------------------- |
@@ -219,8 +202,6 @@ Custom properties for button menus work only with particular `lightning-button-m
 | `--slds-c-button-radius-border`    | all                                                                                                         |
 | `--slds-c-button-sizing-border`    | `bare`, `bare-inverse`, `border-inverse` and `container`                                                    |
 
-See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) for a list of CSS custom properties.
-
 For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.
 
 To understand how we implemented SLDS in `lightning-button-menu`, see the **Source Code** section.
@@ -233,7 +214,7 @@ This component's menu items are created only if the button is
 triggered. You can't reference the menu items during initialization
 or if the button isn't triggered yet.
 
-By default, the button menu renders above all modals and the main Salesforce header.
+In Lightning Experience, a button menu that's opened overlays the record edit page or modal, the global header, and record form footer when scrolling.
 
 You can customize the alignment of the dropdown menu relative to the button using `menu-alignment`.
 If you are using `lightning-button-menu` in a container that specifies the `overflow:hidden` CSS property,

package/src/lightning/buttonMenu/__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 } from 'lwc';
 
 export default class ButtonMenuBasic extends LightningElement {}

package/src/lightning/buttonMenu/__examples__/onselect/onselect.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 ButtonMenuOnselect extends LightningElement {

package/src/lightning/buttonMenu/__examples__/variants/variants.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 ButtonMenuVariants extends LightningElement {}

package/src/lightning/buttonMenu/__examples__/withIcon/withIcon.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 ButtonMenuWithIcon extends LightningElement {}

package/src/lightning/buttonMenu/button-icon.slds.css

@@ -516,8 +516,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   border: 0;
   text-align: inherit;
 }
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * part - button-icon
   *
@@ -553,19 +551,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -643,7 +641,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 
@@ -749,3 +747,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     text-transform: none !important;
     white-space: nowrap !important;
   }
+:host([data-render-mode="shadow"][size='large']) [part~='button-icon'],:host([data-render-mode="shadow"][size='medium']) [part~='button-icon'] {
+    height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
+  }

package/src/lightning/buttonMenu/button-menu.slds.css

@@ -1,17 +1,13 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /**
    * Spacing amount between elements in button_icon versus standard button
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
-
   :host([data-render-mode="shadow"]) [part~='button-icon'] {
     gap: var(--slds-g-spacing-1);
   }
-
   /**
    * Note: the remaining CSS in this file is required due to the hardcoded
    * button-icon in lightning-button-menu's template which isn't refactorable
@@ -21,7 +17,6 @@
    * Refactoring to component version is important, until then this code is
    * fragile because it is forked, changes to button-icon won't be reflected here.
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-more {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
@@ -31,66 +26,53 @@
     --sds-c-button-spacing-block: var(--slds-g-sizing-3);
     --sds-c-button-sizing-width: auto;
   }
-
   /**
    * SLDS sizing of the "more" icon is inconsistent and potentially broken.
    * Until fixed, we'll stick with a consistent size across all size variants.
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-more lightning-primitive-icon:last-of-type {
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
-
   /**
    * Sizing hacks
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-xx-small { 
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
     --sds-c-button-sizing-height: var(--slds-g-sizing-5);
     --sds-c-button-sizing-width: var(--slds-g-sizing-5);
   }
-
   :host([data-render-mode="shadow"]) .slds-button_icon-x-small {
     --slds-c-icon-sizing: var(--slds-g-sizing-4);
     --sds-c-button-sizing-height: var(--slds-g-sizing-6);
     --sds-c-button-sizing-width: var(--slds-g-sizing-6);
   }
-
   :host([data-render-mode="shadow"]) .slds-button_icon-small {
     --sds-c-button-sizing-height: var(--slds-g-sizing-7);
     --sds-c-button-sizing-width: var(--slds-g-sizing-7);
   }
-
   :host([data-render-mode="shadow"]) .slds-button_icon-large {
     --slds-c-icon-sizing: var(--slds-g-sizing-7);
     --sds-c-button-sizing-height: var(--slds-g-sizing-10);
     --sds-c-button-sizing-width: var(--slds-g-sizing-10);
   }
-
   /**
   * Note: Styling below for bare and bare-inverse sizes 
   * are not yet supported but should be used once 
   * the fixes are in. Additional styles would need to 
   * be added as well.
   */
-
   :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
-
   :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
     --slds-c-icon-sizing: var(--slds-g-sizing-4);
   }
-
   :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
     --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
-
   /**
    * Variant Hacks - Container
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-container {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -99,22 +81,18 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
-
   /**
    * Variant Hacks - Border Filled
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-border-filled {
     --slds-c-buttonicon-color-background: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
   }
-
   /**
    * Variant Hacks - Border Inverse
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-border-inverse {
     /* Border */
     --slds-c-buttonicon-color-border: var(--slds-g-color-brand-base-100);
@@ -131,7 +109,6 @@
     --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-brand-base-95);
     --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-brand-base-90);
   }
-
   :host([data-render-mode="shadow"]) .slds-button_icon-inverse {
     /* Background */
     --slds-c-buttonicon-color-background-active: transparent;
@@ -157,11 +134,9 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
-
   /**
    * Variant Hacks - Bare
    */
-
   :host([data-render-mode="shadow"]) .slds-button_icon-bare {
     --slds-c-buttonicon-color-border: transparent;
     --slds-c-buttonicon-color-border-hover: transparent;
@@ -173,7 +148,6 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
-
   :host([data-render-mode="shadow"]) [part~='button-icon'][label] {
     --sds-c-button-sizing-height: auto;
     --sds-c-button-sizing-width: auto;

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1,6 +1,6 @@
 @import './buttonMenu.lbc.native.css';
-
+@import './buttonMenu.lbc.synthetic.css';
 .fix-slds-button_icon-border-filled {
     height: unset;
     line-height: var(--slds-c-button-line-height, var(--sds-c-button-line-height, 1.875rem));
-}
+}

package/src/lightning/buttonMenu/buttonMenu.html

@@ -24,7 +24,7 @@
             <lightning-primitive-icon icon-name="utility:down" svg-class="slds-button__icon slds-button__icon_x-small slds-m-left_xx-small" variant="bare"></lightning-primitive-icon>
         </template>
 
-        <span class="slds-assistive-text">{computedAlternativeText}</span>
+        <span id="button-label" class="slds-assistive-text">{computedAlternativeText}</span>
     </button>
     <template if:true={_dropdownOpened}>
         <div
@@ -39,6 +39,7 @@
             </template>
             <template if:false={isLoading}>
                 <div
+                    aria-labelledby="button-label"
                     class="slds-dropdown__list slds-dropdown_length-with-icon-10"
                     role="menu"
                     onprivateselect={handleMenuItemPrivateSelect}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelLoading from '@salesforce/label/LightningButtonMenu.loading';
 import labelShowMenu from '@salesforce/label/LightningButtonMenu.showMenu';
 import { api, track } from 'lwc';
@@ -12,6 +17,7 @@ import {
     buttonGroupOrderClass,
     isCSR,
     reflectAttribute,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import {
     handleKeyDownOnMenuItem,
@@ -26,11 +32,12 @@ import {
 // remove-next-line-for-c-namespace
 import { Tooltip } from 'lightning/tooltipLibrary';
 
+const { setContext, assertContext } = privateContext;
+
 const i18n = {
     loading: labelLoading,
     showMenu: labelShowMenu,
 };
-
 const menuItemTagName = 'LIGHTNING-MENU-ITEM';
 // @W-13602003 Fallback menuItemClasSelector is required for menu items that are not lightning-menu-item
 const menuItemClasSelector = `.slds-dropdown__list .slds-dropdown__item`;
@@ -58,7 +65,8 @@ const buttonPartsNoLabel = 'button button-icon';
 export default class LightningButtonMenu extends LightningShadowBaseClass {
     static validationOptOut = ['class'];
     static delegatesFocus = true;
-
+    // This variable ensures the tooltip is retriggered after being created, as the tooltip variable is now private.
+    _tooltipCreated = false;
     /**
      * For internal use only
      * If this is present, then the button-menu is being used on the datatable
@@ -181,9 +189,13 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     _boundingRect = {};
     // remove-next-line-for-c-namespace
     _tooltip = null;
-
     _needsFocusAfterRender = false;
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
@@ -383,6 +395,7 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
 
     // remove-next-line-for-c-namespace
     set tooltip(value) {
+        assertContext(this);
         if (this._tooltip) {
             this._tooltip.value = value;
         } else if (value && isCSR) {
@@ -495,7 +508,8 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
             const useMoreContainer =
                 this.variant === 'container' ||
                 this.variant === 'bare-inverse' ||
-                this.variant === 'border-inverse';
+                this.variant === 'border-inverse' ||
+                this.variant === 'bare';
 
             classes.add({
                 'slds-button_icon': !isDropdownIcon,
@@ -785,6 +799,7 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     }
 
     getMenuItemByIndex(index) {
+        assertContext(this);
         return this.getMenuItems()[index];
     }
 

package/src/lightning/buttonMenu/buttonMenu.lbc.synthetic.css

@@ -0,0 +1,5 @@
+.slds-dropdown{
+    width: max-content;
+}
+
+