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

package/src/lightning/buttonMenu/__examples__/withIcon/withIcon.html

@@ -0,0 +1,121 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus that use the <code>icon-name</code> attribute.
+        </h2>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:settings">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:add" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:automate" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:connected_apps" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:record_create" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus that use the <code>icon-size</code> attribute. <code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code> (default), and <code>large</code>.
+        </h2>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-size="xx-small" icon-name="utility:animal_and_nature">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-size="x-small" icon-name="utility:animal_and_nature" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-size="small" icon-name="utility:animal_and_nature" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-name="utility:animal_and_nature" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" icon-size="large" icon-name="utility:animal_and_nature" class="slds-m-left_large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus that use the <code>menu-alignment</code> attribute to specify how the menu aligns with the button.
+        </h2>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" tooltip="Left alignment (default)" icon-name="utility:settings"  class="slds-m-left_xx-large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" tooltip="Right alignment"  menu-alignment="right" icon-name="utility:add" class="slds-m-left_xx-large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" tooltip="Center alignment" menu-alignment="center" icon-name="utility:automate"  class="slds-m-left_xx-large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu alternative-text="Show menu" icon-name="utility:connected_apps" tooltip="Auto alignment"  menu-alignment="auto" class="slds-m-left_xx-large">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <lightning-button-stateful
+        label-when-off="Follow"
+        label-when-on="Following"
+        label-when-hover="Unfollow"
+        icon-name-when-off="utility:add"
+        icon-name-when-on="utility:check"
+        icon-name-when-hover="utility:close"
+        selected={isSelected}
+        onclick={handleClick}>
+    </lightning-button-stateful>
+</template>

package/src/lightning/buttonStateful/__examples__/inverseVariant/inverseVariant.css

@@ -0,0 +1,4 @@
+.backgroundInverse {
+    background-color: #16325c;
+    padding: 12px;
+}

package/src/lightning/buttonStateful/__examples__/inverseVariant/inverseVariant.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="backgroundInverse">
+        <lightning-button-stateful
+            label-when-off="Follow"
+            label-when-on="Following"
+            label-when-hover="Unfollow"
+            icon-name-when-off="utility:add"
+            icon-name-when-on="utility:check"
+            icon-name-when-hover="utility:close"
+            variant="inverse"
+            selected={isSelected}
+            onclick={handleClick}>
+        </lightning-button-stateful>
+    </div>
+</template>
+
+
+

package/src/lightning/buttonStateful/__examples__/noIcon/noIcon.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-button-stateful
+        label-when-off="Follow"
+        label-when-on="Following"
+        label-when-hover="Unfollow"
+        variant="brand"
+        selected={isSelected}
+        onclick={handleClick}>
+    </lightning-button-stateful>
+</template>

package/src/lightning/buttonStateful/__examples__/textVariant/textVariant.html

@@ -0,0 +1,15 @@
+<template>
+    <div class="backgroundInverse">
+        <lightning-button-stateful
+            label-when-off="Like"
+            label-when-on="Liked"
+            icon-name-when-off="utility:like"
+            icon-name-when-on="utility:like"
+            variant="text"
+            selected={isSelected}
+            onclick={handleClick}>
+        </lightning-button-stateful>
+    </div>
+</template>
+
+

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

@@ -0,0 +1,7 @@
+<template>
+    <lightning-calendar
+        value="2020-09-07"
+        min="2020-09-05"
+        max="2020-09-22"
+    ></lightning-calendar>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+        <lightning-card  title="Hello">
+            <lightning-button label="New" slot="actions"></lightning-button>
+            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
+            <p slot="footer">Card Footer</p>
+        </lightning-card>
+</template>

package/src/lightning/card/__examples__/custom/custom.css

@@ -0,0 +1,4 @@
+:host {
+    min-width: 430px;
+    max-width: 620px;
+}

package/src/lightning/card/__examples__/custom/custom.html

@@ -0,0 +1,14 @@
+<template>
+    <lightning-card>
+        <h3 slot="title">
+            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
+            Card Title
+        </h3>
+        <div slot="footer">
+                <lightning-badge label="Tag1"></lightning-badge>
+                <lightning-badge label="Tag2"></lightning-badge>
+                <lightning-badge label="Tag3"></lightning-badge>
+        </div>
+        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
+    </lightning-card>
+</template>

package/src/lightning/card/__examples__/narrow/narrow.html

@@ -0,0 +1,7 @@
+<template>
+        <lightning-card  variant="Narrow"  title="Hello" icon-name="standard:account">
+            <lightning-button-icon  icon-name="utility:down" variant="border-filled" alternative-text="Show More" slot="actions"></lightning-button-icon>
+            <p class="slds-p-horizontal_small">Card Body Narrow (custom component)</p>
+            <p slot="footer">Card Footer</p>
+        </lightning-card>
+</template>

