lightning-base-components 1.28.11-alpha → 1.28.13-alpha

package/src/lightning/radioGroup/__examples__/buttondisabled/buttondisabled.html

@@ -0,0 +1,8 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                           label="Radio Group"
+                           options={options}
+                           value={value}
+                           disabled
+                           type="button"></lightning-radio-group>
+</template>

package/src/lightning/radioGroup/__examples__/buttonrequired/buttonrequired.html

@@ -0,0 +1,8 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                           label="Radio Group"
+                           options={options}
+                           value={value}
+                           required
+                           type="button"></lightning-radio-group>
+</template>

package/src/lightning/radioGroup/__examples__/disabled/disabled.html

@@ -0,0 +1,8 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                          label="Radio Group"
+                          options={options}
+                          value={value}
+                           disabled
+                          type="radio"></lightning-radio-group>
+</template>

package/src/lightning/radioGroup/__examples__/required/required.html

@@ -0,0 +1,8 @@
+<template>
+    <lightning-radio-group name="radioGroup"
+                          label="Radio Group"
+                          options={options}
+                          value={value}
+                           required
+                          type="radio"></lightning-radio-group>
+</template>

package/src/lightning/relativeDateTime/__examples__/formatDatesRelativeToNow/formatDatesRelativeToNow.html

@@ -0,0 +1,25 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Format Dates Relative To now</h1>
+        <p class="slds-text-body_regular">The lightning-relative-date-time component displays relative time that shows how much time has passed or how much time is left until a given time. It formats the relative time for the current locale following the rules from Unicode CLDR. The date to format is passed via the value attribute.</p>
+        <div class="slds-m-vertical_small">
+            Day SFDC was born - February 1999:
+            <strong><lightning-relative-date-time value={SfdcDay}></lightning-relative-date-time></strong>
+        </div>
+
+        <div class="slds-m-vertical_small">
+            Today 9:00 AM:
+            <strong><lightning-relative-date-time value={today9AM}></lightning-relative-date-time></strong>
+        </div>
+
+        <div class="slds-m-vertical_small">
+            Right now:
+            <strong><lightning-relative-date-time value={now}></lightning-relative-date-time></strong>
+        </div>
+
+        <div class="slds-m-vertical_small">
+            Future - January 2050:
+            <strong><lightning-relative-date-time value={future20500104}></lightning-relative-date-time></strong>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,11 @@
+<template>
+    <lightning-select
+            name="tickets"
+            label="How many tickets?"
+            value={value}
+            options={options}
+            onchange={handleChange}
+            required ></lightning-select>
+
+    <p>Number of tickets: {value}</p>
+</template>

package/src/lightning/select/__examples__/disabled/disabled.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        disabled
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/hidden/hidden.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        value={selectVal}
+        label="Select a product"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-hidden"
+        message-when-value-missing="Which area can we help you with?">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/inline/inline.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-select
+        name="tickets"
+        value={selectVal}
+        label="How many tickets?"
+        options={productOptions}
+        onchange={handleChange}
+        variant="label-inline">
+    </lightning-select>
+</template>

package/src/lightning/select/__examples__/multiple/multiple.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-select
+            name="pies"
+            label="Select your pies"
+            value={value}
+            options={options}
+            onchange={handleChange}
+            multiple
+            size="3"></lightning-select>
+
+    <p>Selected pies: </p>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Basic Slider</h1>
+        <p class="slds-text-body_regular">A slider lets you specify a number between two specified values. If a range is not provided, the slider defaults to a minimum of 0 and a maximum of 100.</p>
+    </div>
+    
+    <lightning-slider label="Volume" value={val}></lightning-slider>
+</template>

