lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -5,6 +5,7 @@ import {
     assert,
     normalizeBoolean,
     normalizeString,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import subPage from '@salesforce/label/LightningVerticalNavigation.subPage';
 
@@ -98,6 +99,37 @@ export default class LightningVerticalNavigation extends LightningShadowBaseClas
         return classes.toString();
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        this.addItemEventListeners();
+    }
+
+    addItemEventListeners() {
+        if (isCSR) {
+            this.addEventListener(
+                'privateitemregister',
+                this.handleItemRegister.bind(this)
+            );
+            this.addEventListener(
+                'privateitemselect',
+                this.handleItemSelect.bind(this)
+            );
+        }
+    }
+
+    removeItemEventListeners() {
+        if (isCSR) {
+            this.removeEventListener(
+                'privateitemregister',
+                this.handleItemRegister.bind(this)
+            );
+            this.removeEventListener(
+                'privateitemselect',
+                this.handleItemSelect.bind(this)
+            );
+        }
+    }
+
     /**
      * @name verticalNavigationItems
      * @type {Array}
@@ -142,35 +174,41 @@ export default class LightningVerticalNavigation extends LightningShadowBaseClas
      * @param {String} itemName - label of the selected child navigation item.
      */
     selectNavigationItem(itemName) {
-        // dispatch before events
-        const beforeselectevent = new CustomEvent('beforeselect', {
-            cancelable: true,
-            detail: {
-                name: itemName,
-            },
-        });
-        this.dispatchEvent(beforeselectevent);
-
-        if (!beforeselectevent.defaultPrevented) {
-            // select navigation item
-            this.verticalNavigationItems.forEach((navigationItem) => {
-                if (navigationItem.name === itemName) {
-                    navigationItem.callbacks.select();
-                } else {
-                    navigationItem.callbacks.deselect();
-                }
+        if (isCSR) {
+            // dispatch before events
+            const beforeselectevent = new CustomEvent('beforeselect', {
+                cancelable: true,
+                detail: {
+                    name: itemName,
+                },
             });
-            // update state
-            this._selectedItem = itemName;
-
-            // fire after events
-            this.dispatchEvent(
-                new CustomEvent('select', {
-                    detail: {
-                        name: itemName,
-                    },
-                })
-            );
+            this.dispatchEvent(beforeselectevent);
+
+            if (!beforeselectevent.defaultPrevented) {
+                // select navigation item
+                this.verticalNavigationItems.forEach((navigationItem) => {
+                    if (navigationItem.name === itemName) {
+                        navigationItem.callbacks.select();
+                    } else {
+                        navigationItem.callbacks.deselect();
+                    }
+                });
+                // update state
+                this._selectedItem = itemName;
+
+                // fire after events
+                this.dispatchEvent(
+                    new CustomEvent('select', {
+                        detail: {
+                            name: itemName,
+                        },
+                    })
+                );
+            }
         }
     }
+
+    disconnectedCallback() {
+        this.removeItemEventListeners();
+    }
 }

package/src/lightning/verticalNavigation/verticalNavigation.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/verticalNavigationItem/vertical-navigation-item.slds.css

@@ -0,0 +1,63 @@
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action {
+  --slds-c-icon-color-foreground-default: currentcolor;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block-start: var(--slds-c-verticalnavigationitem-spacing-blockstart, var(--slds-g-spacing-2));
+  padding-block-end: var(--slds-c-verticalnavigationitem-spacing-blockend, var(--slds-g-spacing-2));
+  padding-inline-start: var(--slds-c-verticalnavigationitem-spacing-inlinestart, var(--slds-g-spacing-6));
+  padding-inline-end: var(--slds-c-verticalnavigationitem-spacing-inlineend, var(--slds-g-spacing-5));
+  border-block-start: var(--slds-g-sizing-border-1) solid transparent;
+  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
+  cursor: pointer;
+  color: var(--slds-g-color-neutral-base-10);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {
+  --slds-c-button-neutral-font-lineheight: default;
+  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-50);
+
+  width: inherit;
+  border-block-start: 1px solid transparent;
+  border-block-end: 1px solid transparent;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action-text {
+  color: var(--slds-g-color-brand-base-50);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:hover {
+  box-shadow: inset 2px 0 0 var(--slds-g-color-brand-base-60);
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:focus {
+  text-decoration: underline;
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item) {
+  position: relative;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:focus-within) {
+  box-shadow: inset 0 0 0 1px var(--slds-g-color-brand-base-60);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:hover),:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) {
+  background: var(--slds-c-verticalnavigationitem-color, var(--slds-g-color-brand-base-95));
+}
+
+:host([data-render-mode="shadow"].slds-is-active) .slds-nav-vertical__action:not(:focus) {
+  border-color: var(--slds-c-verticalnavigationitem-border-color, transparent);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) .slds-nav-vertical__action {
+  font-weight: bold;
+  box-shadow: inset 4px 0 0 var(--slds-g-color-brand-base-60);
+}

package/src/lightning/verticalNavigationItem/verticalNavigationItem.css

@@ -1,3 +1,2 @@
-:host {
-    display: list-item;
-}
+@import './verticalNavigationItem.lbc.synthetic.css';
+@import './verticalNavigationItem.lbc.native.css';

package/src/lightning/verticalNavigationItem/verticalNavigationItem.js

@@ -1,11 +1,16 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_HREF = 'javascript:void(0);'; // eslint-disable-line no-script-url
 
 /**
  * A text-only link within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigationItem extends LightningElement {
+export default class LightningVerticalNavigationItem extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+    _rendered = false;
+
     /**
      * The text displayed for the navigation item.
      * @type {string}
@@ -30,21 +35,30 @@ export default class LightningVerticalNavigationItem extends LightningElement {
     @track _selected = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-nav-vertical__item');
-        this.dispatchEvent(
-            new CustomEvent('privateitemregister', {
-                bubbles: true,
-                cancelable: true,
-                detail: {
-                    callbacks: {
-                        select: this.select.bind(this),
-                        deselect: this.deselect.bind(this),
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateitemregister', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        callbacks: {
+                            select: this.select.bind(this),
+                            deselect: this.deselect.bind(this),
+                        },
+                        name: this.name,
                     },
-                    name: this.name,
-                },
-            })
-        );
+                })
+            );
+        }
+    }
+
+    renderedCallback() {
+        if (!this._rendered) {
+            this._rendered = true;
+        }
     }
 
     select() {
@@ -58,7 +72,7 @@ export default class LightningVerticalNavigationItem extends LightningElement {
     }
 
     get ariaCurrent() {
-        return this._selected ? 'page' : null;
+        return this._selected && this._rendered ? 'page' : null;
     }
 
     handleClick(event) {

package/src/lightning/verticalNavigationItem/verticalNavigationItem.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

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

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

@@ -0,0 +1,3 @@
+:host {
+    display: list-item;
+}

package/src/lightning/verticalNavigationItemBadge/badge.slds.css

@@ -0,0 +1,76 @@
+
+  :host([data-render-mode="shadow"]) [part="badge"] {
+    /**
+      * Remap to SLDS blueprint hooks for parity
+      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+      *
+      */
+    /* stylelint-disable */
+    --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
+    /* stylelint-enable */
+    display: inline-flex;
+    align-items: center;
+    padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
+    color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-weight: var(--slds-g-font-weight-7);
+    /* stylelint-disable */
+    line-height: var(--slds-c-badge-font-lineheight, initial);
+    /* stylelint-enable */
+    white-space: nowrap;
+    border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
+    border-style: solid;
+    border-color: var(--slds-c-badge-color-border, transparent);
+    border-radius: var(--slds-c-badge-radius-border, 15rem);
+    background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"]:empty {
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
+    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
+    vertical-align: middle;
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for this component does not expose an attribute for this class. Establishing a programmatic
+     mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_inverse) {
+    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
+     the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_lightest) {
+    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90)));
+  }
+
+  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+    margin-inline-start: var(--slds-g-spacing-2);
+  }

