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

package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css

@@ -6,7 +6,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   Corresponding Work Item: W-14458332
 */
 
-.slds-assistive-text {
+:host([data-render-mode='shadow']) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;
@@ -19,6 +19,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     white-space: nowrap !important;
 }
 
-.slds-hide {
+:host([data-render-mode='shadow']) .slds-hide {
     display: none !important;
 }

package/src/lightning/slider/__docs__/slider.md

@@ -107,7 +107,3 @@ value.
 
 For precise numerical values, we recommend using the `lightning-input`
 component of `type="number"` instead.
-
-#### Source Code
-
-`lightning-slider` 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/spinner/__docs__/spinner.md

@@ -66,7 +66,3 @@ export default class DemoSpinner extends LightningElement {
     }
 }
 ```
-
-#### Source Code
-
-`lightning-spinner` 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/staticMap/staticMap.js

@@ -2,7 +2,7 @@ import lang from '@salesforce/i18n/lang';
 import formFactor from '@salesforce/client/formFactor';
 import labelTitleWithAddress from '@salesforce/label/LightningMap.titleWithAddress';
 import labelTitleWithoutAddress from '@salesforce/label/LightningMap.iframeTitle';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { ratioToScale, calculateSize } from './util';
 import {
     registerMessageHandler,
@@ -14,6 +14,7 @@ import { buildMapSourceUrl } from 'lightning/mapUtils';
 import { isEmptyString } from 'lightning/inputUtils';
 import { formatLabel } from 'lightning/utils';
 import { isCSR } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const EVENT_NAME = {
     LOADING_MAP: 'loadingMap',
@@ -25,7 +26,7 @@ const i18n = {
     titleWithoutAddress: labelTitleWithoutAddress,
 };
 
-export default class LightningStaticMap extends LightningElement {
+export default class LightningStaticMap extends LightningShadowBaseClass {
     @api width;
     @api height;
     @api street;

package/src/lightning/tab/__docs__/tab.md

@@ -50,7 +50,3 @@ The event properties are as follows.
 | bubbles    | true  | This event bubbles up through the DOM.                                     |
 | cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event. |
 | composed   | true  | This event propagates outside of the component in which it was dispatched. |
-
-#### Source Code
-
-`lightning-tab` 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/tab/tab.js

@@ -1,6 +1,7 @@
 import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
@@ -12,7 +13,7 @@ export default class LightningTab extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        if (this.template.synthetic) {
+        if (isCSR && this.template.synthetic) {
             this.dispatchEvent(
                 new CustomEvent('privatetabregister', {
                     cancelable: true,
@@ -55,7 +56,9 @@ export default class LightningTab extends LightningShadowBaseClass {
     loadContent() {
         this._loadContent = true;
 
-        this.dispatchEvent(new CustomEvent('active'));
+        if (isCSR) {
+            this.dispatchEvent(new CustomEvent('active'));
+        }
     }
 
     disconnectedCallback() {
@@ -185,7 +188,7 @@ export default class LightningTab extends LightningShadowBaseClass {
     }
 
     _dispatchDataChangeEventIfConnected() {
-        if (this._connected) {
+        if (isCSR && this._connected) {
             this.dispatchEvent(
                 new CustomEvent('privatetabdatachange', {
                     cancelable: true,

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

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

package/src/lightning/tabBar/tabBar.js

@@ -11,6 +11,7 @@ import { calculateOverflow } from 'lightning/overflowLibrary';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { handleKeyDownOnTabList } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     more: labelOverflowMore,
@@ -44,7 +45,9 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         if (this.overflowSupported) {
             this._queueOverflow();
         }
-        this.ariaObserver = new AriaObserver(this);
+        if (isCSR) {
+            this.ariaObserver = new AriaObserver(this);
+        }
     }
 
     renderedCallback() {
@@ -74,7 +77,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     }
 
     get tabLinks() {
-        return this.template.querySelectorAll(`a[role="tab"]`);
+        return isCSR ? this.template.querySelectorAll(`a[role="tab"]`) : null;
     }
 
     disconnectedCallback() {
@@ -169,7 +172,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
 
         this._queueSynchronizeA11 = true;
 
-        if (this._connected && this.overflowSupported) {
+        if (isCSR && this._connected && this.overflowSupported) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(this._queueOverflow.bind(this));
         }
@@ -473,8 +476,10 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         this._allTabs.forEach((tab) => {
             tab.visible = true;
         });
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(this._recomputeOverflow.bind(this));
+        if (isCSR) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(this._recomputeOverflow.bind(this));
+        }
     }
 
     _recomputeOverflow() {

package/src/lightning/tabset/__docs__/tabset.md

@@ -179,7 +179,3 @@ This example sets custom assistive text for a heading, specifies `heading-level`
   </lightning-tabset>
 </template>
 ```
