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

package/src/lightning/pill/pill.slds.css

@@ -1,15 +1,23 @@
 
 @supports (--styling-hooks: '') {
+    /* re-assign current slds hooks using deprecated naming conventions */
+    :host([data-render-mode="shadow"]) {
+      --slds-c-pill-spacing-block-end: var(--slds-c-pill-spacing-blockend);
+      --slds-c-pill-spacing-block-start: var(--slds-c-pill-spacing-blockstart);
+      --slds-c-pill-spacing-inline-end: var(--slds-c-pill-spacing-inlineend);
+      --slds-c-pill-spacing-inline-start: var(--slds-c-pill-spacing-inlinestart);
+    }
+
   :host([data-render-mode="shadow"]) .slds-pill {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     line-height: var(--sds-g-font-lineheight-4, 1.5);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
@@ -43,7 +51,7 @@
     text-decoration: none;
     color:var(--sds-g-color-brand-base-30, #014486);
   }
-  
+
   :host([data-render-mode="shadow"]) a:active{
     color:var(--sds-g-color-brand-base-30, #014486);
   }
@@ -133,10 +141,10 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));

package/src/lightning/pill/plain.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pill/plainLink.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './avatar.slds.css';
+@import './avatar.slds.css'; */

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -249,7 +249,7 @@ Custom properties for pill containers work only with particular `lightning-pill-
 
 See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/pills/#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-pill-container`, see the **Source Code** section.
 

package/src/lightning/pillContainer/barePillContainer.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './pill-container.slds.css';
+@import './pill-container.slds.css'; */

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

@@ -1,11 +1,5 @@
 
  @supports (--styling-hooks: '') {
-   :host([data-render-mode="shadow"]) [part~='listbox'] {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     --_listbox-spacing-xxx-small: 0.125rem;
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-   }
-
    /* Horizontal listbox - used for pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
      display: inline-flex;
@@ -18,9 +12,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-inline-start: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: 0.125rem;
    }
 
    /* Vertical listbox */
@@ -101,7 +93,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentColor;
+     color: currentcolor;
    }
 
    /* The icon within a plain listbox that indicates if an option has been selected or not. */
@@ -126,9 +118,7 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     margin-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: 0.125rem;
    }
 
    /* The metadata or secondary text of an entity listbox */
@@ -139,15 +129,15 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentColor;
+     color: currentcolor;
    }
-  
+
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
 
    /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
 
    /* The container of pill selections found inside of a combobox group */
-   
+
    /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
      position: relative;
@@ -165,18 +155,14 @@
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: 0.125rem;
      padding-inline: 0;
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-start: 0.125rem;
      padding-block-end: 0;
-     padding-inline: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0.125rem;
    }
 
    /* Toggle button to show all of the pill selections */
@@ -251,7 +237,7 @@
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;
@@ -264,4 +250,3 @@
      }
    }
  }
- 

package/src/lightning/pillContainer/pill-container.slds.css

