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

package/src/lightning/toast/toast.slds.css

@@ -13,23 +13,23 @@
     align-items: center;
     position: relative;
     background: none;
-    background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
-    color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
-    border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    margin: var(--sds-g-spacing-2, 0.5rem);
-    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--sds-g-spacing-8, 3rem));
-    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--sds-g-spacing-5, 1.5rem));
-    min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
+    background-color: var(--slds-c-toast-color-background, var(--slds-g-info-container-1));
+    color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
+    border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
+    margin: var(--slds-g-spacing-2);
+    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
+    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
+    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
+    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
+    min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
     text-align: left;
     justify-content: flex-start;
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a {
     color: currentcolor;
-    border: var(--sds-g-sizing-border-1, 1px) solid transparent;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border: var(--slds-g-sizing-border-1) solid transparent;
+    border-radius: var(--slds-g-radius-border-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
@@ -39,8 +39,8 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
-    box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    box-shadow: 0 0 3px var(--slds-g-info-container-1);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
@@ -54,9 +54,9 @@
   :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
     float: right;
     position: absolute;
-    top: var(--sds-g-spacing-3, 0.75rem);
-    right: var(--sds-g-spacing-3, 0.75rem);
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    top: var(--slds-g-spacing-3);
+    right: var(--slds-g-spacing-3);
+    margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-0.125rem);
   }
 
@@ -88,16 +88,16 @@
 
   /* TODO W-12674349: remove after text utils are added */
   :host([data-render-mode="shadow"]) .slds-text-heading_small {
-    font-size: var(--sds-g-font-size-base, 1rem);
-    line-height: var(--sds-g-font-lineheight-2, 1.25);
+    font-size: var(--slds-g-font-size-base);
+    line-height: var(--slds-g-font-lineheight-2);
   }
 
   /* TODO W-12674349: remove after alert is added */
   :host([data-render-mode="shadow"]) .slds-notify__close {
     position: absolute;
     top: 50%;
-    right: var(--sds-g-spacing-3, 0.75rem);
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    right: var(--slds-g-spacing-3);
+    margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-50%);
   }
 }

package/src/lightning/toastContainer/toast.slds.css

@@ -13,23 +13,23 @@
     align-items: center;
     position: relative;
     background: none;
-    background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
-    color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
-    border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    margin: var(--sds-g-spacing-2, 0.5rem);
-    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--sds-g-spacing-8, 3rem));
-    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
-    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--sds-g-spacing-5, 1.5rem));
-    min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
+    background-color: var(--slds-c-toast-color-background, var(--slds-g-info-container-1));
+    color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
+    border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
+    margin: var(--slds-g-spacing-2);
+    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
+    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
+    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
+    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
+    min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
     text-align: left;
     justify-content: flex-start;
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a {
     color: currentcolor;
-    border: var(--sds-g-sizing-border-1, 1px) solid transparent;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
+    border: var(--slds-g-sizing-border-1) solid transparent;
+    border-radius: var(--slds-g-radius-border-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
@@ -39,8 +39,8 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
-    box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    box-shadow: 0 0 3px var(--slds-g-info-container-1);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
@@ -54,9 +54,9 @@
   :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
     float: right;
     position: absolute;
-    top: var(--sds-g-spacing-3, 0.75rem);
-    right: var(--sds-g-spacing-3, 0.75rem);
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    top: var(--slds-g-spacing-3);
+    right: var(--slds-g-spacing-3);
+    margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-0.125rem);
   }
 
@@ -88,16 +88,16 @@
 
   /* TODO W-12674349: remove after text utils are added */
   :host([data-render-mode="shadow"]) .slds-text-heading_small {
-    font-size: var(--sds-g-font-size-base, 1rem);
-    line-height: var(--sds-g-font-lineheight-2, 1.25);
+    font-size: var(--slds-g-font-size-base);
+    line-height: var(--slds-g-font-lineheight-2);
   }
 
   /* TODO W-12674349: remove after alert is added */
   :host([data-render-mode="shadow"]) .slds-notify__close {
     position: absolute;
     top: 50%;
-    right: var(--sds-g-spacing-3, 0.75rem);
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+    right: var(--slds-g-spacing-3);
+    margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-50%);
   }
 }