package/src/lightning/slider/__examples__/sizes/sizes.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Slider Sizes</h1>
+        <p class="slds-text-body_regular">The slider comes in many sizes: x-small, small, medium, and large. The default slider size takes up the width of the view port.</p>
+    </div>
+    
+    <lightning-slider label="Volume" size="x-small"></lightning-slider>
+    <lightning-slider label="Volume" size="small"></lightning-slider>
+    <lightning-slider label="Volume" size="medium"></lightning-slider>
+    <lightning-slider label="Volume" size="large"></lightning-slider>
+    <lightning-slider label="Volume"></lightning-slider>
+</template>

package/src/lightning/slider/__examples__/type/type.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Slider Positioning</h1>
+        <p class="slds-text-body_regular">The slider can be positioned horizontally or vertically.</p>
+    </div>
+    
+    <lightning-slider label="Volume"></lightning-slider>
+    <lightning-slider label="Volume" type="vertical"></lightning-slider>
+</template>

package/src/lightning/slider/__examples__/variant/variant.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Slider Variants</h1>
+        <p class="slds-text-body_regular">The slider can be disabled or displayed without labels.</p>
+    </div>
+    
+    <lightning-slider label="Volume" value={val} disabled></lightning-slider>
+    <lightning-slider label="Volume" variant="label-hidden"></lightning-slider>
+</template>

package/src/lightning/spinner/__examples__/if/if.css

@@ -0,0 +1,8 @@
+.exampleHolder {
+    position: relative;
+    display: inline-block;
+    margin-left: 15px;
+    width: 55px;
+    vertical-align: middle;
+    white-space: nowrap;
+}

package/src/lightning/spinner/__examples__/if/if.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-button label="Toggle" variant="brand" onclick={handleClick}></lightning-button>
+
+    <div class="exampleHolder">
+        <template if:true={loaded}>
+            Put loaded content here
+        </template>
+        <template if:false={loaded}>
+            <lightning-spinner alternative-text="Loading"></lightning-spinner>
+        </template>
+    </div>
+</template>

package/src/lightning/spinner/__examples__/inverse/inverse.css

@@ -0,0 +1,5 @@
+.backgroundInverse {
+    position: relative;
+    background-color: #16325c;
+    height: 80px;
+}

package/src/lightning/spinner/__examples__/inverse/inverse.html

@@ -0,0 +1,5 @@
+<template>
+    <div class="backgroundInverse">
+        <lightning-spinner alternative-text="Loading" variant="inverse"></lightning-spinner>
+    </div>
+</template>

package/src/lightning/spinner/__examples__/sizes/sizes.css

@@ -0,0 +1,6 @@
+.exampleHolder {
+    position: relative;
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+}

package/src/lightning/spinner/__examples__/sizes/sizes.html

@@ -0,0 +1,17 @@
+<template>
+    <div class="exampleHolder">
+        <lightning-spinner alternative-text="Loading" size="xx-small"></lightning-spinner>
+    </div>
+    <div class="exampleHolder">
+        <lightning-spinner alternative-text="Loading" size="x-small"></lightning-spinner>
+    </div>
+    <div class="exampleHolder">
+        <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
+    </div>
+    <div class="exampleHolder">
+        <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
+    </div>
+    <div class="exampleHolder">
+        <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>
+    </div>
+</template>

package/src/lightning/stackedTabset/__examples__/conditional/conditional.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-button label="Toggle" onclick={handleToggle}></lightning-button>
+    <lightning-stacked-tabset>
+        <lightning-stacked-tab label="One"></lightning-stacked-tab>
+        <lightning-stacked-tab label="Two"></lightning-stacked-tab>
+        <template if:true={show}>
+            <lightning-stacked-tab label="Three"></lightning-stacked-tab>
+        </template>
+    </lightning-stacked-tabset>
+</template>

package/src/lightning/stackedTabset/__examples__/events/events.html

@@ -0,0 +1,17 @@
+<template>
+    <p>Selected Tab is: {selectedTab}</p>
+    <lightning-stacked-tabset>
+        <lightning-stacked-tab
+            label="One"
+            onclick={handleTabClick}
+        ></lightning-stacked-tab>
+        <lightning-stacked-tab
+            label="Two"
+            onclick={handleTabClick}
+        ></lightning-stacked-tab>
+        <lightning-stacked-tab
+            label="Three"
+            onclick={handleTabClick}
+        ></lightning-stacked-tab>
+    </lightning-stacked-tabset>
+</template>