@@ -1,18 +1,29 @@
 
  @supports (--styling-hooks: '') {
+  /* re-assign current slds hooks using deprecated naming conventions */
+  :host([data-render-mode="shadow"]) {
+    --slds-c-pill-container-color-background: var(--slds-c-pillcontainer-color-background);
+    --slds-c-pill-container-spacing-block-end: var(--slds-c-pillcontainer-spacing-blockend);
+    --slds-c-pill-container-spacing-block-start: var(--slds-c-pillcontainer-spacing-blockstart);
+    --slds-c-pill-container-spacing-inline-end: var(--slds-c-pillcontainer-spacing-inlineend);
+    --slds-c-pill-container-spacing-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart);
+    --slds-c-pill-sizing-border: var(--slds-c-pillcontainer-sizing-border);
+    --slds-c-pill-color-border: var(--slds-c-pillcontainer-color-border);
+    --slds-c-pill-radius-border: var(--slds-c-pillcontainer-radius-border);
+  }
 
   :host([data-render-mode="shadow"]) .slds-pill_container {
     display: flex;
     min-height: calc(calc((var(--sds-g-sizing-1, 0.125rem) * 3) + var(--sds-g-sizing-7, 1.5rem)) + 2px);
-    padding-block-start: var(--slds-c-pill-container-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-container-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-container-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-container-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    border-width: var(--slds-c-pillcontainer-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    background-color: var(--slds-c-pill-container-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pillcontainer-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
+    border-radius: var(--slds-c-pillcontainer-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    background-color: var(--slds-c-pillcontainer-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
   }
 
   :host([data-render-mode="shadow"]) .slds-pill_container .slds-listbox_inline {

package/src/lightning/pillContainer/pill.slds.css

@@ -1,15 +1,23 @@
 
 @supports (--styling-hooks: '') {
+    /* re-assign current slds hooks using deprecated naming conventions */
+    :host([data-render-mode="shadow"]) {
+      --slds-c-pill-spacing-block-end: var(--slds-c-pill-spacing-blockend);
+      --slds-c-pill-spacing-block-start: var(--slds-c-pill-spacing-blockstart);
+      --slds-c-pill-spacing-inline-end: var(--slds-c-pill-spacing-inlineend);
+      --slds-c-pill-spacing-inline-start: var(--slds-c-pill-spacing-inlinestart);
+    }
+
   :host([data-render-mode="shadow"]) .slds-pill {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     line-height: var(--sds-g-font-lineheight-4, 1.5);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
@@ -43,7 +51,7 @@
     text-decoration: none;
     color:var(--sds-g-color-brand-base-30, #014486);
   }
-  
+
   :host([data-render-mode="shadow"]) a:active{
     color:var(--sds-g-color-brand-base-30, #014486);
   }
@@ -133,10 +141,10 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));

package/src/lightning/pillContainer/pillContainer.js

@@ -1,7 +1,6 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
@@ -25,7 +24,7 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningShadowBaseClass {
+export default class LightningPillContainer extends LightningElement {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
@@ -42,7 +41,6 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
     @track _pillContainerElementId;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
     }
 

package/src/lightning/pillContainer/standardPillContainer.css

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

package/src/lightning/popup/popover.slds.css

@@ -10,7 +10,7 @@
           var(--slds-g-color-neutral-base-100,
               var(--sds-g-color-neutral-base-100, #ffffff)));
       display: inline-block;
-      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 16%);
       border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
   }
 

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { AutoPosition } from 'lightning/positionLibrary';
 import {
     createAlignmentConfiguration,
@@ -8,7 +7,7 @@ import {
 import { getElementWithFocus } from 'lightning/focusUtils';
 import { isUndefinedOrNull, normalizeBoolean } from 'lightning/utilsPrivate';
 
-export default class LightningPopup extends LightningShadowBaseClass {
+export default class LightningPopup extends LightningElement {
     @track _visible;
     @track _queueShow;
     @track _ariaLabelledBy;

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './tooltip.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './tooltip.slds.css'; */
 
 /* Fix for tooltip alignment issue, for details see: W-11677142
  *

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -1,7 +1,6 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 
 const DEFAULT_ALIGN = {
@@ -9,7 +8,7 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
-export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
+export default class LightningPrimitiveBubble extends LightningElement {
     @track
     state = {
         // tracks the `visibility` of the tooltip
@@ -40,7 +39,6 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'tooltip');
         this.state.inDOM = true;
     }

package/src/lightning/primitiveBubble/tooltip.slds.css

@@ -61,19 +61,19 @@
     --sds-c-overlay-color-border: var(--slds-c-tooltip-color-border);
     --sds-c-overlay-shadow: var(--slds-c-tooltip-shadow, 0 2px 3px 0 rgb(0 0 0 / 16%));
     --sds-c-overlay-spacing-inline-start: var(
-      --slds-c-tooltip-spacing-inline-start,
+      --slds-c-tooltip-spacing-inlinestart,
       var(--sds-c-tooltip-spacing-inline, 0.75rem)
     );
     --sds-c-overlay-spacing-inline-end: var(
-      --slds-c-tooltip-spacing-inline-end,
+      --slds-c-tooltip-spacing-inlineend,
       var(--sds-c-tooltip-spacing-inline, 0.75rem)
     );
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-tooltip-spacing-block-start,
+      --slds-c-tooltip-spacing-blockstart,
       var(--sds-c-tooltip-spacing-block, 0.5rem)
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-tooltip-spacing-block-end,
+      --slds-c-tooltip-spacing-blockend,
       var(--sds-c-tooltip-spacing-block, 0.5rem)
     );
 
@@ -102,7 +102,7 @@
   */
 
 :host([data-render-mode="shadow"]) [part~='overlay']::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: -1;
 }
 
@@ -231,8 +231,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -264,8 +263,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -306,8 +304,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -347,8 +344,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-  -webkit-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -380,8 +376,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
-  -webkit-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -425,8 +420,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
-  -webkit-box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -463,8 +457,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-  -webkit-box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -496,8 +489,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
-  -webkit-box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 
@@ -541,8 +533,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
-  -webkit-box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
-  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: -1;
 }
 

package/src/lightning/primitiveButton/primitiveButton.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     isIE11,
     isCSR,
@@ -27,7 +26,7 @@ const ROLE = 'role';
  *  - aria-labelledby: Role that depeneds on AriaObserver for native shadow.
  *  - aria-owns: Abstracts the logic of setting the id-reference on the host element.
  */
-export default class LightningPrimitiveButton extends LightningShadowBaseClass {
+export default class LightningPrimitiveButton extends LightningElement {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 
@@ -450,7 +449,6 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     constructor() {
         super();
         this.ariaObserver = new AriaObserver(this);
-
         // Workaround for an IE11 bug where click handlers on button ancestors
         // receive the click event even if the button element has the `disabled`
         // attribute set.
@@ -462,6 +460,11 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
             });
         }
     }
+    connectedCallback() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
 
     renderedCallback() {
         if (this.isConnected) {

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -48,39 +48,39 @@
  */
 
 @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);
   }
 
@@ -90,15 +90,15 @@
     --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
@@ -194,7 +194,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

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

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,13 +1,12 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
 import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
 };
-export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
+export default class PrimitiveColorpickerButton extends LightningElement {
     static delegatesFocus = true;
 
     @track _isColorPickerPanelOpen = false;