@ons/design-system 54.0.1 → 55.2.0

package/components/header/_macro.njk

@@ -7,28 +7,35 @@
     {% set title_tag = "h1" if params.titleAsH1 else "div" %}
     {% set currentLanguageISOCode = "en" %}
 
-    {% if params.language is defined and params.language and params.language.languages is defined and params.language.languages %}
+    {% if params.language and params.language.languages %}
         {% set currentLanguage = params.language.languages | selectattr("current") | first %}
         {% set currentLanguageISOCode = currentLanguage.ISOCode %}
     {% endif %}
 
-    <header class="ons-header {% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
+    <header class="ons-header {% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
-                "wide": params.wide
+                "wide": params.wide,
+                "fullWidth": params.fullWidth
             })
         }}
-        {% if params.phase is defined and params.phase %}
+        {% if 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">
                 <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                    <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
+                    <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo }}">
                         <div class="ons-grid__col ons-col-auto">
-                            {%-if params.orgLogoHref is defined and params.orgLogoHref %}
+                            {%-if params.orgLogoHref %}
                                 <a class="ons-header__org-logo-link" href="{{ params.orgLogoHref }}">
                             {% endif -%}
                             <div class="ons-header__org-logo ons-header__org-logo--large">
@@ -48,20 +55,20 @@
                                     })
                                 }}
                             </div>
-                            {% if params.orgLogoHref is defined and params.orgLogoHref %}
+                            {% if params.orgLogoHref %}
                                 </a>
                             {% endif %}
                         </div>
-                        {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
+                        {% if params.language or params.serviceLinks %}
                             <div class="ons-header__links ons-grid__col ons-col-auto">
-                                {% if params.language is defined and params.language %}
-                                    <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
+                                {% if params.language %}
+                                    <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
                                         {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                         {{ onsLanguageSelector(params.language) }}
                                     </div>
                                 {% endif %}
-                                {% if params.serviceLinks is defined and params.serviceLinks %}
-                                    {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
+                                {% if params.serviceLinks %}
+                                    {% if params.serviceLinks.itemsList | length == 1 and params.language %}
                                         {% set breakpoint = 'xs' %}
                                         {% set controlVisibility = true %}
                                     {% elif params.serviceLinks.itemsList | length > 1 %}
@@ -72,20 +79,31 @@
                                     {% 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 %}
+                                                        {{
+                                                            onsIcon({
+                                                                "iconType": item.iconType
+                                                            })
+                                                        }}
+                                                    {% endif %}
+                                                    {% if item.url %}
                                                         <a
                                                             href="{{ item.url }}"
                                                             class="ons-header-service-nav__link"
-                                                            {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
+                                                            {% if item.id %} id="{{ item.id }}"{% endif %}
                                                         >{{ item.title }}</a>
+                                                    {% else %}
+                                                        {{ item.title }}
+                                                    {% endif %}
                                                     </li>
                                                 {% endfor %}
                                             </ul>
                                         </nav>
                                     </div>
-                                    {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
+                                    {% if params.serviceLinks.itemsList | length > 1 or params.language %}
                                         {% if params.variants == 'internal' or params.variants == 'neutral' %}
                                             {% set buttonVariant = ["text-link", "text-link-inverse"] %}
                                         {% else %}
@@ -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"
                                                 }
                                             }) }}
@@ -112,19 +129,30 @@
                         {% endif %}
                     </div>
                 </div>
-                {% if params.serviceLinks is defined and params.serviceLinks %}
+                {% if 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 %}
+                                    {{
+                                        onsIcon({
+                                            "iconType": item.iconType
+                                        })
+                                    }}
+                                {% endif %}
+                                {% if item.url %}
                                     <a
                                         href="{{ item.url }}"
                                         class="ons-header-service-nav__link"
-                                        {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
+                                        {% if item.id %} id="{{ item.id }}"{% endif %}
                                     >{{ item.title }}</a>
+                                {% else %}
+                                    {{ item.title }}
+                                {% endif %}
                                 </li>
                             {% endfor %}
-                            {% if params.language is defined and params.language %}
+                            {% if params.language %}
                                 <div class="ons-u-d-no@xs">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
@@ -139,11 +167,11 @@
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-                        {% if params.titleLogo is defined and params.titleLogo and params.titleLogoAlt is defined and params.titleLogoAlt %}
-                            {% if params.titleLogoHref is defined and params.titleLogoHref %}
+                        {% if params.titleLogo and params.titleLogoAlt %}
+                            {% if params.titleLogoHref %}
                                 <a class="ons-header__title-logo-link" href="{{ params.titleLogoHref }}">
                             {% endif %}
-                            <div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogoClasses %} {{ params.titleLogoClasses }} {% endif %}{% if params.titleLogoMobile is defined and params.titleLogoMobile %}ons-u-d-no@xxs@s{% endif %}">
+                            <div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogoClasses %} {{ params.titleLogoClasses }} {% endif %}{% if params.titleLogoMobile %}ons-u-d-no@xxs@s{% endif %}">
                                 {% from "components/icons/_macro.njk" import onsIcon %}
                                 {{
                                     onsIcon({
@@ -152,7 +180,7 @@
                                     })
                                 }}
                             </div>
