@ebay/skin 18.1.0 → 18.2.0

package/src/modules/phone-input.marko

@@ -0,0 +1,1664 @@
+<div id="phone-input">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        The phone input pattern is a progressive enhancement of a textbox that allows users to select the country associated with their phone number.
+    </p>
+
+    <h3>Default Phone input</h3>
+    <p>
+        Use the
+        <span class="highlight">
+            phone-input
+        </span>
+        ${" "}class to create the default phone input. The phone input consists of a listbox button and a textbox with${" "}
+        <span class="highlight">
+            type=tel
+        </span>
+        ${" "}. The listbox button is used to select the country code and the textbox is used to enter the local phone number.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="phone-input">
+                <span class="listbox-button listbox-button--form">
+                    <button
+                        class="btn btn--form btn--split-start"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        type="button"
+                        data-listbox-button-prefix="Country: "
+                        aria-label="Country: United States of America"
+                    >
+                        <span class="btn__cell">
+                            <span class="btn__text">
+                                <span
+                                    class="fflag fflag--us"
+                                    data-country-code="1"
+                                />
+                            </span>
+                            <svg
+                                class="icon icon--12"
+                                focusable="false"
+                                height="10"
+                                width="14"
+                                aria-hidden="true"
+                            >
+                                <use href="#icon-chevron-down-12"/>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="listbox-button__listbox">
+                        <div class="listbox-button__options" role="listbox">
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--al"
+                                        data-country-code="355"
+                                    />
+                                    <span>Albania</span>
+                                    <span>(+355)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--in"
+                                        data-country-code="91"
+                                    />
+                                    <span>India</span>
+                                    <span>(+91)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--sh"
+                                        data-country-code="290"
+                                    />
+                                    <span>
+                                        Saint Helena, Ascension and Tristan da Cunha
+                                    </span>
+                                    <span>(+290)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--gb"
+                                        data-country-code="44"
+                                    />
+                                    <span>United Kingdom</span>
+                                    <span>(+44)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div
+                                class="listbox-button__option"
+                                role="option"
+                                aria-selected="true"
+                            >
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                    <span>United States of America</span>
+                                    <span>(+1)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+                <span class="textbox">
+                    <span id="phone-prefix-0">
+                        +1
+                    </span>
+                    <input
+                        class="textbox__control"
+                        type="tel"
+                        aria-label="area code + phone number"
+                        autocomplete="tel-national"
+                        aria-describedby="phone-prefix-0"
+                    >
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="phone-input">
+    <span class="listbox-button listbox-button--form">
+      <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+        data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
+        <span class="btn__cell">
+          <span class="btn__text">
+            <span class="fflag fflag--us" aria-hidden="true"
+              data-country-code="1">
+            </span>
+          </span>
+          <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+          </svg>
+        </span>
+      </button>
+      <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--al" aria-hidden="true"
+                data-country-code="355">
+              </span>
+              <span>Albania</span>
+              <span>(+355)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--in" aria-hidden="true"
+                data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--sh" aria-hidden="true"
+                data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--gb" aria-hidden="true"
+                data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+              <span>United States of America</span>
+              <span>(+1)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span class="textbox">
+      <span id="phone-prefix-0">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        aria-describedby="phone-prefix-0" />
+    </span>
+  </span>
+  </highlight-code>
+
+    <h3>With Group Label</h3>
+    <p>
+        Use ARIA to provide a grouping role, similar to fieldset and legend, for more flexibility when using${" "}
+        <span class="highlight">
+            field
+        </span>
+         classes. For label inline usage, please see the
+        <a href="#field">
+            field module
+        </a>
+         .
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span
+                class="field"
+                role="group"
+                aria-labelledby="phone-number-label-0"
+            >
+                <label
+                    class="field__label field__label--stacked"
+                    id="phone-number-label-0"
+                >
+                    Phone number
+                </label>
+                <span class="phone-input">
+                    <span class="listbox-button listbox-button--form">
+                        <button
+                            class="btn btn--form btn--split-start"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            type="button"
+                            data-listbox-button-prefix="Country: "
+                            aria-label="Country: United States of America"
+                        >
+                            <span class="btn__cell">
+                                <span class="btn__text">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                </span>
+                                <svg
+                                    class="icon icon--12"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-chevron-down-12"/>
+                                </svg>
+                            </span>
+                        </button>
+                        <div class="listbox-button__listbox">
+                            <div class="listbox-button__options" role="listbox">
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--al"
+                                            data-country-code="355"
+                                        />
+                                        <span>Albania</span>
+                                        <span>(+355)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--in"
+                                            data-country-code="91"
+                                        />
+                                        <span>India</span>
+                                        <span>(+91)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--sh"
+                                            data-country-code="290"
+                                        />
+                                        <span>
+                                            Saint Helena, Ascension and Tristan da Cunha
+                                        </span>
+                                        <span>(+290)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--gb"
+                                            data-country-code="44"
+                                        />
+                                        <span>United Kingdom</span>
+                                        <span>(+44)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                    aria-selected="true"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--us"
+                                            data-country-code="1"
+                                        />
+                                        <span>United States of America</span>
+                                        <span>(+1)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                    </span>
+                    <span class="textbox">
+                        <span id="phone-prefix-1">
+                            +1
+                        </span>
+                        <input
+                            class="textbox__control"
+                            type="tel"
+                            aria-label="area code + phone number"
+                            autocomplete="tel-national"
+                            aria-describedby="phone-prefix-1"
+                        >
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="field" role="group" aria-labelledby="phone-number-label-1">
+    <label class="field__label field__label--stacked" id="phone-number-label-1">Phone number</label>
+    <span class="phone-input">
+      <span class="listbox-button listbox-button--form">
+        <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+          data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
+          <span class="btn__cell">
+            <span class="btn__text">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+            </span>
+            <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-chevron-down-12"></use>
+            </svg>
+          </span>
+        </button>
+        <div class="listbox-button__listbox">
+          <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <span class="fflag fflag--al" data-country-code="355">
+                </span>
+                <span>Albania</span>
+                <span>(+355)</span>
+              </span>
+              <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
+              </svg>
+            </div>
+            ...
+            <div class="listbox-button__option" role="option" aria-selected="true">
+              <span class="listbox-button__value">
+                <span class="fflag fflag--us" data-country-code="1">
+                </span>
+                <span>United States of America</span>
+                <span>(+1)</span>
+              </span>
+              <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </span>
+      <span class="textbox">
+        <span id="phone-prefix-1">+1</span>
+        <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+          aria-describedby="phone-prefix-1" />
+      </span>
+    </span>
+  </span>
+  </highlight-code>
+
+    <h3>Large Phone input</h3>
+    <p>
+        Use the
+        <span class="highlight">
+            phone-input--large
+        </span>
+         modifier to increase the size of the phone input. Also, use
+        <span class="highlight">
+            btn--large, btn--large-fixed-height
+        </span>
+         and
+        <span class="highlight">
+            textbox--large
+        </span>
+         for the button and textbox respectively.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="phone-input phone-input--large">
+                <span class="listbox-button listbox-button--form">
+                    <button
+                        class="btn btn--form btn--split-start btn--large btn--large-fixed-height"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        type="button"
+                        data-listbox-button-prefix="Country: "
+                        aria-label="Country: United States of America"
+                    >
+                        <span class="btn__cell">
+                            <span class="btn__text">
+                                <span
+                                    class="fflag fflag--us"
+                                    data-country-code="1"
+                                />
+                            </span>
+                            <svg
+                                class="icon icon--12"
+                                focusable="false"
+                                height="10"
+                                width="14"
+                                aria-hidden="true"
+                            >
+                                <use href="#icon-chevron-down-12"/>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="listbox-button__listbox">
+                        <div class="listbox-button__options" role="listbox">
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--al"
+                                        data-country-code="355"
+                                    />
+                                    <span>Albania</span>
+                                    <span>(+355)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--in"
+                                        data-country-code="91"
+                                    />
+                                    <span>India</span>
+                                    <span>(+91)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--sh"
+                                        data-country-code="290"
+                                    />
+                                    <span>
+                                        Saint Helena, Ascension and Tristan da Cunha
+                                    </span>
+                                    <span>(+290)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--gb"
+                                        data-country-code="44"
+                                    />
+                                    <span>United Kingdom</span>
+                                    <span>(+44)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div
+                                class="listbox-button__option"
+                                role="option"
+                                aria-selected="true"
+                            >
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                    <span>United States of America</span>
+                                    <span>(+1)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+                <span class="textbox">
+                    <span id="phone-prefix-2">
+                        +1
+                    </span>
+                    <input
+                        class="textbox__control"
+                        type="tel"
+                        aria-label="area code + phone number"
+                        autocomplete="tel-national"
+                        aria-describedby="phone-prefix-2"
+                    >
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="phone-input phone-input--large">
+    <span class="listbox-button listbox-button--form">
+      <button class="btn btn--form btn--split-start btn--large btn--large-fixed-height" aria-expanded="false"
+        aria-haspopup="listbox" type="button" data-listbox-button-prefix="Country: ">
+        <span class="btn__cell">
+          <span class="btn__text">
+            <span class="fflag fflag--us" data-country-code="1"
+              aria-label="Country: United States of America (+1)">
+            </span>
+          </span>
+          <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+          </svg>
+        </span>
+      </button>
+      <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--al" aria-hidden="true"
+                data-country-code="355">
+              </span>
+              <span>Albania</span>
+              <span>(+355)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          ...
+          <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+              <span>United States of America</span>
+              <span>(+1)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span class="textbox">
+      <span id="phone-prefix-2">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        aria-describedby="phone-prefix-2" />
+    </span>
+  </span>
+  </highlight-code>
+
+    <h3>Readonly Phone input</h3>
+    <p>
+        Use the
+        <span class="highlight">
+            phone-input--readonly
+        </span>
+        ${" "}modifier to make the control readonly. The listbox button is disabled and${" "}
+        <span class="highlight">
+            readonly
+        </span>
+        ${" "}attribute is added on the textbox to prevent any modification of its value.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="phone-input phone-input--readonly">
+                <span class="listbox-button listbox-button--form">
+                    <button
+                        class="btn btn--form btn--split-start"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        type="button"
+                        data-listbox-button-prefix="Country: "
+                        aria-label="Country: United States of America"
+                        disabled
+                    >
+                        <span class="btn__cell">
+                            <span class="btn__text">
+                                <span
+                                    class="fflag fflag--us"
+                                    data-country-code="1"
+                                />
+                            </span>
+                            <svg
+                                class="icon icon--12"
+                                focusable="false"
+                                height="10"
+                                width="14"
+                                aria-hidden="true"
+                            >
+                                <use href="#icon-chevron-down-12"/>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="listbox-button__listbox">
+                        <div class="listbox-button__options" role="listbox">
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--al"
+                                        data-country-code="355"
+                                    />
+                                    <span>Albania</span>
+                                    <span>(+355)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--in"
+                                        data-country-code="91"
+                                    />
+                                    <span>India</span>
+                                    <span>(+91)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--sh"
+                                        data-country-code="290"
+                                    />
+                                    <span>
+                                        Saint Helena, Ascension and Tristan da Cunha
+                                    </span>
+                                    <span>(+290)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--gb"
+                                        data-country-code="44"
+                                    />
+                                    <span>United Kingdom</span>
+                                    <span>(+44)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div
+                                class="listbox-button__option"
+                                role="option"
+                                aria-selected="true"
+                            >
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                    <span>United States of America</span>
+                                    <span>(+1)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+                <span class="textbox">
+                    <span id="phone-prefix-3">
+                        +1
+                    </span>
+                    <input
+                        class="textbox__control"
+                        type="tel"
+                        aria-label="area code + phone number"
+                        autocomplete="tel-national"
+                        aria-describedby="phone-prefix-3"
+                        value="123456789"
+                        readonly
+                    >
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="phone-input phone-input--readonly">
+    <span class="listbox-button listbox-button--form">
+      <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+        data-listbox-button-prefix="Country: " aria-label="Country: United States of America" disabled>
+        <span class="btn__cell">
+          <span class="btn__text">
+            <span class="fflag fflag--us" aria-hidden="true"
+              data-country-code="1">
+            </span>
+          </span>
+          <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+          </svg>
+        </span>
+      </button>
+      <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--al" aria-hidden="true"
+                data-country-code="355">
+              </span>
+              <span>Albania</span>
+              <span>(+355)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          ...
+          <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+              <span>United States of America</span>
+              <span>(+1)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span class="textbox">
+      <span id="phone-prefix-3">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        aria-describedby="phone-prefix-3" value="123456789" readonly />
+    </span>
+  </span>
+  </highlight-code>
+
+    <h3>Disabled Phone Input</h3>
+    <p>
+        Use the
+        <span class="highlight">
+            phone-input--disabled
+        </span>
+         modifier to turn on the disabled state. Besides modifier,
+        <span class="highlight">
+            disabled
+        </span>
+        ${" "}attribute on both the listbox button and textbox input to completely disable the phone input.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="phone-input phone-input--disabled">
+                <span class="listbox-button listbox-button--form">
+                    <button
+                        class="btn btn--form btn--split-start"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        type="button"
+                        data-listbox-button-prefix="Country: "
+                        aria-label="Country: United States of America"
+                        disabled
+                    >
+                        <span class="btn__cell">
+                            <span class="btn__text">
+                                <span
+                                    class="fflag fflag--us"
+                                    data-country-code="1"
+                                />
+                            </span>
+                            <svg
+                                class="icon icon--12"
+                                focusable="false"
+                                height="10"
+                                width="14"
+                                aria-hidden="true"
+                            >
+                                <use href="#icon-chevron-down-12"/>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="listbox-button__listbox">
+                        <div class="listbox-button__options" role="listbox">
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--al"
+                                        data-country-code="355"
+                                    />
+                                    <span>Albania</span>
+                                    <span>(+355)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--in"
+                                        data-country-code="91"
+                                    />
+                                    <span>India</span>
+                                    <span>(+91)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--sh"
+                                        data-country-code="290"
+                                    />
+                                    <span>
+                                        Saint Helena, Ascension and Tristan da Cunha
+                                    </span>
+                                    <span>(+290)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--gb"
+                                        data-country-code="44"
+                                    />
+                                    <span>United Kingdom</span>
+                                    <span>(+44)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div
+                                class="listbox-button__option"
+                                role="option"
+                                aria-selected="true"
+                            >
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                    <span>United States of America</span>
+                                    <span>(+1)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+                <span class="textbox">
+                    <span id="phone-prefix-4">
+                        +1
+                    </span>
+                    <input
+                        class="textbox__control"
+                        type="tel"
+                        aria-label="area code + phone number"
+                        autocomplete="tel-national"
+                        aria-describedby="phone-prefix-4"
+                        disabled
+                    >
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="phone-input phone-input--disabled">
+    <span class="listbox-button listbox-button--form">
+      <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+        data-listbox-button-prefix="Country: " aria-label="Country: United States of America" disabled>
+        <span class="btn__cell">
+          <span class="btn__text">
+            <span class="fflag fflag--us" aria-hidden="true"
+              data-country-code="1">
+            </span>
+          </span>
+          <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+          </svg>
+        </span>
+      </button>
+      <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--al" aria-hidden="true"
+                data-country-code="355">
+              </span>
+              <span>Albania</span>
+              <span>(+355)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          ...
+          <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+              <span>United States of America</span>
+              <span>(+1)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span class="textbox">
+      <span id="phone-prefix-4">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        aria-describedby="phone-prefix-4" disabled />
+    </span>
+  </span>
+  </highlight-code>
+
+    <h3>Error Phone Input</h3>
+    <p>
+        Using the
+        <span class="highlight">
+            listbox-button--error
+        </span>
+         modifier, turns on the error state to the listbox button and
+        <span class="highlight">
+            aria-invalid="true"
+        </span>
+         to the textbox.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span
+                class="field"
+                role="group"
+                aria-labelledby="phone-number-label-2"
+            >
+                <label
+                    class="field__label field__label--stacked"
+                    id="phone-number-label-2"
+                >
+                    Phone number
+                </label>
+                <span class="phone-input phone-input--error">
+                    <span class="listbox-button listbox-button--form listbox-button--error">
+                        <button
+                            class="btn btn--form btn--split-start"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            type="button"
+                            data-listbox-button-prefix="Country: "
+                            aria-label="Country: United States of America"
+                        >
+                            <span class="btn__cell">
+                                <span class="btn__text">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                </span>
+                                <svg
+                                    class="icon icon--12"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-chevron-down-12"/>
+                                </svg>
+                            </span>
+                        </button>
+                        <div class="listbox-button__listbox">
+                            <div class="listbox-button__options" role="listbox">
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--al"
+                                            data-country-code="355"
+                                        />
+                                        <span>Albania</span>
+                                        <span>(+355)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--in"
+                                            data-country-code="91"
+                                        />
+                                        <span>India</span>
+                                        <span>(+91)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--sh"
+                                            data-country-code="290"
+                                        />
+                                        <span>
+                                            Saint Helena, Ascension and Tristan da Cunha
+                                        </span>
+                                        <span>(+290)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--gb"
+                                            data-country-code="44"
+                                        />
+                                        <span>United Kingdom</span>
+                                        <span>(+44)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                                <div
+                                    class="listbox-button__option"
+                                    role="option"
+                                    aria-selected="true"
+                                >
+                                    <span class="listbox-button__value">
+                                        <span
+                                            class="fflag fflag--us"
+                                            data-country-code="1"
+                                        />
+                                        <span>United States of America</span>
+                                        <span>(+1)</span>
+                                    </span>
+                                    <svg
+                                        class="icon icon--16"
+                                        focusable="false"
+                                        height="10"
+                                        width="14"
+                                        aria-hidden="true"
+                                    >
+                                        <use href="#icon-tick-16"/>
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                    </span>
+                    <span class="textbox">
+                        <span id="phone-prefix-5">
+                            +1
+                        </span>
+                        <input
+                            class="textbox__control"
+                            type="tel"
+                            aria-label="area code + phone number"
+                            autocomplete="tel-national"
+                            aria-describedby="phone-prefix-5 field-phone-number-1-description"
+                            aria-invalid="true"
+                        >
+                    </span>
+                </span>
+                <div
+                    class="field__description field__description--attention"
+                    id="field-phone-number-1-description"
+                >
+                    <svg
+                        class="icon icon--16"
+                        height="10"
+                        width="14"
+                        aria-hidden="true"
+                    >
+                        <icon-symbol name="attention-filled-16"/>
+                    </svg>
+                    <span>There was an error</span>
+                </div>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="field" role="group" aria-labelledby="phone-number-label-2">
+    <label class="field__label field__label--stacked" id="phone-number-label-2">Phone number</label>
+    <span class="phone-input phone-input--error">
+      <span class="listbox-button listbox-button--form listbox-button--error">
+        <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+          data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
+          <span class="btn__cell">
+            <span class="btn__text">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+            </span>
+            <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-chevron-down-12"></use>
+            </svg>
+          </span>
+        </button>
+        <div class="listbox-button__listbox">
+          <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <span class="fflag fflag--al" data-country-code="355">
+                </span>
+                <span>Albania</span>
+                <span>(+355)</span>
+              </span>
+              <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
+              </svg>
+            </div>
+            ...
+            <div class="listbox-button__option" role="option" aria-selected="true">
+              <span class="listbox-button__value">
+                <span class="fflag fflag--us" data-country-code="1">
+                </span>
+                <span>United States of America</span>
+                <span>(+1)</span>
+              </span>
+              <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </span>
+      <span class="textbox">
+        <span id="phone-prefix-5">+1</span>
+        <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+          aria-describedby="phone-prefix-5 field-phone-number-1-description" aria-invalid="true" />
+      </span>
+    </span>
+    <div class="field__description field__description--attention" id="field-phone-number-1-description">
+      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
+        <use href="#icon-attention-filled-16"></use>
+      </svg>
+      <span>There was an error</span>
+    </div>
+  </span>
+  </highlight-code>
+
+    <h3>Fluid Phone input</h3>
+    <p>
+        Using the
+        <span class="highlight">
+            phone-input--fluid
+        </span>
+        ${" "}modifier makes the component fluid and expands it to the width of its container.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="phone-input phone-input--fluid">
+                <span class="listbox-button listbox-button--form">
+                    <button
+                        class="btn btn--form btn--split-start"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        type="button"
+                        data-listbox-button-prefix="Country: "
+                        aria-label="Country: United States of America"
+                    >
+                        <span class="btn__cell">
+                            <span class="btn__text">
+                                <span
+                                    class="fflag fflag--us"
+                                    data-country-code="1"
+                                />
+                            </span>
+                            <svg
+                                class="icon icon--12"
+                                focusable="false"
+                                height="10"
+                                width="14"
+                                aria-hidden="true"
+                            >
+                                <use href="#icon-chevron-down-12"/>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="listbox-button__listbox">
+                        <div class="listbox-button__options" role="listbox">
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--al"
+                                        data-country-code="355"
+                                    />
+                                    <span>Albania</span>
+                                    <span>(+355)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--in"
+                                        data-country-code="91"
+                                    />
+                                    <span>India</span>
+                                    <span>(+91)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--sh"
+                                        data-country-code="290"
+                                    />
+                                    <span>
+                                        Saint Helena, Ascension and Tristan da Cunha
+                                    </span>
+                                    <span>(+290)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div class="listbox-button__option" role="option">
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--gb"
+                                        data-country-code="44"
+                                    />
+                                    <span>United Kingdom</span>
+                                    <span>(+44)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                            <div
+                                class="listbox-button__option"
+                                role="option"
+                                aria-selected="true"
+                            >
+                                <span class="listbox-button__value">
+                                    <span
+                                        class="fflag fflag--us"
+                                        data-country-code="1"
+                                    />
+                                    <span>United States of America</span>
+                                    <span>(+1)</span>
+                                </span>
+                                <svg
+                                    class="icon icon--16"
+                                    focusable="false"
+                                    height="10"
+                                    width="14"
+                                    aria-hidden="true"
+                                >
+                                    <use href="#icon-tick-16"/>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+                <span class="textbox">
+                    <span id="phone-prefix-6">
+                        +1
+                    </span>
+                    <input
+                        class="textbox__control"
+                        type="tel"
+                        aria-label="area code + phone number"
+                        autocomplete="tel-national"
+                        aria-describedby="phone-prefix-6"
+                    >
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+  <span class="phone-input phone-input--fluid">
+    <span class="listbox-button listbox-button--form">
+      <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+        data-listbox-button-prefix="Country: " aria-label="Country: United States of America">
+        <span class="btn__cell">
+          <span class="btn__text">
+            <span class="fflag fflag--us" aria-hidden="true"
+              data-country-code="1">
+            </span>
+          </span>
+          <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+          </svg>
+        </span>
+      </button>
+      <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+          <div class="listbox-button__option" role="option">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--al" aria-hidden="true"
+                data-country-code="355">
+              </span>
+              <span>Albania</span>
+              <span>(+355)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+          ...
+          <div class="listbox-button__option" role="option" aria-selected="true">
+            <span class="listbox-button__value">
+              <span class="fflag fflag--us" aria-hidden="true"
+                data-country-code="1">
+              </span>
+              <span>United States of America</span>
+              <span>(+1)</span>
+            </span>
+            <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="#icon-tick-16"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </span>
+    <span class="textbox">
+      <span id="phone-prefix-6">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        aria-describedby="phone-prefix-6" />
+    </span>
+  </span>
+  </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "phone-number",
+        version: 4,
+    },
+};