package/src/lightning/verticalNavigationItemBadge/vertical-navigation-item.slds.css

@@ -0,0 +1,63 @@
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action {
+  --slds-c-icon-color-foreground-default: currentcolor;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block-start: var(--slds-c-verticalnavigationitem-spacing-blockstart, var(--slds-g-spacing-2));
+  padding-block-end: var(--slds-c-verticalnavigationitem-spacing-blockend, var(--slds-g-spacing-2));
+  padding-inline-start: var(--slds-c-verticalnavigationitem-spacing-inlinestart, var(--slds-g-spacing-6));
+  padding-inline-end: var(--slds-c-verticalnavigationitem-spacing-inlineend, var(--slds-g-spacing-5));
+  border-block-start: var(--slds-g-sizing-border-1) solid transparent;
+  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
+  cursor: pointer;
+  color: var(--slds-g-color-neutral-base-10);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {
+  --slds-c-button-neutral-font-lineheight: default;
+  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-50);
+
+  width: inherit;
+  border-block-start: 1px solid transparent;
+  border-block-end: 1px solid transparent;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action-text {
+  color: var(--slds-g-color-brand-base-50);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:hover {
+  box-shadow: inset 2px 0 0 var(--slds-g-color-brand-base-60);
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:focus {
+  text-decoration: underline;
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item) {
+  position: relative;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:focus-within) {
+  box-shadow: inset 0 0 0 1px var(--slds-g-color-brand-base-60);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:hover),:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) {
+  background: var(--slds-c-verticalnavigationitem-color, var(--slds-g-color-brand-base-95));
+}
+
+:host([data-render-mode="shadow"].slds-is-active) .slds-nav-vertical__action:not(:focus) {
+  border-color: var(--slds-c-verticalnavigationitem-border-color, transparent);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) .slds-nav-vertical__action {
+  font-weight: bold;
+  box-shadow: inset 4px 0 0 var(--slds-g-color-brand-base-60);
+}

package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.css

@@ -1,3 +1,2 @@
-:host {
-    display: list-item;
-}
+@import './verticalNavigationItemBadge.lbc.synthetic.css';
+@import './verticalNavigationItemBadge.lbc.native.css';

package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.html

@@ -7,7 +7,7 @@
        {label}
 
        <template if:true={showBadge}>
-           <span class="slds-badge slds-col_bump-left">
+           <span part="badge" class="slds-badge slds-col_bump-left">
                <span class="slds-assistive-text">:</span> {badgeCount} <span class="slds-assistive-text">{assistiveText}</span>
            </span>
        </template>

package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js

@@ -1,5 +1,7 @@
 import labelNewItems from '@salesforce/label/LightningVerticalNavigation.newItems';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     newItems: labelNewItems,
@@ -10,7 +12,9 @@ const DEFAULT_HREF = 'javascript:void(0);'; // eslint-disable-line no-script-url
 /**
  * A link and badge within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigationItemBadge extends LightningElement {
+export default class LightningVerticalNavigationItemBadge extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+    _rendered = false;
     /**
      * The text displayed for this navigation item.
      * @type {string}
@@ -49,21 +53,30 @@ export default class LightningVerticalNavigationItemBadge extends LightningEleme
     @track _selected = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-nav-vertical__item');
-        this.dispatchEvent(
-            new CustomEvent('privateitemregister', {
-                bubbles: true,
-                cancelable: true,
-                detail: {
-                    callbacks: {
-                        select: this.select.bind(this),
-                        deselect: this.deselect.bind(this),
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateitemregister', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        callbacks: {
+                            select: this.select.bind(this),
+                            deselect: this.deselect.bind(this),
+                        },
+                        name: this.name,
                     },
-                    name: this.name,
-                },
-            })
-        );
+                })
+            );
+        }
+    }
+
+    renderedCallback() {
+        if (!this._rendered) {
+            this._rendered = true;
+        }
     }
 
     select() {
@@ -77,7 +90,7 @@ export default class LightningVerticalNavigationItemBadge extends LightningEleme
     }
 
     get ariaCurrent() {
-        return this._selected ? 'page' : false;
+        return this._selected && this._rendered ? 'page' : false;
     }
 
     get showBadge() {

package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import 'lightning/sldsUtilsGrid';
+@import './vertical-navigation-item.slds.css';
+@import './badge.slds.css';

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

@@ -0,0 +1,3 @@
+:host {
+    display: list-item;
+}

package/src/lightning/verticalNavigationItemIcon/vertical-navigation-item.slds.css

@@ -0,0 +1,63 @@
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action {
+  --slds-c-icon-color-foreground-default: currentcolor;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block-start: var(--slds-c-verticalnavigationitem-spacing-blockstart, var(--slds-g-spacing-2));
+  padding-block-end: var(--slds-c-verticalnavigationitem-spacing-blockend, var(--slds-g-spacing-2));
+  padding-inline-start: var(--slds-c-verticalnavigationitem-spacing-inlinestart, var(--slds-g-spacing-6));
+  padding-inline-end: var(--slds-c-verticalnavigationitem-spacing-inlineend, var(--slds-g-spacing-5));
+  border-block-start: var(--slds-g-sizing-border-1) solid transparent;
+  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
+  cursor: pointer;
+  color: var(--slds-g-color-neutral-base-10);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {
+  --slds-c-button-neutral-font-lineheight: default;
+  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-50);
+
+  width: inherit;
+  border-block-start: 1px solid transparent;
+  border-block-end: 1px solid transparent;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action-text {
+  color: var(--slds-g-color-brand-base-50);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:hover {
+  box-shadow: inset 2px 0 0 var(--slds-g-color-brand-base-60);
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical__action:focus {
+  text-decoration: underline;
+  color: currentcolor;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item) {
+  position: relative;
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:focus-within) {
+  box-shadow: inset 0 0 0 1px var(--slds-g-color-brand-base-60);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item:hover),:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) {
+  background: var(--slds-c-verticalnavigationitem-color, var(--slds-g-color-brand-base-95));
+}
+
+:host([data-render-mode="shadow"].slds-is-active) .slds-nav-vertical__action:not(:focus) {
+  border-color: var(--slds-c-verticalnavigationitem-border-color, transparent);
+}
+
+:host([data-render-mode="shadow"].slds-nav-vertical__item.slds-is-active) .slds-nav-vertical__action {
+  font-weight: bold;
+  box-shadow: inset 4px 0 0 var(--slds-g-color-brand-base-60);
+}

package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.css

@@ -1,3 +1,2 @@
-:host {
-    display: list-item;
-}
+@import './verticalNavigationItemIcon.lbc.synthetic.css';
+@import './verticalNavigationItemIcon.lbc.native.css';