@ons/design-system 55.1.0 → 56.0.0

package/components/header/_macro.njk

@@ -7,12 +7,12 @@
     {% 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,
@@ -20,7 +20,7 @@
                 "fullWidth": params.fullWidth
             })
         }}
-        {% if params.phase is defined and params.phase %}
+        {% if params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
             {{ onsPhaseBanner({
                 "fullWidth": params.fullWidth,
@@ -33,9 +33,9 @@
         {% 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">
@@ -55,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 %}
@@ -82,18 +82,18 @@
                                             <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 %}
+                                                    {% if item.iconType %}
                                                         {{
                                                             onsIcon({
                                                                 "iconType": item.iconType
                                                             })
                                                         }}
                                                     {% endif %}
-                                                    {% if item.url is defined and item.url %}
+                                                    {% 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 }}
@@ -103,18 +103,17 @@
                                             </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"] %}
+                                            {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
                                         {% else %}
-                                            {% set buttonVariant = "text-link" %}
+                                            {% set buttonVariant = ["mobile", "text-link"] %}
                                         {% endif %}
                                         <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                             {{ onsButton({
                                                 "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
                                                 "classes": "ons-u-d-no ons-js-toggle-services",
                                                 "type": "button",
-                                                "buttonStyle": "mobile",
                                                 "variants": buttonVariant,
                                                 "attributes": {
                                                     "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
@@ -129,30 +128,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">
                             {% 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 %}
+                                {% if item.iconType %}
                                     {{
                                         onsIcon({
                                             "iconType": item.iconType
                                         })
                                     }}
                                 {% endif %}
-                                {% if item.url is defined and item.url %}
+                                {% 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) }}
@@ -167,11 +166,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({
@@ -180,7 +179,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 %}
                                     {{
@@ -191,26 +190,26 @@
                                     }}
                                 </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"] %}
+                            {% set buttonVariant = "ghost-dark" %}
                         {% else %}
                             {% set buttonVariant = "ghost" %}
                         {% endif %}
@@ -222,15 +221,15 @@
                                 "name": params.button.name,
                                 "attributes": params.button.attributes,
                                 "url": params.button.url,
-                                "iconType": params.button.iconType,
-                                "iconPosition": params.button.iconPosition
+                                "iconType": "exit",
+                                "iconPosition": "after"
                             }) }}
                         </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) }}
@@ -239,7 +238,7 @@
                             {% endif %}
                             {% if params.navigation.siteSearchAutosuggest %}
                                 {% if params.variants == 'neutral' %}
-                                    {% set buttonVariant = ["small", "ghost", "ghost-dark"] %}
+                                    {% set buttonVariant = ["small", "ghost-dark"] %}
                                 {% else %}
                                     {% set buttonVariant = ["small", "ghost"] %}
                                 {% endif %}
@@ -258,7 +257,7 @@
                                     }) }}
                                 </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 %}
@@ -267,7 +266,6 @@
                                 {{ onsButton({
                                     "text": params.navigation.toggleNavigationButton.text,
                                     "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
-                                    "buttonStyle": "mobile",
                                     "variants": buttonVariant,
                                     "attributes": {
                                         "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
@@ -281,7 +279,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

@@ -333,8 +333,6 @@ describe('macro: header', () => {
             a: 'b',
           },
           url: '#0',
-          iconType: 'button-icon',
-          iconPosition: 'before',
         },
       });
 
@@ -347,8 +345,8 @@ describe('macro: header', () => {
           a: 'b',
         },
         url: '#0',
-        iconType: 'button-icon',
-        iconPosition: 'before',
+        iconType: 'exit',
+        iconPosition: 'after',
       });
     });
 
