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

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

@@ -151,39 +151,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -193,15 +193,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -297,7 +297,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -333,7 +333,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,
@@ -655,7 +655,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;
   }
@@ -663,7 +663,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;
   }
@@ -740,7 +740,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 */
@@ -768,7 +768,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 */
@@ -1058,7 +1058,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);
   }
 
   /**
@@ -1150,7 +1150,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1174,15 +1174,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
-.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"])  
+.slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    width: var(--sds-g-spacing-4, 1rem); 
+    width: var(--sds-g-spacing-4, 1rem);
     height: var(--sds-g-spacing-4, 1rem);
     position: absolute;
     transform: rotate(45deg);
@@ -1200,7 +1200,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
-    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1221,7 +1221,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1247,7 +1247,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1263,19 +1263,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     background-color: inherit;
 
     /* Position: Bottom */
-    bottom: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
-    left: auto;
-    right: var(--sds-g-spacing-5, 1.5rem);
-    top: 100%;
+    inset: 100% auto calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1) var(--sds-g-spacing-5, 1.5rem);
     margin-top: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     margin-right: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
+    margin-left: calc((var(--sds-g-spacing-4, 1rem) * 0.5) * -1);
     z-index: -1;
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
-    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
   }
 
@@ -1296,7 +1293,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1320,7 +1317,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
-    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1350,7 +1347,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
-    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1371,7 +1368,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1395,7 +1392,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
-    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1425,7 +1422,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
-    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
+    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
     z-index: -2;
 }
 
@@ -1519,15 +1516,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-overlay-radius-border: var(--slds-c-dropdown-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-overlay-sizing-border: var(--slds-c-dropdown-sizing-border, var(--sds-g-sizing-border-1, 1px));
     --sds-c-overlay-color-border: var(--slds-c-dropdown-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 0.16));
+    --sds-c-overlay-shadow: var(--slds-c-dropdown-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
     --sds-c-overlay-spacing-inline-start: 0;
     --sds-c-overlay-spacing-inline-end: 0;
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-dropdown-spacing-block-start,
+      --slds-c-dropdown-spacing-blockstart,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-dropdown-spacing-block-end,
+      --slds-c-dropdown-spacing-blockend,
       var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))
     );
 
@@ -1541,11 +1538,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     /* stylelint-disable */
     margin-block-start: calc(
-      var(--slds-c-dropdown-spacing-block-start, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockstart, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     margin-block-end: calc(
-      var(--slds-c-dropdown-spacing-block-end, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
+      var(--slds-c-dropdown-spacing-blockend, var(--slds-c-dropdown-spacing-block, var(--sds-g-spacing-1, 0.25rem))) /
         2
     );
     /* stylelint-enable */
@@ -1585,7 +1582,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     top: 100%;
   }
 
-  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"])  
+  :host([data-render-mode="shadow"].slds-dropdown-trigger) .slds-dropdown_bottom,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger .slds-dropdown_bottom {
     top: auto;
   }
@@ -1713,7 +1710,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 5
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1724,7 +1720,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 7
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1735,7 +1730,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
             var(--sds-g-spacing-4, 1rem)
         ) * 10
     );
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1743,7 +1737,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 5);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1751,7 +1744,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 7);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 
@@ -1759,7 +1751,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     max-height: calc((var(--_dropdown-square-icon-small-boundary) + var(--sds-g-spacing-4, 1rem)) * 10);
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    -webkit-overflow-scrolling: touch;
     overflow-y: auto;
   }
 

package/src/lightning/buttonMenu/buttonMenu.css

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

package/src/lightning/buttonMenu/buttonMenu.js

@@ -1,7 +1,6 @@
 import labelLoading from '@salesforce/label/LightningButtonMenu.loading';
 import labelShowMenu from '@salesforce/label/LightningButtonMenu.showMenu';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -30,6 +29,9 @@ const i18n = {
 };
 
 const menuItemTagName = 'LIGHTNING-MENU-ITEM';
+// @W-13602003 Fallback menuItemClasSelector is required for menu items that are not lightning-menu-item
+const menuItemClasSelector = `.slds-dropdown__list .slds-dropdown__item`;
+const menuItemSelectors = `${menuItemTagName}, ${menuItemClasSelector}`;
 
 const validMenuAlignments = [
     'left',
@@ -47,7 +49,7 @@ validMenuAlignments.push(...['auto', 'auto-right', 'auto-left']);
  * Represents a dropdown menu with a list of actions or functions.
  * @slot default Placeholder for menu-item
  */
-export default class LightningButtonMenu extends LightningShadowBaseClass {
+export default class LightningButtonMenu extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -146,7 +148,6 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     _needsFocusAfterRender = false;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         this.keyboardInterface = this.menuKeyboardInterface();
 
@@ -717,7 +718,7 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     }
 
     getMenuItems() {
-        return Array.from(this.querySelectorAll(menuItemTagName));
+        return Array.from(this.querySelectorAll(menuItemSelectors));
     }
 
     getMenuItemByIndex(index) {

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -149,13 +149,13 @@ Custom properties for stateful buttons work only with particular `lightning-butt
 
 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-stateful`, see the **Source Code** section.
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Accessibility
 

package/src/lightning/buttonStateful/button-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;
   }
@@ -582,39 +582,39 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -624,15 +624,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -728,7 +728,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
@@ -751,10 +751,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-text-color: var(--slds-c-buttonstateful-text-color);
     --slds-c-button-neutral-text-color-hover: var(--slds-c-buttonstateful-text-color-hover);
     --slds-c-button-neutral-text-color-focus: var(--slds-c-buttonstateful-text-color-focus);
-    --slds-c-button-neutral-text-color-active: var(
-      --slds-c-buttonstateful-text-color-active,
-      var(--slds-c-button-neutral-text-color-hover)
-    );
+    --slds-c-button-neutral-text-color-active: var(--slds-c-buttonstateful-text-color-active);
 
     /* button background */
     --slds-c-button-neutral-color-background: var(--slds-c-buttonstateful-color-background);
@@ -774,7 +771,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-focus: var(
       --slds-c-buttonstateful-color-border-focus,
-      var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-button-neutral-color-border-hover))
+      var(--slds-c-buttonstateful-color-border-hover, var(--slds-c-buttonstateful-color-border-hover))
     );
 
     /* button box shadow on focus */

package/src/lightning/buttonStateful/buttonStateful.css

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

package/src/lightning/buttonStateful/buttonStateful.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -12,7 +11,7 @@ const DEFAULT_VARIANT = 'neutral';
 /**
  * A button that toggles between states.
  */
-export default class LightningButtonStateful extends LightningShadowBaseClass {
+export default class LightningButtonStateful extends LightningElement {
     static delegatesFocus = true;
 
     _originalVariant = DEFAULT_VARIANT;

package/src/lightning/calendar/calendar.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './calendar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './calendar.slds.css'; */
 
 /**
  * For RTL languages, slds-dropdown_left will have left: 0 swapped with right: 0 which is why we

package/src/lightning/calendar/calendar.js

@@ -3,8 +3,7 @@ import labelNextMonth from '@salesforce/label/LightningDateTimePicker.nextMonth'
 import labelPreviousMonth from '@salesforce/label/LightningDateTimePicker.previousMonth';
 import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { isCSR } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
@@ -47,7 +46,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningShadowBaseClass {
+export default class LightningCalendar extends LightningElement {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -95,7 +94,6 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();