lightning-base-components 1.28.10-alpha → 1.28.12-alpha

package/src/lightning/tree/__examples__/deeplyNested/deeplyNested.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree component with a many levels of depth. Click on the arrow icons to expand or collapse a branch.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree items={items} header="Roles"></lightning-tree>
+        </div>
+    </div>
+</template>

package/src/lightning/tree/__examples__/links/links.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/tree/__examples__/links/links.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree component with linked items. Click an item to navigate to its link.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree items={items} header="Links"></lightning-tree>
+        </div>
+    </div>
+</template>

package/src/lightning/tree/__examples__/metatext/metatext.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/tree/__examples__/metatext/metatext.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree component with items that have metatext. Click on the arrow icons to expand or collapse a branch.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree items={items} header="Roles"></lightning-tree>
+        </div>
+    </div>
+</template>

package/src/lightning/tree/__examples__/onselect/onselect.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/tree/__examples__/onselect/onselect.html

@@ -0,0 +1,16 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree component with an <code>onselect</code> handler. Click an item in the tree to make a selection.
+        </p>
+
+        <!-- With onselect handler -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree items={items} header="Profiles" onselect={handleOnselect}></lightning-tree>
+        </div>
+
+        <div class="slds-m-vertical_medium">
+            <p>The selected item is: <span class="slds-text-heading_small">{selectedItemValue}</span></p>
+        </div>
+    </div>
+</template>

package/src/lightning/treeGrid/__examples__/basic/basic.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/treeGrid/__examples__/basic/basic.html

@@ -0,0 +1,16 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree Grid component with data from a static source. Click on the arrow icons to expand or collapse a branch.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree-grid
+                columns={gridColumns}
+                data={gridData}
+                key-field="name"
+            ></lightning-tree-grid>
+        </div>
+    </div>
+</template>

package/src/lightning/treeGrid/__examples__/expanded/expanded.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/treeGrid/__examples__/expanded/expanded.html

@@ -0,0 +1,26 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p>
+            Tree Grid component with some initially expanded rows.
+        </p>
+        <h3 class="slds-text-heading_small slds-m-bottom_large">
+            Click the "Get current expanded rows" button to view the key field values of the rows marked as expanded. Expand and collapse some rows then click the button again to see an updated result.
+        </h3>
+
+        <div class="slds-m-vertical_large">
+            <p class="slds-m-bottom_xx-small">The rows currently marked as expanded are: <span class="slds-text-heading_small">{currentExpandedRows}</span></p>
+            <lightning-button label="Get Current Expanded Rows" onclick={getCurrentExpandedRows}></lightning-button>
+        </div>
+
+        <!-- Expanded rows -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree-grid
+                class="lgc-example-treegrid"
+                columns={gridColumns}
+                data={gridData}
+                expanded-rows={gridExpandedRows}
+                key-field="name"
+            ></lightning-tree-grid>
+        </div>
+    </div>
+</template>

package/src/lightning/treeGrid/__examples__/lazyLoading/lazyLoading.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/treeGrid/__examples__/lazyLoading/lazyLoading.html

@@ -0,0 +1,20 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree Grid component with some rows that will dynamically load children only when initially expanded.
+        </p>
+
+        <!-- Expanded rows -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree-grid
+                class="lgc-example-treegrid"
+                columns={gridColumns}
+                data={gridData}
+                expanded-rows={gridExpandedRows}
+                key-field="name"
+                is-loading={gridLoadingState}
+                ontoggle={handleRowToggle}
+            ></lightning-tree-grid>
+        </div>
+    </div>
+</template>

package/src/lightning/treeGrid/__examples__/sorting/sorting.html

@@ -0,0 +1,19 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Tree Grid component with sortable "Account Name" and "Employees" columns.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tree-grid
+                columns={gridColumns}
+                data={gridData}
+                key-field="name"
+                default-sort-direction={defaultSortDirection}
+                sorted-direction={sortDirection}
+                sorted-by={sortedBy}
+                onsort={onHandleSort}
+            ></lightning-tree-grid>
+        </div>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/advanced/advanced.html

