@ons/design-system 54.0.0 → 55.1.0

package/components/fieldset/_macro.njk

@@ -1,6 +1,7 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
+    {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %}
     {% set fieldset -%}
         {% if params.dontWrap is defined and params.dontWrap -%}
             <div class="ons-input-items">
@@ -12,20 +13,20 @@
                 class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
                 {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
             >
-                <legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
+                <legend{% if params.description %} aria-describedBy="{{ descriptionID }}"{% endif %} class="ons-fieldset__legend{% if params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}{% if params.description %} ons-fieldset__legend--with-description{% endif %}">
                     {%- if params.legendIsQuestionTitle -%}
-                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
+                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        <span class="ons-fieldset__legend-title">{{- params.legend | safe -}}</span>
-                    {%- endif -%}
-                    {%- if params.description is defined and params.description -%}
-                        <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
-                            {{- params.description | safe -}}
-                        </div>
+                        <span class="ons-fieldset__legend-title ons-u-pb-no">{{- params.legend | safe -}}</span>
                     {%- endif -%}
                 </legend>
+                {%- if params.description -%}
+                    <div id="{{ descriptionID }}" class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                        {{- params.description | safe -}}
+                    </div>
+                {%- endif -%}
                 {{- caller() if caller -}}
             </fieldset>
         {%- endif %}

package/components/fieldset/_macro.spec.js

@@ -32,6 +32,13 @@ describe('macro: fieldset', () => {
     expect(title).toBe('Fieldset legend');
   });
 
+  it('has the correct `aria-decribedby` value', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+    expect(ariaDescByVal).toBe('example-fieldset-legend-description');
+  });
+
   it('has the `description` text', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
 
@@ -41,6 +48,26 @@ describe('macro: fieldset', () => {
     expect(title).toBe('A fieldset description');
   });
 
+  it('has the correct `description` `id` when no `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined }));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('legend-description');
+  });
+
+  it('has the correct `description` `id` when `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('example-fieldset-legend-description');
+  });
+
+  it('has the correct `legend` class when `description` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
+  });
+
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(
       renderComponent('fieldset', {
@@ -123,11 +150,6 @@ describe('macro: fieldset', () => {
       expect(results).toHaveNoViolations();
     });
 
-    it('has the correct class', () => {
-      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
-      expect($('.ons-fieldset__legend').hasClass('ons-u-mb-no')).toBe(true);
-    });
-
     it('renders the legend in a H1', () => {
       const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
       const titleTag = $('.ons-fieldset__legend-title')[0].tagName;

package/components/footer/_footer.scss

@@ -17,6 +17,7 @@
 
   &__warning {
     background-color: $color-banner-bg-dark;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
   }
 
   &__license {

package/components/footer/_macro.njk

@@ -82,7 +82,7 @@
         {% endif %}
 
         <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
-            <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
+            <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid">
                     {% if params.newTabWarning is defined and params.newTabWarning %}
                         <div class="ons-grid__col">

package/components/footer/_macro.spec.js

@@ -102,6 +102,24 @@ describe('macro: footer', () => {
     expect(hasClass).toBe(false);
   });
 
+  it('decorates container block with `fullWidth` modifier when the `fullWidth` parameter is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('footer', {
+        fullWidth: true,
+      }),
+    );
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(true);
+  });
+
+  it('does not decorate container block with `fullWidth` modifier when the `fullWidth` parameter is not provided', () => {
+    const $ = cheerio.load(renderComponent('footer', {}));
+
+    const hasClass = $('.ons-container').hasClass('ons-container--full-width');
+    expect(hasClass).toBe(false);
+  });
+
   it('has additionally provided `attributes` on the `body` element', () => {
     const $ = cheerio.load(
       renderComponent('footer', {

package/components/header/_header.scss

@@ -101,11 +101,12 @@
       }
     }
     &__grid-top {
+      color: $color-text-inverse;
       min-height: 36px;
       a {
-        color: $color-white;
+        color: $color-text-inverse;
         &:hover {
-          text-decoration: underline solid $color-white 3px;
+          text-decoration: underline solid $color-text-inverse-link-hover 3px;
         }
       }
     }
@@ -208,6 +209,10 @@
       &:first-child {
         margin-left: 0;
       }
+      .ons-svg-icon {
+        clip-path: circle(9px at center);
+        margin-right: 0.5rem;
+      }
     }
 
     .ons-language-links {

package/components/header/_macro.njk

@@ -16,12 +16,19 @@
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
-                "wide": params.wide
+                "wide": params.wide,
+                "fullWidth": params.fullWidth
             })
         }}
         {% if params.phase is defined and params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
-            {{ onsPhaseBanner(params.phase) }}
+            {{ onsPhaseBanner({
+                "fullWidth": params.fullWidth,
+                "wide": params.wide,
+                "hideBadge": params.phase.hideBadge,
+                "badge": params.phase.badge,
+                "html": params.phase.html
+            }) }}
         {% endif %}
         {% if params.noMasthead != true %}
             <div class="ons-header__top">
@@ -72,14 +79,25 @@
                                     {% endif %}
                                     <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                         <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                                            <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
+                                            <ul class="ons-header-service-nav__list">
                                                 {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                     <li class="ons-header-service-nav__item">
+                                                    {% if item.iconType is defined and item.iconType %}
+                                                        {{
+                                                            onsIcon({
+                                                                "iconType": item.iconType
+                                                            })
+                                                        }}
+                                                    {% endif %}
+                                                    {% if item.url is defined and item.url %}
                                                         <a
                                                             href="{{ item.url }}"
                                                             class="ons-header-service-nav__link"
                                                             {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                                         >{{ item.title }}</a>
+                                                    {% else %}
+                                                        {{ item.title }}
+                                                    {% endif %}
                                                     </li>
                                                 {% endfor %}
                                             </ul>
@@ -101,7 +119,6 @@
                                                 "attributes": {
                                                     "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                     "aria-controls": params.serviceLinks.id,
-                                                    "aria-haspopup": "true",
                                                     "aria-expanded": "false"
                                                 }
                                             }) }}