package/src/lightning/carousel/__examples__/autoScroll/autoScroll.html

@@ -0,0 +1,30 @@
+<template>
+    <div class="slds-size_3-of-4">
+        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Carousel With disable-auto-scroll Attribute
+        <lightning-carousel disable-auto-scroll>
+            <lightning-carousel-image
+                src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
+                header = "First Card"
+                description = "First card description."
+                alternative-text = "First card accessible description."
+                href = "https://www.example.com">
+            </lightning-carousel-image>
+            <lightning-carousel-image
+                src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-02.jpg"
+                header = "Second Card"
+                description = "Second card description."
+                alternative-text = "Second card accessible description."
+                href = "https://www.example.com">
+            </lightning-carousel-image>
+            <lightning-carousel-image
+                src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-03.jpg"
+                header = "Third Card"
+                description = "Third card description."
+                alternative-text = "Third card accessible description."
+                href = "https://www.example.com">
+            </lightning-carousel-image>
+        </lightning-carousel>
+        </div>
+  </div>
+</template>
+

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

@@ -0,0 +1,29 @@
+<template>
+    <div class="slds-size_3-of-4">
+        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Basic Carousel
+            <lightning-carousel>
+                <lightning-carousel-image
+                    src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
+                    header = "First Card"
+                    description = "First card description."
+                    alternative-text = "First card accessible description."
+                    href = "javascript:void(0);">
+                </lightning-carousel-image>
+                <lightning-carousel-image
+                    src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-02.jpg"
+                    header = "Second Card"
+                    description = "Second card description."
+                    alternative-text = "Second card accessible description."
+                    href = "javascript:void(0);">
+                </lightning-carousel-image>
+                <lightning-carousel-image
+                    src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-03.jpg"
+                    header = "Third Card"
+                    description = "Third card description."
+                    alternative-text = "Third card accessible description."
+                    href = "javascript:void(0);">
+                </lightning-carousel-image>
+            </lightning-carousel>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <lightning-carousel-image
+        src = "https://v1.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
+        header = "First Card"
+        description = "First card description."
+        alternative-text = "First card accessible description."
+        href = "https://www.example.com">
+    </lightning-carousel-image>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+    <lightning-checkbox-group name="Checkbox Group"
+                              label="Checkbox Group"
+                              options={options}
+                              value={value}
+                              onchange={handleChange}></lightning-checkbox-group>
+    <p>Selected Values are: {selectedValues}</p>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+    <lightning-checkbox-group name="Checkbox Group"
+                              label="Checkbox Group"
+                              options={options}
+                              value={value}
+                              disabled></lightning-checkbox-group>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+    <lightning-checkbox-group name="Checkbox Group"
+                              label="Checkbox Group"
+                              options={options}
+                              value={value}
+                              required></lightning-checkbox-group>
+</template>

package/src/lightning/colorSwatch/__examples__/base/base.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Base lightning-color-swatch Component</h1>
+        <p class="slds-text-body_regular">
+            A <code>lightning-color-swatch</code> component renders a palette of predefined
+            colors that the user can choose from. This basic example shows the default
+            swatch set and fires the <code>updateselectedcolor</code> event when a
+            swatch is clicked.
+        </p>
+    </div>
+
+    <!-- Default usage -->
+    <lightning-color-swatch></lightning-color-swatch>
+</template>

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

@@ -0,0 +1,11 @@
+<template>
+    <lightning-combobox
+            name="progress"
+            label="Status"
+            value={value}
+            placeholder="Select Progress"
+            options={options}
+            onchange={handleChange} ></lightning-combobox>
+
+    <p>Selected value is: {value}</p>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <lightning-combobox
+            name="progress"
+            label="Status"
+            value=""
+            placeholder="Select Progress"
+            options={options}
+            onchange={handleChange}
+            disabled
+    ></lightning-combobox>
+    <p>Selected value is: {value}</p>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <lightning-combobox
+            name="progress"
+            label="Status"
+            value=""
+            placeholder="Select Progress"
+            options={options}
+            onchange={handleChange}
+            required
+    ></lightning-combobox>
+    <p>Selected value is: {value}</p>
+</template>

package/src/lightning/combobox/combobox.js