@@ -0,0 +1,37 @@
+<template>
+    <div style="min-width: 225px; border-right: 1px solid #e7e7e7;">
+        <lightning-layout>
+            <lightning-layout-item>
+                <lightning-vertical-navigation selected-item={selectedItem} onselect={handleSelect} class="navigation">
+                    <lightning-vertical-navigation-section label="Reports">
+                        <lightning-vertical-navigation-item label="Recently Viewed" name="reports_recent"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Private Reports" name="reports_private"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Public Reports" name="reports_public"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="All Reports" name="reports_all"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item-badge label="Recently Updated" name="reports_updated" badge-count={updatedCount}></lightning-vertical-navigation-item-badge>
+                    </lightning-vertical-navigation-section>
+                    <lightning-vertical-navigation-section label="Folders">
+                        <lightning-vertical-navigation-item-icon label="Created by Me" name="folders_created" icon-name="utility:open_folder"></lightning-vertical-navigation-item-icon>
+                        <lightning-vertical-navigation-item-icon label="Shared with Me" name="folders_shared" icon-name="utility:open_folder"></lightning-vertical-navigation-item-icon>
+                        <lightning-vertical-navigation-item label="All Folders" name="folders_all"></lightning-vertical-navigation-item>
+                    </lightning-vertical-navigation-section>
+                    <lightning-vertical-navigation-overflow>
+                        <lightning-vertical-navigation-item label="Extra Report 1" name="reports_extra1"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Report 2" name="reports_extra2"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Report 3" name="reports_extra3"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Report 4" name="reports_extra4"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Report 5" name="reports_extra5"></lightning-vertical-navigation-item>
+                    </lightning-vertical-navigation-overflow>
+                    <lightning-vertical-navigation-overflow>
+                        <lightning-vertical-navigation-item label="Extra Folder 1" name="folders_extra1"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Folder 2" name="folders_extra2"></lightning-vertical-navigation-item>
+                        <lightning-vertical-navigation-item label="Extra Folder 3" name="folders_extra3"></lightning-vertical-navigation-item>
+                    </lightning-vertical-navigation-overflow>
+                </lightning-vertical-navigation>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-medium">
+                <p>You Are Viewing: {currentContent} </p>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/badge/badge.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item-badge label="Recent" name="recent" badge-count="3"></lightning-vertical-navigation-item-badge>
+                <lightning-vertical-navigation-item label="Created by Me" name="usercreated"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/basic/basic.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation>
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/compact/compact.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent" compact>
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/href/href.html

@@ -0,0 +1,28 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation>
+            <lightning-vertical-navigation-section label="Navigation">
+                <lightning-vertical-navigation-item label="Home" name="home" href="/"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+            <lightning-vertical-navigation-section label="Resources">
+                <lightning-vertical-navigation-item
+                    label="Salesforce"
+                    name="salesforce"
+                    href="https://www.salesforce.com/">
+                </lightning-vertical-navigation-item>
+
+                <lightning-vertical-navigation-item
+                    label="Salesforce Developers"
+                    name="developers"
+                    href="https://developer.salesforce.com/">
+                </lightning-vertical-navigation-item>
+
+                <lightning-vertical-navigation-item
+                    label="Trailhead"
+                    name="trailhead"
+                    href="https://trailhead.salesforce.com">
+                </lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/icon/icon.html

@@ -0,0 +1,50 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="reports_recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item-icon
+                    label="Recent"
+                    name="reports_recent"
+                    icon-name="utility:clock">
+                </lightning-vertical-navigation-item-icon>
+
+                <lightning-vertical-navigation-item-icon
+                    label="Created by Me"
+                    name="reports_usercreated"
+                    icon-name="utility:user">
+                </lightning-vertical-navigation-item-icon>
+
+                <lightning-vertical-navigation-item-icon
+                    label="Private Reports"
+                    name="reports_private"
+                    icon-name="utility:lock">
+                </lightning-vertical-navigation-item-icon>
+
+                <lightning-vertical-navigation-item-icon
+                    label="Public Reports"
+                    name="reports_public"
+                    icon-name="utility:groups">
+                </lightning-vertical-navigation-item-icon>
+
+                <lightning-vertical-navigation-item
+                    label="All Reports"
+                    name="reports_all">
+                </lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+
+            <lightning-vertical-navigation-section label="Folders">
+                <lightning-vertical-navigation-item-icon
+                    label="Created by Me"
+                    name="folders_usercreated"
+                    icon-name="utility:open_folder">
+                </lightning-vertical-navigation-item-icon>
+
+                <lightning-vertical-navigation-item-icon
+                    label="Shared with Me"
+                    name="folders_shared"
+                    icon-name="utility:open_folder">
+                </lightning-vertical-navigation-item-icon>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/iteration/iteration.html

@@ -0,0 +1,19 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item={initiallySelected}>
+            <template for:each={navigationData} for:item="section">
+                <lightning-vertical-navigation-section key={section.label} label={section.label}>
+                    <template for:each={section.items} for:item="item">
+                        <template if:true={item.icon}>
+                            <lightning-vertical-navigation-item-icon key={item.name} label={item.label} name={item.name} icon-name={item.icon}></lightning-vertical-navigation-item-icon>
+                        </template>
+                        <template if:false={item.icon}>
+                            <lightning-vertical-navigation-item key={item.name} label={item.label} name={item.name}></lightning-vertical-navigation-item>
+                        </template>
+                    </template>
+
+                </lightning-vertical-navigation-section>
+            </template>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/overflow/overflow.html

@@ -0,0 +1,20 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+            <lightning-vertical-navigation-overflow>
+                <lightning-vertical-navigation-item label="Regional Sales NW" name="1859008"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales SW" name="1919113"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales NE" name="1919115"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales SE" name="1919112"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales - Outdated" name="1213411"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Account Planning Fall Review" name="1213114"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-overflow>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/selected/selected.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/shaded/shaded.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent" shaded>
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigation/__examples__/validation/validation.css

@@ -0,0 +1,4 @@
+.layoutContent {
+    position: relative;
+    width: 50%;
+}