package/src/lightning/stackedTabset/__examples__/simple/simple.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-stacked-tabset>
+        <lightning-stacked-tab label="One"></lightning-stacked-tab>
+        <lightning-stacked-tab label="Two"></lightning-stacked-tab>
+        <lightning-stacked-tab label="Three" icon-name="utility:activity"></lightning-stacked-tab>
+    </lightning-stacked-tabset>
+</template>

package/src/lightning/tabset/__examples__/activeTab/activeTab.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-tabset active-tab-value="two">
+        <lightning-tab label="Item One" value="one">
+            One Content !
+        </lightning-tab>
+        <lightning-tab label="Item Two" value="two">
+            Two Content !
+        </lightning-tab>
+        <lightning-tab label="Item Three" value="three">
+            Three Content !
+        </lightning-tab>
+    </lightning-tabset>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+    <lightning-tabset>
+        <lightning-tab label="Item One">
+            One Content !
+        </lightning-tab>
+        <lightning-tab label="Item Two" title="2nd tab extended title">
+            Two Content !
+        </lightning-tab>
+        <lightning-tab label="Item Three">
+            Three Content !
+        </lightning-tab>
+    </lightning-tabset>
+</template>

package/src/lightning/tabset/__examples__/conditionalTab/conditionalTab.html

@@ -0,0 +1,20 @@
+<template>
+    <lightning-tabset>
+        <lightning-tab label="Item One">
+            One Content !
+        </lightning-tab>
+        <lightning-tab label="Item Two">
+            Two Content !
+        </lightning-tab>
+        <lightning-tab label="Item Three">
+            Three Content !
+        </lightning-tab>
+        <template if:true={showTabFour}>
+            <lightning-tab label="Item Four">
+                Four Content !
+            </lightning-tab>
+        </template>
+    </lightning-tabset>
+
+    <lightning-button label="Toggle Optional Tab" onclick={toggleOptionalTab} ></lightning-button>
+</template>

package/src/lightning/tabset/__examples__/onactive/onactive.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-tabset variant="scoped" active-tab-value="2">
+        <template for:each={tabs} for:item="tab">
+            <lightning-tab label={tab.label} key={tab.value} value={tab.value} onactive={handleActive}>
+                {tab.content}
+            </lightning-tab>
+        </template>
+    </lightning-tabset>
+    <lightning-formatted-text value={activeValueMessage} ></lightning-formatted-text>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <lightning-tabset variant="scoped">
+        <template for:each={tabs} for:item="tab">
+            <lightning-tab label={tab.label} key={tab.value} value={tab.value}>
+                {tab.content}
+            </lightning-tab>
+        </template>
+    </lightning-tabset>
+</template>

package/src/lightning/tabset/__examples__/scoped/scoped.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-tabset variant="scoped">
+        <lightning-tab label="Item One">
+            One Content !
+        </lightning-tab>
+        <lightning-tab label="Item Two">
+            Two Content !
+        </lightning-tab>
+        <lightning-tab label="Item Three">
+            Three Content !
+        </lightning-tab>
+    </lightning-tabset>
+</template>

package/src/lightning/tabset/__examples__/vertical/vertical.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-tabset variant="vertical">
+        <lightning-tab label="Item One">
+            One Content !
+        </lightning-tab>
+        <lightning-tab label="Item Two">
+            Two Content !
+        </lightning-tab>
+        <lightning-tab label="Item Three">
+            Three Content !
+        </lightning-tab>
+    </lightning-tabset>
+</template>

package/src/lightning/textarea/__examples__/various/various.html

