npm - @ebay/skin - Versions diffs - 17.3.0 → 17.4.0-next.1 - Mend

@ebay/skin 17.3.0 → 17.4.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/.changeset/big-cheetahs-peel.md +5 -0
package/.changeset/kind-pens-own.md +5 -0
package/.changeset/loud-carrots-protect.md +5 -0
package/.changeset/metal-cars-promise.md +5 -0
package/.changeset/pre.json +16 -0
package/.changeset/shaggy-ways-pump.md +5 -0
package/.changeset/shaggy-yaks-guess.md +5 -0
package/.changeset/soft-ligers-march.md +5 -0
package/.github/workflows/jekyll-gh-pages.yml +8 -2
package/.storybook/main.js +1 -1
package/CHANGELOG.md +22 -0
package/ICON-CREATION.md +1 -1
package/_cdn/skin/v17.4.0-next.1/skin-default.min.css +76 -0
package/_cdn/skin/v17.4.0-next.1/skin-full.min.css +160 -0
package/_cdn/skin/v17.4.0-next.1/skin-headless.min.css +6 -0
package/dist/flag/flag.css +774 -0
package/dist/icon/icon.css +20 -0
package/dist/icon-button/icon-button.css +113 -0
package/dist/phone-input/phone-input.css +144 -0
package/dist/skeleton/skeleton.css +6 -0
package/dist/svg/icon/icon-bids-24.svg +4 -2
package/dist/svg/icon/icon-bids-64.svg +2 -5
package/dist/svg/icon/icon-bookmark-filled-16.svg +7 -0
package/dist/svg/icon/icon-bookmark-filled-24.svg +7 -0
package/dist/svg/icon/icon-exclude-16.svg +7 -0
package/dist/svg/icon/icon-exclude-24.svg +7 -0
package/dist/svg/icon/icon-fast-and-free-16.svg +4 -2
package/dist/svg/icon/icon-fast-and-free-24.svg +4 -2
package/dist/svg/icon/icon-inspect-64.svg +7 -0
package/dist/svg/icon/icon-on-the-way-16.svg +4 -3
package/dist/svg/icon/icon-on-the-way-24.svg +4 -2
package/dist/svg/icon/icon-wallet-24.svg +4 -2
package/dist/svg/icon/icon-wallet-64.svg +4 -2
package/dist/svg/icons.svg +72 -27
package/dist/tokens/evo-dark.css +14 -9
package/dist/tokens/evo-light.css +13 -3
package/eslint.config.mjs +15 -0
package/index.browser.json +1 -0
package/index.css +1 -0
package/index.js +1 -0
package/index.mjs +1 -0
package/lint.log +10 -0
package/package.json +17 -17
package/phone-input.browser.json +1 -0
package/phone-input.css +1 -0
package/phone-input.js +1 -0
package/phone-input.mjs +1 -0
package/scripts/jekyll-config.js +2 -4
package/src/less/alert-dialog/stories/alert-dialog.stories.js +16 -0
package/src/less/badge/stories/badge.stories.js +4 -0
package/src/less/breadcrumbs/stories/button-cascade.stories.js +29 -0
package/src/less/breadcrumbs/stories/button-overflow.stories.js +48 -0
package/src/less/breadcrumbs/stories/link-cascade.stories.js +29 -0
package/src/less/breadcrumbs/stories/link-overflow.stories.js +51 -0
package/src/less/bundles/skin-headless.less +1 -0
package/src/less/button/stories/button/text-spacing.stories.js +16 -0
package/src/less/button/stories/fake-button/text-spacing.stories.js +13 -0
package/src/less/calendar/stories/calendar.stories.js +210 -0
package/src/less/checkbox/stories/checked.stories.js +20 -0
package/src/less/chips-combobox/stories/chips-combobox.stories.js +58 -0
package/src/less/combobox/stories/combobox.stories.js +21 -0
package/src/less/confirm-dialog/stories/confirm-dialog.stories.js +17 -0
package/src/less/cta-button/stories/cta-button.stories.js +11 -0
package/src/less/date-textbox/stories/date-textbox.stories.js +27 -0
package/src/less/details/stories/details.stories.js +14 -0
package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +27 -0
package/src/less/field/stories/helper-texts-stacked.stories.js +17 -0
package/src/less/filter-button/stories/button.stories.js +8 -0
package/src/less/filter-menu/stories/filter-menu.stories.js +41 -0
package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +238 -0
package/src/less/flag/flag.less +777 -0
package/src/less/flag/stories/flag.stories.js +9 -0
package/src/less/floating-label/stories/floating-label.stories.js +102 -0
package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +27 -0
package/src/less/global/stories/global.stories.js +16 -0
package/src/less/icon/generated/icon.less +20 -0
package/src/less/icon-button/icon-button.less +133 -0
package/src/less/icon-button/stories/buttons.stories.js +241 -0
package/src/less/icon-button/stories/links.stories.js +241 -0
package/src/less/infotip/stories/infotip.stories.js +27 -2
package/src/less/inline-notice/stories/inline.stories.js +13 -0
package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +24 -0
package/src/less/link/stories/link.stories.js +9 -3
package/src/less/listbox/stories/listbox.stories.js +37 -0
package/src/less/listbox-button/stories/base.stories.js +42 -0
package/src/less/menu/stories/misc.stories.js +10 -0
package/src/less/menu-button/stories/base.stories.js +26 -0
package/src/less/page-notice/stories/page-notice.stories.js +22 -0
package/src/less/pagination/stories/overflow.stories.js +49 -0
package/src/less/panel-dialog/stories/panel-dialog.stories.js +45 -0
package/src/less/phone-input/phone-input.less +175 -0
package/src/less/phone-input/stories/phone-input.stories.js +771 -0
package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js +31 -0
package/src/less/progress-stepper/stories/progress-stepper.stories.js +52 -0
package/src/less/radio/stories/checked.stories.js +49 -2
package/src/less/section-notice/stories/icon-16.stories.js +25 -1
package/src/less/section-title/stories/section-title.stories.js +17 -0
package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +10 -0
package/src/less/select/stories/default.stories.js +13 -0
package/src/less/signal/stories/signal.stories.js +6 -0
package/src/less/skeleton/skeleton.less +11 -0
package/src/less/skeleton/stories/composite.stories.js +1 -1
package/src/less/snackbar-dialog/stories/base.stories.js +14 -0
package/src/less/split-button/stories/base.stories.js +30 -0
package/src/less/tabs/stories/tabs/block.stories.js +17 -0
package/src/less/tabs/stories/tabs/inlineBlock.stories.js +17 -0
package/src/less/textbox/stories/textbox.stories.js +6 -0
package/src/less/toast-dialog/stories/toast-dialog.stories.js +23 -0
package/src/less/toggle-button/stories/gallery-layout.stories.js +13 -0
package/src/less/toggle-button/stories/list-layout.stories.js +14 -0
package/src/less/toggle-button/stories/minimal-layout.stories.js +8 -0
package/src/less/tooltip/stories/tooltip.stories.js +19 -0
package/src/less/tourtip/stories/tourtip.stories.js +21 -0
package/src/svg/icon/icon-bids-24.svg +4 -2
package/src/svg/icon/icon-bids-64.svg +2 -5
package/src/svg/icon/icon-bookmark-filled-16.svg +7 -0
package/src/svg/icon/icon-bookmark-filled-24.svg +7 -0
package/src/svg/icon/icon-exclude-16.svg +7 -0
package/src/svg/icon/icon-exclude-24.svg +7 -0
package/src/svg/icon/icon-fast-and-free-16.svg +4 -2
package/src/svg/icon/icon-fast-and-free-24.svg +4 -2
package/src/svg/icon/icon-inspect-64.svg +7 -0
package/src/svg/icon/icon-on-the-way-16.svg +4 -3
package/src/svg/icon/icon-on-the-way-24.svg +4 -2
package/src/svg/icon/icon-wallet-24.svg +4 -2
package/src/svg/icon/icon-wallet-64.svg +4 -2
package/src/svg/icons.svg +72 -27
package/src/tokens/evo-dark.css +14 -9
package/src/tokens/evo-light.css +13 -3
package/svg.svg +72 -27
package/.eslintrc +0 -14
package/_cdn/skin/v17.3.0/skin-default.min.css +0 -69
package/_cdn/skin/v17.3.0/skin-full.min.css +0 -151
package/_cdn/skin/v17.3.0/skin-headless.min.css +0 -6
package/src/less/section-notice/stories/icon-24.stories.js +0 -251