package/src/lightning/verticalNavigation/__examples__/validation/validation.html

@@ -0,0 +1,25 @@
+<template>
+    <div style="width: 320px;">
+        <lightning-layout>
+            <lightning-layout-item>
+                <lightning-vertical-navigation onbeforeselect={handleBeforeSelect} selected-item={selectedItem}>
+                    <lightning-vertical-navigation-item label="Report 1" name="report_1"></lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item label="Report 2" name="report_2"></lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item label="Report 3" name="report_3"></lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item label="Report 4" name="report_4"></lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item label="Report 5" name="report_5"></lightning-vertical-navigation-item>
+                </lightning-vertical-navigation>
+            </lightning-layout-item>
+            <lightning-layout-item class="layoutContent" padding="around-medium">
+                <template if:true={asyncValidation}>
+                    <lightning-spinner alternative-text="Validating asynchronously"></lightning-spinner>
+                </template>
+                <template if:false={asyncValidation}>
+                    <lightning-button label="Click to require validation" onclick={handleClick}></lightning-button>
+                    <p>You Are Viewing: {selectedItem}</p>
+                    <p>Validate on navigate: {hasBeenEdited}</p>
+                </template>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/verticalNavigationItem/__examples__/basic/basic.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Basic Vertical Navigation</h1>
+        <p class="slds-text-body_regular">A basic Vertical Navigation with one section.</p>
+    </div>
+    
+    <div style="width: 320px;">
+        <lightning-vertical-navigation>
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigationItemBadge/__examples__/badges/badges.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Items With Badges</h1>
+        <p class="slds-text-body_regular">A Vertical Navigation with item badges. Badges contain small amounts of information, such as the number of unread messages.</p>
+    </div>
+    
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item-badge label="Recent" name="recent" badge-count="3"></lightning-vertical-navigation-item-badge>
+                <lightning-vertical-navigation-item label="Created by Me" name="usercreated"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigationItemIcon/__examples__/icons/icons.html

@@ -0,0 +1,49 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Items With Icons</h1>
+        <p class="slds-text-body_regular">A Vertical navigation with item icons.</p>
+    </div>
+    
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="reports_recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item-icon
+                    label="Recent"
+                    name="reports_recent"
+                    icon-name="utility:clock">
+                </lightning-vertical-navigation-item-icon>
+                <lightning-vertical-navigation-item-icon
+                    label="Created by Me"
+                    name="reports_usercreated"
+                    icon-name="utility:user">
+                </lightning-vertical-navigation-item-icon>
+                <lightning-vertical-navigation-item-icon
+                    label="Private Reports"
+                    name="reports_private"
+                    icon-name="utility:lock">
+                </lightning-vertical-navigation-item-icon>
+                <lightning-vertical-navigation-item-icon
+                    label="Public Reports"
+                    name="reports_public"
+                    icon-name="utility:groups">
+                </lightning-vertical-navigation-item-icon>
+                <lightning-vertical-navigation-item
+                    label="All Reports"
+                    name="reports_all">
+                </lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+            <lightning-vertical-navigation-section label="Folders">
+                <lightning-vertical-navigation-item-icon
+                    label="Created by Me"
+                    name="folders_usercreated"
+                    icon-name="utility:open_folder">
+                </lightning-vertical-navigation-item-icon>
+                <lightning-vertical-navigation-item-icon
+                    label="Shared with Me"
+                    name="folders_shared"
+                    icon-name="utility:open_folder">
+                </lightning-vertical-navigation-item-icon>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigationOverflow/__examples__/overflowSection/overflowSection.html

@@ -0,0 +1,25 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Overflow Section</h1>
+        <p class="slds-text-body_regular">This example shows a vertical navigation with an overflow section. Click "Show more" to reveal additional items.</p>
+    </div>
+    
+    <div style="width: 320px;">
+        <lightning-vertical-navigation selected-item="recent">
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+            <lightning-vertical-navigation-overflow>
+                <lightning-vertical-navigation-item label="Regional Sales NW" name="1859008"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales SW" name="1919113"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales NE" name="1919115"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales SE" name="1919112"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Regional Sales - Outdated" name="1213411"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Account Planning Fall Review" name="1213114"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-overflow>
+        </lightning-vertical-navigation>
+    </div>
+</template>

package/src/lightning/verticalNavigationSection/__examples__/basic/basic.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Basic Vertical Navigation</h1>
+        <p class="slds-text-body_regular">A basic Vertical Navigation with one section.</p>
+    </div>
+    
+    <div style="width: 320px;">
+        <lightning-vertical-navigation>
+            <lightning-vertical-navigation-section label="Reports">
+                <lightning-vertical-navigation-item label="Recent" name="recent"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Created by Me" name="created"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Private Reports" name="private"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="Public Reports" name="public"></lightning-vertical-navigation-item>
+                <lightning-vertical-navigation-item label="All Reports" name="all"></lightning-vertical-navigation-item>
+            </lightning-vertical-navigation-section>
+        </lightning-vertical-navigation>
+    </div>
+</template>