lightning-base-components 1.28.11-alpha → 1.28.12-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.28.11-alpha",
+    "version": "1.28.12-alpha",
     "license": "MIT",
     "files": [
         "external",

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

@@ -0,0 +1,36 @@
+<template>
+    <lightning-button onclick={handleSetActiveSectionC} label="Open Section C"></lightning-button>
+
+    <lightning-accordion class="example-accordion" active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <lightning-button-menu slot="actions"
+                                  alternative-text="Show menu"
+                                  icon-size="x-small"
+                                  menu-alignment="right">
+                <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
+            </lightning-button-menu>
+            <p>This is the content area for section A.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>.</p>
+            <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>

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

@@ -0,0 +1,27 @@
+<template>
+    <lightning-button onclick={handleToggleSectionD} label="Toggle Section D"></lightning-button>
+
+    <lightning-accordion class="example-accordion" active-section-name="B">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+            <p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>Nam at elit et justo scelerisque ullamcorper vel a felis. Mauris sit amet lorem sed est sagittis blandit nec ac turpis. Ut a mi id turpis pharetra ornare. Nullam rhoncus feugiat nunc, ac pulvinar felis pulvinar at. Nullam efficitur aliquet justo et ultricies. Maecenas eu felis aliquam, tincidunt elit at, suscipit leo. Duis ut urna nec nibh hendrerit lacinia. Sed non auctor libero. Sed pellentesque tempor mollis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>Nulla ornare ipsum felis, vel aliquet dui blandit vel. Integer accumsan velit quis mauris pharetra, nec sollicitudin dui eleifend. Cras condimentum odio mi, nec ullamcorper arcu ullamcorper sed. Proin massa arcu, rutrum a ullamcorper nec, hendrerit in sem. Etiam tempus eros ut lorem tincidunt, id condimentum nulla molestie. Morbi hendrerit elit pretium, ultrices neque non, ullamcorper justo. Quisque vel nisi eget eros efficitur semper. Nulla pulvinar venenatis quam vitae efficitur. Nam facilisis sollicitudin quam ac imperdiet.</p>
+        </lightning-accordion-section>
+
+        <template if:true={isDVisible}>
+            <lightning-accordion-section name="D" label="Accordion Title D">
+                <p>This is the content area for section D.</p>
+                <p>Suspendisse est eros, maximus et risus a, luctus bibendum eros. Etiam ultrices tellus vehicula neque ornare, viverra venenatis purus accumsan. Aenean viverra finibus odio, vitae bibendum nisi tincidunt sed. Ut at porta dui. Praesent varius eleifend quam eget gravida. Curabitur maximus, leo sit amet dapibus gravida, mi ligula lacinia turpis, id feugiat tellus urna quis odio. Nullam tristique orci eu magna hendrerit vestibulum. Sed id purus at metus tristique tristique et vitae arcu. Sed molestie odio felis, sit amet lacinia mauris rutrum nec. Morbi semper lacinia tellus bibendum faucibus. Vestibulum eget ornare sapien, eget ultrices orci.</p>
+            </lightning-accordion-section>
+        </template>
+    </lightning-accordion>
+</template>

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

@@ -0,0 +1,22 @@
+<template>
+    <p>{activeSectionsMessage}</p>
+
+    <lightning-accordion allow-multiple-sections-open
+                         onsectiontoggle={handleSectionToggle}
+                         active-section-name={activeSections}>
+        <lightning-accordion-section name="A" label="Accordion Title A">
+            <p>This is the content area for section A.</p>
+            <p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="B" label="Accordion Title B">
+            <p>This is the content area for section B.</p>
+            <p>Nam at elit et justo scelerisque ullamcorper vel a felis. Mauris sit amet lorem sed est sagittis blandit nec ac turpis. Ut a mi id turpis pharetra ornare. Nullam rhoncus feugiat nunc, ac pulvinar felis pulvinar at. Nullam efficitur aliquet justo et ultricies. Maecenas eu felis aliquam, tincidunt elit at, suscipit leo. Duis ut urna nec nibh hendrerit lacinia. Sed non auctor libero. Sed pellentesque tempor mollis.</p>
+        </lightning-accordion-section>
+
+        <lightning-accordion-section name="C" label="Accordion Title C">
+            <p>This is the content area for section C.</p>
+            <p>Nulla ornare ipsum felis, vel aliquet dui blandit vel. Integer accumsan velit quis mauris pharetra, nec sollicitudin dui eleifend. Cras condimentum odio mi, nec ullamcorper arcu ullamcorper sed. Proin massa arcu, rutrum a ullamcorper nec, hendrerit in sem. Etiam tempus eros ut lorem tincidunt, id condimentum nulla molestie. Morbi hendrerit elit pretium, ultrices neque non, ullamcorper justo. Quisque vel nisi eget eros efficitur semper. Nulla pulvinar venenatis quam vitae efficitur. Nam facilisis sollicitudin quam ac imperdiet.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>

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

@@ -0,0 +1,19 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Basic accordion-section</h1>
+        <p class="slds-text-body_regular">A lightning-accordion-section component is a single section that’s nested in a lightning-accordion component. You can't use this component on its own. This example creates a basic accordion with one section.</p>
+    </div>
+    <lightning-accordion active-section-name="A">
+        <lightning-accordion-section name="A" label="Accordion Title A">
+                <lightning-button-menu slot="actions" alternative-text="Show menu" icon-size="x-small" menu-alignment="auto">
+                    <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
+                    <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
+                </lightning-button-menu>
+                <p>This is the content area for section A.</p>
+                <p>.</p>
+                <p>.</p>
+                <p>.</p>
+                <p>The section height expands to fit your content.</p>
+        </lightning-accordion-section>
+    </lightning-accordion>
+</template>

package/src/lightning/ariaObserver/__examples__/connect/connect.html

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <label id="foo">Foo</label>
+    </div>
+    <div>
+        <label id="bar">Bar</label>
+    </div>
+    <div>
+        <label id="hello">Hello</label>
+    </div>
+    <div>
+        <label id="world">World</label>
+    </div>
+    <div>
+        <ariaobserver-connect-child aria-labelledby={connectIds}></ariaobserver-connect-child>
+        <div>Current Id: {connectIds}</div>
+        <div><button onclick={handleUpdateIds}>Update Ids to 'foo bar hello world'</button></div>
+    </div>
+</template>

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.html

@@ -0,0 +1,3 @@
+<template>
+    <input type="text" />
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+    <lightning-avatar src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg"></lightning-avatar>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <lightning-avatar src="/bad/image/url.jpg" initials="" fallback-icon-name="standard:account" alternative-text="Salesforce" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar src="/bad/image/url.jpg" initials="" fallback-icon-name="standard:avatar"  alternative-text="Bob Wilson" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar src="/bad/image/url.jpg" initials="" fallback-icon-name="custom:custom92"  alternative-text="Wilson Enterprises" class="slds-m-right_small"></lightning-avatar>
+</template>

package/src/lightning/avatar/__examples__/initials/initials.html

@@ -0,0 +1,5 @@
+<template>
+    <lightning-avatar src="/bad/image/url.jpg" initials="Sa" fallback-icon-name="standard:account" alternative-text="Salesforce" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar src="/bad/image/url.jpg" initials="BW" fallback-icon-name="standard:avatar"  alternative-text="Bob Wilson" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar src="/bad/image/url.jpg" initials="WE" fallback-icon-name="custom:custom92"  alternative-text="Wilson Enterprises" class="slds-m-right_small"></lightning-avatar>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+    <lightning-avatar size="x-small" src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="JD" fallback-icon-name="standard:person_account" alternative-text="Jane Doe" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar size="small"   src="https://v1.lightningdesignsystem.com/assets/images/avatar3.jpg" initials="TP" fallback-icon-name="standard:person_account" alternative-text="Tony Price" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar size="medium"  src="https://v1.lightningdesignsystem.com/assets/images/avatar1.jpg" initials="RE" fallback-icon-name="standard:person_account" alternative-text="Ryan Eddie" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar size="large"   src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="CR" fallback-icon-name="standard:person_account" alternative-text="Cindy Rice" class="slds-m-right_small"></lightning-avatar>
+</template>

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

@@ -0,0 +1,4 @@
+<template>
+    <lightning-avatar variant="circle" src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="AW" fallback-icon-name="standard:person_account" alternative-text="Amy Weaver" class="slds-m-right_small"></lightning-avatar>
+    <lightning-avatar variant="square" src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="SJ" fallback-icon-name="standard:person_account" alternative-text="Sarah Jones" class="slds-m-right_small"></lightning-avatar>
+</template>

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

@@ -0,0 +1,14 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Badges with custom <code>label</code> attribute values.
+        </p>
+
+        <!-- Badge: basic -->
+        <lightning-badge label="Alpha"></lightning-badge>
+        <lightning-badge label="Beta"></lightning-badge>
+        <lightning-badge label="Gamma"></lightning-badge>
+        <lightning-badge label="Inverse" class="slds-badge_inverse"></lightning-badge>
+        <lightning-badge label="Lightest" class="slds-badge_lightest"></lightning-badge>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Badges with <code>icon</code>.
+        </p>
+
+        <!-- Badge: basic -->
+        <lightning-badge label="Alpha" icon-name="standard:event"></lightning-badge>
+        <lightning-badge label="Beta" icon-name="standard:email" icon-position="end"></lightning-badge>
+        <lightning-badge label="Gamma" icon-name="custom:custom11"></lightning-badge>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <lightning-breadcrumbs>
+        <lightning-breadcrumb
+            label="Parent Account"
+            href="http://example.com/parent">
+        </lightning-breadcrumb>
+        <lightning-breadcrumb
+            label="Case"
+            href="http://example.com/case">
+        </lightning-breadcrumb>
+    </lightning-breadcrumbs>
+</template>

package/src/lightning/breadcrumbs/__examples__/withIteration/withIteration.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-breadcrumbs>
+        <template for:each={myBreadcrumbs} for:item="crumbs">
+            <lightning-breadcrumb
+                key={crumbs.id}
+                label={crumbs.label}
+                name={crumbs.name}
+                onclick={handleNavigateTo}>
+            </lightning-breadcrumb>
+        </template>
+    </lightning-breadcrumbs>
+</template>

package/src/lightning/breadcrumbs/__examples__/withOnclick/withOnclick.html

@@ -0,0 +1,44 @@
+<template>
+    <lightning-breadcrumbs>
+        <lightning-breadcrumb
+            label="Account"
+            href="path/to/place/1"
+            onclick={handleNavigateToAccount}>
+        </lightning-breadcrumb>
+        <lightning-breadcrumb
+            label="Case"
+            href="path/to/place/2"
+            onclick={handleNavigateToCase}>
+        </lightning-breadcrumb>
+    </lightning-breadcrumbs>
+
+    <div class="container">
+        <div class="slds-hide account">
+            <lightning-card
+                variant="narrow"
+                icon-name="standard:account"
+                title="Account title">
+                <p class="slds-m-around_medium">Account details</p>
+                <div slot="actions">
+                    <lightning-button-icon icon-name="utility:down" alternative-text="Show actions"></lightning-button-icon>
+                </div>
+                <lightning-button value="account" label="Close" onclick={close}></lightning-button>
+            </lightning-card>
+
+        </div>
+
+        <div class="slds-hide case">
+            <lightning-card
+                variant="narrow"
+                icon-name="standard:case"
+                title="Case title">
+                <p class="slds-m-around_medium">Case details</p>
+                <div slot="actions">
+                    <lightning-button-icon icon-name="utility:down" alternative-text="Show actions"></lightning-button-icon>
+                </div>
+                <lightning-button value="case" label="Close" onclick={close}></lightning-button>
+            </lightning-card>
+        </div>
+    </div>
+
+</template>

package/src/lightning/button/__examples__/accesskey/accesskey.css

@@ -0,0 +1,16 @@
+kbd {
+    background-color: #eee;
+    border-radius: 3px;
+    border: 1px solid #b4b4b4;
+    box-shadow:
+        0 1px 1px rgb(0 0 0 / 20%),
+        0 2px 0 0 rgb(255 255 255 / 70%) inset;
+    color: #333;
+    display: inline-block;
+    font-family: consolas, 'Liberation Mono', courier, monospace;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+}

package/src/lightning/button/__examples__/accesskey/accesskey.html

@@ -0,0 +1,33 @@
+<template>
+    <div class="slds-m-top_xx-small slds-m-bottom_xx-small">
+        <p class="slds-m-bottom_xx-small">
+            Buttons with custom access keys.
+        </p>
+        <div class="slds-m-bottom_medium slds-p-bottom_medium slds-border_bottom">
+            To activate the buttons using the access key, press the following keys:
+            <ul class="slds-list_dotted">
+                <li class="slds-m-vertical_x-small">Mac: &nbsp;<kbd>Control</kbd>&nbsp;+&nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
+                <li class="slds-m-vertical_x-small">Windows: &nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
+                <li class="slds-m-vertical_x-small">Firefox on Windows: &nbsp;<kbd>Alt</kbd>&nbsp;+&nbsp;<kbd>Shift</kbd>&nbsp;+&nbsp;<kbd><em>key</em></kbd></li>
+            </ul>
+        </div>
+        <p>
+            The <code>accesskey</code> attribute has a value specified in the button's label text
+        </p>
+
+        <div class="slds-p-vertical_small">
+            <!-- Basic button -->
+            <lightning-button label="With accesskey 'x'" title="Download action" accesskey="x" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Button with icon before the label text -->
+            <lightning-button label="With accesskey 'y'" title="Download action" accesskey="y" onclick={handleClick} icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Button with icon after the label text -->
+            <lightning-button label="With accesskey 'z'" title="Download action" accesskey="z" onclick={handleClick} icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+        </div>
+
+        <div class="slds-m-vertical_medium slds-p-vertical_medium slds-border_bottom slds-border_top">
+            <p>The label of the button that was activated is: <span class="slds-text-heading_small">{clickedButtonLabel}</span></p>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,32 @@
+<template>
+    <div class="slds-m-top_small slds-m-bottom_medium">
+        <p class="slds-m-bottom_small">
+            Click the buttons to activate the <code>onclick</code> handler and view the label of the clicked button.
+        </p>
+
+        <!-- Base variant: Makes a button look like a link -->
+        <lightning-button variant="base" label="Base" title="Looks like a link" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Neutral variant (default) -->
+        <lightning-button label="Neutral" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Brand variant: Identifies the primary action in a group of buttons -->
+        <lightning-button variant="brand" label="Brand" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Brand outline variant: Identifies the primary action in a group of buttons, but has a lighter look -->
+        <lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Destructive variant: Identifies a potentially negative action -->
+        <lightning-button variant="destructive" label="Destructive" title="Destructive action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Destructive text variant: Identifies a potentially negative action, but has a lighter look -->
+        <lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+
+        <!-- Success variant: Identifies a successful action -->
+        <lightning-button variant="success" label="Success" title="Successful action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
+    </div>
+
+    <div class="slds-m-vertical_medium">
+        <p>The label of the button that was clicked is: <span class="slds-text-heading_small">{clickedButtonLabel}</span></p>
+    </div>
+</template>

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

@@ -0,0 +1,28 @@
+<template>
+    <div class="slds-m-top_small slds-m-bottom_medium">
+        <p class="slds-m-bottom_small">
+            These buttons don't respond when you click them.
+        </p>
+
+            <!-- Base variant: Makes a button look like a link -->
+            <lightning-button variant="base" label="Base" title="Looks like a link" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Neutral variant (default) -->
+            <lightning-button label="Neutral" title="Non-primary action" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Brand variant: Identifies the primary action in a group of buttons -->
+            <lightning-button variant="brand" label="Brand" title="Primary action" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Brand outline variant -->
+            <lightning-button variant="brand-outline" label="Brand Outline" title="Primary action with lighter look" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Destructive variant: Identifies a potentially negative action -->
+            <lightning-button variant="destructive" label="Destructive" title="Destructive action" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Destructive text variant: This button is used to indicate a destructive action to the user, like permanently erasing data.  -->
+            <lightning-button variant="destructive-text" label="Destructive Text" title="Destructive action with a lighter look" disabled class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Success variant: Identifies a successful action -->
+            <lightning-button variant="success" label="Success" title="Success" disabled class="slds-m-left_x-small"></lightning-button>
+        </div>
+    </template>

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

@@ -0,0 +1,11 @@
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}
+
+.slds-m-left_x-small {
+    margin-left: 0.5rem;
+}
+
+.slds-p-around_medium {
+    padding: 1rem;
+}

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

