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

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

@@ -0,0 +1,41 @@
+<template>
+    <p id="action" class="slds-box slds-text-heading_small">Action icons represent actions a user can take. The default
+        size of action icons are larger than the others. <br /><br />
+        <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
+        <lightning-icon icon-name="action:delete" alternative-text="Delete" title="Delete"></lightning-icon>
+        <lightning-icon icon-name="action:new_note" alternative-text="New note" title="New note"></lightning-icon>
+        <lightning-icon icon-name="action:preview" alternative-text="Preview" title="Preview"></lightning-icon>
+    </p>
+    <p id="doctype" class="slds-box slds-text-heading_small">Doctype icons represent a type of file when a preview or
+        image is unavailable. <br /><br />
+        <lightning-icon icon-name="doctype:audio" alternative-text="Audio file" title="Audio"></lightning-icon>
+        <lightning-icon icon-name="doctype:image" alternative-text="Image file" title="Image"></lightning-icon>
+        <lightning-icon icon-name="doctype:mp4" alternative-text="MP4 file" title="MP4"></lightning-icon>
+        <lightning-icon icon-name="doctype:xml" alternative-text="XML file" title="XML"></lightning-icon>
+    </p>
+
+    <p id="standard" class="slds-box slds-text-heading_small">Standard icons represent entities and objects within
+        Salesforce. <br /><br />
+        <lightning-icon icon-name="standard:event" alternative-text="Event" title="Event"></lightning-icon>
+        <lightning-icon icon-name="standard:account" alternative-text="Account" title="Account"></lightning-icon>
+        <lightning-icon icon-name="standard:address" alternative-text="Address" title="Address"></lightning-icon>
+        <lightning-icon icon-name="standard:email" alternative-text="Email" title="Email"></lightning-icon>
+    </p>
+
+    <p id="utility" class="slds-box slds-text-heading_small">Utility icons are used throughout the interface and are
+        SVGs for extensibility. <br /><br />
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" title="Connected">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" title="Warning"></lightning-icon>
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" title="Error"></lightning-icon>
+        <lightning-icon icon-name="utility:image" alternative-text="Utility image" title="Image"></lightning-icon>
+    </p>
+
+    <p id="custom" class="slds-box slds-text-heading_small">Custom icons are available in Salesforce to represent user
+        created objects.<br /><br />
+        <lightning-icon icon-name="custom:custom11" title="custom11"></lightning-icon>
+        <lightning-icon icon-name="custom:custom33" title="custom33"></lightning-icon>
+        <lightning-icon icon-name="custom:custom51" title="custom51"></lightning-icon>
+        <lightning-icon icon-name="custom:custom88" title="custom88"></lightning-icon>
+    </p>
+</template>

package/src/lightning/icon/__examples__/variants/variants.css

@@ -0,0 +1,9 @@
+.dark-background {
+    background-color: #16325c;
+    padding: 12px;
+    color: #fff;
+}
+
+.row {
+    margin: 10px 0;
+}

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

@@ -0,0 +1,82 @@
+<template>
+    <div id="size" class="row slds-box slds-text-heading_small">
+        <h4>Utility icons in different sizes</h4>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" size="large" title="large size">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" title="medium (default)">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" size="small" title="small size">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" size="x-small"
+            title="x-small size"></lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" size="xx-small"
+            title="xx-small size"></lightning-icon>
+    </div>
+    <div id="inverse" class="row dark-background slds-box slds-text-heading_small">
+        <h4>Utility icons with inverse variant in different sizes</h4>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse" size="large"
+            title="large size"></lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse"
+            title="medium (default)"></lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse" size="small"
+            title="small size"></lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse" size="x-small"
+            title="x-small size"></lightning-icon>
+        <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse"
+            size="xx-small" title="xx-small size"></lightning-icon>
+    </div>
+    <div id="variants" class="row slds-box slds-text-heading_small">
+        <h4>Utility icons with default styling and with success, warning, and error variants</h4>
+        <lightning-icon icon-name="utility:success" alternative-text="Success!" title="default style"></lightning-icon>
+        <lightning-icon icon-name="utility:success" alternative-text="Success!" variant="success"
+            title="success variant"></lightning-icon>
+        <lightning-icon icon-name="utility:success" alternative-text="Success!" variant="success"
+            title="success variant small" size="small"></lightning-icon>
+        <lightning-icon icon-name="utility:success" alternative-text="Success!" variant="success"
+            title="success variant x-small" size="x-small"></lightning-icon>
+        <lightning-icon icon-name="utility:success" alternative-text="Success!" variant="success"
+            title="success variant xx-small" size="xx-small"></lightning-icon>
+        <br />
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" title="default style"></lightning-icon>
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" variant="warning"
+            title="warning variant"></lightning-icon>
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" variant="warning"
+            title="warning variant small" size="small"></lightning-icon>
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" variant="warning"
+            title="warning variant x-small" size="x-small"></lightning-icon>
+        <lightning-icon icon-name="utility:warning" alternative-text="Warning!" variant="warning"
+            title="warning variant xx-small" size="xx-small"></lightning-icon>
+        <br />
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" title="default style"></lightning-icon>
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" variant="error" title="error variant">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" variant="error"
+            title="error variant small" size="small"></lightning-icon>
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" variant="error"
+            title="error variant x-small" size="x-small"></lightning-icon>
+        <lightning-icon icon-name="utility:error" alternative-text="Error!" variant="error"
+            title="error variant xx-small" size="xx-small"></lightning-icon>
+        <br /><br />
+        <lightning-icon icon-name="utility:money" alternative-text="Money" title="money icon with success variant"
+        variant="success">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:light_bulb" alternative-text="Light bulb" title="light bulb with warning variant"
+        variant="warning">
+        </lightning-icon>
+        <lightning-icon icon-name="utility:hide" alternative-text="Hide" title="hide icon with error variant"
+        variant="error">
+        </lightning-icon>
+    </div>
+
+    <div id="action" class="row slds-box slds-text-heading_small">
+        <h4>Action icons in various sizes</h4>
+        <lightning-icon icon-name="action:call" alternative-text="Click to Call" size="large" title="large size">
+        </lightning-icon>
+        <lightning-icon icon-name="action:call" alternative-text="Click to Call" title="medium size (default)">
+        </lightning-icon>
+        <lightning-icon icon-name="action:call" alternative-text="Click to Call" size="small" title="small size">
+        </lightning-icon>
+        <lightning-icon icon-name="action:call" alternative-text="Click to Call" size="x-small" title="x-small size">
+        </lightning-icon>
+    </div>
+</template>

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

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

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.css

@@ -0,0 +1,6 @@
+.slds-box {
+    padding: 1rem;
+    margin: 0;
+    border-radius: 0.25rem;
+    border: 1px solid lightgrey;
+}

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

@@ -0,0 +1,9 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Input Checkbox Button</h2>
+        <lightning-input type="checkbox-button" label="Input One" name="input1"></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Two" name="input2" checked required></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Three" name="input3" disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Four" name="input3" checked disabled></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/color/color.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/input/__examples__/color/color.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An input field with a color picker. Type a valid hex color value such as <code>#8DC141</code> or click the menu to select a color.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="color" name="input-color" label="Favorite color"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An input field with a color picker that's set to a predefined value.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="color" name="input-color" label="Favorite color" value="#8DC141"></lightning-input>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input Date Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input date component.</p>
+    </div>
+    <div>
+        <h2>Basic Input Date</h2>
+        <lightning-input type="date" name="input1" label="Enter a date" ></lightning-input>
+        <lightning-input type="date" name="input2" label="Date field with a predefined value" value="2020-09-07"></lightning-input>
+        <lightning-input type="date" name="input3" label="Date field with ISO8601 formatted value" value="2020-09-07T00:00:00Z"></lightning-input>
+        <lightning-input type="date" name="input4" label="Date field with placeholder" placeholder="type here..."></lightning-input>
+    </div>
+
+    <div>
+        <h2>Advanced Input Date</h2>
+        <lightning-input type="date" name="input5" label="Required date field" required value="2020-09-07" ></lightning-input>
+        <lightning-input type="date" name="input6" label="Read-only date field" readonly value="2020-09-07" ></lightning-input>
+        <lightning-input type="date" name="input7" label="Disabled date field" disabled value="2020-09-07" ></lightning-input>
+        <lightning-input type="date" name="input8" label="Date field with min and max values" value="2020-09-07" min="2020-09-05" max="2020-09-22" ></lightning-input>
+    </div>
+</template>

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

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input DateTime Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input date/time component.</p>
+    </div>
+    <div>
+        <h2>Basic Input Date Time</h2>
+        <lightning-input type="datetime" name="input1" label="Enter a date/time value" ></lightning-input>
+        <lightning-input type="datetime" name="input2" label="Date Time field with a predefined value" value="2020-09-12T18:13:41Z"></lightning-input>
+    </div>
+
+    <div>
+        <h2>Advanced Input Date Time</h2>
+        <lightning-input type="datetime" name="input3" label="Required Date Time field" required value="2020-09-12T18:13:41Z" ></lightning-input>
+        <lightning-input type="datetime" name="input4" label="Disabled Date Time field" disabled value="2020-09-12T18:13:41Z" ></lightning-input>
+        <lightning-input type="datetime" name="input5" label="Date Time field with min and max values" value="2020-09-12T18:13:41Z" min="2020-08-03T08:20:44Z" max="2020-09-25T22:33:44Z" ></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/email/email.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/input/__examples__/email/email.html

@@ -0,0 +1,89 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field with an initial value.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" value="alpha@beta.com"></lightning-input>
+            <lightning-input type="email" label="Email field without a top-level domain" value="alpha@beta"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field with an invalid value.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" value="alpha-not-valid"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field with placeholder text.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" placeholder="type here..."></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field that is required.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" placeholder="type here..." required></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field that is disabled.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" placeholder="type here..." disabled></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field that is read-only.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email address" value="tony@starkindustries.com" readonly></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An email input field that supports multiple email addresses.
+        </p>
+
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="email" label="Email addresses" value="ceo@example.com, cto@example.com" multiple></lightning-input>
+        </div>
+    </div>
+</template>

package/src/lightning/input/__examples__/file/file.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/input/__examples__/file/file.html

@@ -0,0 +1,56 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An input field with a file selector that accepts a single file.
+        </p>
+
+        <!-- Single file -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachment"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An input field with a file selector that accepts multiple files.
+        </p>
+
+        <!-- Multiple files -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachments" multiple></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A required input field with a file selector that accepts a single file.
+        </p>
+
+        <!-- Required -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachment" required message-when-value-missing="Please upload a file"></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A disabled input field with a file selector. You cannot interact with a disabled field.
+        </p>
+
+        <!-- Disabled -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachment" disabled></lightning-input>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            An input field with a file selector that accepts a single PNG, JPG, or ZIP file.
+        </p>
+
+        <!-- Single file of restricted type -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachment" accept="image/png, image/jpg, .zip"></lightning-input>
+        </div>
+    </div>
+</template>

package/src/lightning/input/__examples__/fileOnchange/fileOnchange.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/input/__examples__/fileOnchange/fileOnchange.html

@@ -0,0 +1,22 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            File input field that accepts multiple files. Click the <b>upload files</b> button to add files, the information block below will update as the content changes.
+        </p>
+
+        <!-- Multiple file with change event -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="file" label="Attachment" multiple onchange={handleFilesChange}></lightning-input>
+        </div>
+
+        <div class="slds-m-vertical_medium">
+            <p>The number of files selected to upload is: <span class="slds-text-heading_small">{filesCount}</span></p>
+            <p>The files selected are:</p>
+            <ul class="slds-list_dotted">
+                <template for:each={filesList} for:item="file">
+                    <li key={file.lastModified}>{file.name}</li>
+                </template>
+            </ul>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,29 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input Number Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input number component.</p>
+    </div>
+    <div>
+        <h2>Basic Input Number</h2>
+        <lightning-input type="number" name="input1" label="Enter a number" ></lightning-input>
+        <lightning-input type="number" name="input2" label="Number field with a predefined value" value="12345"></lightning-input>
+        <lightning-input type="number" name="input3" label="Number field with placeholder" placeholder="type here..."></lightning-input>
+    </div>
+
+    <div>
+        <h2>Advanced Input Number</h2>
+        <lightning-input type="number" name="input4" readonly value="123" label="Read-only number field" ></lightning-input>
+        <lightning-input type="number" name="input5" disabled value="12345" label="Disabled number field" ></lightning-input>
+        <lightning-input type="number" name="input6" label="Number field with percentage formatter" value="0.5" formatter="percent" step="0.01"></lightning-input>
+        <lightning-input type="number" name="input7" label="Number field with currency formatter" value="123.45" formatter="currency" step="0.01"></lightning-input>
+        <lightning-input type="number" name="input8" required value="5" label="Required number field with a maximum value of 99" max="99"></lightning-input>
+    </div>
+
+    <div>
+        <h2>Live Input Number</h2>
+        <lightning-input type="number" name="seven" value={amount} onchange={handleAmountChange} placeholder="type the number of items..." label="Enter a number" ></lightning-input>
+        <p>
+            Number of Items: {amount}
+        </p>
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input Password Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input password component.</p>
+    </div>
+    
+    <div>
+        <h2>Basic Input Password</h2>
+        <lightning-input type="password" label="Enter your password" name="input1"  ></lightning-input>
+        <lightning-input type="password" label="Password field with predefined value" name="input2" value="pre-filled password"></lightning-input>
+        <lightning-input type="password" label="Password field with placeholder" name="input3" placeholder="Enter Password"></lightning-input>
+    </div>
+
+    <div>
+        <h2>Advanced Input Password</h2>
+        <lightning-input type="password" label="Read-only password field" name="input4" readonly value="initial value" ></lightning-input>
+        <lightning-input type="password" label="Disabled password field" name="input5" disabled value="initial value" ></lightning-input>
+        <lightning-input type="password" label="Required password field" name="input6" required value="initial value" ></lightning-input>
+        <lightning-input type="password" label="Required password field with a minimum of 6 characters" name="input7" pattern={pattern} required value="initial value" ></lightning-input>
+    </div>
+</template>

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

@@ -0,0 +1,16 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input Search Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input search component.</p>
+    </div>
+    <div onkeyup={handleKeyUp}>
+        <lightning-input
+            name="enter-search"
+            label="Search when user hits the 'enter' key"
+            type="search"
+        ></lightning-input>
+    </div>
+    <p if:true={queryTerm}>
+        Searched for {queryTerm}!
+    </p>
+</template>

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

@@ -0,0 +1,12 @@
+<template>
+    <div class="slds-m-around_medium">
+        <h1 class="slds-text-heading_small">Input Telephone Example</h1>
+        <p class="slds-text-body_regular">The following examples show various ways to create an input telephone component.</p>
+    </div>
+    <div>
+        <h2>Basic Input Telephone</h2>
+        <lightning-input type="tel" label="Read-only phone field" name="phone1" value="345987345" readonly></lightning-input>
+        <lightning-input type="tel" label="Basic phone field" name="phone2" placeholder="areacode-phone"></lightning-input>
+        <lightning-input type="tel" label="Phone field with pattern matching" name="phone3" value="343-343-3434" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"></lightning-input>
+    </div>
+</template>

package/src/lightning/input/__examples__/text/text.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/input/__examples__/text/text.html

@@ -0,0 +1,89 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            A text input field.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text"></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 with an initial value.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" value="ACME Inc."></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 with placeholder text.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" placeholder="type here..."></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 is required.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" placeholder="type here..." required></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 is disabled.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" placeholder="type here..." disabled></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 is read-only.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" value="Stark Industries" readonly></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 requires a minimum of 6 characters.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" placeholder="type here..." minlength="6"></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 cannot have more than 10 characters.
+        </p>
+
+        <!-- Default/basic -->
+        <div class="slds-p-around_medium lgc-bg">
+            <lightning-input type="text" label="Enter some text" placeholder="type here..." maxlength="10"></lightning-input>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,11 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}
+
+.lgc-highlight {
+    background-color: rgb(255 255 0);
+}