-                            {% if params.titleLogoMobile is defined and params.titleLogoMobile %}
+                            {% if params.titleLogoMobile %}
                                 <div class="ons-header__title-logo ons-header__title-logo--mobile ons-u-d-no@s{% if params.titleLogoMobileClasses %} {{ params.titleLogoMobileClasses }}{% endif %}">
                                     {% from "components/icons/_macro.njk" import onsIcon %}
                                     {{
@@ -163,24 +191,24 @@
                                     }}
                                 </div>
                             {% endif %}
-                            {% if params.titleLogoHref is defined and params.titleLogoHref %}
+                            {% if params.titleLogoHref %}
                                 </a>
                             {% endif %}
                         {% else %}
-                            {% if params.titleLogoHref is defined and params.titleLogoHref %}
+                            {% if params.titleLogoHref %}
                                 <a class="ons-header__title-link" href="{{ params.titleLogoHref }}">
                             {% endif %}
                                 <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
-                            {% if params.titleLogoHref is defined and params.titleLogoHref %}
+                            {% if params.titleLogoHref %}
                                 </a>
                             {% endif %}
                         {% endif %}
-                        {% if params.description is defined and params.description %}
+                        {% if params.description %}
                             <p class="ons-header__description">{{ params.description }}</p>
                         {% endif %}
                     </div>
-                    
-                    {% if params.button is defined and params.button %}
+
+                    {% if params.button %}
                         {% if params.variants == 'neutral' %}
                             {% set buttonVariant = ["ghost", "ghost-dark"] %}
                         {% else %}
@@ -199,10 +227,10 @@
                             }) }}
                         </div>
                     {% endif %}
-                    {% if params.navigation is defined %}
+                    {% if params.navigation %}
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                             {% if params.noMasthead == true %}
-                                {% if params.language is defined and params.language %}
+                                {% if params.language %}
                                     <div class="ons-grid__col ons-col-auto ons-u-mt-xxs@xxs@l ons-u-mr-xs@xxs@s {% if params.navigation.siteSearchAutosuggest %}ons-header__lang-adjustment{% endif %}">
                                         {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                         {{ onsLanguageSelector(params.language) }}
@@ -225,13 +253,12 @@
                                         "attributes": {
                                             "aria-label": "Toggle search" ,
                                             "aria-controls": "ons-site-search",
-                                            "aria-haspopup": "true",
                                             "aria-expanded": "false"
                                         }
                                     }) }}
                                 </span>
                             {% endif %}
-                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
+                            {% if params.navigation.toggleNavigationButton %}
                                 {% if params.variants == 'neutral' %}
                                     {% set buttonVariant = ["mobile", "ghost-dark"] %}
                                 {% else %}
@@ -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"
                                     }
                                 }) }}
@@ -255,7 +281,7 @@
                 </div>
             </div>
         </div>
-        {% if params.navigation is defined and params.navigation %}
+        {% if params.navigation %}
             {{ onsNavigation(params) }}
         {% endif %}
     </header>

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