@@ -0,0 +1,43 @@
+<template>
+        <div class="slds-m-top_small slds-m-bottom_small">
+                <p class="slds-m-bottom_xx-small">
+                    Inverse variant of buttons with varying attribute values.
+                </p>
+                <p class="slds-m-bottom_medium">
+                    <code>variant</code> attribute has a value of <code>inverse</code>
+                </p>
+
+            <div class="slds-p-around_medium lgc-bg-inverse"
+            style="display: flex">
+                <!-- Basic button -->
+                <lightning-button variant="inverse" label="Download" title="Download action" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Button with icon before the label text -->
+                <lightning-button variant="inverse" label="Download" title="Download action" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Button with icon after the label text -->
+                <lightning-button variant="inverse" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+            </div>
+        </div>
+
+        <div class="slds-m-top_medium slds-m-bottom_x-large">
+                <p class="slds-m-bottom_xx-small">
+                    Inverse variant of buttons that are disabled.
+                </p>
+            <ul class="slds-list_dotted slds-m-bottom_medium">
+                <li><code>variant</code> attribute has a value of <code>inverse</code></li>
+                <li><code>disabled</code> attribute is present</li>
+            </ul>
+
+            <div class="slds-p-around_medium lgc-bg-inverse" style="display: flex">
+                <!-- Button that is disabled -->
+                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Button that is disabled and has an icon before the label text -->
+                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Button that is disabled and has an icon after the label text -->
+                <lightning-button variant="inverse" label="Delete" title="Delete action" disabled icon-name="utility:delete" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+            </div>
+        </div>
+    </template>

