lightning-base-components 1.18.7-alpha → 1.18.7-ssr

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/baseCombobox/spinner.slds.css

@@ -32,7 +32,7 @@
 
   /* brand */
 
-  :host([data-render-mode="shadow"][variant='brand']) [part~='spinner'] {
+  :host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
     --slds-c-spinner-color-background: var(
       --slds-c-spinner-brand-color-background,
       var(--sds-g-color-brand-base-60, #1b96ff)
@@ -41,7 +41,7 @@
 
   /* inverse */
 
-  :host([data-render-mode="shadow"][variant='inverse']) [part~='spinner'] {
+  :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
     --slds-c-spinner-color-background: var(
       --slds-c-spinner-inverse-color-background,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -295,7 +295,7 @@
 
   /* end size xx-small */
 
-  :host([data-render-mode="shadow"]) [part~='spinner'] {
+  :host([data-render-mode="shadow"]) [part='spinner'] {
     position: absolute;
     top: 50%;
     width: 2rem;
@@ -306,16 +306,16 @@
     transform: translate(-50%, -50%) rotate(90deg);
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner'],:host([data-render-mode="shadow"]) 
-  [part~='dot-a'],:host([data-render-mode="shadow"]) 
-  [part~='dot-b'] {
+  :host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"]) 
+  [part='dot-a'],:host([data-render-mode="shadow"]) 
+  [part='dot-b'] {
     transform-origin: 50% 50%;
     will-change: transform;
   }
 
   /* creates the circles */
-  :host([data-render-mode="shadow"]) [part~='dot-a'],:host([data-render-mode="shadow"]) 
-  [part~='dot-b'] {
+  :host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
+  [part='dot-b'] {
     position: absolute;
     top: 0;
     left: 0;
@@ -323,12 +323,12 @@
   }
 
   /* stylelint-disable no-duplicate-selectors */
-  :host([data-render-mode="shadow"]) [part~='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part~='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::after {
+  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::after {
     content: '';
     position: absolute;
     background-color: var(--slds-c-spinner-color-background, var(--sds-g-color-neutral-base-65, #a0a0a0));
@@ -338,59 +338,59 @@
     transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-a'] {
+  :host([data-render-mode="shadow"]) [part='dot-a'] {
     transform: rotate(60deg);
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-b'] {
+  :host([data-render-mode="shadow"]) [part='dot-b'] {
     transform: rotate(120deg);
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner']::before {
+  :host([data-render-mode="shadow"]) [part='spinner']::before {
     animation-delay: -83.33333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-a']::before {
+  :host([data-render-mode="shadow"]) [part='dot-a']::before {
     animation-delay: 83.33333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-b']::before {
+  :host([data-render-mode="shadow"]) [part='dot-b']::before {
     animation-delay: 250ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner']::after {
+  :host([data-render-mode="shadow"]) [part='spinner']::after {
     animation-delay: 416.66667ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-a']::after {
+  :host([data-render-mode="shadow"]) [part='dot-a']::after {
     animation-delay: 583.33333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-b']::after {
+  :host([data-render-mode="shadow"]) [part='dot-b']::after {
     animation-delay: 750ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part~='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::before {
+  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::before {
     width: 0.5rem;
     height: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::before {
+  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::before {
     animation-name: dotsBounceBefore-medium;
     top: -0.25rem;
     left: -0.25rem;
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::after {
+  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::after {
     animation-name: dotsBounceAfter-medium;
     top: -0.25rem;
     right: -0.25rem;

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -1,12 +1,14 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 import card from './card.html';
 import inline from './inline.html';
 
-export default class LightningBaseComboboxItem extends LightningElement {
+export default class LightningBaseComboboxItem extends LightningShadowBaseClass {
     @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/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,11 +1,13 @@
-import { LightningElement, api } from 'lwc';
-
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+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 {
+export default class LightningBreadcrumb extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     /**
      * The URL of the page that the breadcrumb goes to.
      * @type {string}
@@ -66,7 +68,7 @@ export default class LightningBreadcrumb extends LightningElement {
     }
 
     get linkElement() {
-        return this.template.querySelector('a');
+        return isCSR ? this.template.querySelector('a') : null;
     }
 
     /**
@@ -80,9 +82,11 @@ export default class LightningBreadcrumb extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         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.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,11 +1,12 @@
-import { LightningElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * 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 LightningElement {
+export default class LightningBreadcrumbs extends LightningShadowBaseClass {
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('aria-label', 'Breadcrumbs');
         this.setAttribute('role', 'navigation');
     }

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

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

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