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

package/src/lightning/layoutItem/__examples__/default/default.html

@@ -0,0 +1,19 @@
+<template>
+        <p>With default attribute values of <code>size</code> and <code>flexibility</code>, layout items take the size of their content and don't occupy entire width of the container.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/flexibility/flexibility.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/flexibility/flexibility.html

@@ -0,0 +1,19 @@
+<template>
+        <p>The layout items below become as wide as necessary to occupy the entire width of the container with <code>flexibility="auto"</code>.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/flexibilityValues/flexibilityValues.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/flexibilityValues/flexibilityValues.html

@@ -0,0 +1,19 @@
+<template>
+        <p>The third layout item adds a value of <code>"no-grow"</code> to the <code>flexibility</code> attribute. No space is assigned to that item in the container beyond the width of the content.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto, no-grow" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/padding/padding.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/padding/padding.html

@@ -0,0 +1,19 @@
+<template>
+        <p>These layout items specify <code>padding="horizontal-medium"</code> to give each item medium padding on its left and right sides.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/size/size.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/size/size.html

@@ -0,0 +1,19 @@
+<template>
+        <p>These layout items specify <code>size="4"</code>, or 4 columns of a 12 column grid. Each item occupies 33.33% of the width.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout multiple-rows>
+            <lightning-layout-item size="4" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="4" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="4" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="4" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/sizeOverriddenForTablets/sizeOverriddenForTablets.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/sizeOverriddenForTablets/sizeOverriddenForTablets.html

@@ -0,0 +1,19 @@
+<template>
+        <p>Layout with items having default size 6 and and size set to 3 for medium. The medium size is used for devices like tablets and wider than tablets, such as desktop monitors. The default size is used for devices narrower than tablets, such as smart phones. For more information about device sizes, see the <a href="https://lightningdesignsystem.com/utilities/grid/" target="_blank">Lightning Design System website</a>.</p>
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout multiple-rows>
+            <lightning-layout-item size="6" medium-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="6" medium-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="6" medium-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="6" medium-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layoutItem/__examples__/sizePerDevice/sizePerDevice.css

@@ -0,0 +1,3 @@
+.custom-box {
+    background-color: #f4f6f9;
+}

package/src/lightning/layoutItem/__examples__/sizePerDevice/sizePerDevice.html

@@ -0,0 +1,32 @@
+<template>
+        <p>These layout items specify size with device sizes. The value <code>size="12"</code> is applied to a small mobile phone and the <code>device-size</code> attributes are applied to larger devices progressively. For more information about device sizes, see the <a href="https://lightningdesignsystem.com/utilities/grid/" target="_blank">Lightning Design System website</a>.</p>
+
+    <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
+        <lightning-layout multiple-rows>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">4</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">5</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">6</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">7</div>
+            </lightning-layout-item>
+            <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">8</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/menuDivider/__examples__/divider/divider.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/menuDivider/__examples__/divider/divider.html

@@ -0,0 +1,29 @@
+<template>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus using <code>lightning-menu-divider</code> components. The <code>lightning-menu-divider</code> components use <code>standard</code> and <code>compact</code> variants.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu tooltip="Dividers use default variant" alternative-text="Show menu">
+                <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-divider></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu tooltip="Dividers use compact variant" alternative-text="Show menu" class="slds-m-left_xx-small">
+                <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-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/menuDivider/__examples__/withSubhead/withSubhead.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/menuDivider/__examples__/withSubhead/withSubhead.html

@@ -0,0 +1,32 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus with <code>lightning-menu-subheader</code> and <code>lightning-menu-divider</code> components. The <code>lightning-menu-divider</code> components use default <code>standard</code> and <code>compact</code> variants.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu tooltip="Subheadings with dividers using default variant" alternative-text="Show menu">
+                <lightning-menu-subheader label="Header Alpha"></lightning-menu-subheader>
+                <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-divider></lightning-menu-divider>
+                <lightning-menu-subheader label="Header Beta"></lightning-menu-subheader>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu tooltip="Subheadings with dividers using compact variant" alternative-text="Show menu" class="slds-m-left_xx-small">
+                <lightning-menu-subheader label="Header Alpha"></lightning-menu-subheader>
+                <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-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-subheader label="Header Beta"></lightning-menu-subheader>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/menuItem/__examples__/iteration/iteration.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/menuItem/__examples__/iteration/iteration.html