package/src/lightning/button/__examples__/onclick/onclick.html

@@ -0,0 +1,38 @@
+<template>
+        <div class="slds-m-top_medium slds-m-bottom_x-large">
+            <p class="slds-m-bottom_medium">
+                Buttons with custom <code>onclick</code> handlers.
+            </p>
+            <div class="slds-card">
+                <div class="slds-m-around_medium">
+                    <p class="slds-text-heading_x-small slds-m-bottom_medium">
+                        This button's handler toggles the icon used on the button and visibility of a content block. </p>
+                    <!-- Toggle visibility of a content block when clicked -->
+                    <lightning-button label={toggleButtonLabel} title="Toggle content action" icon-name={toggleIconName}
+                        onclick={handleToggleClick}>
+                    </lightning-button>
+                </div>
+                <div class="slds-m-vertical_large slds-m-around_medium lgc-id_content-toggle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                    deserunt mollit anim id est laborum.
+                </div>
+            </div>
+            <div class="slds-card">
+                <div class="slds-m-around_medium">
+                    <p class="slds-text-heading_x-small slds-m-top_medium slds-m-bottom_large">
+                        This button's handler generates random content.</p>
+
+                    <!-- Generate random content when clicked -->
+                    <lightning-button label="Random greek letter" title="Random greek letter action"
+                        icon-name="utility:refresh" onclick={handleRandomClick} class="slds-m-left_x-small">
+                    </lightning-button>
+                    <div class="slds-m-vertical_large slds-p-vertical_medium slds-border_top slds-border_bottom">
+                        Random greek letter: <span class="slds-text-heading_small">{greekLetter}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>

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

