lightning-base-components 1.21.2-alpha → 1.21.4-alpha

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

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

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -43,18 +43,22 @@ export default class LightningBaseComboboxItem extends LightningShadowBaseClass
     }
 
     @api
-    highlight() {
-        this.toggleHighlight(true);
+    highlight(isSelected) {
+        this.toggleHighlight(true, isSelected);
     }
 
     @api
-    removeHighlight() {
-        this.toggleHighlight(false);
+    removeHighlight(isSelected) {
+        this.toggleHighlight(false, isSelected);
     }
 
-    toggleHighlight(highlighted) {
+    toggleHighlight(highlighted, isSelected) {
         if (this.item.selectable) {
-            this.setAttribute('aria-selected', highlighted ? 'true' : 'false');
+            //Only announce the selected item from the list, not the hovered or focused ones.
+            this.setAttribute(
+                'aria-selected',
+                isSelected === 'true' ? true : false
+            );
             this.classList.toggle('slds-has-focus', highlighted);
         }
     }

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

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

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

@@ -1,89 +1,72 @@
 
- @supports (--styling-hooks: '') {
-   /* Horizontal listbox - used for pill container */
+  /* 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 {
+   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
     display: flex;
   }
-
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
      padding-inline-start: 0.125rem;
    }
-
-  /* Vertical listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+   /* 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(--slds-g-color-surface-container-2);
     text-decoration: none;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+   :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 {
+   /* 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(--slds-g-spacing-1);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  /* Modifies the listbox option if it contains a plain object or string */
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+   /* 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(--slds-g-spacing-2);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
     padding-block: var(--slds-g-spacing-2);
     padding-inline: var(--slds-g-spacing-3);
   }
-
-  /* Choosable option within listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+   /* Choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
     cursor: pointer;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
     outline: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
     color: var(--slds-g-color-disabled-2);
   }
-
-  /* ------------------------------- 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 {
+   /* ------------------------------- 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(--slds-g-spacing-2);
   }
-
-  /* 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 {
+   /* 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(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+   :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 {
+   /* Header for choosable option within listbox */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
     font-size: var(--slds-g-font-scale-neg-1);
     font-weight: 700;
   }
-
-  /* Container for listbox option icon */
-  :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+   /* Container for listbox option icon */
+   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
     width: var(--slds-g-sizing-7);
     display: inline-flex;
     align-content: center;
@@ -91,26 +74,21 @@
     justify-content: center;
     color: var(--slds-g-color-accent-2);
   }
-
    :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 {
+   /* 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(--slds-g-color-accent-2);
   }
-
-  /* Modifier that makes selected icon visible */
-  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+   /* 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 {
+   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
     color: var(--slds-g-color-accent-2);
   }
-
    /* The main text of an entity listbox */
    :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
      max-width: 100%;
@@ -120,24 +98,18 @@
      display: block;
      margin-block-end: 0.125rem;
    }
-
-  /* The metadata or secondary text of an entity listbox */
-  :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+   /* 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(--slds-g-spacing-1) * -1);
     color: var(--slds-g-color-neutral-base-30);
   }
-
    :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 ---------------------------------------- */
-
+   /* ---------------------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;
@@ -146,97 +118,78 @@
      height: 1.875rem;
      overflow: hidden;
    }
-
-  /* Expanded state of a selection group */
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+   /* 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;
      padding-block-end: 0.125rem;
      padding-inline: 0;
    }
-
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
      padding-block-start: 0.125rem;
      padding-block-end: 0;
      padding-inline: 0.125rem;
    }
-
-  /* Toggle button to show all of the pill selections */
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+   /* 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(--slds-g-spacing-2);
   }
-
-  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+   :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 {
+   /* 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 {
+   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
     margin-inline-end: var(--slds-g-spacing-3);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
     min-width: var(--slds-g-sizing-10);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__body {
+   :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"]) 
+   :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 {
+   :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 {
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
     margin-inline-end: var(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
     margin-inline-start: var(--slds-g-spacing-1);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
     margin-inline-end: var(--slds-g-spacing-5);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
     margin-inline-start: var(--slds-g-spacing-5);
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
     flex: 0 1 auto;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media_center {
+   :host([data-render-mode="shadow"]) .slds-media_center {
     align-items: center;
   }
-
-  :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
     margin-block: 0;
     margin-inline-start: var(--slds-g-spacing-3);
     margin-inline-end: 0;
   }
-
    @media (width <= 48em) {
 
     :host([data-render-mode="shadow"]) .slds-media_responsive {
@@ -249,4 +202,3 @@
        margin-inline-end: 0;
      }
    }
- }

package/src/lightning/baseFormattedText/baseFormattedText.js

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from 'lwc';
 import {
+    isTextIgnoreRTL,
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
 } from 'lightning/utilsPrivate';
@@ -66,7 +67,6 @@ export default class BaseFormattedText extends LightningElement {
     }
 
     get ignoreRTL() {
-        // Ignoring RTL for hex color codes
-        return this.isString && this.value.match(/^#[0-9abcdef]{6}$/i) !== null;
+        return isTextIgnoreRTL(this.value);
     }
 }

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

@@ -274,8 +274,9 @@ Use the following accessibility and `aria` attributes on `lightning-button`.
 | aria-expanded    | boolean           | Indicates whether a collapsible element that's controlled by the button is expanded or collapsed. To reference the controlled element, use `aria-controls`.                                                                                                                                                                                          |
 | aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'.                                                                                                                                                                                                                |
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
-| aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.  |
+| aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.                                                                                                                                                                                                                             |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).                      |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
 

package/src/lightning/button/button.js

@@ -43,10 +43,9 @@ export default class LightningButton extends LightningPrimitiveButton {
     @api label;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;
@@ -266,7 +265,8 @@ export default class LightningButton extends LightningPrimitiveButton {
         // change host style to disable pointer event.
         this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
         // setup kinetics
-        if (hasAnimation() && !this._disableAnimation) {
+
+        if (!this.disabled && hasAnimation() && !this._disableAnimation) {
             const attributes = getKineticsAttributes(this._normalizedVariant);
             attributes.forEach(({ name, value }) => {
                 this.button.setAttribute(name, value);

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

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

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

@@ -205,6 +205,7 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon`
 | aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'. To create a button that displays a list of menu items when clicked, use `lightning-button-menu` instead.                                                                                                       |
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information, see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).       |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
 

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

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

package/src/lightning/buttonIcon/buttonIcon.html

@@ -16,7 +16,7 @@
             part="button button-icon"
             tabindex={tabIndex}>
 
-        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare" exportparts="icon"></lightning-primitive-icon>
 
         <template if:true={alternativeText}>
             <span class="slds-assistive-text">{alternativeText}</span>

package/src/lightning/buttonIcon/buttonIcon.js

@@ -35,14 +35,15 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     @api value;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;
 
+    _variant = DEFAULT_VARIANT;
+
     /**
      * The variant changes the appearance of button-icon.
      * Accepted variants include bare, container, brand, border, border-filled, bare-inverse, and border-inverse.
@@ -51,11 +52,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default border
      */
-    _variant = DEFAULT_VARIANT;
     @api
     get variant() {
         return this._originalVariant;
     }
+
     set variant(val) {
         this._originalVariant = val;
         this._variant = this.normalizeVariant(val);
@@ -82,6 +83,8 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api iconClass;
 
+    _size = DEFAULT_SIZE;
+
     /**
      * The size of the button-icon. For the bare variant, options include x-small, small, medium, and large.
      * For non-bare variants, options include xx-small, x-small, small, and medium.
@@ -90,8 +93,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default medium
      */
-    _size = DEFAULT_SIZE;
-
     @api
     get size() {
         return this._originalSize;
@@ -119,16 +120,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api alternativeText;
 
-    // remove-next-line-for-c-namespace
-    set tooltip(value) {
-        this.tooltipValue = value;
-        if (this._tooltip) {
-            this._tooltip.value = value;
-        } else if (value && this.rendered) {
-            this.createTooltip(value);
-        }
-    }
-
     // remove-next-line-for-c-namespace
     /**
      * Text to display when the user mouses over or focuses on the button.
@@ -141,6 +132,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         return this._tooltip ? this._tooltip.value : undefined;
     }
 
+    // remove-next-line-for-c-namespace
+    set tooltip(value) {
+        this.tooltipValue = value;
+        if (this._tooltip) {
+            this._tooltip.value = value;
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
+        }
+    }
+
     // remove-next-line-for-c-namespace
     _tooltip = null;
     tooltipValue = null;

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

@@ -2,8 +2,8 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   /* :host::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
     display: inline-flex;
     color: var(--slds-c-buttoniconstateful-color-foreground);
@@ -40,6 +40,7 @@
   }
 
   /* :host([variant='border-filled'])::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"][variant='border-filled']) [part='button-icon-stateful'] {
     --slds-c-buttonicon-borderfilled-color-background: var(
       --slds-c-buttoniconstateful-borderfilled-color-background
@@ -67,6 +68,7 @@
   }
 
   /* :host([variant='border-inverse'])::part(button-icon-stateful), */
+
   :host([data-render-mode="shadow"][variant='border-inverse']) [part='button-icon-stateful'] {
     --slds-c-buttonicon-borderinverse-color-border: var(
       --slds-c-buttoniconstateful-borderinverse-color-border
@@ -96,6 +98,7 @@
   }
 
   /* Selected + Variants */
+
   :host([data-render-mode="shadow"][selected]) [part='button-icon-stateful'] {
     --slds-c-buttoniconstateful-color-foreground: var(
       --slds-c-buttoniconstateful-color-foreground-selected,
@@ -242,4 +245,3 @@
       var(--slds-c-buttoniconstateful-color-background-selected-focus)
     );
   }
-}

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

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

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

@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

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

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))