lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,7 +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 { LightningElement, api, track } from 'lwc';
+import { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
@@ -20,7 +20,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-
+import { isCSR } from 'lightning/utilsPrivate';
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -32,6 +32,8 @@ const i18n = {
 const SMALL_MIN_HEIGHT = '2.25rem';
 const MEDIUM_MIN_HEIGHT = '6.75rem';
 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`;
 
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
@@ -48,6 +50,7 @@ const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -73,23 +76,24 @@ export default class LightningBaseCombobox extends LightningElement {
     @api required = false;
     @api placeholder = i18n.placeholder;
     @api inputLabel;
+    @api customRole = 'combobox';
+    @api customAriaHasPopup = 'listbox';
 
     @api name;
     @api inputPill;
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    @track _showDropdownActivityIndicator = false;
+    _showDropdownActivityIndicator = false;
     @track _items = [];
-    @track _disabled = false;
-    @track _dropdownVisible = false;
-    @track _hasDropdownOpened = false;
-    @track _highlightedOptionElementId = null;
-    @track _variant;
-    @track _dropdownHeight = 'standard';
-    @track _readonly = false;
-    @track _logoLoaded = false;
-
+    _disabled = false;
+    _dropdownVisible = false;
+    _hasDropdownOpened = false;
+    _highlightedOptionElementId = null;
+    _variant;
+    _dropdownHeight = 'standard';
+    _readonly = false;
+    _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -98,11 +102,13 @@ export default class LightningBaseCombobox extends LightningElement {
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
     _editingMode = false;
+    _connected = false;
+    ariaObserver = null;
 
     constructor() {
         super();
         this._events = new BaseComboboxEvents(this);
-        this.ariaObserver = new AriaObserver(this);
+        this.setupAriaObserverIfAbsent();
     }
 
     renderedCallback() {
@@ -114,19 +120,15 @@ export default class LightningBaseCombobox extends LightningElement {
                 },
             })
         );
-
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
-
+        this.syncAriaObserver();
         this.synchronizeA11y();
     }
 
     connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
+        this.setupAriaObserverIfAbsent();
+        if (isCSR) {
+            this.overrideDropdownAlignment();
         }
-        this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -135,9 +137,19 @@ export default class LightningBaseCombobox extends LightningElement {
     disconnectedCallback() {
         this._connected = false;
         this._listBoxElementCache = undefined;
-        if (this.ariaObserver) {
+        this.removeAriaObserver();
+    }
+
+    setupAriaObserverIfAbsent() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
+
+    removeAriaObserver() {
+        if (this.ariaObserver && this.ariaObserver.disconnect) {
             this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
+            this.ariaObserver = null;
         }
     }
 
@@ -160,6 +172,15 @@ export default class LightningBaseCombobox extends LightningElement {
         this.connectAriaControls();
     }
 
+    syncAriaObserver() {
+        this.setupAriaObserverIfAbsent();
+        const ariaObserverSyncExists =
+            this.ariaObserver && this.ariaObserver.sync;
+        if (this.isConnected && ariaObserverSyncExists) {
+            this.ariaObserver.sync();
+        }
+    }
+
     connectAriaControls() {
         this.connectAriaAttribute({
             attribute: ARIA_CONTROLS,
@@ -169,15 +190,18 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     connectAriaAttribute(params) {
-        const relatedNodeIds = Array.isArray(params.relatedNodeIds)
-            ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
-            : getRealDOMId(params.relatedNodeIds);
-
-        this.ariaObserver.connect({
-            ...params,
-            targetSelector: INPUT_ELEMENT_SELECTOR,
-            relatedNodeIds,
-        });
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver && this.ariaObserver.connect) {
+            const relatedNodeIds = Array.isArray(params.relatedNodeIds)
+                ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
+                : getRealDOMId(params.relatedNodeIds);
+
+            this.ariaObserver.connect({
+                ...params,
+                targetSelector: INPUT_ELEMENT_SELECTOR,
+                relatedNodeIds,
+            });
+        }
     }
 
     @api
@@ -228,7 +252,10 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     set rootAriaNode(root) {
-        this.ariaObserver.root = root;
+        this.setupAriaObserverIfAbsent();
+        if (this.ariaObserver) {
+            this.ariaObserver.root = root;
+        }
     }
 
     get inputId() {
@@ -572,7 +599,9 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get dropdownElement() {
-        return this.template.querySelector('[data-dropdown-element]');
+        return isCSR
+            ? this.template.querySelector('[data-dropdown-element]')
+            : null;
     }
 
     get i18n() {
@@ -917,7 +946,9 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get inputElement() {
-        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+        return isCSR
+            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
+            : null;
     }
 
     // remove-next-line-for-c-namespace
@@ -930,8 +961,25 @@ export default class LightningBaseCombobox extends LightningElement {
             this._autoPosition = new AutoPosition(this);
         }
 
+        // when using dropdown-alignment='auto' positioning and standard variant lighting-combobox
+        // the selector for 'target' is determined by this.isUserInputDisabled
+        // when TRUE the target is a BUTTON element acting as a faux / fake INPUT element
+        // 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 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
+        // must be taken into account so the proper selector can be used
+        // the 'element' below is always the same without IF/ELSE, so there
+        // is not a need to switch between selectors
+        const selectorToUse = this.isUserInputDisabled
+            ? FAUX_INPUT_BUTTON_ELEMENT_SELECTOR
+            : INPUT_PART_ELEMENT_SELECTOR;
+
         this._autoPosition.start({
-            target: () => this.template.querySelector("[part~='input-text']"),
+            target: () => this.template.querySelector(selectorToUse),
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,

package/src/lightning/breadcrumb/breadcrumb.js

@@ -1,11 +1,12 @@
 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 LightningElement {
+    static validationOptOut = ['class'];
     /**
      * The URL of the page that the breadcrumb goes to.
      * @type {string}
@@ -66,7 +67,7 @@ export default class LightningBreadcrumb extends LightningElement {
     }
 
     get linkElement() {
-        return this.template.querySelector('a');
+        return isCSR ? this.template.querySelector('a') : null;
     }
 
     /**
@@ -83,6 +84,7 @@ export default class LightningBreadcrumb extends LightningElement {
         this.connected = true;
         // add default CSS classes to custom element tag
         this.classList.add('slds-breadcrumb__item');
+
         this.setAttribute('role', 'listitem');
     }
 

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

@@ -3,7 +3,7 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='breadcrumb'] {
+  :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));
@@ -12,8 +12,8 @@
     color: var(--slds-g-color-brand-base-50, var(--sds-g-color-brand-base-50, #0176d3));
   }
 
-  :host([data-render-mode="shadow"]) [part~='breadcrumb']:hover,:host([data-render-mode="shadow"]) 
-  [part~='breadcrumb']:focus {
+  :host([data-render-mode="shadow"]) [part='breadcrumb']:hover,:host([data-render-mode="shadow"]) 
+  [part='breadcrumb']:focus {
     text-decoration: none;
     color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
   }

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

@@ -3,7 +3,7 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] {
+  :host([data-render-mode="shadow"]) [part='breadcrumbs'] {
     /**
      * Reassignments for parity with SLDS blueprint
      * https://www.lightningdesignsystem.com/components/breadcrumbs/#Styling-Hooks-Overview
@@ -16,24 +16,24 @@
     display: flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(*) {
+  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(*) {
     position: relative;
   }
 
   /* Positions a '>' separator before breadcrumb */
-  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:not(:first-child))::before {
+  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:not(:first-child))::before {
     content: '\003E';
     position: absolute;
     left: calc((var(--sds-g-spacing-2, 0.5rem) * 0.5) * -1);
   }
 
   /* Don't include '>' separator before first breadcrumb */
-  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child)::before {
+  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child)::before {
     content: '';
   }
 
   /* Don't include spacing before first breadcrumb */
-  :host([data-render-mode="shadow"]) [part~='breadcrumbs'] ::slotted(:first-child) {
+  :host([data-render-mode="shadow"]) [part='breadcrumbs'] ::slotted(:first-child) {
     --slds-c-breadcrumb-spacing-inline-start: 0;
   }
 }

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

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 

package/src/lightning/buttonGroup/button-group.slds.css

@@ -3,7 +3,7 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='button-group'] {
+  :host([data-render-mode="shadow"]) [part='button-group'] {
     display: inline-flex;
 
     /**
@@ -13,14 +13,14 @@
   }
 
   /* Nudge buttons over to remove double border effect */
-  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:not(:first-child)) {
+  :host([data-render-mode="shadow"]) [part='button-group'] ::slotted(:not(:first-child)) {
     margin-inline-start: calc(-1 * var(--sds-g-sizing-border-1, 1px));
   }
 
   /**
    * First child in group
    */
-  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:first-child) {
+  :host([data-render-mode="shadow"]) [part='button-group'] ::slotted(:first-child) {
     --slds-s-button-radius-border-startstart: var(--sds-g-radius-border-2, 0.25rem);
     --slds-s-button-radius-border-endstart: var(--sds-g-radius-border-2, 0.25rem);
   }
@@ -28,7 +28,7 @@
   /**
    * Last child in group
    */
-  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:last-child) {
+  :host([data-render-mode="shadow"]) [part='button-group'] ::slotted(:last-child) {
     --slds-s-button-radius-border-startend: var(--sds-g-radius-border-2, 0.25rem);
     --slds-s-button-radius-border-endend: var(--sds-g-radius-border-2, 0.25rem);
   }
@@ -38,7 +38,7 @@
    *
    * Adds stacking context so the focus shadow is visible
    */
-  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:focus) {
+  :host([data-render-mode="shadow"]) [part='button-group'] ::slotted(:focus) {
     position: relative;
     z-index: 1;
   }

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

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -883,7 +889,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 

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

@@ -524,14 +524,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -923,7 +929,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -953,7 +959,7 @@ 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'] {
+  :host([data-render-mode="shadow"]) [part='button-icon-stateful'] {
     display: inline-flex;
     color: var(--slds-c-buttoniconstateful-color-foreground);
 
@@ -989,7 +995,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* :host([variant='border-filled'])::part(button-icon-stateful), */
-  :host([data-render-mode="shadow"][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
     );
@@ -1016,7 +1022,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* :host([variant='border-inverse'])::part(button-icon-stateful), */
-  :host([data-render-mode="shadow"][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
     );
@@ -1045,7 +1051,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Selected + Variants */
-  :host([data-render-mode="shadow"][selected]) [part~='button-icon-stateful'] {
+  :host([data-render-mode="shadow"][selected]) [part='button-icon-stateful'] {
     --slds-c-buttoniconstateful-color-foreground: var(
       --slds-c-buttoniconstateful-color-foreground-selected,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -1098,7 +1104,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
   }
 
-  :host([data-render-mode="shadow"][selected][variant='border-filled']) [part~='button-icon-stateful'] {
+  :host([data-render-mode="shadow"][selected][variant='border-filled']) [part='button-icon-stateful'] {
     --slds-c-buttoniconstateful-borderfilled-color-background: var(
       --slds-c-buttoniconstateful-borderfilled-color-background-selected,
       var(--sds-g-color-brand-base-50, #0176d3)
@@ -1153,7 +1159,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
   }
 
-  :host([data-render-mode="shadow"][selected][variant='border-inverse']) [part~='button-icon-stateful'] {
+  :host([data-render-mode="shadow"][selected][variant='border-inverse']) [part='button-icon-stateful'] {
     --slds-c-buttoniconstateful-borderinverse-color-border: var(
       --slds-c-buttoniconstateful-borderinverse-color-border-selected,
       var(--sds-g-color-brand-base-50, #0176d3)

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

@@ -187,7 +187,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -217,7 +217,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -302,7 +302,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
@@ -652,14 +652,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -1051,7 +1057,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -1855,7 +1861,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * are different so we target button_icon specifically. display: flex
    * comes from parent button styles.
    */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] {
+  :host([data-render-mode="shadow"]) [part='button-icon'] {
     gap: var(--sds-g-spacing-1, 0.25rem);
   }
 

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -524,14 +524,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -612,7 +618,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -642,7 +648,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -727,7 +733,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;