@@ -0,0 +1,43 @@
+<template>
+        <div class="slds-m-top_small slds-m-bottom_medium">
+            <p class="slds-m-bottom_small">
+                Buttons with an icon before the label text, the default location.
+            </p>
+                <p class="slds-m-bottom_medium">
+                    <code>icon-position</code> attribute is omitted to use the default value of <code>left</code>.
+                </p>
+
+            <!-- Base variant: Makes a button look like a link -->
+            <lightning-button variant="base" label="Download" title="Download action with base variant" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Neutral variant (default) -->
+            <lightning-button label="Download" title="Download action" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Brand variant: Identifies the primary action in a group of buttons -->
+            <lightning-button variant="brand" label="Download" title="Download action with brand variant" icon-name="utility:download" class="slds-m-left_x-small"></lightning-button>
+
+            <!-- Destructive variant: Identifies a potentially negative action -->
+            <lightning-button variant="destructive" label="Delete" title="Delete action with destructive variant" icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
+        </div>
+
+        <div class="slds-m-top_x-large slds-m-bottom_small">
+                <p class="slds-m-bottom_small">
+                  Buttons with an icon after the label text.
+                </p>
+                 <p class="slds-m-bottom_medium">
+                     <code>icon-position</code> attribute has a value of <code>right</code>.
+                 </p>
+
+                <!-- Base variant: Makes a button look like a link -->
+                <lightning-button variant="base" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Neutral variant (default) -->
+                <lightning-button label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Brand variant: Identifies the primary action in a group of buttons -->
+                <lightning-button variant="brand" label="Download" title="Download action" icon-name="utility:download" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+
+                <!-- Destructive variant: Identifies a potentially negative action -->
+                <lightning-button variant="destructive" label="Delete" title="Delete action" icon-name="utility:delete" icon-position="right" class="slds-m-left_x-small"></lightning-button>
+            </div>
+    </template>

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