package/src/lightning/toastContainer/toastContainer.css

@@ -1,43 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './toast.slds.css';
-@import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid'; */
-
-.top,
-:host([data-render-mode="shadow"]) .top {
-    top: 0;
-    bottom: unset;
-}
-
-.bottom,
-:host([data-render-mode="shadow"]) .bottom {
-    bottom: 0;
-    top: unset;
-}
-
-.left,
-:host([data-render-mode="shadow"]) .left {
-    left: 0;
-    right: auto;
-}
-
-.right,
-:host([data-render-mode="shadow"]) .right {
-    left: auto;
-    right: 0;
-}
-
-.center,
-:host([data-render-mode="shadow"]) .center {
-    transform: translate(50%);
-    right: 50%;
-}
-
-@media (max-width: 30rem) {
-    .center,
-    :host([data-render-mode="shadow"]) .center {
-        transform: none;
-        right: 0;
-        left: 0;
-    }
-}
+@import './toastContainer.lbc.synthetic.css';
+@import './toastContainer.lbc.native.css';

package/src/lightning/toastContainer/toastContainer.lbc.native.css

@@ -0,0 +1,4 @@
+@import 'lightning/sldsCommon';
+@import './toast.slds.css';
+@import 'lightning/sldsUtilsPosition';
+@import 'lightning/sldsUtilsGrid';

package/src/lightning/toastContainer/toastContainer.lbc.synthetic.css

@@ -0,0 +1,38 @@
+.top,
+:host([data-render-mode="shadow"]) .top {
+    top: 0;
+    bottom: unset;
+}
+
+.bottom,
+:host([data-render-mode="shadow"]) .bottom {
+    bottom: 0;
+    top: unset;
+}
+
+.left,
+:host([data-render-mode="shadow"]) .left {
+    left: 0;
+    right: auto;
+}
+
+.right,
+:host([data-render-mode="shadow"]) .right {
+    left: auto;
+    right: 0;
+}
+
+.center,
+:host([data-render-mode="shadow"]) .center {
+    transform: translate(50%);
+    right: 50%;
+}
+
+@media (max-width: 30rem) {
+    .center,
+    :host([data-render-mode="shadow"]) .center {
+        transform: none;
+        right: 0;
+        left: 0;
+    }
+}

package/src/lightning/utilsPrivate/animation.js

