lightning-base-components 1.18.1-alpha → 1.18.3-alpha

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

@@ -0,0 +1,168 @@
+
+@supports (--styling-hooks: '') {
+  :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));
+    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));
+    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-spacing-1, 0.25rem));
+    background-color: var(--slds-c-pill-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    box-shadow: var(--slds-c-pill-shadow);
+    position: relative;
+    min-height: calc(var(--sds-g-sizing-7, 1.5rem) + var(--sds-g-sizing-1, 0.125rem));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
+    margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill:hover {
+    --slds-c-pill-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill:focus {
+    outline: 0;
+    --slds-c-pill-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+    --slds-c-pill-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+  }
+
+ :host([data-render-mode="shadow"]) a {
+    text-decoration: none;
+    color: var(--sds-g-color-brand-base-50, #0176d3);
+  }
+
+  :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
+    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);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_bare {
+    --slds-c-pill-color-background: transparent;
+    --slds-c-pill-sizing-border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_bare:hover {
+    --slds-c-pill-color-background-: transparent;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__label:focus {
+    outline: 0;
+    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
+  .slds-pill__icon_container {
+    width: var(--sds-g-sizing-6, 1.25rem);
+    height: var(--sds-g-sizing-6, 1.25rem);
+    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
+    --slds-c-avatar-sizing: var(--sds-g-sizing-6, 1.25rem);
+    --slds-c-icon-sizing: calc(var(--sds-g-sizing-6, 1.25rem) - var(--sds-g-sizing-border-2, 2px));
+
+    color: var(--slds-c-pill-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    display: block;
+    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
+  .slds-pill__icon_container ~ .slds-pill__action {
+    padding-inline-start: calc(var(--sds-g-spacing-5, 1.5rem) + 2px);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__remove {
+    width: var(--sds-g-sizing-5, 1rem);
+    height: var(--sds-g-sizing-5, 1rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: var(--sds-g-sizing-2, 0.25rem);
+    border-radius: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__remove svg {
+    width: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+    height: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link {
+    border: 0;
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    transform: translateY(-50%);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
+    position: absolute;
+    top: 50%;
+    right: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    transform: translateY(-50%);
+  }
+
+  :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));
+    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));
+    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__action:focus {
+    outline: 0;
+    border-color: var(--slds-c-pill-action-color-border, var(--sds-g-color-brand-base-60, #1b96ff));
+    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error {
+    border-color: var(--slds-c-pill-error-color-border, var(--sds-g-color-error-base-50, #ea001e));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error:active {
+    border-color: var(--slds-c-pill-error-color-border-active, var(--sds-g-color-error-base-50, #ea001e));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
+    font-weight: var(--sds-g-font-weight-7, 700);
+    color: var(--sds-g-color-error-base-50, #ea001e);
+  }
+}

package/src/lightning/pillContainer/pillContainer.js

@@ -1,11 +1,13 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
     normalizeBoolean,
     normalizeString,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import formFactor from '@salesforce/client/formFactor';
@@ -23,7 +25,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 LightningElement {
+export default class LightningPillContainer extends LightningShadowBaseClass {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
@@ -40,6 +42,7 @@ export default class LightningPillContainer extends LightningElement {
     @track _pillContainerElementId;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 
@@ -119,7 +122,7 @@ export default class LightningPillContainer extends LightningElement {
      */
     @api
     get variant() {
-        return this._variant || 'standard';
+        return this._variant || STANDARD;
     }
 
     set variant(value) {
@@ -127,6 +130,7 @@ export default class LightningPillContainer extends LightningElement {
             fallbackValue: STANDARD,
             validValues: [STANDARD, BARE],
         });
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**

package/src/lightning/pillContainer/standardPillContainer.css

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

package/src/lightning/pillContainer/standardPillContainer.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedWrapperClass}>
+    <div class={computedWrapperClass} part="listbox pill-container">
         <template if:true={_showMore}>
             <span class="slds-listbox-toggle" aria-hidden="true"><button class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
         </template>
@@ -10,6 +10,7 @@
             aria-orientation="horizontal"
             onclick={handleClick}
             onkeydown={handleKeyDown}
+            part="listbox"
         >
             <template for:each={pillViewModels} for:item="pillViewModel" for:index="index">
                 <li key={pillViewModel.pill.item.label} class="slds-listbox-item" role="presentation">
@@ -36,7 +37,6 @@
                                             fallback-icon-name={pillViewModel.pill.item.fallbackIconName}
                                             variant={pillViewModel.pill.item.variant}
                                             size="x-small"
-                                            class="slds-icon_container"
                                             alternative-text={pillViewModel.pill.item.alternativeText}>
                             </lightning-avatar>
                         </template>

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

@@ -1,121 +1,121 @@
 
 @supports (--styling-hooks: '') {
-    :host([data-render-mode="shadow"]) .slds-popover {
-        position: relative;
-        border-radius: var(--sds-g-radius-border-2, 0.25rem);
-        width: var(--sds-g-sizing-15, 20rem);
-        min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
-        z-index: var(--slds-c-popover-position-zindex, 6000);
-        background-color: var(--slds-c-popover-color-background, 
-            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); 
-        border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-popover__meta {
-        margin-block-end: var(--sds-g-sizing-4, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body {
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
-        padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
-        padding-inline: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
-    .slds-popover__header,:host([data-render-mode="shadow"]) 
-    .slds-popover__footer {
-        position: relative;
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-        word-wrap: break-word;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__header {
-        border-bottom: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__footer {
-        border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
-        background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-        padding-block: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline: var(--sds-g-spacing-3, 0.75rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__footer_form {
-        text-align: center;
-        background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
-        border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__body_small {
-        max-height: var(--sds-g-sizing-14, 15rem);
-        overflow-y: auto;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover__close {
-        position: relative;
-        margin-block: var(--sds-g-spacing-1, 0.25rem);
-        margin-inline: var(--sds-g-spacing-1, 0.25rem);
-        z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_small {
-        max-width: var(--sds-g-sizing-14, 15rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_medium {
-        min-width: var(--sds-g-sizing-15, 20rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_large {
-        min-width: 25rem;
-        max-width: 512px;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
-        border: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover *:last-child {
-        margin-bottom: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_full-width {
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_hide {
-        display: none;
-    }
-    
-    :host([data-render-mode="shadow"]) .slds-popover_dark {
-        background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
-        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
-        background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
-        color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
-        fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
-        border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
-        background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
-    }
-}
+  :host([data-render-mode="shadow"]) .slds-popover {
+      position: relative;
+      border-radius: var(--sds-g-radius-border-2, 0.25rem);
+      width: var(--sds-g-sizing-15, 20rem);
+      min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
+      z-index: var(--slds-c-popover-position-zindex, 6000);
+      background-color: var(--slds-c-popover-color-background,
+          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);
+      border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__meta {
+      margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body {
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+      padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+      padding-inline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+  .slds-popover__header,:host([data-render-mode="shadow"]) 
+  .slds-popover__footer {
+      position: relative;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+      word-wrap: break-word;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__header {
+      border-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer {
+      border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+      background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+      text-align: center;
+      background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body_small {
+      max-height: var(--sds-g-sizing-14, 15rem);
+      overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__close {
+      position: relative;
+      margin-block: var(--sds-g-spacing-1, 0.25rem);
+      margin-inline: var(--sds-g-spacing-1, 0.25rem);
+      z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_small {
+      max-width: var(--sds-g-sizing-14, 15rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_medium {
+      min-width: var(--sds-g-sizing-15, 20rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_large {
+      min-width: 25rem;
+      max-width: 512px;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+      border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+      margin-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_full-width {
+      width: 100%;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_hide {
+      display: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark {
+      background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+      background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+      fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+      border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
+      background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
+  }
+}

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

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

package/src/lightning/positionLibrary/elementProxy.js

@@ -1,4 +1,4 @@
-import { isInDom, WindowManager } from './util';
+import { isInDom, WindowManager, pxToInt } from './util';
 
 export class ElementProxy {
     constructor(el, id) {
@@ -142,8 +142,13 @@ export class ElementProxy {
             ? '0'
             : parseInt(style.top.replace('px', ''), 10);
 
+        const marginOffset =
+            this.top < absPos.top
+                ? pxToInt(style.marginBottom)
+                : pxToInt(style.marginTop) * -1;
+
         let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
-        const topDif = this.top - (absPos.top + scrollTop);
+        const topDif = this.top - (absPos.top + marginOffset + scrollTop);
 
         const viewPortWidth = w.innerWidth || document.body.clientWidth;
         let rightPos = parseInt(style.right, 10);

package/src/lightning/positionLibrary/util.js

@@ -239,3 +239,11 @@ export function requestAnimationFrameAsPromise() {
         requestAnimationFrame(() => resolve());
     });
 }
+
+function isPx(value) {
+    return value.slice(-2) === 'px';
+}
+
+export function pxToInt(value) {
+    return value && isPx(value) ? parseInt(value, 10) : 0;
+}

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

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,
     normalizeBoolean,
@@ -25,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 LightningElement {
+export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 
@@ -113,7 +114,7 @@ export default class LightningPrimitiveButton extends LightningElement {
         this.ariaObserver.connect({
             targetSelector: 'button',
             attribute: 'aria-labelledby',
-            id: value,
+            relatedNodeIds: value,
         });
     }
 
@@ -132,7 +133,7 @@ export default class LightningPrimitiveButton extends LightningElement {
         this.ariaObserver.connect({
             targetSelector: 'button',
             attribute: 'aria-describedby',
-            id: value,
+            relatedNodeIds: value,
         });
     }