@@ -0,0 +1,38 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Various Textarea Examples</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create a textarea component.</p>
+    </div>
+
+    <div class="row">
+        <h2 class="header">Basic Examples</h2>
+        <lightning-textarea name="input1" label="Enter some text" ></lightning-textarea>
+        <lightning-textarea name="input2" label="Textarea field with a predefined value" value="initial value"></lightning-textarea>
+        <lightning-textarea name="input3" label="Textarea field with a placeholder" placeholder="type here..."></lightning-textarea>
+    </div>
+
+    <div class="row">
+        <h2 class="header">Advanced Examples</h2>
+        <lightning-textarea name="input4" readonly value="initial value" label="Read-only textarea field" ></lightning-textarea>
+        <lightning-textarea name="input5" disabled value="initial value" label="Disabled textarea field" ></lightning-textarea>
+        <lightning-textarea name="input6" required value="initial value" label="Required textarea field with a maximum length of 60 characters" maxlength="60" ></lightning-textarea>
+        <lightning-textarea name="input7" required value="" placeholder="compose your tweet" label="Required textarea field with a maximum length of 140 characters" maxlength="140" message-when-too-long="A maximum of 140 characters are allowed in a tweet." message-when-value-missing="An empty tweet cannot be posted." ></lightning-textarea>
+    </div>
+
+    <div class="row">
+        <h2 class="header">Textarea with aria-describedby example</h2>
+        <div class="aria-describedby slds-box slds-m-around__large">
+            <h3>Example of textarea aria-describedby with multiple descriptions rendered before textarea in reverse order</h3>
+            <span class="desc-1" id="desc-1">Description One</span>
+            <span class="desc-2" id="desc-2">Description Two</span>
+            <lightning-textarea label="Enter some text" aria-describedby="desc-2 desc-1"></lightning-textarea>
+        </div>
+        <h2 class="header">Textarea with aria-labelledby example</h2>
+        <div class="aria-describedby-later slds-box slds-m-around__large">
+            <h3>Example of textarea aria-labelledby with multiple descriptions rendered after textarea in reverse order</h3>
+            <lightning-textarea label="Enter some text" aria-labelledby="desc-4 desc-3"></lightning-textarea>
+            <span class="desc-3" id="desc-3">Description Three</span>
+            <span class="desc-4" id="desc-4">Description Four</span>
+        </div>
+    </div>
+</template>

package/src/lightning/tile/__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/tile/__examples__/basic/basic.html

@@ -0,0 +1,40 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A basic tile component.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tile label="Lightning component team" href="/path/to/somewhere">
+                <p class="slds-truncate" title="7 Members">7 Members</p>
+            </lightning-tile>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A tile component with a more complex layout.
+        </p>
+
+        <!-- More complex content -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tile label="Salesforce UX" href="/path/to/somewhere">
+                <dl class="slds-dl_horizontal">
+                    <dt class="slds-dl_horizontal__label">
+                        <p class="slds-truncate" title="Company">Company:</p>
+                    </dt>
+                    <dd class="slds-dl_horizontal__detail slds-tile__meta">
+                        <p class="slds-truncate" title="Salesforce">Salesforce</p>
+                    </dd>
+                    <dt class="slds-dl_horizontal__label">
+                        <p class="slds-truncate" title="Email">Email:</p>
+                    </dt>
+                    <dd class="slds-dl_horizontal__detail slds-tile__meta">
+                        <p class="slds-truncate" title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
+                    </dd>
+                </dl>
+            </lightning-tile>
+        </div>
+    </div>
+</template>

package/src/lightning/tile/__examples__/list/list.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/tile/__examples__/list/list.html