@@ -296,7 +296,7 @@ export default class LightningCombobox extends LightningShadowBaseClass {
         this.updateValidity();
     }
     updateValidity() {
-        if (!features.enableComboboxElementInternals) {
+        if (!features.enableComboboxElementInternals || import.meta.env.SSR) {
             return;
         }
         const baseCombobox = this.getBaseComboboxElement();

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

@@ -0,0 +1,7 @@
+<template>
+    <context-provider theme={_theme}>
+        <context-consumer></context-consumer>
+    </context-provider>
+
+    <lightning-button label="Toggle theme (light/dark)" onclick={toggleTheme}></lightning-button>
+</template>

package/src/lightning/context/__examples__/consumer/consumer.css

@@ -0,0 +1,9 @@
+.dark-theme {
+    background-color: black;
+    color: white;
+}
+
+.light-theme {
+    background-color: bisque;
+    color: saddlebrown;
+}

package/src/lightning/context/__examples__/consumer/consumer.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={themeClass}>
+        <h1 class={theme}>Consumer with theme: {theme}</h1>
+    </div>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+                key-field="id"
+                data={data}
+                columns={columns}>
+        </lightning-datatable>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <lightning-datatable
+            key-field="id"
+            columns={columns}
+            data={data}
+            hide-checkbox-column
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withAllColumnTypes/withAllColumnTypes.html

@@ -0,0 +1,11 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            hide-checkbox-column
+            data={data}
+            columns={columns}
+            column-widths-mode="auto">
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withColResizing/withColResizing.html

@@ -0,0 +1,47 @@
+<template>
+    <p>Datatable with resize-column disabled</p>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        resize-column-disabled>
+    </lightning-datatable>
+
+    <p>Datatable with min and max column widths. Resize step: {resizeStep} </p>
+    <lightning-button
+        label="Increase resize step"
+        class="increaseResizeStep"
+        onclick={increaseResizeStep}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease resize step"
+        class="decreaseResizeStep"
+        onclick={decreaseResizeStep}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        min-column-width="100"
+        max-column-width="300"
+        resize-step={resizeStep}>
+    </lightning-datatable>
+
+    <p>Datatable with column-widths-mode='{mode}'</p>
+    <lightning-button
+        label="Change Widths Mode"
+        class="changeWidthsMode"
+        onclick={changeWidthsMode}>
+    </lightning-button>
+    <lightning-button
+        label="Add Column"
+        column="addColumn"
+        onclick={addColumn}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        column-widths-mode={mode}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withErrors/withErrors.html

@@ -0,0 +1,13 @@
+<template>
+    <lightning-button
+        label="Trigger error"
+        class="triggerError"
+        onclick={triggerError}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        data={data}
+        columns={columns}
+        errors={errors}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.html

@@ -0,0 +1,14 @@
+<template>
+    <p>Total Rows: {data.length}</p>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            enable-infinite-loading
+            onloadmore={handleLoadMore}
+            load-more-offset={loadMoreOffset}>
+        </lightning-datatable>
+    </div>
+    <p>{loadMoreStatus}</p>
+</template>

package/src/lightning/datatable/__examples__/withInlineEdit/withInlineEdit.html

@@ -0,0 +1,13 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+                key-field="id"
+                data={data}
+                show-row-number-column
+                row-number-offset={rowOffset}
+                suppress-bottom-bar
+                draft-values={draftValues}
+                columns={columns}>
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withRowActions/withRowActions.html

@@ -0,0 +1,25 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+                key-field="id"
+                data={data}
+                columns={columns}
+                onrowaction={handleRowAction}>
+        </lightning-datatable>
+    </div>
+    <div class="slds-m-around--medium" style="width: 30rem;">
+        <article class="slds-tile">
+            <h3 class="slds-tile__title slds-truncate" title="Record details"><a href="javascript:void(0);">Record details</a></h3>
+            <div class="slds-tile__detail">
+                <dl class="slds-list_horizontal slds-wrap">
+                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name">Name:</dt>
+                    <dd class="slds-item_detail slds-truncate">{record.name}</dd>
+                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Balance">Balance:</dt>
+                    <dd class="slds-item_detail slds-truncate">
+                        <lightning-formatted-number value={record.amount} format-style="currency"></lightning-formatted-number>
+                    </dd>
+                </dl>
+            </div>
+        </article>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.html

@@ -0,0 +1,18 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+                key-field="id"
+                data={data}
+                show-row-number-column
+                row-number-offset={rowOffset}
+                hide-checkbox-column
+                columns={columns}>
+        </lightning-datatable>
+    </div>
+    <div class="slds-m-around--medium">
+        <lightning-button
+                label="Increase row offset"
+                onclick={increaseRowOffset}>
+        </lightning-button>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withRowSelection/withRowSelection.html

@@ -0,0 +1,21 @@
+<template>
+    <p>Max row selection value: {maxRowSelection}</p>
+    <lightning-button
+        label="Increase max row selection"
+        class="increaseMaxRowSelection"
+        onclick={increaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-button
+        label="Decrease max row selection"
+        class="decreaseMaxRowSelection"
+        onclick={decreaseMaxRowSelection}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        selected-rows={selectedRows}
+        row-number-offset="0"
+        max-row-selection={maxRowSelection}>
+    </lightning-datatable>
+</template>