package/src/less/phone-input/stories/phone-input.stories.js ADDED Viewed

@@ -0,0 +1,771 @@
+export default { title: "Skin/Phone Input/Base" };
+export const Default = () => `
+  <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: ">
+        <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number"
+        autocomplete="tel-national" />
+    </span>
+  </span>`;
+export const Large = () => `
+  <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control textbox__control--large" type="tel" aria-label="area code + phone number"
+        autocomplete="tel-national" />
+    </span>
+  </span>`;
+export const ReadOnly = () => `
+  <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: " disabled>
+        <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control" type="tel" aria-label="Area code + phone number" autocomplete="tel-national"
+        readonly value="123456789" />
+    </span>
+  </span>`;
+export const Disabled = () => `
+  <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: " disabled>
+        <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        value="123456789" disabled />
+    </span>
+  </span>`;
+export const Error = () => `
+  <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: ">
+        <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number" autocomplete="tel-national"
+        value="123456789" aria-invalid="true" />
+    </span>
+  </span>`;
+export const Fluid = () => `
+  <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: ">
+        <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--chevron-down-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--tick-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" data-country-code="91">
+              </span>
+              <span>India</span>
+              <span>(+91)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="290">
+              </span>
+              <span>Saint Helena, Ascension and Tristan da Cunha</span>
+              <span>(+290)</span>
+            </span>
+            <svg class="icon icon--tick-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" data-country-code="44">
+              </span>
+              <span>United Kingdom</span>
+              <span>(+44)</span>
+            </span>
+            <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+      <input class="textbox__control" type="tel" aria-label="area code + phone number"
+        autocomplete="tel-national" />
+    </span>
+  </span>`;
+export const RTL = () => `
+  <div dir="rtl">
+    <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: ">
+          <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--chevron-down-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--tick-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" data-country-code="91">
+                </span>
+                <span>India</span>
+                <span>(+91)</span>
+              </span>
+              <svg class="icon icon--tick-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" data-country-code="290">
+                </span>
+                <span>Saint Helena, Ascension and Tristan da Cunha</span>
+                <span>(+290)</span>
+              </span>
+              <svg class="icon icon--tick-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" data-country-code="44">
+                </span>
+                <span>United Kingdom</span>
+                <span>(+44)</span>
+              </span>
+              <svg class="icon icon--tick-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--tick-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 aria-hidden="true">+1</span>
+        <input class="textbox__control" type="tel" aria-label="area code + phone number"
+          autocomplete="tel-national" value="123456789" />
+      </span>
+    </span>
+  </div>`;
+export const TextSpacing = () => `
+<div class="demo-a11y-text-spacing">
+  <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" aria-hidden="true"
+              data-country-code="1">
+            </span>
+          </span>
+          <svg class="icon icon--chevron-down-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--tick-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--tick-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--tick-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--tick-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--tick-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" value="123456789" />
+    </span>
+  </span>
+  </span>
+</div>`;
+export const overrideFontSize = () => `
+<div>
+  <span class="field" role="group" aria-labelledby="phone-number-label-0">
+    <label style="font-size: 200%;" 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" style="font-size: 200%;">
+        <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--chevron-down-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--tick-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--tick-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--tick-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--tick-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--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </span>
+      <span class="textbox" style="font-size: 200%;">
+        <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" value="123456789" />
+      </span>
+    </span>
+  </span>
+<div>
+`;