@@ -1,16 +1,18 @@
-import { isIE11 } from './browser';
+import { isCSR } from './ssr';
 
 /**
  * Does the browser display animation.
  * Always returns false for IE11 due to performance.
  */
 export function hasAnimation() {
-    if (isIE11) {
-        return false;
+    if (isCSR) {
+        if (!window.matchMedia) {
+            return true;
+        }
+        const mediaQuery = window.matchMedia(
+            '(prefers-reduced-motion: reduce)'
+        );
+        return !(!mediaQuery || mediaQuery.matches);
     }
-    if (!window.matchMedia) {
-        return true;
-    }
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    return !(!mediaQuery || mediaQuery.matches);
+    return false;
 }

package/src/lightning/utilsPrivate/aria.js

@@ -128,8 +128,8 @@ export function isAriaDescriptionSupported() {
     }
     // if not previously set, test for browser support
     const testVal = 'test ability to set';
-    const span = document.createElement('span');
     try {
+        const span = document.createElement('span');
         span.ariaDescription = testVal;
         const ariaDescVal = span.getAttribute(ARIA.DESCRIPTION);
         ariaDescriptionSupported = testVal === ariaDescVal;

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -142,7 +142,9 @@ export function getShadowActiveElements() {
 }
 
 export function isRTL() {
-    return document.dir === 'rtl';
+    const isCSR = typeof window !== 'undefined';
+    // document does not exist on server and MRT does not support RTL below the root component (https://gus.lightning.force.com/lightning/r/ADM_Epic__c/a3QEE000000KEOb2AO/view)
+    return isCSR && document.dir === 'rtl';
 }
 
 export function isUndefinedOrNull(value) {
@@ -268,10 +270,24 @@ export function buttonGroupOrderClass(groupOrder) {
  * @returns {Boolean} Whether the component is native
  */
 export function isNativeComponent(cmp) {
-    if (cmp && cmp.template && cmp.template.constructor) {
-        return !!String(cmp.template.constructor).match(/\[native code\]/);
-    }
-    return false;
+    return !cmp?.template?.synthetic;
+}
+
+/**
+ * Determine if event is of type FocusEvent (blur or focus). This is required
+ * in some cases to prevent these events from bubbling to ensure parity between synthetic
+ * and native shadow.
+ *
+ * 'focus' and 'blur' events that have been propagated manually via CustomEvents are not considered
+ * FocusEvents.
+ *
+ * Corresponding LWC issue: https://github.com/salesforce/lwc/issues/1244
+ * Corresponding LBC bug: @W-13236327
+ *
+ */
+export function isBubblingFocusEvent(event) {
+    const focusEvents = ['focus', 'blur'];
+    return event instanceof FocusEvent && focusEvents.includes(event.type);
 }
 
 /**

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1,3 +1 @@
-/* sldsCommon missed earlier - check on review */
-/* @import 'lightning/sldsCommon'; */
-/* @import './vertical-navigation.slds.css'; */
+@import './verticalNavigation.lbc.native.css';

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     assert,
@@ -17,7 +18,7 @@ const ALLOWED_CHILDREN = [
  * A vertical list of links that either take the user to another page or parts of the page the user is in.
  * @slot default Placeholder for lightning-vertical-navigation-section and lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigation extends LightningElement {
+export default class LightningVerticalNavigation extends LightningShadowBaseClass {
     @track _compact;
     @track _shaded;
     @track _selectedItem;

package/src/lightning/verticalNavigation/verticalNavigation.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './vertical-navigation.slds.css';

package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.css

@@ -1,3 +1 @@
-div[role="list"] {
-    list-style: none;
-}
+@import './verticalNavigationOverflow.lbc.synthetic.css';

package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.lbc.synthetic.css

@@ -0,0 +1,3 @@
+div[role="list"] {
+    list-style: none;
+}

package/src/lightning/verticalNavigationSection/vertical-navigation-section.slds.css

@@ -1,19 +1,19 @@
 
 @supports (--styling-hooks: '') {
     :host([data-render-mode="shadow"]) .slds-nav-vertical__title {
-        padding-block-start: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-inline-start: var(--sds-g-spacing-5, 1.5rem);
-        padding-inline-end: var(--sds-g-spacing-4, 1rem);
-        font-size: var(--sds-g-font-size-base, 1rem);
-        font-weight: var(--sds-g-font-weight-7, 700);
+        padding-block-start: var(--slds-g-spacing-2);
+        padding-block-end: var(--slds-g-spacing-2);
+        padding-inline-start: var(--slds-g-spacing-5);
+        padding-inline-end: var(--slds-g-spacing-4);
+        font-size: var(--slds-g-font-size-base);
+        font-weight: var(--slds-g-font-weight-7);
     }
 
     :host([data-render-mode="shadow"]) .slds-nav-vertical__section:not(:first-of-type) {
-        margin-block-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-block-start: var(--slds-g-spacing-2);
     }
 
     :host([data-render-mode="shadow"]) .slds-nav-vertical__title:not(:first-of-type) {
-        margin-block-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-block-start: var(--slds-g-spacing-2);
     }
 }

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

@@ -1,7 +1,2 @@
-/* sldsCommon missed earlier - check on review
-@import 'lightning/sldsCommon'; */
-/* @import './vertical-navigation-section.slds.css'; */
-
-div[role="list"] {
-    list-style: none;
-}
+@import './verticalNavigationSection.lbc.synthetic.css';
+@import './verticalNavigationSection.lbc.native.css';

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,7 +1,8 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
-export default class LightningVerticalNavigationSection extends LightningElement {
+export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
     headingId = guid();
 
     @track _label;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './vertical-navigation-section.slds.css';

package/src/lightning/verticalNavigationSection/verticalNavigationSection.lbc.synthetic.css

@@ -0,0 +1,3 @@
+div[role="list"] {
+    list-style: none;
+}