@@ -0,0 +1,50 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small">
+            Button menu with items added from a simple data source during initialization.
+        </h2>
+        <p class="slds-text-heading_x-small slds-m-bottom_medium">
+            The <code>key</code> attribute on <code>lightning-menu-item</code> is required for iterations.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" menu-alignment="auto">
+                <template for:each={myMenuItems} for:item="menuItem">
+                    <lightning-menu-item
+                        key={menuItem.id}
+                        value={menuItem.value}
+                        label={menuItem.label}>
+                    </lightning-menu-item>
+                </template>
+            </lightning-button-menu>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small">
+            Button menu with items added from a more complex data source during initialization.
+        </h2>
+        <p class="slds-text-heading_x-small slds-m-bottom_medium">
+            Data source includes <code>icon-name</code>, <code>prefix-icon-name</code>, <code>disabled</code>
+            and <code>checked</code> values.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" variant="border-filled" menu-alignment="auto">
+                <template for:each={myComplexMenuItems} for:item="menuItem">
+                    <lightning-menu-item
+                        key={menuItem.id}
+                        value={menuItem.value}
+                        label={menuItem.label}
+                        disabled={menuItem.disabled}
+                        icon-name={menuItem.iconName}
+                        prefix-icon-name={menuItem.prefixIconName}
+                        checked={menuItem.checked}>
+                    </lightning-menu-item>
+                </template>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/menuItem/__examples__/menuItems/menuItems.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/menuItem/__examples__/menuItems/menuItems.html

@@ -0,0 +1,65 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with some <code>lightning-menu-item</code> components disabled.
+        </h2>
+
+        <!-- Disabled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" disabled></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" disabled></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 menu with <code>lightning-menu-item</code> components that use the <code>icon-name</code> attribute.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" icon-name="utility:description"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" icon-name="utility:date_input"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" icon-name="utility:custom_apps"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" icon-name="utility:metrics"></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 menu with <code>lightning-menu-item</code> components that use the <code>prefix-icon-name</code> attribute.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" prefix-icon-name="utility:bookmark"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" prefix-icon-name="utility:send"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" prefix-icon-name="utility:connected_apps"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" prefix-icon-name="utility:italic"></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 menu with <code>lightning-menu-item</code> components that use <code>prefix-icon-name</code> and <code>icon-name</code> attributes.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" prefix-icon-name="utility:bookmark" icon-name="utility:description"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" prefix-icon-name="utility:send" icon-name="utility:date_input"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" prefix-icon-name="utility:connected_apps" icon-name="utility:custom_apps"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" prefix-icon-name="utility:italic" icon-name="utility:metrics"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/menuItem/__examples__/menuItemsColor/menuItemsColor.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/menuItem/__examples__/menuItemsColor/menuItemsColor.html

@@ -0,0 +1,49 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>lightning-menu-item</code> components that use the <code>icon-name</code> attribute with <code>icon-type="color"</code>.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" icon-name="action:add_contact" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" icon-name="standard:event" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" icon-name="utility:custom_apps" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" icon-name="custom:custom40" icon-type="color"></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 menu with <code>lightning-menu-item</code> components that use the <code>prefix-icon-name</code> attribute with <code>icon-type="color"</code>.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" prefix-icon-name="standard:event" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" prefix-icon-name="action:add_contact" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" prefix-icon-name="utility:connected_apps" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" prefix-icon-name="doctype:audio" icon-type="color"></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 menu with <code>lightning-menu-item</code> components that use <code>prefix-icon-name</code> and <code>icon-name</code> and <code>icon-type="color"</code> attributes.
+        </h2>
+
+        <!-- With icon-name -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu" menu-alignment="auto">
+                <lightning-menu-item value="MenuItemOne" label="Menu Item One" prefix-icon-name="utility:bookmark" icon-name="utility:description" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemTwo" label="Menu Item Two" prefix-icon-name="utility:send" icon-name="standard:coaching" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three" prefix-icon-name="action:add_contact" icon-name="doctype:audio" icon-type="color"></lightning-menu-item>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four" prefix-icon-name="standard:event" icon-name="utility:metrics" icon-type="color"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/menuSubheader/__examples__/subheader/subheader.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/menuSubheader/__examples__/subheader/subheader.html

