lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,8 +3,7 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
@@ -36,6 +35,8 @@ const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
 const INPUT_PART_ELEMENT_SELECTOR = '[part~="input-text"]';
 const FAUX_INPUT_BUTTON_ELEMENT_SELECTOR = `${INPUT_ELEMENT_SELECTOR}.slds-input_faux`;
 
+const VARIANT_LOOKUP = 'lookup';
+
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
  * 834px is the height of 11 inch iPad in horizontal mode.
@@ -49,7 +50,7 @@ const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
 
-export default class LightningBaseCombobox extends LightningShadowBaseClass {
+export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -126,7 +127,6 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.setupAriaObserverIfAbsent();
         if (isCSR) {
             this.overrideDropdownAlignment();
@@ -328,7 +328,13 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     set variant(value) {
         this._variant = normalizeString(value, {
             fallbackValue: VARIANT.STANDARD,
-            validValues: [VARIANT.STANDARD, 'lookup'],
+            validValues: [
+                VARIANT.STANDARD,
+                VARIANT.LABEL_INLINE,
+                VARIANT.LABEL_STACKED,
+                VARIANT.LABEL_HIDDEN,
+                VARIANT_LOOKUP,
+            ],
         });
     }
 
@@ -501,12 +507,17 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         return this.autocomplete && this.autocomplete !== 'off';
     }
 
-    get isStandardVariant() {
-        return this.variant === VARIANT.STANDARD;
+    get isStandardOrLabelVariant() {
+        return [
+            VARIANT.STANDARD,
+            VARIANT.LABEL_INLINE,
+            VARIANT.LABEL_STACKED,
+            VARIANT.LABEL_HIDDEN,
+        ].includes(this.variant);
     }
 
     get isDefaultReadOnlyTypes() {
-        return this.isStandardVariant || this.hasInputPill;
+        return this.isStandardOrLabelVariant || this.hasInputPill;
     }
 
     /**
@@ -514,7 +525,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
      * Used to determine if input or button should be rendered
      */
     get isUserInputDisabled() {
-        return this.isStandardVariant && !this.isAutocompleteEnabled;
+        return this.isStandardOrLabelVariant && !this.isAutocompleteEnabled;
     }
 
     get _inputAriaReadOnly() {
@@ -522,7 +533,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         // so the user can type and search in the dropdown list
         // For grouped combobox, the input must remain editable because the search is done through
         // the input.
-        if (this._dropdownVisible && this.isStandardVariant) {
+        if (this._dropdownVisible && this.isStandardOrLabelVariant) {
             return true;
         }
 
@@ -750,7 +761,14 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             return;
         }
         // For details: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
-        if (event.isComposing || event.keyCode === 229) {
+        // ctrl + option + arrow right should read the next item in the list and should not update aria-activedescendant.
+        // skip the updation of aria-activedescendant on ctrl.
+        if (
+            event.isComposing ||
+            event.keyCode === 229 ||
+            event.ctrlKey ||
+            event.altKey
+        ) {
             return;
         }
         if (this.hasInputPill) {
@@ -969,7 +987,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         // when FALSE the target is an INPUT element
         // NOTE: isUserInputDisabled is NOT determined by combobox.disabled
         // instead isUserInputDisabled is determined by
-        // this.isStandardVariant && !this.isAutocompleteEnabled (which is an internal variable)
+        // this.isStandardOrLabelVariant && !this.isAutocompleteEnabled (which is an internal variable)
         // this means that the INPUT is often NOT present, and instead a BUTTON is
         // this selector for .start({ target }) is used to
         // position the element from so this.isUserInputDisabled

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -1,14 +1,12 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 import card from './card.html';
 import inline from './inline.html';
 
-export default class LightningBaseComboboxItem extends LightningShadowBaseClass {
+export default class LightningBaseComboboxItem extends LightningElement {
     @api item = {};
 
     connectedCallback() {
-        super.connectedCallback();
         // We want to make sure that the item has 'aria-selected' if it's selectable
         if (this.item.selectable) {
             this.setAttribute('aria-selected', 'false');

package/src/lightning/baseComboboxItem/inline.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './listbox.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './listbox.slds.css'; */

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

@@ -1,11 +1,5 @@
 
  @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;
@@ -18,9 +12,7 @@
    }
 
    :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 */
+     padding-inline-start: 0.125rem;
    }
 
    /* Vertical listbox */
@@ -101,7 +93,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentColor;
+     color: currentcolor;
    }
 
    /* The icon within a plain listbox that indicates if an option has been selected or not. */
@@ -126,9 +118,7 @@
      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 */
+     margin-block-end: 0.125rem;
    }
 
    /* The metadata or secondary text of an entity listbox */
@@ -139,15 +129,15 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentColor;
+     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;
@@ -165,18 +155,14 @@
 
    :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-block-end: 0.125rem;
      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-start: 0.125rem;
      padding-block-end: 0;
-     padding-inline: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0.125rem;
    }
 
    /* Toggle button to show all of the pill selections */
@@ -251,7 +237,7 @@
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;
@@ -264,4 +250,3 @@
      }
    }
  }
- 

package/src/lightning/breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './breadcrumb.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './breadcrumb.slds.css'; */
 
 :host {
     display: list-item;

package/src/lightning/breadcrumb/breadcrumb.js

@@ -1,12 +1,11 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { isCSR } from 'lightning/utilsPrivate';
 const DEFAULT_HREF = '#';
 
 /**
  * An item in the hierarchy path of the page the user is on.
  */
-export default class LightningBreadcrumb extends LightningShadowBaseClass {
+export default class LightningBreadcrumb extends LightningElement {
     static validationOptOut = ['class'];
     /**
      * The URL of the page that the breadcrumb goes to.
@@ -82,7 +81,6 @@ export default class LightningBreadcrumb extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
         // add default CSS classes to custom element tag
         this.classList.add('slds-breadcrumb__item');

package/src/lightning/breadcrumb/breadcrumb.slds.css

@@ -6,9 +6,9 @@
   :host([data-render-mode="shadow"]) [part='breadcrumb'] {
     display: block;
     padding-block-start: 0;
-    padding-inline-end: var(--slds-c-breadcrumb-spacing-inline-end, var(--sds-g-spacing-2, 0.5rem));
+    padding-inline-end: var(--slds-c-breadcrumb-spacing-inlineend, var(--sds-g-spacing-2, 0.5rem));
     padding-block-end: 0;
-    padding-inline-start: var(--slds-c-breadcrumb-spacing-inline-start, var(--sds-g-spacing-2, 0.5rem));
+    padding-inline-start: var(--slds-c-breadcrumb-spacing-inlinestart, var(--sds-g-spacing-2, 0.5rem));
     color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
   }
 

package/src/lightning/breadcrumbs/__docs__/breadcrumbs.md

@@ -43,14 +43,14 @@ Use SLDS styling hooks to customize the component's styles. For example, adjust
 
 ```css
 .my-breadcrumbs {
-    --slds-c-breadcrumbs-spacing-inline-end: 20px;
-    --slds-c-breadcrumbs-spacing-inline-start: 30px;
+    --slds-c-breadcrumbs-spacing-inlineend: 20px;
+    --slds-c-breadcrumbs-spacing-inlinestart: 30px;
 }
 ```
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/breadcrumbs/#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.
 
 #### Accessibility
 

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './breadcrumbs.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './breadcrumbs.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/breadcrumbs/breadcrumbs.js

@@ -1,12 +1,11 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 
 /**
  * A hierarchy path of the page you're currently visiting within the website or app.
  * @slot default Placeholder for lightning-breadcrumb
  */
-export default class LightningBreadcrumbs extends LightningShadowBaseClass {
+export default class LightningBreadcrumbs extends LightningElement {
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('aria-label', 'Breadcrumbs');
         this.setAttribute('role', 'navigation');
     }

package/src/lightning/breadcrumbs/breadcrumbs.slds.css

@@ -8,8 +8,8 @@
      * Reassignments for parity with SLDS blueprint
      * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
      */
-    --slds-c-breadcrumb-spacing-inline-start: var(--slds-c-breadcrumbs-spacing-inline-start);
-    --slds-c-breadcrumb-spacing-inline-end: var(--slds-c-breadcrumbs-spacing-inline-end);
+    --slds-c-breadcrumb-spacing-inlinestart: var(--slds-c-breadcrumbs-spacing-inlinestart);
+    --slds-c-breadcrumb-spacing-inlineend: var(--slds-c-breadcrumbs-spacing-inlineend);
 
     flex-wrap: wrap;
     align-items: flex-start;
@@ -33,7 +33,8 @@
   }
 
   /* Don't include spacing before first breadcrumb */
+
   :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
-    --slds-c-breadcrumb-spacing-inline-start: 0;
+    --slds-c-breadcrumbs-spacing-inlinestart: 0;
   }
 }

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.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button.slds.css'; */

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/buttonGroup/buttonGroup.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './button-group.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-group.slds.css'; */
 
 /* Fix for lihgtning-button-icon not being flush with lightning-button, for details see: W-11658757
  *

package/src/lightning/buttonGroup/buttonGroup.js

@@ -1,9 +1,8 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { BUTTON_GROUP_ORDER } from 'lightning/utilsPrivate';
 
-export default class LightningButtonGroup extends LightningShadowBaseClass {
+export default class LightningButtonGroup extends LightningElement {
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-button-group');
         this.setAttribute('role', 'group');
     }

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.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button-icon.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-icon.slds.css'; */

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';
+/* @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.