lightning-base-components 1.21.1-alpha → 1.21.2-alpha

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

@@ -1,47 +1,3 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]) [part~='overlay'] {
-  background-color: var(
-    --sds-c-overlay-color-background,
-    var(--sds-s-popup-color-background, var(--sds-g-color-neutral-base-1))
-  );
-  color: var(
-    --sds-c-overlay-text-color,
-    var(--sds-s-popup-text-color, var(--sds-g-color-neutral-base-contrast-4))
-  );
-  border-radius: var(
-    --sds-c-overlay-radius-border,
-    var(--sds-s-popup-radius-border, var(--sds-g-radius-border-2, 0.25rem))
-  );
-  border-width: var(
-    --sds-c-overlay-sizing-border,
-    var(--sds-s-popup-sizing-border, var(--sds-g-sizing-border-1, 1px))
-  );
-  border-color: var(
-    --sds-c-overlay-color-border,
-    var(--sds-s-popup-color-border, var(--sds-g-color-border-base-1, #c9c9c9))
-  );
-  box-shadow: var(--sds-c-overlay-shadow, var(--sds-s-popup-shadow, var(--sds-g-shadow-1, 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828)));
-
-  /* TODO: consider semantics of the shared hook for overlays/popups. */
-  padding-left: var(
-    --sds-c-overlay-spacing-inline-start,
-    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-right: var(
-    --sds-c-overlay-spacing-inline-end,
-    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-top: var(
-    --sds-c-overlay-spacing-block-start,
-    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
-  );
-  padding-bottom: var(
-    --sds-c-overlay-spacing-block-end,
-    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
-  );
-}
 
 /**
  * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
@@ -52,30 +8,22 @@
  *        receive styling. Authoring styles that rely on slots is not recommended.
  */
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) [part~='overlay'] {
-    --sds-c-overlay-color-background: var(--slds-c-tooltip-color-background, #032d60);
-    --sds-c-overlay-text-color: var(--slds-c-tooltip-text-color, #fff);
-    --sds-c-overlay-radius-border: var(--slds-c-tooltip-radius-border, 0.25rem);
-    --sds-c-overlay-sizing-border: var(--slds-c-tooltip-sizing-border, 0);
-    --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-inlinestart,
-      var(--sds-c-tooltip-spacing-inline, 0.75rem)
-    );
-    --sds-c-overlay-spacing-inline-end: var(
-      --slds-c-tooltip-spacing-inlineend,
-      var(--sds-c-tooltip-spacing-inline, 0.75rem)
-    );
-    --sds-c-overlay-spacing-block-start: var(
-      --slds-c-tooltip-spacing-blockstart,
-      var(--sds-c-tooltip-spacing-block, 0.5rem)
-    );
-    --sds-c-overlay-spacing-block-end: var(
-      --slds-c-tooltip-spacing-blockend,
-      var(--sds-c-tooltip-spacing-block, 0.5rem)
-    );
+    /* stylelint-disable */
+    --slds-c-tooltip-sizing-width-max: var(--slds-c-tooltip-sizing-max-width);
+    --slds-c-tooltip-position-zindex: var(--slds-c-popover-position-zindex);
+    /* stylelint-enable */
+
+    background-color: var(--slds-c-tooltip-color-background, #032d60);
+    color: var(--slds-c-tooltip-text-color, #fff);
+    border-radius: 0.25rem;
+    border-width: 0;
+    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%);
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 0.75rem;
+    padding-block-start: 0.5rem;
+    padding-block-end: 0.5rem;
+    z-index: var(--slds-c-tooltip-position-zindex);
 
     /**
      * Opinion of subsystem, not supported in base SDS component
@@ -84,16 +32,15 @@
     max-width: var(--slds-c-tooltip-sizing-width-max, 20rem);
     position: relative;
   }
-}
 
-/**
+  /**
  * P R I V A T E
  *
  * The following styling is implemented by classes within the shadow DOM.
  * They're expected to be private to the component and not for external use.
  */
 
-/**
+  /**
   * LBC does not expose an API to configure the placement of the nubbin.
   * The placement is generated dynamically internally. Since the current
   * implementation is internal and private, we'll recreate it as-is and
@@ -101,18 +48,18 @@
   * path forward.
   */
 
-:host([data-render-mode="shadow"]) [part~='overlay']::after {
+  :host([data-render-mode="shadow"]) [part~='overlay']::after {
   box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
-/**
+  /**
  * Nubbin positioning
  */
 
-/* stylelint-disable */
+  /* stylelint-disable */
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top::before {
+  :host([data-render-mode="shadow"]) .slds-nubbin_top::before {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -124,7 +71,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_top::after {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -136,7 +83,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::before {
   width: 1rem;
   height: 1rem;
@@ -149,7 +96,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
   width: 1rem;
   height: 1rem;
@@ -162,7 +109,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
@@ -170,7 +117,7 @@
   top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::before {
   width: 1rem;
   height: 1rem;
@@ -183,7 +130,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
   width: 1rem;
   height: 1rem;
@@ -196,7 +143,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
@@ -206,7 +153,7 @@
   margin-right: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::before {
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom::before {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -218,7 +165,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -230,12 +177,12 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
   box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::before {
   width: 1rem;
   height: 1rem;
@@ -248,7 +195,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
   width: 1rem;
   height: 1rem;
@@ -261,13 +208,13 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
@@ -276,7 +223,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::before {
   width: 1rem;
   height: 1rem;
@@ -289,7 +236,7 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
   width: 1rem;
   height: 1rem;
@@ -302,13 +249,13 @@
   margin-left: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
@@ -319,7 +266,7 @@
   margin-right: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left::before {
+  :host([data-render-mode="shadow"]) .slds-nubbin_left::before {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -331,7 +278,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -343,12 +290,12 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
   box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::before {
   width: 1rem;
   height: 1rem;
@@ -361,7 +308,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
   width: 1rem;
   height: 1rem;
@@ -374,20 +321,20 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
   top: 1.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::before {
   width: 1rem;
   height: 1rem;
@@ -400,7 +347,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
   width: 1rem;
   height: 1rem;
@@ -413,18 +360,18 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::before {
   margin-bottom: -1px;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
@@ -432,7 +379,7 @@
   bottom: 1rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right::before {
+  :host([data-render-mode="shadow"]) .slds-nubbin_right::before {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -444,7 +391,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
   width: 1rem;
   height: 1rem;
   position: absolute;
@@ -456,12 +403,12 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right::after {
+  :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
   box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::before {
   width: 1rem;
   height: 1rem;
@@ -474,7 +421,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
   width: 1rem;
   height: 1rem;
@@ -487,20 +434,20 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-top::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
   top: 1.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::before {
   width: 1rem;
   height: 1rem;
@@ -513,7 +460,7 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
   width: 1rem;
   height: 1rem;
@@ -526,18 +473,18 @@
   margin-top: -0.5rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::before {
   margin-bottom: -1px;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
+  :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, 16%);
   z-index: -1;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
@@ -545,79 +492,79 @@
   bottom: 1rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner {
   border-radius: 0.125rem 0.25rem 0.25rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-left-corner::after {
   left: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner {
   border-radius: 0.25rem 0.25rem 0.25rem 0.125rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
   left: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner {
   border-radius: 0.25rem 0.125rem 0.25rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_top-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_top-right-corner::after {
   right: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner {
   border-radius: 0.25rem 0.25rem 0.125rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
   right: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner {
   border-radius: 0.125rem 0.25rem 0.25rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
   top: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner {
   border-radius: 0.25rem 0.125rem 0.25rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-top-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
   top: 0.75rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner {
   border-radius: 0.25rem 0.25rem 0.25rem 0.125rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
   bottom: 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner {
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner {
   border-radius: 0.25rem 0.25rem 0.125rem 0.25rem;
 }
 
-:host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
+  :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom-corner::before,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
   bottom: 0.25rem;
 }
 
-/**
+  /**
  * Animation Utilities
  *
  * @TODO: refactor into utilities package once it is available
@@ -625,7 +572,7 @@
  * https://github.com/salesforce-ux/product-subsystem/issues/44
  */
 
-:host([data-render-mode="shadow"]) .slds-rise-from-ground {
+  :host([data-render-mode="shadow"]) .slds-rise-from-ground {
   visibility: visible;
   opacity: 1;
   transform: translate(0%, 0%);
@@ -633,7 +580,7 @@
   will-change: transform;
 }
 
-:host([data-render-mode="shadow"]) .slds-fall-into-ground {
+  :host([data-render-mode="shadow"]) .slds-fall-into-ground {
   visibility: hidden;
   opacity: 0;
   transform: translate(0%, 0%);
@@ -641,27 +588,27 @@
   will-change: transform;
 }
 
-:host([data-render-mode="shadow"]) .slds-slide-from-bottom-to-top {
+  :host([data-render-mode="shadow"]) .slds-slide-from-bottom-to-top {
   transform: translateY(10%);
   will-change: transform;
 }
 
-:host([data-render-mode="shadow"]) .slds-slide-from-top-to-bottom {
+  :host([data-render-mode="shadow"]) .slds-slide-from-top-to-bottom {
   transform: translateY(-10%);
   will-change: transform;
 }
 
-:host([data-render-mode="shadow"]) .slds-slide-from-right-to-left {
+  :host([data-render-mode="shadow"]) .slds-slide-from-right-to-left {
   transform: translateX(5%);
   will-change: transform;
 }
 
-:host([data-render-mode="shadow"]) .slds-slide-from-left-to-right {
+  :host([data-render-mode="shadow"]) .slds-slide-from-left-to-right {
   transform: translateX(-5%);
   will-change: transform;
 }
 
-/**
+  /**
  * Visibility Utilities
  *
  * @TODO: refactor into utilities package once it is available
@@ -669,8 +616,8 @@
  * https://github.com/salesforce-ux/product-subsystem/issues/44
  */
 
-:host([data-render-mode="shadow"]) .slds-hide {
+  :host([data-render-mode="shadow"]) .slds-hide {
   display: none;
 }
 
-/* stylelint-enable */
+  /* stylelint-enable */

package/src/lightning/primitiveButton/primitiveButton.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isIE11,
     isCSR,
@@ -26,7 +27,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 LightningElement {
+export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 
@@ -461,6 +462,7 @@ export default class LightningPrimitiveButton extends LightningElement {
         }
     }
     connectedCallback() {
+        super.connectedCallback();
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }