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

package/src/lightning/input/__examples__/textAdvanced/textAdvanced.html

@@ -0,0 +1,26 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A text input field that becomes highlighted when focused and returns to default when focus is moved away.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" onfocus={handleInputFocus} onblur={handleInputBlur}></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A text input field that live updates a variable.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" onchange={handleInputChange}></lightning-input>
+        </div>
+
+        <div class="slds-m-vertical_medium">
+            <p>The value of the input field is: <span class="slds-text-heading_small">{textValue}</span></p>
+        </div>
+    </div>
+
+</template>

package/src/lightning/input/__examples__/timeadvanced/timeadvanced.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Advanced Input Time</h2>
+        <lightning-input type="time" name="input4" label="Required Time field" required
+                         value="18:30:00.000Z"></lightning-input>
+        <lightning-input type="time" name="input5" label="Disabled Time field" disabled
+                         value="18:30:00.000Z"></lightning-input>
+        <lightning-input type="time" name="input6" label="Time field with min and max values" value="18:30:00.000Z"
+                         min="10:30:00.000Z" max="22:00:00.000Z"></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/timebasic/timebasic.html

@@ -0,0 +1,10 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Basic Input Time</h2>
+        <lightning-input type="time" name="input1" label="Enter a time"></lightning-input>
+        <lightning-input type="time" name="input2" label="Time field with a predefined value"
+                         value="18:30:00.000Z"></lightning-input>
+        <lightning-input type="time" name="input3" label="Time field with placeholder"
+                         placeholder="type here..."></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/toggle/toggle.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Toggle</h2>
+        <lightning-input type="toggle" label="Basic option" name="input1"></lightning-input>
+        <lightning-input type="toggle" label="Required option" name="input2" checked required></lightning-input>
+        <lightning-input type="toggle" label="Disabled option" name="input3" checked disabled></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/url/url.html

@@ -0,0 +1,20 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input URL Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input URL component.</p>
+    </div>
+    <div>
+        <h2>Basic Input URL</h2>
+        <lightning-input type="url" label="Enter a URL" name="input1" ></lightning-input>
+        <lightning-input type="url" label="URL field with a predefined value" name="input2" value="http://www.google.com" ></lightning-input>
+        <lightning-input type="url" label="URL field with a placeholder" name="input3" placeholder="Enter valid URL here..." ></lightning-input>
+    </div>
+
+    <div>
+        <h2>Advanced Input URL</h2>
+        <lightning-input type="url" label="Read-only URL field" name="input4" readonly value="file://someFile" ></lightning-input>
+        <lightning-input type="url" label="Disabled URL field" name="input5" disabled value="www.google.com" ></lightning-input>
+        <lightning-input type="url" label="Required URL field with a predefined value" name="input6" required value="www.google.com" ></lightning-input>
+        <lightning-input type="url" label="Required URL field with pattern matching" name="input6" pattern="^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$" required value="www.google.com" ></lightning-input>
+    </div>
+</template>

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

@@ -0,0 +1,17 @@
+<template>
+    <lightning-input-address
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        country-label="Country"
+        province-label="Province"
+        postal-code-label="PostalCode"
+        street="121 Spear St."
+        city="San Francisco"
+        country="US"
+        province="CA"
+        postal-code="94105"
+        required
+        field-level-help="Help Text for inputAddress field" ></lightning-input-address>
+</template>
+    

package/src/lightning/inputAddress/__examples__/customLocale/customLocale.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-input-address
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        country-label="Country"
+        province-label="Prefecture"
+        postal-code-label="Postal Code"
+        locale="ja-JP"
+        field-level-help="Help Text for input address field" >
+    </lightning-input-address>
+</template>

package/src/lightning/inputAddress/__examples__/stateAndCountryPicklists/stateAndCountryPicklists.html

@@ -0,0 +1,18 @@
+<template>
+    <lightning-input-address
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        country-label="Country"
+        province-label="Province"
+        postal-code-label="PostalCode"
+        street={address.street}
+        city={address.city}
+        country={address.country}
+        province={address.province}
+        postal-code={address.postalCode}
+        field-level-help="Help Text for inputAddress field" 
+        country-options={getCountryOptions}
+        province-options={getProvinceOptions}
+        onchange={handleChange} ></lightning-input-address>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="No default coordinates" ></lightning-input-location>
+</template>

package/src/lightning/inputLocation/__examples__/defaultValues/defaultValues.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="Default coordinates" latitude="-15.1234" longitude="99.5517"></lightning-input-location>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="Disabled" latitude="-15.1234" longitude="99.5517" disabled ></lightning-input-location>
+</template>

package/src/lightning/inputLocation/__examples__/fieldLevelHelp/fieldLevelHelp.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="fieldLevelHelp presents" field-level-help="Field level text example"></lightning-input-location>
+</template>

package/src/lightning/inputLocation/__examples__/readOnly/readOnly.html

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="Read-only" latitude="-15.1234" longitude="99.5517" readonly></lightning-input-location>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+    <lightning-input-location label="Required" latitude="-15.1234" longitude="99.5517" required ></lightning-input-location>
+</template>

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

@@ -0,0 +1,11 @@
+<template>
+        <lightning-input-name
+        label="Default Input Name Field"
+        first-name="John"
+        middle-name="Middleton"
+        last-name="Doe"
+        informal-name="Jo"
+        suffix="The 3rd"
+        salutation="Mr."
+        options={salutationOptions} ></lightning-input-name>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+        <lightning-input-name
+        label="Disabled Input Name Field"
+        disabled
+        first-name="John"
+        middle-name="Middleton"
+        last-name="Doe"
+        informal-name="Jo"
+        suffix="The 3rd"
+        salutation="Mr."
+        options={salutationOptions} ></lightning-input-name>
+</template>

package/src/lightning/inputName/__examples__/fieldLevelHelp/fieldLevelHelp.html

@@ -0,0 +1,12 @@
+<template>
+        <lightning-input-name
+        label="Input Name Field with field level help"
+        first-name="John"
+        middle-name="Middleton"
+        last-name="Doe"
+        informal-name="Jo"
+        suffix="The 3rd"
+        salutation="Mr."
+        options={salutationOptions}
+        field-level-help="Help Text for input-name field" ></lightning-input-name>
+</template>

package/src/lightning/inputName/__examples__/readOnly/readOnly.html

@@ -0,0 +1,12 @@
+<template>
+        <lightning-input-name
+        label="Readonly Input Name Field"
+        readonly
+        first-name="John"
+        middle-name="Middleton"
+        last-name="Doe"
+        informal-name="Jo"
+        suffix="The 3rd"
+        salutation="Mr."
+        options={salutationOptions} ></lightning-input-name>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+        <lightning-input-name
+        label="Required Input Name Field"
+        required
+        first-name="John"
+        middle-name="Middleton"
+        last-name="Doe"
+        informal-name="Jo"
+        suffix="The 3rd"
+        salutation="Mr."
+        options={salutationOptions}
+        fields-to-display={fields} ></lightning-input-name>
+</template>

package/src/lightning/layout/__examples__/horizontalAlignSpace/horizontalAlignSpace.css

@@ -0,0 +1,11 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.custom-box {
+    text-align: center;
+    background-color: #f4f6f9;
+    padding: 1rem;
+    border: 1px solid #d8dde6;
+}

package/src/lightning/layout/__examples__/horizontalAlignSpace/horizontalAlignSpace.html

@@ -0,0 +1,31 @@
+<template>
+        <p>The layout items are spaced horizontally across the container, starting and ending with a space, using attribute <code>horizontal-align="space"</code>.</p>
+    <div class="c-container">
+        <lightning-layout horizontal-align="space">
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">4</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">5</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">6</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">7</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">8</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layout/__examples__/horizontalAlignSpread/horizontalAlignSpread.css

@@ -0,0 +1,11 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.custom-box {
+    text-align: center;
+    background-color: #f4f6f9;
+    padding: 1rem;
+    border: 1px solid #d8dde6;
+}

package/src/lightning/layout/__examples__/horizontalAlignSpread/horizontalAlignSpread.html

@@ -0,0 +1,31 @@
+<template>
+        <p>The layout items are spaced horizontally across the container, starting and ending with a layout item using attribute <code>horizontal-align="spread"</code>.</p>
+    <div class="c-container">
+        <lightning-layout horizontal-align="spread">
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">4</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">5</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">6</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">7</div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="custom-box">8</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layout/__examples__/nested/nested.css

@@ -0,0 +1,23 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.page-section {
+    border: solid 1px #ccc;
+    padding: 1rem;
+}
+
+.page-header,
+.page-footer {
+    height: 50px;
+}
+
+.page-main {
+    background: #f8f8f8;
+}
+
+.page-left,
+.page-right {
+    background: #f0efef;
+}

package/src/lightning/layout/__examples__/nested/nested.html

@@ -0,0 +1,71 @@
+<template>
+        <p>This example creates a three column page layout with a container-wide header using nested <code>lightning-layout</code> components. A <code>lightning-layout-item</code> of size="12" wraps the <code>lightning-layout</code> that contains multiple layout items.</p>
+    <div class="c-container">
+            <lightning-layout multiple-rows="true">
+                <lightning-layout-item padding="around-small" size="12">
+                    <div class="page-section page-header">
+                        <h2>Header</h2>
+                    </div>
+                </lightning-layout-item>
+                <lightning-layout-item padding="around-small" size="12">
+                    <lightning-layout>
+                        <lightning-layout-item padding="around-small" size="3">
+                            <div class="page-section page-right">
+                                <h2>Left Sidebar</h2>
+                                <p>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.
+                                </p>
+                            </div>
+                        </lightning-layout-item>
+                        <lightning-layout-item padding="around-small" size="6">
+                            <div class="page-section page-main">
+                                <h2>Main</h2>
+                                <p>Donec viverra pellentesque aliquet. Praesent quis tristique mauris, ac tincidunt ante.
+                                    Nulla lectus nisi, tempor quis malesuada ac, consequat in velit. Nullam aliquam mauris eu magna
+                                    dictum, in ornare risus convallis. Nunc condimentum ornare libero sit amet rhoncus. Aliquam tellus nisl,
+                                    tristique sit amet congue in, tristique vel risus. Morbi leo ligula, blandit nec commodo at, pulvinar
+                                    vitae libero. Mauris ipsum erat, aliquam a turpis vitae, faucibus viverra arcu. Donec id purus
+                                    luctus enim elementum molestie sit amet ac libero.
+                                </p>
+                                <p>Mauris cursus felis elementum ipsum placerat, in maximus justo pretium. Nam nec sapien
+                                    maximus justo feugiat tristique. Mauris viverra erat vitae arcu feugiat, sed posuere purus vulputate.
+                                    Sed et nulla ut magna iaculis fringilla. Integer eget blandit elit. Phasellus nulla augue, lobortis a
+                                    elementum tempus, auctor et felis. Fusce quis lorem tincidunt risus ullamcorper pharetra. Sed elit
+                                    nulla, efficitur a lorem quis, mollis tristique elit. Etiam odio libero, ornare sed vehicula
+                                    in, sagittis et erat. Integer at justo molestie, suscipit dui vel, scelerisque ex. Nulla non metus
+                                    pulvinar, egestas neque et, tincidunt tellus. Praesent egestas scelerisque tristique. Nullam
+                                    sodales ex acmetus tincidunt accumsan. Cras vitae consequat odio. Pellentesque facilisis lobortis
+                                    lorem, at placerat mauris sagittis a.
+                                </p>
+                            </div>
+                        </lightning-layout-item>
+                        <lightning-layout-item padding="around-small" size="3">
+                            <div class="page-section page-right">
+                                <h2>Right Sidebar</h2>
+                                <ul>
+                                    <li><a href="#">Archive 1</a>
+                                    </li>
+                                    <li><a href="#">Archive 2</a>
+                                    </li>
+                                    <li><a href="#">Archive 3</a>
+                                    </li>
+                                    <li><a href="#">Archive 4</a>
+                                    </li>
+                                    <li><a href="#">Archive 5</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </lightning-layout-item>
+                    </lightning-layout>
+                </lightning-layout-item>
+                <lightning-layout-item flexibility="auto" padding="around-small" size="12">
+                    <div class="page-footer page-section">
+                        <h2>Footer</h2>
+                    </div>
+                </lightning-layout-item>
+            </lightning-layout>
+        </div>
+</template>

package/src/lightning/layout/__examples__/pullToBoundary/pullToBoundary.css