@@ -0,0 +1,64 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group using simple buttons.
+        </p>
+
+        <!-- Button group: simple buttons -->
+        <lightning-button-group>
+            <lightning-button label="Refresh"></lightning-button>
+            <lightning-button label="Edit"></lightning-button>
+            <lightning-button label="Save"></lightning-button>
+        </lightning-button-group>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group using several button variations.
+        </p>
+
+        <!-- Button group: simple buttons -->
+        <lightning-button-group>
+            <lightning-button label="Refresh"></lightning-button>
+            <lightning-button label="Edit"></lightning-button>
+            <lightning-button label="Save" icon-name="utility:save"></lightning-button>
+            <lightning-button label="Delete" variant="destructive" icon-name="utility:delete"></lightning-button>
+        </lightning-button-group>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Button group using several button types (standard, icon, stateful, icon-stateful, menu).
+        </p>
+
+        <!-- Button group: simple buttons -->
+        <lightning-button-group>
+            <lightning-button label="Refresh"></lightning-button>
+            <lightning-button label="Edit"></lightning-button>
+            <lightning-button label="Save" icon-name="utility:save"></lightning-button>
+            <lightning-button-icon icon-name="utility:delete" variant="border-filled" alternative-text="Delete"></lightning-button-icon>
+            <lightning-button-icon icon-name="utility:settings" variant="border-filled" alternative-text="Settings"></lightning-button-icon>
+            <lightning-button-stateful
+                selected={buttonStatefulState}
+                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"
+                onclick={handleButtonStatefulClick}
+            ></lightning-button-stateful>
+            <lightning-button-icon-stateful
+                icon-name="utility:like"
+                selected={buttonIconStatefulState}
+                alternative-text="Like"
+                onclick={handleButtonIconStatefulClick}>
+            </lightning-button-icon-stateful>
+            <lightning-button-menu alternative-text="Show menu">
+                <lightning-menu-item label="Menu Item One" value="item1"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Two" value="item2"></lightning-menu-item>
+                <lightning-menu-item label="Menu Item Three" value="item3"></lightning-menu-item>
+            </lightning-button-menu>
+        </lightning-button-group>
+    </div>
+</template>