@@ -0,0 +1,19 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menu with <code>lightning-menu-subheader</code> components.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu alternative-text="Show menu">
+                <lightning-menu-subheader label="Header Alpha"></lightning-menu-subheader>
+                <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-subheader label="Header Beta"></lightning-menu-subheader>
+                <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/menuSubheader/__examples__/withDividers/withDividers.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/menuSubheader/__examples__/withDividers/withDividers.html

@@ -0,0 +1,33 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small slds-m-bottom_medium">
+            Button menus with <code>lightning-menu-subheader</code> and <code>lightning-menu-divider</code>
+            components. The <code>lightning-menu-divider</code> components use <code>standard</code> and <code>compact</code> variants.
+        </h2>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-button-menu tooltip="Subheadings with dividers using standard variant" alternative-text="Show menu">
+                <lightning-menu-subheader label="Header Alpha"></lightning-menu-subheader>
+                <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-divider></lightning-menu-divider>
+                <lightning-menu-subheader label="Header Beta"></lightning-menu-subheader>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+
+            <lightning-button-menu tooltip="Subheadings with dividers using compact variant" alternative-text="Show menu" class="slds-m-left_xx-small">
+                <lightning-menu-subheader label="Header Alpha"></lightning-menu-subheader>
+                <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-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-subheader label="Header Beta"></lightning-menu-subheader>
+                <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
+                <lightning-menu-divider variant="compact"></lightning-menu-divider>
+                <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
+            </lightning-button-menu>
+        </div>
+    </div>
+</template>

package/src/lightning/overlay/__examples__/alert/alert.html

@@ -0,0 +1,27 @@
+<template>
+    <lightning-focus-trap>
+        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
+            aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_small">
+            <div class="slds-modal__container">
+                <header class="slds-modal__header">
+                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
+                        title="Close" onclick={handleDismiss}>
+                        <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
+                            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                        </svg>
+                        <span class="slds-assistive-text">Close</span>
+                    </button>
+                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{header}</h2>
+                </header>
+                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
+                    <p>{body}</p>
+                </div>
+                <footer class="slds-modal__footer">
+                    <button class="slds-button slds-button_neutral" onclick={handleCancel}>{cancelText}</button>
+                    <button class="slds-button slds-button_brand" onclick={handleOkay}>{okayText}</button>
+                </footer>
+            </div>
+        </section>
+    </lightning-focus-trap>
+    <div class="slds-backdrop slds-backdrop_open"></div>
+</template>

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

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #fff;
+    box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
+    padding: 1rem;
+}

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

@@ -0,0 +1,18 @@
+<template>
+    <div class="example">
+        <button onclick={handleConfirmModal}>Open a Confirm Modal</button> 
+        <p>Result: <code>{confirmResult}</code></p>
+    </div>
+    <div class="example">
+        <button onclick={handleConfirmAltModal}>Open a Confirm Modal Alt</button> 
+        <p>Result: <code>{confirmAltResult}</code></p>
+    </div>
+    <div class="example">
+        <button onclick={handleDemoModal}>Open a Demo Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+    <div class="example">
+        <button onclick={handlePanel}>Open a Panel</button> 
+        <p>Result: <code>{panelResult}</code></p>
+    </div>
+</template>