@ons/design-system 55.1.0 → 55.2.0

package/components/access-code/_macro.njk

@@ -26,9 +26,9 @@
         }) }}
     {% endset %}
 
-    {% if params.error is not defined %}
+    {% if not params.error %}
         {% call onsPanel({
-                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes is defined and params.classes)
+                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes)
             })
         %}
             {{ content | safe }}
@@ -37,7 +37,7 @@
         {{ content | safe }}
     {% endif %}
 
-    {% if params.securityMessage is defined and params.securityMessage %}
+    {% if params.securityMessage %}
         {% call onsPanel({
                 "type": "bare",
                 "iconType": "lock",

package/components/accordion/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/collapsible/_macro.njk" import onsCollapsible %}
 
     <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
-        {% if params.allButton is defined and params.allButton %}
+        {% if params.allButton %}
             {% from "components/button/_macro.njk" import onsButton %}
             {% set attributes = params.allButton.attributes | default({}) %}
 

package/components/address-input/_macro.njk

@@ -7,7 +7,7 @@
         <div id="address" class="ons-field ons-address-input {% if not params.manualEntry %}ons-address-input--search ons-js-address-autosuggest{% endif %}">
             {% if params.isEditable == true or params.manualEntry %}
                 {% if not params.manualEntry %}<div class="ons-js-address-input__manual ons-u-db-no-js_enabled">{% endif %}
-                    {% if params.organisation is defined and params.organisation %}
+                    {% if params.organisation %}
                         {{
                             onsInput({
                                 "id": params.id + "-organisation",
@@ -22,7 +22,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.line1 is defined and params.line1 %}
+                    {% if params.line1 %}
                         {{
                             onsInput({
                                 "id": params.id + "-line1",
@@ -37,7 +37,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.line2 is defined and params.line2 %}
+                    {% if params.line2 %}
                         {{
                             onsInput({
                                 "id": params.id + "-line2",
@@ -52,7 +52,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.town is defined and params.town %}
+                    {% if params.town %}
                         {{
                             onsInput({
                                 "id": params.id + "-town",
@@ -66,7 +66,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.postcode is defined and params.postcode %}
+                    {% if params.postcode %}
                         {{
                             onsInput({
                                 "id": params.id + "-postcode",
@@ -89,7 +89,7 @@
                 {% endif %}
             {% endif %}
 
-            {% if params.uprn is defined and params.uprn and params.uprn.value is defined and params.uprn.value %}
+            {% if params.uprn and params.uprn.value %}
                 {% set uprnValue = params.uprn.value %}
             {% else %}
                 {% set uprnValue = '' %}
@@ -162,7 +162,7 @@
         </div>
     {% endset %}
 
-    {% if params.dontWrap is defined and params.dontWrap %}
+    {% if params.dontWrap %}
         {{ fields | safe }}
     {% else %}
         {% call onsFieldset({

package/components/address-output/_macro.njk

@@ -1,22 +1,22 @@
 {% macro onsAddressOutput(params) %}
-    <div class="ons-address-output{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
+    <div class="ons-address-output{% if params.classes %} {{ params.classes }}{% endif %}">
         <p class="ons-address-output__lines">
-            {% if params.unit is defined and params.unit %}
+            {% if params.unit %}
                 <span class="ons-address-output__unit">{{ params.unit }}</span><br>
             {% endif %}
-            {% if params.organisation is defined and params.organisation %}
+            {% if params.organisation %}
                 <span class="ons-address-output__organisation">{{ params.organisation }}</span><br>
             {% endif %}
-            {% if params.line1 is defined and params.line1 %}
+            {% if params.line1 %}
                 <span class="ons-address-output__line1">{{ params.line1 }}</span><br>
             {% endif %}
-            {% if params.line2 is defined and params.line2 %}
+            {% if params.line2 %}
                 <span class="ons-address-output__line2">{{ params.line2 }}</span><br>
             {% endif %}
-            {% if params.town is defined and params.town %}
+            {% if params.town %}
                 <span class="ons-address-output__town">{{ params.town }}</span><br>
             {% endif %}
-            {% if params.postcode is defined and params.postcode %}
+            {% if params.postcode %}
                 <span class="ons-address-output__postcode">{{ params.postcode }}</span>
             {% endif %}
         </p>

package/components/autosuggest/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsAutosuggest(params) %}
     <div
         id="{{ params.id }}-container"
-        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory is defined and params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses is defined and params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
+        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
         data-min-chars="{{ params.minChars }}"
@@ -15,23 +15,23 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
-        {% if params.APIDomain is defined and params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
-        {% if params.APIDomainBearerToken is defined and params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
-        {% if params.APIManualQueryParams is defined and params.APIManualQueryParams == true %}data-query-params=""{% endif %}
-        {% if params.allowMultiple is defined and params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
-        {% if params.autosuggestData is defined and params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
-        {% if params.errorTitle is defined and params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
-        {% if params.errorMessageEnter is defined and params.errorMessageEnter %}data-error-enter="{{ params.errorMessageEnter }}"{% endif %}
-        {% if params.errorMessageSelect is defined and params.errorMessageSelect %}data-error-select="{{ params.errorMessageSelect }}"{% endif %}
-        {% if params.ariaGroupedResults is defined and params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
-        {% if params.groupCount is defined and params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
-        {% if params.tooManyResults is defined and params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
-        {% if params.errorMessageAPI is defined and params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
-        {% if params.errorMessageAPILinkText is defined and params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
-        {% if params.options is defined and params.options %}
-            {% if params.options.oneYearAgo is defined and params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
-            {% if params.options.regionCode is defined and params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}
-            {% if params.options.addressType is defined and params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
+        {% if params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
+        {% if params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
+        {% if params.APIManualQueryParams == true %}data-query-params=""{% endif %}
+        {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
+        {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
+        {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
+        {% if params.errorMessageEnter %}data-error-enter="{{ params.errorMessageEnter }}"{% endif %}
+        {% if params.errorMessageSelect %}data-error-select="{{ params.errorMessageSelect }}"{% endif %}
+        {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
+        {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
+        {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
+        {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
+        {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.options %}
+            {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
+            {% if params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}
+            {% if params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
         {% endif %}
     >
 
@@ -66,7 +66,7 @@
             "autosuggestResults": autosuggestResults
          }) }}
 
-         {% if params.mutuallyExclusive is not defined %}
+         {% if not params.mutuallyExclusive %}
             {{ autosuggestResults | safe }}
          {% endif %}
     </div>

package/components/breadcrumbs/_macro.njk

@@ -1,12 +1,12 @@
 {% from "components/icons/_macro.njk" import onsIcon %}
 
 {% macro onsBreadcrumbs(params) %}
-    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}>
+    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <ol class="ons-breadcrumb__items ons-u-fs-s">
             {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
                 <li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
-                    {% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                    {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{
                         onsIcon({

package/components/button/_button.scss

@@ -39,7 +39,7 @@ $button-shadow-size: 3px;
 
   &--search {
     .ons-svg-icon {
-      @include mq(s, m) {
+      @include mq(s, l) {
         margin-right: 0.5rem;
       }
     }

package/components/button/_macro.njk

@@ -3,9 +3,9 @@
 {% macro onsButton(params) %}
 
     {# Customisable button icon #}
-    {% if params.iconType is defined and params.iconType %}
+    {% if params.iconType %}
         {% set iconType = params.iconType %}
-        {% if params.iconPosition is defined and params.iconPosition %}
+        {% if params.iconPosition %}
             {% set iconPosition = params.iconPosition %}
         {% else %}
             {# Default icon position before label #}
@@ -13,49 +13,49 @@
         {% endif %}
     {% elif params.iconType is not defined and params.noIcon is not defined %}
         {# Opens in new tab #}
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
+        {% if params.url and params.newWindow %}
             {% set iconType = "external-link" %}
             {% set iconPosition = "after" %}
         {# Download #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "download" %}
+        {% elif params.buttonStyle == "download" %}
             {% set iconType = "download" %}
             {% set iconPosition = "before" %}
         {# Print #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "print" %}
+        {% elif params.buttonStyle == "print" %}
             {% set iconType = "print" %}
             {% set iconPosition = "before" %}
         {# Loader #}
-        {% elif params.submitType is defined and params.submitType == "loader" %}
+        {% elif params.submitType == "loader" %}
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
         {# CTA or mobile menu toggle #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "mobile" %}
+        {% elif params.buttonStyle == "mobile" %}
             {% set iconType = "chevron" %}
             {% set iconPosition = "after" %}
-        {% elif params.url is defined and params.url %}
+        {% elif params.url %}
             {% set iconType = "arrow-next" %}
             {% set iconPosition = "after" %}
         {% endif %}
     {% endif %}
 
-    {% set tag = "a" if params.url or params.dsExample is defined and params.dsExample else "button" %}
+    {% set tag = "a" if params.url or params.dsExample else "button" %}
 
     <{{ tag }}
-        {% if params.url is defined and params.url %}
+        {% if params.url %}
             href="{{ params.url }}"
             role="button"
         {% else %}
-            type="{{ params.type if params.type is defined and params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
+            type="{{ params.type if params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
         {% endif %}
-        class="ons-btn{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url is defined and params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
-        {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-        {% if params.value is defined and params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
-        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% 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}}="{{value}}"{% endfor %}{% endif %}
+        class="ons-btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
+        {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
+        {% if params.url and params.newWindow %}target="_blank" rel="noopener"{% endif %}
+        {% if params.buttonStyle == "download" and not params.removeDownloadAttribute %} download{% endif %}
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
         >
-        <span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">
+        <span class="ons-btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">
             {%- if iconPosition == "before" or iconPosition == "after" %}
                 {%- if iconPosition == "before" %}
                     {{
@@ -65,7 +65,7 @@
                         })
                     }}
                 {% endif -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
                 {%- if iconPosition == "after" %}
                 {{
                     onsIcon({
@@ -80,15 +80,15 @@
                         "iconType": iconType
                     })
                 }}
-                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
             {% else -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
             {% endif -%}
         </span>
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
+        {% if params.url and params.newWindow %}
             <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
         {% endif %}
-        {% if params.buttonContext is defined and params.buttonContext %}
+        {% if params.buttonContext %}
             <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
         {% endif %}
         {% if params.listeners %}

package/components/call-to-action/_macro.njk

@@ -5,7 +5,7 @@
             <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                     <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
-                    {% if params.paragraphText is defined and params.paragraphText %}
+                    {% if params.paragraphText %}
                         <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
                     {% endif %}
                 </div>

package/components/card/_macro.njk

@@ -6,31 +6,31 @@
 
   <div class="ons-card" aria-describedBy="{{ params.textId }}">
 
-    {%- if params.image is defined and params.image -%}
-      {%- if params.url is defined and params.url -%}
+    {%- if params.image -%}
+      {%- if params.url -%}
         <a href="{{ params.url }}" class="ons-card__link ons-u-db">
       {%- endif -%}
-          {% if params.image.smallSrc is defined and params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% 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.image.alt }}" loading="lazy">
-          {% elif params.image == true or params.image.placeholderURL is defined %}
-            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+          {% if params.image.smallSrc %}
+            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+          {% elif params.image == true or params.image.placeholderURL %}
+            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
           {% endif %}
 
           <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
             {{ params.title }}
           </h{{ titleSize }}>
-      {%- if params.url is defined and params.url -%}
+      {%- if params.url -%}
         </a>
       {%- endif -%}
 
     {%- else -%}
 
       <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           <a class="ons-card__link" href="{{ params.url }}">
         {%- endif -%}
           {{ params.title }}
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           </a>
         {%- endif -%}
       </h{{ titleSize }}>
@@ -39,7 +39,7 @@
 
     <p id="{{ params.textId }}">{{ params.text }}</p>
 
-    {% if params.itemsList is defined and params.itemsList -%}
+    {% if params.itemsList -%}
       {{
           onsList({
               "variants": 'dashed',

package/components/checkboxes/_checkbox-macro.njk

@@ -1,18 +1,18 @@
 {% macro onsCheckbox(params) %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    <span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes and params.classes is defined else '' }}">
+    <span class="ons-checkbox{% if params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes else '' }}">
         <input
             type="checkbox"
             id="{{ params.id }}"
-            class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}"
+            class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
-            {% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
-            {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}
-            {% if params.checked is defined and params.checked %} checked{% endif %}
-            {% if params.other is defined and params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="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.deselectMessage is defined and params.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
+            {% if params.disabled == true %}disabled aria-disabled="true"{%endif %}
+            {% if params.name %} name="{{ params.name }}"{% endif %}
+            {% if params.checked %} checked{% endif %}
+            {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="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.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
         >
 
         {{ onsLabel({
@@ -24,7 +24,7 @@
             "description": params.label.description
         }) }}
 
-        {% if params.other is defined and params.other %}
+        {% if params.other %}
             {% set otherType = params.other.otherType | default('input') %}
             <span class="ons-checkbox__other{{ ' ons-checkbox__other--open' if params.other.open }}" id="{{ params.id }}-other-wrap">
                 {% if otherType == "input" %}

package/components/checkboxes/_macro.njk

@@ -8,13 +8,13 @@
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
-            {% if checkbox.other is defined and checkbox.other %}
+            {% if checkbox.other %}
                 {% set hasOther = true %}
             {% endif %}
         {% endfor %}
-        {% if hasOther == false and params.autoSelect is defined and params.autoSelect and params.autoSelect.selectAllText is defined %}
+        {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
-            {% if params.borderlessParent is defined and params.borderlessParent == false %}
+            {% if params.borderlessParent == false %}
                 {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
             {% endif %}
             {{
@@ -33,19 +33,19 @@
             {% for checkbox in params.checkboxes %}
                 {% set childIsChecked = false %}
                 {% set labelHTML = checkbox.label.text %}
-                {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+                {% if params.mutuallyExclusive %}
                     {% set exclusiveClass = ' ons-js-exclusive-group-item' %}
                 {% endif %}
-                {% if params.borderless is defined and params.borderless %}
+                {% if params.borderless %}
                     {% set borderless = " ons-checkbox--no-border" %}
                 {% endif %}
-                {% if checkbox.other is defined and checkbox.other %}
+                {% if checkbox.other %}
                     {% set otherClass = " ons-js-other" %}
-                    {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
+                    {% if checkbox.other.selectAllChildren == true %}
                         {% set otherClass = otherClass + " ons-js-select-all-children" %}
                     {% endif %}
                     {% for otherCheckbox in checkbox.other.checkboxes %}
-                        {% if otherCheckbox.checked is defined and otherCheckbox.checked %}
+                        {% if otherCheckbox.checked %}
                             {% set childIsChecked = true %}
                         {% endif %}
                     {% endfor %}
@@ -69,7 +69,7 @@
                         "attributes": checkbox.attributes
                     } %}
 
-                    {% if checkbox.other is defined and checkbox.other %}
+                    {% if checkbox.other %}
                         {% set config = config | setAttributes({
                             "other": {
                                 "open": checkbox.other.open | default(false),
@@ -103,7 +103,7 @@
         </div>
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "classes": params.classes,

package/components/checkboxes/checkbox-with-fieldset.js

@@ -1,14 +1,15 @@
 export default class CheckboxWithFieldset {
-  constructor(fieldset, inputs) {
+  constructor(fieldset, checkboxes) {
     this.fieldset = fieldset;
-    this.inputs = inputs;
+    this.checkboxes = checkboxes;
+    this.fieldsetParent = fieldset.closest('.ons-checkbox');
+    this.selectAllChildrenInput = this.fieldsetParent.querySelector('.ons-js-select-all-children');
     this.childInputs = [...this.fieldset.querySelectorAll('input')];
-    this.selectAllChildrenInput = this.inputs.find(input => input.classList.contains('ons-js-select-all-children'));
 
     if (this.selectAllChildrenInput) {
       this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
     } else {
-      this.inputs.forEach(input => input.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+      this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
     }
   }
 
@@ -19,7 +20,7 @@ export default class CheckboxWithFieldset {
   }
 
   uncheckChildInputsOnDeselect() {
-    const isOther = this.inputs.find(input => input.classList.contains('ons-js-other'));
+    const isOther = this.checkboxes.find(checkbox => checkbox.classList.contains('ons-js-other'));
     if (isOther && isOther.checked === false) {
       this.childInputs.forEach(input => {
         input.checked = false;

package/components/checkboxes/checkboxes.dom.js

@@ -15,16 +15,13 @@ domready(async () => {
       new CheckCheckbox(checkboxInput, openOther);
     }
 
-    const other = document.querySelector('.ons-js-other');
-    if (other) {
-      const selectAllChildrenInput = other.classList.contains('ons-js-select-all-children');
-      const otherFieldset = other.parentNode.querySelector('.ons-js-other-fieldset');
+    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset')];
+    if (otherFieldsets) {
+      const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
 
-      if (otherFieldset) {
-        const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-
-        new CheckboxWithInnerFieldset(otherFieldset, checkboxes, selectAllChildrenInput);
-      }
+      otherFieldsets.forEach(otherFieldset => {
+        new CheckboxWithInnerFieldset(otherFieldset, checkboxes);
+      });
     }
 
     const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];

package/components/code-highlight/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsCodeHighlight(params) %}
     <pre class="ons-patternlib-example__pre">{#
-        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language and params.language is defined else 'markup' }}">{{ params.code }}</code>{#
+        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language else 'markup' }}">{{ params.code }}</code>{#
     #}</pre>
 {% endmacro %}

package/components/collapsible/_macro.njk

@@ -1,15 +1,15 @@
 {% macro onsCollapsible(params) %}
     <details
         id="{{ params.id }}"
-        class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
-        {% if params.group is defined and params.group %} data-group="{{ params.group }}"{% 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.saveState is defined and params.saveState %} data-save-state="true"{% endif %}
-        {% if params.open is defined and params.open %} data-open="true"{% endif %}
+        class="ons-collapsible ons-js-collapsible{% if params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
+        {% if params.group %} data-group="{{ params.group }}"{% 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.saveState %} data-save-state="true"{% endif %}
+        {% if params.open %} data-open="true"{% endif %}
     >
         <summary
             class="ons-collapsible__heading ons-js-collapsible-heading"
-            {% if params.headingAttributes is defined and params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
@@ -22,7 +22,7 @@
                     }}</span>
         </summary>
         <div id="{{ params.id }}-content" class="ons-collapsible__content ons-js-collapsible-content"
-            {% if params.contentAttributes is defined and params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>

package/components/date-input/_macro.njk

@@ -21,7 +21,7 @@
     {%- endif -%}
 
     {% set fields %}
-        {% if params.day is defined and params.day %}
+        {% if params.day %}
             {{ onsInput({
                 "id": params.id + "-day",
                 "type": "number",
@@ -41,7 +41,7 @@
             }) }}
         {% endif %}
 
-        {% if params.month is defined and params.month %}
+        {% if params.month %}
             {{ onsInput({
                 "id": params.id + "-month",
                 "type": "number",
@@ -61,7 +61,7 @@
             }) }}
         {% endif %}
 
-        {% if params.year is defined and params.year %}
+        {% if params.year %}
             {{ onsInput({
                 "id": params.id + "-year",
                 "type": "number",
@@ -90,7 +90,7 @@
         {% endset %}
     {% endif %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "legend": params.legendOrLabel,
@@ -109,7 +109,7 @@
             {{ fields | safe }}
         {% endcall %}
     {% elif numberOfFields == 1 %}
-        {% if params.error is defined and params.error %}
+        {% if params.error %}
             {% call onsError(params.error) %}
                 {{ fields | safe }}
             {% endcall %}