-
-#### Source Code
-
-`lightning-tabset` 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/tabset/tabset.html

@@ -9,6 +9,7 @@
                 onprivatetablinkregister={handleTabLinkRegister}
             >{headingLabel}</div>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-labelledby="tabset-heading"
@@ -17,6 +18,7 @@
         </template>
         <template lwc:else>
             <lightning-tab-bar
+                exportparts="tab-bar, tab-item"
                 variant={variant}
                 onselect={handleTabSelected}
                 aria-label={defaultAriaLabel}

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

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

package/src/lightning/textarea/__docs__/textarea.md

@@ -241,7 +241,3 @@ See [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/ri
 Use the `label` attribute to identify the text area for users of assistive technology.
 The `label` attribute creates an HTML label element on the input element. To hide a
 label from view and make it available to assistive technology, use the `label-hidden` variant.
-
-#### Source Code
-
-`lightning-textarea` 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/textarea/textarea.js

@@ -424,6 +424,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
 
     connectedCallback() {
         super.connectedCallback();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
         this.updateHostClassList();
         this._connected = true;
         this.interactingState = new InteractingState();
@@ -431,7 +434,9 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
-        this.ariaObserver.sync(this._isNativeShadow);
+        if (this.isConnected) {
+            this.ariaObserver.sync(this._isNativeShadow);
+        }
         // IE11: This is needed to work-around IE11 issue where it would append default value to the place holder,
         // instead of actually setting the value on the textarea element.
         if (!this._rendered) {

package/src/lightning/tile/__docs__/tile.md

@@ -165,7 +165,3 @@ The event properties are as follows.
 | bubbles    | false | This event does not bubble.                                                                               |
 | cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                            |
-
-#### Source Code
-
-`lightning-tile` 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/toastContainer/__docs__/toastContainer.md

@@ -1,4 +1,4 @@
-Use the `lightning/toastContainer` module (Beta) to manage a list of toast components and their order. Pages support a single page-level toast container. 
+Use the `lightning/toastContainer` module to manage a list of toast components and their order. Each site page supports a single toast container. You can create toast notifications with [lightning/toast](/docs/component-library/bundle/lightning-toast/documentation) and manage them using `lightning/toastContainer`.
 
 This module is available only for LWR Sites for Experience Cloud. For more information, see [Create Components for LWR Sites](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_components.htm).
 
@@ -34,6 +34,7 @@ export default class MyApp extends LightningElement {
 ```
 
 #### Accessibility
+
 Toast container follows the SLDS [Global Focus Orchestration](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration) accessibility guidelines, which allow users to use the keyboard shortcut to navigate between toasts.
 - Press `Control` + `F6` or `Command` + `F6` for Mac OS to move focus to next toast, if any.
-- Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.
+- Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -228,31 +228,40 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            target.addEventListener('touchstart', (e) => {
-                e.stopPropagation();
-                this.toggle();
-            });
-            ['mouseenter', 'focus'].forEach((name) =>
-                target.addEventListener(name, (event) => this.show(event))
+            ['touchstart', 'click'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
+                    this.toggleIfTouchOrClick(event)
+                )
             );
-            ['mouseleave', 'blur'].forEach((name) =>
-                target.addEventListener(name, (event) =>
+
+            ['mouseenter', 'focus'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) => this.show(event))
+            );
+            ['mouseleave', 'blur'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
                     this.hideIfNotSelfCover(event)
                 )
             );
 
             target.addEventListener('keydown', (event) => {
-                if (event.keyCode === 13 && !this._visible) {
-                    this.toggle();
-                } else if (this._visible) {
-                    this.hide();
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                    }
+                if (event.key === 'Escape' && this._visible) {
+                    this.hideIfNotSelfCover(event);
+                    event.stopPropagation();
                 }
             });
         }
     }
+
+    /* mobile listens for both 'click' and 'touchstart', but we only want to listen to
+       either 'touchstart' and not 'click', otherwise it will double toggle. Call preventDefault() to prevent the
+       'click' event from bubbling after a 'touchstart' is detected on mobile.
+    */
+    toggleIfTouchOrClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggle();
+    }
+
     handleEscape(e) {
         if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();

package/src/lightning/tree/__docs__/tree.md

@@ -339,7 +339,3 @@ The event properties are as follows.
 The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.
 
 For a recipe that uses `lightning-tree`, see the `c-wire-get-picklist-values-by-record-type` component in the LWC Recipes repo.
-
-#### Source Code
-
-`lightning-tree` 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/tree/tree.js

@@ -263,7 +263,11 @@ export default class LightningTree extends LightningElement {
             // Need to dispatch a change event specifically for interop to pick up the change to node.expanded
             this.dispatchEvent(
                 new CustomEvent('change', {
-                    detail: { items: deepCopy(this._items) },
+                    detail: {
+                        items: deepCopy(this._items),
+                        key: node.nodeRef.name,
+                        expand: node.nodeRef.expanded,
+                    },
                 })
             );
         }

package/src/lightning/verticalNavigation/__docs__/verticalNavigation.md

@@ -194,7 +194,3 @@ The event properties are as follows.
 | bubbles    | false | This event does not bubble.                                                                               |
 | cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                            |
-
-#### Source Code
-
-`lightning-vertical-navigation` 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/verticalNavigation/vertical-navigation.slds.css

@@ -2,3 +2,17 @@
 :host([data-render-mode="shadow"]) [part='vertical-navigation'] {
   position: relative;
 }
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_compact {
+  --slds-c-verticalnavigationitem-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationitem-spacing-inlinestart: var(--slds-g-spacing-5);
+  --slds-c-verticalnavigationsection-spacing-blockstart: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-blockend: var(--slds-g-spacing-1);
+  --slds-c-verticalnavigationsection-spacing-inlinestart: var(--slds-g-spacing-5);
+}
+
+:host([data-render-mode="shadow"]) .slds-nav-vertical_shade {
+  --slds-c-verticalnavigationitem-color: var(--slds-g-color-neutral-base-100);
+  --slds-c-verticalnavigationitem-border-color: var(--slds-g-color-neutral-base-90);
+}

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -1 +1 @@
-@import './verticalNavigation.lbc.native.css';
+@import './verticalNavigation.lbc.native.css';

package/src/lightning/verticalNavigation/verticalNavigation.html

@@ -1,5 +1,5 @@
 <template>
-    <nav class={computedClass} onprivateitemselect={handleItemSelect} onprivateitemregister={handleItemRegister} aria-label={ariaLabel} part="vertical-navigation">
+    <nav class={computedClass} aria-label={ariaLabel} part="vertical-navigation">
         <slot></slot>
     </nav>
 </template>

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

@@ -9,7 +9,3 @@ A `lightning-vertical-navigation-item` component is a navigation item within `li
 
 For more information, see the
 [lightning-vertical-navigation](bundle/lightning-vertical-navigation/documentation) documentation.
-
-#### Source Code
-
-`lightning-vertical-navigation-item` 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/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';