@@ -0,0 +1,63 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A list of tile components with dividers.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <ul class="slds-has-dividers_bottom-space">
+                <li class="slds-item">
+                    <lightning-tile label="Lightning component team" href="/path/to/somewhere">
+                        <p class="slds-truncate" title="7 Members">7 Members</p>
+                    </lightning-tile>
+                </li>
+                <li class="slds-item">
+                    <lightning-tile label="Salesforce UX" href="/path/to/somewhere">
+                        <dl class="slds-dl_horizontal">
+                            <dt class="slds-dl_horizontal__label">
+                                <p class="slds-truncate" title="Company">Company:</p>
+                            </dt>
+                            <dd class="slds-dl_horizontal__detail slds-tile__meta">
+                                <p class="slds-truncate" title="Salesforce">Salesforce</p>
+                            </dd>
+                            <dt class="slds-dl_horizontal__label">
+                                <p class="slds-truncate" title="Email">Email:</p>
+                            </dt>
+                            <dd class="slds-dl_horizontal__detail slds-tile__meta">
+                                <p class="slds-truncate" title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
+                            </dd>
+                        </dl>
+                    </lightning-tile>
+                </li>
+                <li class="slds-item">
+                    <lightning-tile label="Bruce Wayne" href="/bruce.html" type="media">
+                        <lightning-avatar slot="media" src="https://v1.lightningdesignsystem.com/assets/images/avatar1.jpg" fallback-icon-name="standard:person_account" alternative-text="Bruce Wayne"></lightning-avatar>
+                        <ul class="slds-list_horizontal slds-has-dividers_right">
+                            <li class="slds-item">Billionaire, Gotham City</li>
+                            <li class="slds-item">Dark Knight</li>
+                        </ul>
+                    </lightning-tile>
+                </li>
+                <li class="slds-item">
+                    <lightning-tile label="Clark Kent" href="/clark.html" type="media">
+                        <lightning-avatar slot="media" src="https://v1.lightningdesignsystem.com/assets/images/avatar1.jpg" fallback-icon-name="standard:person_account" alternative-text="Clark Kent"></lightning-avatar>
+                        <ul class="slds-list_horizontal slds-has-dividers_right">
+                            <li class="slds-item">Reporter, Daily Planet</li>
+                            <li class="slds-item">Man of Steel</li>
+                        </ul>
+                    </lightning-tile>
+                </li>
+                <li class="slds-item">
+                    <lightning-tile label="Diana Prince" href="/diana.html" type="media">
+                        <lightning-avatar slot="media" src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" fallback-icon-name="standard:person_account" alternative-text="Diana Prince"></lightning-avatar>
+                        <ul class="slds-list_horizontal slds-has-dividers_right">
+                            <li class="slds-item">Honorary Ambassador, United Nations</li>
+                            <li class="slds-item">The Amazon Princess</li>
+                        </ul>
+                    </lightning-tile>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>

package/src/lightning/tile/__examples__/withAvatar/withAvatar.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/tile/__examples__/withAvatar/withAvatar.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A tile component with an avatar.
+        </p>
+
+        <!-- With an avatar -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tile label="Bruce Wayne" href="/bruce.html" type="media">
+                <lightning-avatar slot="media" src="https://v1.lightningdesignsystem.com/assets/images/avatar1.jpg" fallback-icon-name="standard:person_account" alternative-text="Bruce Wayne"></lightning-avatar>
+                <ul class="slds-list_horizontal slds-has-dividers_right">
+                    <li class="slds-item">Billionaire, Gotham City</li>
+                    <li class="slds-item">Dark Knight</li>
+                </ul>
+            </lightning-tile>
+        </div>
+    </div>
+</template>

package/src/lightning/tile/__examples__/withIcon/withIcon.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/tile/__examples__/withIcon/withIcon.html

@@ -0,0 +1,15 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A tile component with an icon.
+        </p>
+
+        <!-- With an icon -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-tile label="Lightning component team" type="media">
+                <lightning-icon slot="media" icon-name="standard:groups"></lightning-icon>
+                <p class="slds-truncate" title="7 Members">7 Members</p>
+            </lightning-tile>
+        </div>
+    </div>
+</template>

package/src/lightning/tree/__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/tree/__examples__/basic/basic.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 few 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__/deeplyNested/deeplyNested.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);
+}