lightning-base-components 1.16.6-alpha → 1.16.8-alpha

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

@@ -0,0 +1,267 @@
+
+ @supports (--styling-hooks: '') {
+   :host([data-render-mode="shadow"]) [part~='listbox'] {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     --_listbox-spacing-xxx-small: 0.125rem;
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Horizontal listbox - used for pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
+     display: inline-flex;
+     flex-wrap: wrap;
+     align-items: center;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+     display: flex;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Vertical listbox */
+   :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(--sds-g-color-neutral-base-95, #f3f3f3);
+     text-decoration: none;
+   }
+
+   :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 */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+     padding-block: var(--sds-g-spacing-1, 0.25rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Modifies the listbox option if it contains a plain object or string */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+     padding-block: var(--sds-g-spacing-2, 0.5rem);
+     padding-inline: var(--sds-g-spacing-3, 0.75rem);
+   }
+
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+     cursor: pointer;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+     outline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+   }
+
+   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+   /* the _vertical variations only apply to combobox's */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   /* If the listbox option has metadata or secondary information that sits below its primary text */
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+     margin-block-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+     display: inline-block;
+     vertical-align: middle;
+   }
+
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+     font-weight: 700;
+   }
+
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+     width: var(--sds-g-sizing-7, 1.5rem);
+     display: inline-flex;
+     align-content: center;
+     align-items: center;
+     justify-content: center;
+     color: var(--sds-g-color-neutral-base-50, #747474);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
+     color: currentColor;
+   }
+
+   /* The icon within a plain listbox that indicates if an option has been selected or not. */
+   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+     opacity: 0;
+     fill: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* Modifier that makes selected icon visible */
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+     opacity: 1;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+     color: var(--sds-g-color-brand-base-50, #0176d3);
+   }
+
+   /* The main text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
+     max-width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     display: block;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* The metadata or secondary text of an entity listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+     display: block;
+     margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+     color: var(--sds-g-color-neutral-base-30, #444444);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
+     color: currentColor;
+   }
+  
+   /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
+
+   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+
+   /* The container of pill selections found inside of a combobox group */
+   
+   /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
+     position: relative;
+     padding: 0;
+     padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     height: 1.875rem;
+     overflow: hidden;
+   }
+
+   /* Expanded state of a selection group */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+     height: auto;
+     padding: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
+     padding-block-start: 0;
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0;
+   }
+
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
+     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-end: 0;
+     padding-inline: var(--_listbox-spacing-xxx-small);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+   }
+
+   /* Toggle button to show all of the pill selections */
+   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+     position: absolute;
+     top: 50%;
+     transform: translateY(-50%);
+     right: var(--sds-g-spacing-2, 0.5rem);
+   }
+
+   :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(--sds-g-spacing-3, 0.75rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+     min-width: var(--sds-g-sizing-10, 3rem);
+   }
+
+   :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(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+   }
+
+   :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(--sds-g-spacing-3, 0.75rem);
+     margin-inline-end: 0;
+   }
+
+   @media (max-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(--sds-g-spacing-3, 0.75rem);
+       margin-inline-end: 0;
+     }
+   }
+ }
+ 

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,6 +1,7 @@
 :host {
     display: block;
 }
+
 div.slds-breadcrumb {
     list-style: none;
 }

package/src/lightning/button/__examples__/accesskey/accesskey.css