@@ -3,46 +3,46 @@
 {% from "components/icons/_macro.njk" import onsIcon %}
 
 {# style adjustments if dark or light skin #}
-{% if params.variants is defined and 'dark' in params.variants %}
+{% if params.variants and 'dark' in params.variants %}
     {% set skinName = "dark" %}
 {% else %}
     {% set skinName = "light" %}
 {% endif %}
 
 {# If hero contains a collapsible, style it differently #}
-{% if params.collapsible is defined and params.collapsible %}
+{% if params.collapsible %}
     {% set containerClasses = " ons-hero__container--has-collapsible" %}
 {% endif %}
 
 {# Set number of columns used for hero content after medium breakpoint #}
 {% set detailsColumns = params.detailsColumns | default ('8') %}
 
-<section class="ons-hero ons-grid--gutterless{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-hero--{{ variant }}{% endfor %}{% else %} ons-hero--{{ params.variants }}{% endif %}{% endif %}">
+<section class="ons-hero ons-grid--gutterless{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-hero--{{ variant }}{% endfor %}{% else %} ons-hero--{{ params.variants }}{% endif %}{% endif %}">
 
     <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}{{ containerClasses }}">
 
         <div class="ons-hero__details{{ detailsClasses }} ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
 
             <header>
-                {% if params.preTitleImage is defined and params.preTitleImage %}
-                    {% set preTitleImageWithModifier = params.preTitleImage.name|replace(r/(\.[^\.]+)$/, "--" + skinName + "$1") %}
+                {% if params.preTitleImage %}
+                    {% 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 %}
+                {% if params.title %}
                     <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
                 {% endif %}
-                {% if params.subtitle is defined and params.subtitle %}
+                {% if params.subtitle %}
                     <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
                 {% endif %}
             </header>
 
-            {% if params.text is defined and params.text %}
+            {% if params.text %}
                 <p class="ons-hero__text">{{ params.text | safe }}</p>
             {% endif %}
 
-            {% if params.button is defined and params.button %}
+            {% if params.button %}
                 {% from "components/button/_macro.njk" import onsButton %}
-                {% set btnClasses = params.button.classes if params.button.classes is defined and params.button.classes else '' %}
+                {% set btnClasses = params.button.classes if params.button.classes else '' %}
                 {% if skinName == 'dark' %}
                     {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
                 {% endif %}
@@ -56,7 +56,7 @@
                 }}
             {% endif %}
 
-            {% if params.collapsible is defined and params.collapsible %}
+            {% if params.collapsible %}
                 {% from "components/collapsible/_macro.njk" import onsCollapsible %}
                 {{
                     onsCollapsible({
@@ -73,16 +73,16 @@
                 }}
             {% endif %}
 
-            {% if params.suffixText is defined and params.suffixText %}
+            {% if params.suffixText %}
                 <p class="ons-hero__suffixText ons-u-fs-s ons-u-mt-m ons-u-mb-no">{{ params.suffixText | safe }}</p>
             {% endif %}
 
         </div>
-        {% if params.variants is defined and 'census' in params.variants %}
+        {% if params.variants and 'census' in params.variants %}
 
-            {% if params.image is defined and params.image %}
+            {% if params.image %}
             <div class="ons-hero__circle-image">
-                <img height="558" width="558" {% if params.image.largeSrc is defined and params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" {% endif %}src="{{ params.image.smallSrc }}" alt="">
+                <img height="558" width="558" {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" {% endif %}src="{{ params.image.smallSrc }}" alt="">
             </div>
             {% endif %}
 
@@ -94,7 +94,7 @@
 
             <div class="ons-hero__circle-gradient"></div>
 
-            {% if (params.variants is defined and 'census' in params.variants) and ('dark' not in params.variants) %}
+            {% if (params.variants and 'census' in params.variants) and ('dark' not in params.variants) %}
                 <div class="ons-hero__circle"></div>
             {% endif %}
 

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

@@ -1,6 +1,6 @@
 {% macro onsIcon(params) %}
 
-    {% if params.classes is defined and params.classes %}
+    {% if params.classes %}
         {% set iconClasses = ' ' + params.classes %}
     {% endif %}
 
@@ -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 %}-{{ 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/images/_macro.njk

@@ -1,13 +1,13 @@
 {%- macro onsImage(params) -%}
     <figure class="ons-figure">
         
-        {% if params.image is defined and params.image %}
-            <img class="ons-figure__image" {% if params.image.largeSrc is defined and params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}" alt="{{ params.alt if params.alt is defined and params.alt else '' }}">
+        {% if params.image %}
+            <img class="ons-figure__image" {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}" alt="{{ params.alt if params.alt else '' }}">
         {% else %}
             <img class="ons-figure__image" src="{{ params.url }}" alt="{{ params.alt }}">
         {% endif %}
 
-        {% if params.caption is defined and params.caption %}
+        {% if params.caption %}
             <figcaption class="ons-figure__caption">
                 {{ params.caption }}
             </figcaption>

package/components/input/_input-type.scss

@@ -16,12 +16,14 @@
     &:focus {
       // 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;
     }
   }
 
@@ -46,6 +48,10 @@
     border: 1px solid $color-input-border;
   }
 
+  &__type[title] {
+    cursor: help;
+  }
+
   &__input:focus + &__type::after {
     // Style input + prefix/suffix on focus
     @extend %ons-input-focus;
@@ -101,6 +107,7 @@
     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,6 +1,14 @@
 %ons-input-focus {
   box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
-  outline: none;
+
+  // 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 {
@@ -47,6 +55,7 @@
   &--error:not(:focus) {
     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-input-bg 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;