@@ -114,14 +131,25 @@
                 </div>
                 {% if params.serviceLinks is defined and params.serviceLinks %}
                     <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
+                        <ul class="ons-header-service-nav__list">
                             {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                 <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
+                                {% if item.iconType is defined and item.iconType %}
+                                    {{
+                                        onsIcon({
+                                            "iconType": item.iconType
+                                        })
+                                    }}
+                                {% endif %}
+                                {% if item.url is defined and item.url %}
                                     <a
                                         href="{{ item.url }}"
                                         class="ons-header-service-nav__link"
                                         {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                                     >{{ item.title }}</a>
+                                {% else %}
+                                    {{ item.title }}
+                                {% endif %}
                                 </li>
                             {% endfor %}
                             {% if params.language is defined and params.language %}
@@ -179,7 +207,7 @@
                             <p class="ons-header__description">{{ params.description }}</p>
                         {% endif %}
                     </div>
-                    
+
                     {% if params.button is defined and params.button %}
                         {% if params.variants == 'neutral' %}
                             {% set buttonVariant = ["ghost", "ghost-dark"] %}
@@ -225,7 +253,6 @@
                                         "attributes": {
                                             "aria-label": "Toggle search" ,
                                             "aria-controls": "ons-site-search",
-                                            "aria-haspopup": "true",
                                             "aria-expanded": "false"
                                         }
                                     }) }}
@@ -245,7 +272,6 @@
                                     "attributes": {
                                         "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                         "aria-controls": params.navigation.id,
-                                        "aria-haspopup": "true",
                                         "aria-expanded": "false"
                                     }
                                 }) }}

package/components/header/_macro.spec.js

