lightning-base-components 1.18.8-alpha → 1.19.1-alpha

package/src/lightning/button/__docs__/button.md

@@ -170,7 +170,7 @@ Custom properties for buttons work only with particular `lightning-button` varia
 
 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](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+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`, see the **Source Code** section.
 
@@ -187,12 +187,12 @@ We don't support changing the label alignment on the button. To adjust the paddi
 To address text wrapping in long labels when the browser viewport is reduced, customize the line height and block spacing of the button label using SLDS styling hooks.
 
 -   `--slds-c-button-line-height`
--   `--slds-c-button-spacing-block-start`
--   `--slds-c-button-spacing-block-end`
+-   `--slds-c-button-spacing-blockstart`
+-   `--slds-c-button-spacing-blockend`
 
 On mobile screens, we recommend setting the button size to
 44x44 px. If you have more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44x44 px. For more information, see [Follow Accessible Mobile Design Guidelines
-](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.mobile_a11y).
+](https://developer.salesforce.com/docs/platform/lwc/guide/mobile-a11y).
 
 #### Accessibility
 
@@ -203,7 +203,7 @@ If you create an icon-only button using `lightning-button`, provide an accessibl
 To provide a text label that's not visible on the screen, use `aria-label`.
 
 ```html
-<lightning-button 
+<lightning-button
     aria-label="Download"
     icon-name="utility:download"
     variant="base"></lightning-button>
@@ -214,7 +214,7 @@ To associate the button with text from another element, use `aria-labelledby`.
 ```html
 <h2 id="downloadLabel">Download Files</h2>
 <h3 id="downloadDesc">View and make changes to your files</h3>
-<lightning-button 
+<lightning-button
     aria-labelledby="downloadLabel downloadDesc"
     icon-name="utility:download"
     variant="base"></lightning-button>
@@ -223,8 +223,8 @@ To associate the button with text from another element, use `aria-labelledby`.
 To use `aria-label` with additional descriptive text, use `aria-describedby`.
 
 ```html
-<lightning-button 
-    aria-label="Close" 
+<lightning-button
+    aria-label="Close"
     aria-describedby="descriptionClose"
     icon-name="utility:close"
     variant="base"></lightning-button>

package/src/lightning/button/button.js

@@ -239,6 +239,7 @@ export default class LightningButton extends LightningPrimitiveButton {
      * the buttons.
      */
     connectedCallback() {
+        super.connectedCallback();
         // Set `data-render-mode` attribute in native shadow mode
         if (!this.template.synthetic) {
             this.setAttribute('data-render-mode', 'shadow');

package/src/lightning/button/button.slds.css

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }

package/src/lightning/buttonGroup/__docs__/buttonGroup.md

@@ -81,4 +81,4 @@ You can customize the `lightning-button-*` base components you use within `light
 
 [lightning-navigation](bundle/lightning-navigation/documentation)
 
-[Navigate to Pages](docs/component-library/documentation/lwc/lwc.use_navigate)
+[Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -151,7 +151,7 @@ Custom properties for button icons work only with particular `lightning-button`
 
 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](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+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-icon`, see the **Source Code** section.
 

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

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -572,7 +572,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-background-active: var(
       --slds-c-buttonicon-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
+      transparent
     );
 
     /* Spacing */
@@ -600,7 +600,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
+      var(--slds-c-buttonicon-color-border-focus)
     );
 
     /* Shadow */
@@ -890,7 +890,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * End part
       */
   :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
   }
 
   /**

package/src/lightning/buttonIcon/buttonIcon.js

@@ -318,6 +318,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * the buttons.
      */
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         if (isCSR) {
             this.dispatchEvent(

package/src/lightning/buttonIconStateful/__docs__/buttonIconStateful.md

@@ -142,7 +142,7 @@ Custom properties for stateful button icons work only with particular `lightning
 
 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](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+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-icon-stateful`, see the **Source Code** section.
 

package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css

@@ -205,7 +205,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -527,7 +527,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -535,7 +535,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -612,7 +612,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-background-active: var(
       --slds-c-buttonicon-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
+      transparent
     );
 
     /* Spacing */
@@ -640,7 +640,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
+      var(--slds-c-buttonicon-color-border-focus)
     );
 
     /* Shadow */
@@ -930,7 +930,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * End part
       */
   :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
   }
 
   /**

package/src/lightning/buttonIconStateful/buttonIconStateful.css

@@ -1,2 +1,6 @@
 /* @import 'lightning/sldsCommon';
 @import './button-icon-stateful.slds.css'; */
+
+.slds-button_icon:not(.slds-button_icon-small, .slds-button_icon-x-small, .slds-button_icon-xx-small) {
+    height: var(--slds-c-buttonicon-sizing-height, 2rem);
+}

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

@@ -221,7 +221,7 @@ Custom properties for button menus work only with particular `lightning-button-m
 
 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](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+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,6 +233,8 @@ 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.
+
 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,
 setting `menu-alignment="auto"` ensures that the dropdown menu is not hidden from view when the menu is toggled. For mobile devices, set `menu-alignment="auto"` to ensure proper display of the menu.

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

@@ -151,39 +151,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -193,15 +193,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -297,7 +297,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -333,7 +333,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -655,7 +655,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -663,7 +663,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -740,7 +740,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-background-active: var(
       --slds-c-buttonicon-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
+      transparent
     );
 
     /* Spacing */
@@ -768,7 +768,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
+      var(--slds-c-buttonicon-color-border-focus)
     );
 
     /* Shadow */
@@ -1058,7 +1058,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * End part
       */
   :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
   }
 
   /**
@@ -1150,7 +1150,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1174,15 +1174,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"])  
+.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem); 
+    width: var(--sds-g-spacing-4, 1rem);
     height: var(--sds-g-spacing-4, 1rem);
     position: absolute;
     transform: rotate(45deg);
@@ -1200,7 +1200,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1221,7 +1221,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1247,7 +1247,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1263,19 +1263,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     background-color: inherit;
 
     /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
+    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
     margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     z-index: -1;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
   }
 
@@ -1296,7 +1293,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1320,7 +1317,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1350,7 +1347,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
-    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1371,7 +1368,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1395,7 +1392,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1425,7 +1422,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
-    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1519,15 +1516,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
     --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
     --sds-c-overlay-spacing-inline-start: 0;
     --sds-c-overlay-spacing-inline-end: 0;
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-dropdown-spacing-block-start,
+      --slds-c-dropdown-spacing-blockstart,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-block-end,
+      --slds-c-dropdown-spacing-blockend,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
 
@@ -1541,11 +1538,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     /* stylelint-disable */
     margin-block-start: calc(
-      var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockend, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     /* stylelint-enable */
@@ -1585,7 +1582,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: 100%;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"])  
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
@@ -1713,7 +1710,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 5
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1724,7 +1720,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 7
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1735,7 +1730,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 10
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1743,7 +1737,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1751,7 +1744,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1759,7 +1751,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 

package/src/lightning/buttonMenu/buttonMenu.js

@@ -29,6 +29,9 @@ const i18n = {
 };
 
 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`;
+const menuItemSelectors = `${menuItemTagName}, ${menuItemClasSelector}`;
 
 const validMenuAlignments = [
     'left',
@@ -715,7 +718,7 @@ export default class LightningButtonMenu extends LightningElement {
     }
 
     getMenuItems() {
-        return Array.from(this.querySelectorAll(menuItemTagName));
+        return Array.from(this.querySelectorAll(menuItemSelectors));
     }
 
     getMenuItemByIndex(index) {

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -149,13 +149,13 @@ Custom properties for stateful buttons work only with particular `lightning-butt
 
 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](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+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-stateful`, see the **Source Code** section.
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Accessibility