@@ -0,0 +1,11 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.custom-box {
+    text-align: center;
+    background-color: #f4f6f9;
+    padding: 1rem;
+    border: 1px solid #d8dde6;
+}

package/src/lightning/layout/__examples__/pullToBoundary/pullToBoundary.html

@@ -0,0 +1,19 @@
+<template>
+        <p>The <code>pull-to-boundary</code> attribute pulls the items to each side of the container. Element 1 and 4 display without padding on their outer edges and go all the way to the edges of the container.</p>
+    <div class="c-container">
+        <lightning-layout pull-to-boundary="medium">
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
+                <div class="custom-box">4</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layout/__examples__/simple/simple.css

@@ -0,0 +1,15 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.header-column {
+    padding: 0 2rem;
+}
+
+.field-title {
+    font-size: 0.75rem;
+    line-height: 1.25;
+    color: #54698d;
+    margin-bottom: 0.25rem;
+}

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

@@ -0,0 +1,35 @@
+<template>
+        <p>This example creates a simple layout with field headers.</p>
+    <div class="c-container">
+        <lightning-layout>
+            <lightning-layout-item padding="around-small">
+                <div class="header-column">
+                    <p class="field-title" title="Field 1">Field 1</p>
+                    <p>Name</p>
+                </div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="header-column">
+                    <p class="field-title" title="Field2 (3)">Field 2 (3)
+                        <lightning-button-icon icon-name="utility:down" variant="border-filled" size="small" alternative-text="More Actions"></lightning-button-icon>
+                    </p>
+                    <p>Eligibility</p>
+                </div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="header-column">
+                    <p class="field-title" title="Field 3">Field 3</p>
+                    <a href="#">Website</a>
+                </div>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+                <div class="header-column">
+                    <p class="field-title" title="Field 4">Field 4</p>
+                    <p>
+                        <span title="">Address</span>
+                    </p>
+                </div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layout/__examples__/verticalAlignCenter/verticalAlignCenter.css

@@ -0,0 +1,19 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.large {
+    height: 200px;
+}
+
+.x-large {
+    height: 300px;
+}
+
+.custom-box {
+    text-align: center;
+    background-color: #f4f6f9;
+    padding: 1rem;
+    border: 1px solid #d8dde6;
+}

package/src/lightning/layout/__examples__/verticalAlignCenter/verticalAlignCenter.html

@@ -0,0 +1,31 @@
+<template>
+        <p>The layout items are aligned in the center of the container.</p>
+    <div class="c-container">
+        <lightning-layout vertical-align="center" class="x-large">
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">4</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">5</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">6</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">7</div>
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small">
+                <div class="custom-box">8</div>
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

package/src/lightning/layout/__examples__/verticalAlignStretch/verticalAlignStretch.css

@@ -0,0 +1,19 @@
+.c-container {
+    border: 1px solid #d8dde6;
+    margin: 10px 0 20px;
+}
+
+.large {
+    height: 200px;
+}
+
+.x-large {
+    height: 300px;
+}
+
+.custom-box {
+    text-align: center;
+    background-color: #f4f6f9;
+    padding: 1rem;
+    border: 1px solid #d8dde6;
+}

package/src/lightning/layout/__examples__/verticalAlignStretch/verticalAlignStretch.html

@@ -0,0 +1,19 @@
+<template>
+        <p>The layout items extend vertically to fill the container.</p>
+    <div class="c-container">
+        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
+            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
+                1
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
+                2
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
+                3
+            </lightning-layout-item>
+            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
+                4
+            </lightning-layout-item>
+        </lightning-layout>
+    </div>
+</template>

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

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

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

@@ -0,0 +1,19 @@
+<template>
+        <p>The third layout items specify <code>alignment-bump="left"</code> to create a margin to its left. The margin is the width of the unused horizontal space.</p>
+    <div class="slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none slds-box slds-p-around_none">
+        <lightning-layout>
+            <lightning-layout-item>
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">1</div>
+            </lightning-layout-item>
+            <lightning-layout-item>
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">2</div>
+            </lightning-layout-item>
+            <lightning-layout-item alignment-bump="left">
+                <div class="custom-box slds-box slds-p-around_medium slds-text-align_center">3</div>
+            </lightning-layout-item>
+            <lightning-layout-item>
+                <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__/default/default.css

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