@@ -13,7 +13,6 @@ const EXAMPLE_HEADER_BASIC = {
 const EXAMPLE_SERVICE_LINKS_CONFIG = {
   id: 'service-links',
   ariaLabel: 'Services menu',
-  ariaListLabel: 'Menu',
   classes: 'custom-class',
   toggleServicesButton: {
     text: 'Menu',
@@ -21,6 +20,24 @@ const EXAMPLE_SERVICE_LINKS_CONFIG = {
   },
 };
 
+const EXAMPLE_HEADER_SERVICE_LIST_ITEMS = {
+  ...EXAMPLE_HEADER_BASIC,
+  serviceLinks: {
+    ...EXAMPLE_SERVICE_LINKS_CONFIG,
+    itemsList: [
+      {
+        title: 'Title 1',
+      },
+      {
+        title: 'Title 2',
+      },
+      {
+        title: 'Title 3',
+      },
+    ],
+  },
+};
+
 const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = {
   ...EXAMPLE_HEADER_BASIC,
   serviceLinks: {
@@ -339,12 +356,51 @@ describe('macro: header', () => {
       const faker = templateFaker();
       const phaseSpy = faker.spy('phase-banner');
 
-      faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, phase: { html: 'Example content with a <a href="#">link</a>' } });
+      faker.renderComponent('header', {
+        ...EXAMPLE_HEADER_BASIC,
+        phase: {
+          badge: 'Example',
+          html: 'Example content with a <a href="#">link</a>',
+        },
+      });
 
       expect(phaseSpy.occurrences).toContainEqual({
+        badge: 'Example',
         html: 'Example content with a <a href="#">link</a>',
       });
     });
+
+    it('renders the phase banner in the correct container if `wide`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          wide: true,
+          phase: {
+            badge: 'Example',
+            html: 'Example content with a <a href="#">link</a>',
+          },
+        }),
+      );
+
+      const phaseContainer = $('.ons-phase-banner .ons-container');
+      expect($(phaseContainer).hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('renders the phase banner in the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          fullWidth: true,
+          phase: {
+            badge: 'Example',
+            html: 'Example content with a <a href="#">link</a>',
+          },
+        }),
+      );
+
+      const phaseContainer = $('.ons-phase-banner .ons-container');
+      expect($(phaseContainer).hasClass('ons-container--full-width')).toBe(true);
+    });
   });
 
   describe('mode: with service links', () => {
@@ -378,10 +434,11 @@ describe('macro: header', () => {
       expect($('.ons-header-service-nav--main').attr('aria-label')).toBe('Services menu');
     });
 
-    it('has the provided `aria-label` for the list', () => {
-      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE));
+    it('has the text for each list item', () => {
+      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS));
 
-      expect($('.ons-header-service-nav--main .ons-header-service-nav__list').attr('aria-label')).toBe('Menu');
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), node => node.text().trim());
+      expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link text for each list item', () => {
@@ -410,12 +467,6 @@ describe('macro: header', () => {
       expect($('.ons-header-service-nav--mobile').attr('aria-label')).toBe('Services menu');
     });
 
-    it('has the provided `aria-label` for the list for mobile', () => {
-      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE));
-
-      expect($('.ons-header-service-nav--mobile .ons-header-service-nav__list').attr('aria-label')).toBe('Menu');
-    });
-
     it('has the link text for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
@@ -445,7 +496,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle services menu',
           'aria-controls': 'service-links',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });
@@ -481,6 +531,26 @@ describe('macro: header', () => {
 
       expect($('.ons-js-toggle-services').length).toBe(0);
     });
+
+    it('has the correct list item icon', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('header', {
+        ...EXAMPLE_HEADER_BASIC,
+        serviceLinks: {
+          ...EXAMPLE_SERVICE_LINKS_CONFIG,
+          itemsList: [
+            {
+              title: 'Title 1',
+              iconType: 'check',
+            },
+          ],
+        },
+      });
+
+      expect(iconsSpy.occurrences[2].iconType).toBe('check');
+    });
   });
 
   describe('mode: with language selector', () => {
@@ -558,7 +628,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle main menu',
           'aria-controls': 'main-nav',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });
@@ -601,7 +670,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle search',
           'aria-controls': 'ons-site-search',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });

package/components/hero/_macro.njk

@@ -25,7 +25,7 @@
 
             <header>
                 {% if params.preTitleImage is defined and params.preTitleImage %}
-                    {% set preTitleImageWithModifier = params.preTitleImage.name|replace(r/(\.[^\.]+)$/, "--" + skinName + "$1") %}
+                    {% set preTitleImageWithModifier = params.preTitleImage.name ~ "--" ~ skinName ~ ".svg" %}
                     <img class="ons-hero__pre-title" src="{{ params.placeholderURL }}/img/{{ preTitleImageWithModifier }}" alt="{{ params.preTitleImage.alt }}">
                 {% endif %}
                 {% if params.title is defined and params.title %}

package/components/hero/_macro.spec.js

@@ -36,7 +36,7 @@ const EXAMPLE_HERO_WITH_BUTTON = {
 const EXAMPLE_HERO_WITH_PRETITLE_IMAGE = {
   ...EXAMPLE_HERO_MINIMAL,
   preTitleImage: {
-    name: 'example.svg',
+    name: 'example',
     alt: 'svg alt text',
   },
 };

package/components/icons/_macro.njk

@@ -62,7 +62,7 @@
             <path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"/>
         </svg>
     {% elif params.iconType == "sort-sprite" %}
-        <svg id="sort-sprite{% if params.id is defined and params.id %}-{{ params.id | lower }}{% endif %}" class="ons-svg-icon {{ iconClasses }}" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
+        <svg id="sort-sprite{% if params.id is defined and params.id %}-{{ params.id | lower }}{% endif %}" class="ons-svg-icon{{ iconClasses }}" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path class="ons-topTriangle"  d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"/>
             <path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"/>
         </svg>

package/components/input/_input-type.scss

@@ -14,7 +14,16 @@
     z-index: 1;
 
     &:focus {
-      box-shadow: inset 0 0 0 1px $color-input;
+      // Overide default input focus so it can wrap prefix/suffix too
+      box-shadow: none;
+      outline: none;
+    }
+
+    // Overide default input error style so it can wrap prefix/suffix too
+    &.ons-input--error:not(:focus) {
+      border-right: $input-border-width solid $color-input-border;
+      box-shadow: none;
+      outline: none;
     }
   }
 
@@ -36,13 +45,15 @@
 
   &__type,
   &__type[title] {
-    border: 1px solid $color-input;
+    border: 1px solid $color-input-border;
   }
 
   &__input:focus + &__type::after {
+    // Style input + prefix/suffix on focus
+    @extend %ons-input-focus;
+
     border-radius: $input-radius;
     bottom: 0;
-    box-shadow: 0 0 0 3px $color-focus;
     content: '';
     display: block;
     left: 0;
@@ -75,3 +86,26 @@
     }
   }
 }