@@ -491,8 +489,7 @@ describe('macro: header', () => {
         text: 'Menu',
         classes: 'ons-u-d-no ons-js-toggle-services',
         type: 'button',
-        buttonStyle: 'mobile',
-        variants: 'text-link',
+        variants: ['mobile', 'text-link'],
         attributes: {
           'aria-label': 'Toggle services menu',
           'aria-controls': 'service-links',
@@ -523,7 +520,7 @@ describe('macro: header', () => {
         },
       });
 
-      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['text-link', 'text-link-inverse']);
+      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['mobile', 'text-link', 'text-link-inverse']);
     });
 
     it('does not render a button for a single services link', () => {
@@ -623,7 +620,6 @@ describe('macro: header', () => {
       expect(buttonSpy.occurrences[0]).toEqual({
         text: 'Menu',
         classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l',
-        buttonStyle: 'mobile',
         variants: ['mobile', 'ghost'],
         attributes: {
           'aria-label': 'Toggle main menu',

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 %}
+                {% 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/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

@@ -48,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;

package/components/input/_macro.njk

@@ -11,9 +11,9 @@
         {% set type = "text" %}
         {% set pattern = "[0-9]*" %}
         {% set inputmode = "numeric" %}
-    {% elif params.type is defined and params.type %}
+    {% elif params.type %}
         {% set type = params.type %}
-    {% elif params.searchButton is defined and params.searchButton %}
+    {% elif params.searchButton %}
         {% set type = "search" %}
     {% else %}
         {% set type = "text" %}
@@ -26,24 +26,24 @@
         <input
             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 %}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 %}
-            {% if params.min is defined and params.min %}min="{{ params.min }}"{% endif %}
-            {% if params.max is defined and params.max %}max="{{ params.max }}"{% endif %}
-            {% if params.minLength is defined and params.minLength %}minlength="{{ params.minLength }}"{% endif %}
-            {% if params.maxLength is defined and params.maxLength %}maxlength="{{ params.maxLength }}"{% endif %}
-            {% if pattern is defined and pattern %}pattern="{{ pattern }}"{% endif %}
-            {% if inputmode is defined and inputmode %}inputmode="{{ inputmode }}"{% endif %}
-            {% if params.autocomplete is defined and params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
-            {% if params.accessiblePlaceholder is defined and params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
-            {% if params.charCheckLimit is defined and params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check-remaining" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check-remaining"{% endif %}
-            {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.charcheckCountdown is defined and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% 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 %}
-            {% if params.label is defined and params.label and params.label.description is defined and params.label.description %}{% if params.label.id is defined and params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
-            {% if params.required is defined and params.required == true %}required="required"{% endif %}
+            class="ons-input ons-input--text ons-input-type__input{% if params.error %} ons-input--error{% endif %}{% if params.searchButton %} ons-search__input{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}{% if params.width %} ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
+            {% if params.prefix and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
+            {% if params.name %}name="{{ params.name }}"{% endif %}
+            {% if params.value %}value="{{ params.value }}"{% endif %}
+            {% if params.accept %}accept="{{ params.accept }}"{% endif %}
+            {% if params.min %}min="{{ params.min }}"{% endif %}
+            {% if params.max %}max="{{ params.max }}"{% endif %}
+            {% if params.minLength %}minlength="{{ params.minLength }}"{% endif %}
+            {% if params.maxLength %}maxlength="{{ params.maxLength }}"{% endif %}
+            {% if pattern %}pattern="{{ pattern }}"{% endif %}
+            {% if inputmode %}inputmode="{{ inputmode }}"{% endif %}
+            {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
+            {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
+            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check-remaining" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check-remaining"{% endif %}
+            {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
+            {% if params.required == true %}required="required"{% endif %}
         />
         {% if params.listeners %}
             <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
@@ -52,12 +52,12 @@
             {% endfor %}
             </script>
         {% endif %}
-        {% if params.postTextboxLinkText is defined and params.postTextboxLinkText %}
+        {% if params.postTextboxLinkText %}
             <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
         {% endif %}
     {% endset %}
     {% set field %}
-        {% if params.label is defined and params.label and params.label.text is defined and params.label.text %}
+        {% if params.label and params.label.text %}
             {{ onsLabel({
                 "for": params.id,
                 "id": params.label.id,
@@ -70,9 +70,9 @@
             }) }}
         {% 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 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 %}
+        {% if params.prefix or params.suffix %}
+            {% if (params.prefix and params.prefix.id) or (params.suffix and params.suffix.id) %}
+                {% if params.prefix %}
                     {% set prefixClass = " ons-input-type--prefix" %}
                 {% endif %}
 
@@ -81,21 +81,28 @@
                         {{ input | safe }}
 
                         {% set abbr = params.prefix or params.suffix %}
-                        <abbr
+                        {% if params.prefix.title or params.suffix.title %}
+                            {% set tag = 'abbr' %}
+                        {% else %}
+                            {% set tag = 'span' %}
+                        {% endif %}
+
+                        <{{ tag }}
                             id="{{ abbr.id }}"
                             class="ons-input-type__type ons-js-input-abbr"
-                            title="{{ abbr.title }}"
-                            >{{ abbr.text or abbr.title }}</abbr>
+                            {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
+                            >{{ abbr.text }}</{{ tag }}>
                     </span>
                 </span>
             {% endif %}
-        {% elif params.searchButton is defined and params.searchButton %}
+        {% elif params.searchButton %}
             <span class="ons-grid--flex ons-search">
                 {% call onsSearch({
                     "accessiblePlaceholder": params.accessiblePlaceholder,
                     "searchButton": {
                         "type": params.searchButton.type,
                         "text": params.searchButton.text,
+                        "visuallyHideButtonText": params.searchButton.visuallyHideButtonText,
                         "id": params.searchButton.id,
                         "attributes": params.searchButton.attributes,
                         "classes": params.searchButton.classes,
@@ -110,7 +117,7 @@
         {% endif %}
     {% endset %}
 
-    {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+    {% if params.charCheckLimit and params.charCheckLimit.limit %}
         {% set charCheckField %}
             {% call onsCharLimit({
                 "id": params.id ~ "-check",
@@ -126,7 +133,7 @@
         {% endset %}
     {% endif %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.fieldId,
             "legend": params.legend,
@@ -142,7 +149,7 @@
             "error": params.error,
             "autosuggestResults": params.autosuggestResults
         }) %}
-            {% if charCheckField is defined and charCheckField %}
+            {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}
                 {{ field | safe }}
@@ -156,9 +163,9 @@
             "classes": params.fieldClasses,
             "dontWrap": params.dontWrap,
             "error": params.error,
-            "inline": params.label.inline if params.label is defined and params.label else ''
+            "inline": params.label.inline if params.label else ''
         }) %}
-            {% if charCheckField is defined and charCheckField %}
+            {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}
                 {{ field | safe }}