@ons/design-system 65.0.0 → 65.2.0

package/components/autosuggest/autosuggest.ui.js

@@ -4,12 +4,12 @@ import runFuse from './fuse-config';
 
 export const baseClass = 'ons-js-autosuggest';
 
-export const classAutosuggestOption = 'ons-autosuggest-input__option';
+export const classAutosuggestOption = 'ons-autosuggest__option';
 export const classAutosuggestOptionFocused = `${classAutosuggestOption}--focused`;
 export const classAutosuggestOptionNoResults = `${classAutosuggestOption}--no-results`;
 export const classAutosuggestOptionMoreResults = `${classAutosuggestOption}--more-results ons-u-fs-s`;
-export const classAutosuggestHasResults = 'ons-autosuggest-input--has-results';
-export const classAutosuggestResultsTitle = 'ons-autosuggest-input__results-title';
+export const classAutosuggestHasResults = 'ons-autosuggest--has-results';
+export const classAutosuggestResultsTitle = 'ons-autosuggest__results-title';
 
 export default class AutosuggestUI {
   constructor({
@@ -117,7 +117,7 @@ export default class AutosuggestUI {
     this.input.setAttribute('autocomplete', this.input.getAttribute('autocomplete') || 'off');
     this.input.setAttribute('role', 'combobox');
 
-    this.context.classList.add('ons-autosuggest-input--initialised');
+    this.context.classList.add('ons-autosuggest--initialised');
 
     this.bindEventListeners();
   }
@@ -350,8 +350,7 @@ export default class AutosuggestUI {
           listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
           listElement.setAttribute('role', 'option');
           if (result.category) {
-            innerHTML =
-              innerHTML + `<span class="ons-autosuggest-input__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
+            innerHTML = innerHTML + `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
           }
           listElement.innerHTML = innerHTML;
           listElement.addEventListener('click', () => {
@@ -434,7 +433,7 @@ export default class AutosuggestUI {
           option.classList.add(classAutosuggestOptionFocused);
           option.setAttribute('aria-selected', true);
           this.input.setAttribute('aria-activedescendant', option.getAttribute('id'));
-          const groupedResult = option.querySelector('.ons-autosuggest-input__group');
+          const groupedResult = option.querySelector('.ons-autosuggest__group');
           const optionText = option.innerHTML.replace('<strong>', '').replace('</strong>', '');
           if (groupedResult) {
             let groupedAriaMsg = this.ariaGroupedResults.replace('{n}', groupedResult.innerHTML);
@@ -503,8 +502,8 @@ export default class AutosuggestUI {
     const warningBodyElement = document.createElement('div');
 
     warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest-input__warning';
-    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest-input__panel';
+    warningListElement.className = 'ons-autosuggest__warning';
+    warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
     warningSpanElement.setAttribute('aria-hidden', 'true');

package/components/button/_button.scss

@@ -15,19 +15,16 @@ $button-shadow-size: 3px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   vertical-align: top;
   white-space: nowrap;
 
   // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
   &::after {
     border: ems($button-shadow-size) solid transparent;
-    bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable
+    inset: 0 0 - (ems($button-shadow-size)) 0; // makes sure button shadow is selectable
     content: '';
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &--search {
@@ -172,8 +169,8 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:focus:not(:active):not(&--secondary) &,
-  &--link:focus:hover:not(:active):not(&--secondary) & {
+  &--link:focus:not(:active, &--secondary) &,
+  &--link:focus:hover:not(:active, &--secondary) & {
     outline: inherit;
 
     &__inner {
@@ -245,7 +242,8 @@ $button-shadow-size: 3px;
   &--text-link:active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
-      box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important;
+      box-shadow: 0 -2px var(--ons-color-focus),
+        0 4px var(--ons-color-text-link-focus) !important;
       color: var(--ons-color-text-link-focus);
       .ons-icon {
         fill: var(--ons-color-text-link-focus);
@@ -256,7 +254,7 @@ $button-shadow-size: 3px;
   &--ghost & {
     &__inner {
       background: transparent;
-      border: 2px solid rgba(255, 255, 255, 0.6);
+      border: 2px solid rgb(255 255 255 / 60%);
       box-shadow: none;
       color: var(--ons-color-text-inverse);
       .ons-icon {
@@ -314,7 +312,7 @@ $button-shadow-size: 3px;
 
   &--ghost:hover & {
     &__inner {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgb(0 0 0 / 10%);
       border-color: var(--ons-color-white);
     }
   }
@@ -323,8 +321,8 @@ $button-shadow-size: 3px;
   &--ghost:active:focus &,
   &--ghost.active & {
     &__inner {
-      background: rgba(0, 0, 0, 0.2);
-      border-color: rgba(255, 255, 255, 0.6);
+      background: rgb(0 0 0 / 20%);
+      border-color: rgb(255 255 255 / 60%);
       color: var(--ons-color-text-inverse);
       .ons-icon {
         fill: var(--ons-color-text-inverse);
@@ -514,8 +512,7 @@ $button-shadow-size: 3px;
 
   align-items: baseline;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 
   & .ons-btn,
   & a {

package/components/card/_card.scss

@@ -1,6 +1,20 @@
 .ons-card {
   margin: 0 0 2rem;
   width: 100%;
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__image--reorder {
+    order: 1;
+  }
+
+  &__title--reorder {
+    order: 2;
+  }
+
   &__link:hover {
     text-decoration-thickness: 3px;
   }

package/components/card/_macro.njk

@@ -4,21 +4,20 @@
 
   {% set titleSize = params.titleSize | default('2') %}
 
-  <div class="ons-card" aria-describedBy="{{ params.textId }}">
+  <div class="ons-card">
 
     {%- if params.image -%}
       {%- if params.url -%}
-        <a href="{{ params.url }}" class="ons-card__link ons-u-db">
+        <a href="{{ params.url }}" class="ons-card__link">
       {%- endif -%}
+          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+              {{ params.title }}
+          </h{{ titleSize }}>
           {% 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">
+            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" 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">
+            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" 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 -%}
         </a>
       {%- endif -%}

package/components/checkboxes/_checkbox.scss

@@ -156,12 +156,9 @@ $checkbox-padding: 11px;
       background: var(--ons-color-white);
       border: 1px solid var(--ons-color-input-border);
       border-radius: 3px;
-      bottom: 0;
+      inset: 0;
       content: '';
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
       z-index: -1;
     }
 

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -0,0 +1,88 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+    {{
+        onsCheckboxes({
+            "legend": "Content type",
+            "checkboxesLabel": "Show only:",
+            "borderless": true,
+            "name": "dietary",
+            "checkboxes": [
+                {
+                    "id": "data",
+                    "label": {
+                        "text": "Data (309)"
+                    },
+                    "value": "data",
+                    "checked": true,
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Data type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "datasets",
+                                "label": {
+                                    "text": "Datasets (100)"
+                                },
+                                "value": "datasets"
+                            },
+                            {
+                                "id": "timeseries",
+                                "label": {
+                                    "text": "Timeseries (20)"
+                                },
+                                "value": "timeseries"
+                            },
+                            {
+                                "id": "requested",
+                                "label": {
+                                    "text": "User requested data (17)"
+                                },
+                                "value": "requested"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "publications",
+                    "label": {
+                        "text": "Publications (137)"
+                    },
+                    "value": "publications",
+                    "checked": true,
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Publication type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "press-release",
+                                "label": {
+                                    "text": "Press release (100)"
+                                },
+                                "value": "pressrelease"
+                            },
+                            {
+                                "id": "bulletin",
+                                "label": {
+                                    "text": "Bulletin (20)"
+                                },
+                                "value": "bulletin"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "areas",
+                    "label": {
+                        "text": "Areas (0)"
+                    },
+                    "value": "areas"
+                }       
+            ]
+        })
+    }}

package/components/checkboxes/example-checkboxes-with-revealed-radios-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{
+    onsCheckboxes({
+        "checkboxesLabel": "Select all that apply",
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "checkboxes": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Any time of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk

@@ -0,0 +1,72 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "contact",
+            "checkboxes": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "checked": true,
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Anytime of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk

@@ -0,0 +1,60 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "Do you have any dietary requirements?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter dietary requirements"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/content-pagination/_content-pagination.scss

@@ -37,7 +37,7 @@
   }
 
   &__link-text {
-    @extend .ons-u-fs-m;
+    @extend .ons-u-fs-r--b;
 
     margin: 0 0 0 0.5rem;
     vertical-align: middle;

package/components/document-list/_macro.njk

@@ -2,9 +2,9 @@
     <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% 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 %}>
         {% for document in params.documents %}
 
-        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
 
-            {% if document.fullWidth == true %}
+            {% if document.featured and document.fullWidth == true %}
 
                 <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">
 
@@ -50,10 +50,8 @@
 
                                     {%- if document.metadata.date %}
                                         <li class="ons-document-list__item-attribute">
-                                            {% if document.metadata.date -%}
-                                                {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
-                                                <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
-                                            {%- endif -%}
+                                            {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                            <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
                                             {% if document.metadata.date.iso -%}
                                                 <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
                                             {%- endif %}
@@ -99,7 +97,7 @@
 
                     </div>
 
-            {% if document.fullWidth == true %}
+            {% if document.featured and document.fullWidth == true %}
 
                 </div>
 

package/components/document-list/_macro.spec.js

@@ -117,7 +117,7 @@ describe('macro: document list', () => {
     it('has the correct container if `fullWidth`', () => {
       const $ = cheerio.load(
         renderComponent('document-list', {
-          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }],
+          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }],
         }),
       );
 
@@ -127,7 +127,7 @@ describe('macro: document list', () => {
     it('has the correct container class if `fullWidth` and `wide`', () => {
       const $ = cheerio.load(
         renderComponent('document-list', {
-          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true, wide: true }],
+          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }],
         }),
       );
 

package/components/document-list/example-document-list-search-result-featured.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) and police recorded crime data.</p>
+            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded crime data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         }
     ]

package/components/document-list/example-document-list-search-results.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) and police recorded <em class="ons-highlight">crime</em> data.</p>
+            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded <strong class="ons-highlight">crime</strong> data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         },
         {
@@ -29,7 +29,7 @@
                     "short": '18 February 2021'
                 }
             },
-            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) data.</p>'
+            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) data.</p>'
         },
         {
             "url": '#0',
@@ -45,7 +45,7 @@
                     "short": '2 December 2019'
                 }
             },
-            "description": '<p>An overview of published data on disability and <em class="ons-highlight">crime</em> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
+            "description": '<p>An overview of published data on disability and <strong class="ons-highlight">crime</strong> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
         },
         {
             "url": '#0',

package/components/download-resources/_download-resources.scss

@@ -49,22 +49,20 @@
 
   &__panel--is-visible {
     background-color: var(--ons-color-white);
-    bottom: 0;
+    inset: 0;
     display: block;
     height: calc(100% - 76px); // Height of action buttons
-    left: 0;
     overflow-y: scroll;
     padding: 1rem;
     position: fixed;
-    right: 0;
-    top: 0;
     z-index: 10;
   }
 
   &__actions {
     background-color: var(--ons-color-white);
     bottom: 0;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5), 0 -1px 0 0 rgba(65, 64, 66, 0.5);
+    box-shadow: 0 0 5px 0 rgb(34 34 34 / 50%),
+      0 -1px 0 0 rgb(65 64 66 / 50%);
     display: flex;
     left: 0;
     padding: 1rem;

package/components/external-link/example-external-link.njk

@@ -2,7 +2,7 @@
 
 <p>This is a paragraph of text with a {{
     onsExternalLink({
-        "url": "#1",
+        "url": "#0",
         "linkText": "link to an external website"
     })
 }}</p>

package/components/fieldset/_fieldset.scss

@@ -10,7 +10,7 @@
       margin: 0;
       padding: 0 0 1.5rem;
 
-      em,
+      strong,
       .ons-highlight {
         @extend .ons-highlight;
       }