lightning-base-components 1.21.3-alpha → 1.21.5-alpha

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/__docs__/verticalNavigationItemBadge.md

@@ -40,7 +40,3 @@ Here's an example that creates a navigation menu with an item containing a badge
     </lightning-vertical-navigation>
 </template>
 ```
-
-#### Source Code
-
-`lightning-vertical-navigation-item-badge` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

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/__docs__/verticalNavigationItemIcon.md

@@ -37,7 +37,3 @@ Icons from the Lightning Design System are supported. Visit [https://lightningde
 When applying Lightning Design System classes or icons, check that they are available in the
 Lightning Design System release tied to your org. The latest Lightning Design System
 resources become available only when the new release is available in your org.
-
-#### Source Code
-
-`lightning-vertical-navigation-item-icon` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

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';

package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.js

@@ -1,11 +1,16 @@
-import { LightningElement, api } from 'lwc';
+import { api } 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 link and icon within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigationItemIcon extends LightningElement {
+export default class LightningVerticalNavigationItemIcon extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+    _rendered = false;
+
     /**
      * The text displayed for this navigation item.
      * @type {string}
@@ -41,21 +46,30 @@ export default class LightningVerticalNavigationItemIcon extends LightningElemen
     _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() {
@@ -69,7 +83,7 @@ export default class LightningVerticalNavigationItemIcon extends LightningElemen
     }
 
     get ariaCurrent() {
-        return this._selected ? 'page' : null;
+        return this._selected && this._rendered ? 'page' : null;
     }
 
     handleClick(event) {

package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.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/verticalNavigationItemIcon/verticalNavigationItemIcon.lbc.native.css

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

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

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