+
+// Errors
+.ons-input--error:not(:focus) {
+  & + .ons-input-type__type,
+  & + .ons-input-type__type[title] {
+    border-color: $color-errors;
+  }
+
+  & + .ons-input-type__type::after {
+    border-radius: $input-radius;
+    bottom: 0;
+
+    // Style input + prefix/suffix for errors
+    box-shadow: 0 0 0 1px $color-errors;
+    content: '';
+    display: block;
+    left: 0;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/components/input/_input.scss

@@ -1,10 +1,18 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
-  outline: none;
+  box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
+
+  // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+  outline: 3px solid transparent;
+  outline-offset: 1px;
+
+  @media screen and (forced-colors: active) {
+    // To better match the focus states of native controls
+    outline-color: Highlight;
+  }
 }
 
 .ons-input {
-  border: $input-border-width solid $color-input;
+  border: $input-border-width solid $color-input-border;
   border-radius: $input-radius;
   color: inherit;
   display: block;
@@ -45,8 +53,9 @@
   }
 
   &--error:not(:focus) {
-    border: 1px solid $color-errors;
-    box-shadow: inset 0 0 0 1px $color-errors;
+    border: $input-border-width solid $color-errors;
+    box-shadow: 0 0 0 $input-border-width $color-errors;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
   &--with-description {
@@ -73,7 +82,9 @@
 
 .ons-input--select {
   appearance: none;
-  background: $color-white url('#{$static}/img/icons--chevron-down.svg') no-repeat center right 10px;
+  background: $color-input-bg
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.75 7.7'%3E%3Cpath fill='currentColor' d='m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z'/%3E%3C/svg%3E")
+    no-repeat center right 10px;
   background-size: 1rem;
   line-height: 1.3rem;
   padding: 0.39rem 2rem 0.39rem $input-padding-horizontal;
@@ -100,10 +111,10 @@
     color: transparent;
   }
   &:valid:not(:placeholder-shown) {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
   &:focus {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
 }
 
@@ -122,7 +133,7 @@
 .ons-input--ghost {
   border: 2px solid rgba(255, 255, 255, 0.6);
   &:focus {
-    border: 2px solid $color-input;
+    border: 2px solid $color-input-border;
   }
 }
 
@@ -156,3 +167,11 @@
     }
   }
 }
+
+// Search type inputs - removes the 'X' clear button from webkit browsers
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}

package/components/input/_macro.njk

@@ -27,7 +27,7 @@
             type="{{ type }}"
             id="{{ params.id }}"
             class="ons-input ons-input--text ons-input-type__input{% if params.error is defined and params.error %} ons-input--error{% endif %}{% if params.searchButton is defined and params.searchButton %} ons-search__input{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.width is defined and params.width %} ons-input{% if params.type is defined and (params.type == 'number' or params.type == 'tel') %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if ((params.prefix is defined and params.prefix) and (params.prefix.id is defined and params.prefix.id)) or ((params.suffix is defined and params.suffix) and (params.suffix.id is defined and params.suffix.id)) %}aria-labelledby="{{ params.prefix.id if params.prefix.id }}{{ params.suffix.id if params.suffix.id }}"{% endif %}
+            {% if params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
             {% if params.name is defined and params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept is defined and params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -71,25 +71,23 @@
         {% endif %}
 
         {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}
-            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id) %}
-                {% if (params.prefix.title is defined and params.prefix.title) or (params.suffix.title is defined and params.suffix.title) %}
-                    {% if params.prefix is defined and params.prefix %}
-                        {% set prefixClass = " ons-input-type--prefix" %}
-                    {% endif %}
+            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id and params.prefix.title is defined and params.prefix.title) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id and params.suffix.title is defined and params.suffix.title) %}
+                {% if params.prefix is defined and params.prefix %}
+                    {% set prefixClass = " ons-input-type--prefix" %}
+                {% endif %}
 
-                    <span class="ons-input-type{{ prefixClass }}">
-                        <span class="ons-input-type__inner">
-                            {{ input | safe }}
+                <span class="ons-input-type{{ prefixClass }}">
+                    <span class="ons-input-type__inner">
+                        {{ input | safe }}
 
-                            {% set abbr = params.prefix or params.suffix %}
-                            <abbr
-                                id="{{ abbr.id }}" 
-                                class="ons-input-type__type ons-js-input-abbr" 
-                                title="{{ abbr.title }}"
-                                >{{ abbr.text or abbr.title }}</abbr>
-                        </span>
+                        {% set abbr = params.prefix or params.suffix %}
+                        <abbr
+                            id="{{ abbr.id }}"
+                            class="ons-input-type__type ons-js-input-abbr"
+                            title="{{ abbr.title }}"
+                            >{{ abbr.text or abbr.title }}</abbr>
                     </span>
-                {% endif %}
+                </span>
             {% endif %}
         {% elif params.searchButton is defined and params.searchButton %}
             <span class="ons-grid--flex ons-search">