@@ -2,7 +2,7 @@ kbd {
     background-color: #eee;
     border-radius: 3px;
     border: 1px solid #b4b4b4;
-    box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
     color: #333;
     display: inline-block;
     font-family: consolas,"Liberation Mono",courier,monospace;

package/src/lightning/button/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

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

@@ -167,6 +167,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
 
+    /* Border radius - shared */
+    --sds-c-button-radius-border-startstart: var(
+      --slds-c-button-neutral-radius-border-startstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endstart: var(
+      --slds-c-button-radius-border-endstart,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endstart, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-startend: var(
+      --slds-c-button-radius-border-startend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-startend, var(--slds-s-button-radius-border))
+      )
+    );
+    --sds-c-button-radius-border-endend: var(
+      --slds-c-button-radius-border-endend,
+      var(
+        --slds-c-button-neutral-radius-border,
+        var(--slds-s-button-radius-border-endend, var(--slds-s-button-radius-border))
+      )
+    );
+
     /* Background color */
     --sds-c-button-color-background: var(
       --slds-c-button-neutral-color-background,
@@ -225,7 +255,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-color-background-disabled: var(--slds-c-button-neutral-color-background-disabled);
   }
 
-  :host([data-render-mode="shadow"][variant='brand'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='brand'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(
@@ -275,7 +305,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='brand-outline'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='brand-outline'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -290,7 +320,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-90, #e5e5e5);
   }
 
-  :host([data-render-mode="shadow"][variant='inverse'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='inverse'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: transparent;
@@ -305,7 +335,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
   }
 
-  :host([data-render-mode="shadow"][variant='destructive'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='destructive'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-error-base-40, #ba0517);
@@ -322,7 +352,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='success'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='success'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-success-base-50, #2e844a);
@@ -339,7 +369,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='destructive-text'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='destructive-text'])::part(button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -364,7 +394,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    *
    * E.g. --slds-c-button-color-background
    */
-  :host([data-render-mode="shadow"][variant='base'])::part(:host([data-render-mode="shadow"]) button),:host([data-render-mode="shadow"][variant='text'])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][variant='base'])::part(button),:host([data-render-mode="shadow"][variant='text'])::part(button) {
     --sds-c-button-spacing-inline: 0.25rem;
     --sds-c-button-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
     --sds-c-button-color-border: transparent;
@@ -374,21 +404,21 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-button-color-background-active: transparent;
   }
 
-  :host([data-render-mode="shadow"][stretch])::part(:host([data-render-mode="shadow"]) button) {
+  :host([data-render-mode="shadow"][stretch])::part(button) {
     --sds-c-button-width: 100%;
   }
 
   /* center button except on base/text variant */
-  :host(:not([variant='base'], [variant='text']))::part(:host([data-render-mode="shadow"]) button) {
+  :host(:not([variant='base'], [variant='text']))::part(button) {
     justify-content: center;
   }
 
-  :host([data-render-mode="shadow"])::part(:host([data-render-mode="shadow"]) start) {
+  :host([data-render-mode="shadow"])::part(start) {
     display: inline-flex;
     padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"])::part(:host([data-render-mode="shadow"]) end) {
+  :host([data-render-mode="shadow"])::part(end) {
     display: inline-flex;
     padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
   }

package/src/lightning/buttonGroup/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonIcon/__examples__/basic/basic.css

@@ -1,3 +1,3 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }

package/src/lightning/buttonIcon/__examples__/inverse/inverse.css

@@ -1,3 +1,3 @@
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonIcon/buttonIcon.js

@@ -2,7 +2,7 @@ import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
-import { Tooltip } from 'lightning/tooltipLibrary';
+import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './buttonIcon.html';
 
@@ -109,16 +109,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     set tooltip(value) {
+        this.tooltipValue = value;
         if (this._tooltip) {
             this._tooltip.value = value;
-        } else if (value) {
-            // Note that because the tooltip target is a child element it may not be present in the
-            // dom during initial rendering.
-            this._tooltip = new Tooltip(value, {
-                root: this,
-                target: () => this.template.querySelector('button'),
-            });
-            this._tooltip.initialize();
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
         }
     }
 
@@ -136,6 +131,23 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
 
     // remove-next-line-for-c-namespace
     _tooltip = null;
+    tooltipValue = null;
+    tooltipType = TooltipType.Info;
+    rendered = false;
+
+    /**
+     * Generate a tooltip with the specified value and current tooltip type
+     *
+     * @param {*} value - The plain text string for the tooltip
+     */
+    createTooltip(value) {
+        this._tooltip = new Tooltip(value, {
+            root: this,
+            target: () => this.template.querySelector('button'),
+            type: this.tooltipType,
+        });
+        this._tooltip.initialize();
+    }
 
     // this is there because raptor currently doesnt support inheritance
     render() {
@@ -296,6 +308,17 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     connectedCallback() {
         this._connected = true;
+        this.dispatchEvent(
+            new CustomEvent('privatebuttoniconregister', {
+                cancelable: true,
+                bubbles: true,
+                detail: {
+                    setTooltipType: (tooltipType) => {
+                        this.tooltipType = tooltipType;
+                    },
+                },
+            })
+        );
     }
 
     renderedCallback() {
@@ -303,13 +326,14 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.renderedCallback();
 
         // remove-next-line-for-c-namespace
-        if (this._tooltip && !this._tooltip.initialized) {
-            this._tooltip.initialize();
+        if (this.tooltipValue) {
+            this.createTooltip(this.tooltipValue);
         }
 
         // button inherits from primitiveButton, button.css not working in this case.
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
+        this.rendered = true;
     }
 
     disconnectedCallback() {

package/src/lightning/buttonIconStateful/__examples__/basic/basic.css

@@ -1,3 +1,3 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }

package/src/lightning/buttonIconStateful/__examples__/variants/variants.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/__examples__/basic/basic.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/__examples__/onselect/onselect.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/__examples__/variants/variants.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/__examples__/withIcon/withIcon.css

@@ -1,7 +1,7 @@
 .lgc-bg {
-    background-color: rgb(242, 242, 242);
+    background-color: rgb(242 242 242);
 }
 
 .lgc-bg-inverse {
-    background-color: rgb(22, 50, 92);
+    background-color: rgb(22 50 92);
 }

package/src/lightning/buttonMenu/buttonMenu.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import "./dropdown.slds.css";

package/src/lightning/buttonMenu/buttonMenu.html

@@ -11,9 +11,12 @@
         onblur={handleBlur}
         onfocus={handleFocus}
         type="button"
+        aria-controls="lgt-button-menu-dropdown"
+        id="lgt-button-menu"
         onmousedown={handleButtonMouseDown}
-        tabindex={tabIndex}>
-
+        tabindex={tabIndex}
+        part="button button-icon">
+        
         <abbr if:true={isDraft} class="slds-indicator_unsaved slds-p-right_xx-small" title={draftAlternativeText}>*</abbr>
         {label}
 
@@ -26,17 +29,21 @@
         <span class="slds-assistive-text">{computedAlternativeText}</span>
     </button>
     <template if:true={_dropdownOpened}>
-        <div class={computedDropdownClass}
-             onmousedown={handleDropdownMouseDown}
-             onmouseup={handleDropdownMouseUp}
-             onmouseleave={handleDropdownMouseLeave}
-             onscroll={handleDropdownScroll}>
+        <div
+            part="overlay dropdown" 
+            class={computedDropdownClass}
+            onmousedown={handleDropdownMouseDown}
+            onmouseup={handleDropdownMouseUp}
+            onmouseleave={handleDropdownMouseLeave}
+            onscroll={handleDropdownScroll}>
             <template if:true={isLoading}>
                 <lightning-spinner size="small" alternative-text={computedLoadingStateAlternativeText}></lightning-spinner>
             </template>
             <template if:false={isLoading}>
                 <div class="slds-dropdown__list slds-dropdown_length-with-icon-10"
+                    id="lgt-button-menu-dropdown"
                     role="menu"
+                    aria-labelledby="lgt-button-menu"
                     onprivateselect={handleMenuItemPrivateSelect}
                     onprivateblur={handlePrivateBlur}
                     onprivatefocus={handlePrivateFocus}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -158,6 +158,10 @@ export default class LightningButtonMenu extends LightningElement {
         if (this.isDraft) {
             this.classList.add('slds-is-unsaved');
         }
+
+        if (!this.template.synthetic) {
+            this.template.host.setAttribute('data-render-mode', 'shadow');
+        }
     }
 
     disconnectedCallback() {
@@ -768,7 +772,10 @@ export default class LightningButtonMenu extends LightningElement {
             // prevent blur during a non-blurring focus change
             // set lock so that while focusing on menutitem, menu doesnt close
             this.cancelBlur();
-            menuItem.focus();
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                menuItem.focus();
+            });
         }
         // allowBlur is called when the menu items receives focus
     }