lightning-base-components 1.21.3-alpha → 1.21.4-alpha

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

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;
+}