@ons/design-system 54.0.1 → 55.2.0

package/components/message/_message.scss

@@ -3,6 +3,7 @@
 .ons-message {
   border-radius: math.div($grid-gutters, 2);
   margin-bottom: 2rem;
+  outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
   &--sent {
     background: $color-info-tint;

package/components/message-list/_macro.njk

@@ -4,7 +4,7 @@
     <li class="ons-message-item" aria-labelledby="{{ message.id }}">
       <h3 class="ons-message-item__subject" id="{{ message.id }}">
         <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
-        {% if message.unread is defined and message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
+        {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
       </h3>
       <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
         <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">{{ params.fromLabel }}:</dt>

package/components/metadata/_macro.njk

@@ -1,12 +1,12 @@
 {% macro onsMetadata(params) %}
-  <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes is defined and params.classes }}"{% if params.id is defined and params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel is defined and params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
+  <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes }}"{% if params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
     {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
       {% if item.term | length %}
           <dt class="ons-metadata__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
       {% endif %}
         {% for description in item.descriptions %}
           {% if description.description | length %}
-            <dd {% if description.id is defined and description.id %}id="{{ description.id }}" {% endif %}class="ons-metadata__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
+            <dd {% if description.id %}id="{{ description.id }}" {% endif %}class="ons-metadata__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
           {% endif %}
         {% endfor %}
     {% endfor %}

package/components/modal/_macro.njk

@@ -1,19 +1,19 @@
 {% macro onsModal(params) %}
     {% set modalId = params.id | default('dialog') %}
-    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes is defined and params.classes else '' }}"
+    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes else '' }}"
         id="{{ modalId }}"
         role="dialog"
         aria-labelledby="ons-modal-title"
-        {% 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 %}
+        {% 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 %}
     >
         <div class="ons-modal__content">
-            <h1 id="ons-modal-title" class="ons-modal__title">
+            <h2 id="ons-modal-title" class="ons-modal__title">
                 {{ params.title }}
-            </h1>
+            </h2>
             <div class="ons-modal__body">
-                {{ (params.body if params.body is defined and params.body else "") | safe }}{{ caller() if caller }}
+                {{ (params.body if params.body else "") | safe }}{{ caller() if caller }}
             </div>
-            {% if params.btnText is defined and params.btnText %}
+            {% if params.btnText %}
                 {% from "components/button/_macro.njk" import onsButton %}
                 {{ onsButton({
                     "text": params.btnText,

package/components/modal/_modal.scss

@@ -5,12 +5,19 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   border-radius: 0.4rem;
   box-shadow: 0 0 7px 0 #000;
   display: none;
+  left: 0;
   margin-left: 2rem;
   margin-right: 2rem;
-  max-width: 500px;
+  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   padding: 2rem;
-  position: relative;
-  width: auto;
+  position: fixed;
+  top: 0;
+
+  @media screen and (min-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 500px;
+  }
 
   &-ie11 & {
     background: $color-white;
@@ -23,12 +30,6 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
     transform: translate(0, -50%);
   }
 
-  @media screen and (min-width: 600px) {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
-
   &::backdrop {
     backdrop-filter: blur(3px);
     background: $backdrop-colour;

package/components/mutually-exclusive/_macro.njk

@@ -21,7 +21,7 @@
     }) %}
         <div class="ons-js-mutually-exclusive ons-mutually-exclusive">
             {{ content | safe }}
-            {% if params.autosuggestResults is defined and params.autosuggestResults %}
+            {% if params.autosuggestResults %}
                 {{ params.autosuggestResults | safe }}
             {% endif %}
             {% if exclusiveOptionsLength == 1 %}

package/components/mutually-exclusive/mutually-exclusive.js

@@ -106,8 +106,10 @@ export default class MutuallyExclusive {
     let labelText;
 
     if (label) {
-      if (label.classList.contains(inputAbbrClass)) {
+      if (label.classList.contains(inputAbbrClass) && label.querySelector('abbr')) {
         labelText = label.getAttribute('title');
+      } else if (label.classList.contains(inputAbbrClass) && label.querySelector('span')) {
+        labelText = label.querySelector('span').innerText;
       } else if (label.classList.contains(inputLegendClass) && label.querySelector('h1')) {
         labelText = label.querySelector('h1').innerText;
       } else {

package/components/navigation/_macro.njk

@@ -2,8 +2,8 @@
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
-        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
-            {% if params.navigation.siteSearchAutosuggest is defined and params.navigation.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
+        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+            {% if params.navigation.siteSearchAutosuggest and isPatternLib %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
                     {% set autosuggestLabelClasses = "ons-u-pl-m" %}
@@ -42,26 +42,26 @@
                 <ul class="ons-navigation__list">
                     {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
             </nav>
         </div>
     </div>
-    {% if params.navigation.subNavigation is defined and params.navigation.subNavigation %}
-        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+    {% if params.navigation.subNavigation %}
+        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
             <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
             </div>
         </nav>
-        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}">
+        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,
                 "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
@@ -69,7 +69,6 @@
                 "attributes": {
                     "aria-label": "Toggle section navigation",
                     "aria-controls": params.navigation.subNavigation.id,
-                    "aria-haspopup": "true",
                     "aria-expanded": "false"
                 }
             }) }}
@@ -81,14 +80,14 @@
                         </li>
                         {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.subNavigation.currentPath) or (child.url != (params.navigation.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.navigation.subNavigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel is defined and child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -211,7 +211,6 @@ describe('macro: navigation', () => {
         attributes: {
           'aria-label': 'Toggle section navigation',
           'aria-controls': 'sub-nav',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });

package/components/pagination/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsPagination(params) %}
   {% set currentPageIndex = "" %}
   {% for page in params.pages %}
-      {% if page.current is defined and page.current %}
+      {% if page.current %}
           {% set currentPageIndex = loop.index %}
       {% endif %}
   {% endfor %}
@@ -25,7 +25,7 @@
   {% endif %}
 
 
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
       <div class="ons-pagination__position">{{ position }}</div>
       <ul class="ons-pagination__items">
           {% if currentPageIndex != 1 %}
@@ -45,7 +45,7 @@
           {% endif %}
           {% for page in params.pages %}
               {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
-                  <li class="ons-pagination__item{% if page.current is defined and page.current == true %} ons-pagination__item--current{% endif %}">
+                  <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
                       <a href="{{ page.url }}" class="ons-pagination__link"
                           {%- if page.current -%}
                               aria-current="true" aria-label="Current page ({{ position }})"

package/components/pagination/_pagination.scss

@@ -45,6 +45,7 @@ $pagination-item-width: 2.5rem;
   &__item--current &__link {
     background: $color-text-link-hover;
     color: $color-white;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show backgrounds
     text-decoration: none;
   }
 

package/components/panel/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsPanel(params) %}
 
-    {% if params is defined and params and params.classes is defined and params.classes %}
+    {% if params.classes %}
         {% set classes = ' ' + params.classes %}
     {% endif %}
 
@@ -8,37 +8,37 @@
         {% set noTitleClass = ' ons-panel--no-title' %}
     {% endif %}
 
-    {% if params is defined and params and params.type is defined and params.type %}
+    {% if params.type %}
         {% set typeClass = ' ons-panel--' + params.type %}
     {% else %}
         {% set typeClass = ' ons-panel--info' %}
     {% endif %}
 
-    {% if params is defined and params.type == "warn-branded" %}
-        {% set containerClass = 'ons-census-warning' %}
+    {% if params.type == "warn-branded" %}
+        {% set containerClass = 'ons-branded-warning' %}
     {% endif %}
 
-    {% if params is defined and params.type == "announcement" %}
+    {% if params.type == "announcement" %}
         {% set containerClass = 'ons-announcement' %}
     {% endif %}
 
-    {% if params is defined and params and params.spacious is defined and params.spacious %}
+    {% if params.spacious %}
         {% set spaciousClass = ' ons-panel--spacious' %}
     {% endif %}
 
-    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
+    {% if params.type == "warn-branded" or params.type == "announcement" %}
         <div class="{{containerClass}}">
             <div class="ons-container">
     {% endif %}
 
-        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
 
-            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
+            {% if params.type == "warn" or params.type == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
             {% endif %}
 
-            {% if params is defined and params and params.type == "announcement" %}
+            {% if params.type == "announcement" %}
                 {% from "components/icons/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{
@@ -50,48 +50,43 @@
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
             {% endif %}
 
-            {% if params is defined and params %}
-                {% if params.title is defined and params.title %}
-                    {% if params is defined and params and params.type == 'error' %}
-                        {% set defaultTitleTag = "h2" %}
-                    {% else %}
-                        {% set defaultTitleTag = "div" %}
-                    {% endif %}
-                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
-                    <div class="ons-panel__header">
-                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
-                    </div>
+            {% if params.title %}
+                {% if params.type == 'error' %}
+                    {% set defaultTitleTag = "h2" %}
                 {% else %}
-                    {% if params.type is not defined or params.type == "branded" or params.type == "info" %}
-                        <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                    {% else %}
-                        {% if params.type is defined and params.type == "success" %}
-                            <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
-                        {% elif params.type is defined and params.type == "error" %}
-                            <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
-                        {% endif %}
-                    {% endif %}
+                    {% set defaultTitleTag = "div" %}
                 {% endif %}
-
-                {% if params.iconType is defined and params.iconType %}
-                    {% from "components/icons/_macro.njk" import onsIcon %}
-                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
-                        {{
-                            onsIcon({
-                                "iconType": params.iconType,
-                                "iconSize": params.iconSize
-                            })
-                        }}
-                    </span>
+                {% set titleTag = params.titleTag | default(defaultTitleTag) %}
+                <div class="ons-panel__header">
+                    <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                </div>
+            {% else %}
+                {% if not params.type or params.type == "branded" or params.type == "info" or params.type == "bare" %}
+                    <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
+                {% elif params.type == 'error' or params.type == 'success' %} 
+                    {% set defaultText = "Completed" if params.type == "success" else "Error" %}
+                    <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                 {% endif %}
             {% endif %}
 
-            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
+            {% if params.iconType %}
+                {% from "components/icons/_macro.njk" import onsIcon %}
+                <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
+                    {{
+                        onsIcon({
+                            "iconType": params.iconType,
+                            "iconSize": params.iconSize
+                        })
+                    }}
+                </span>
+            {% endif %}
+
+            <div class="ons-panel__body{% if params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
         </div>
 
-    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
+    {% if params.type == "warn-branded" or params.type == "announcement"  %}
             </div>
         </div>
     {% endif %}

package/components/panel/_macro.spec.js

@@ -13,6 +13,7 @@ const EXAMPLE_PANEL_BASIC = {
 describe('macro: panel', () => {
   describe.each([
     ['info', 'Important information:'],
+    ['bare', 'Important information:'],
     ['error', 'Error:'],
     ['warn', 'Warning:'],
     ['warn-branded', 'Warning:'],
@@ -186,50 +187,53 @@ describe('macro: panel', () => {
     });
   });
 
-  describe('mode: error', () => {
+  describe.each([
+    ['error', 'h2'],
+    ['success', 'div'],
+  ])('mode: %s', (panelType, tagEl) => {
     it('has the default id set', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
-      expect($('#error-summary-title').length).toBe(1);
+      expect($('#alert').length).toBe(1);
     });
 
-    it('has H2 as the default title tag', () => {
+    it('has the correct default title tag', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
       const titleTag = $('.ons-panel__title')[0].tagName;
-      expect(titleTag).toBe('h2');
+      expect(titleTag).toBe(tagEl);
     });
 
     it('has aria-labelledby attribute set with default value', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
-      expect($('.ons-panel').attr('aria-labelledby')).toBe('error-summary-title');
+      expect($('.ons-panel').attr('aria-labelledby')).toBe('alert');
     });
 
     it('has the role attribute set to alert', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -240,8 +244,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -252,8 +256,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -264,8 +268,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
           dsExample: true,
         }),
       );
@@ -313,19 +317,6 @@ describe('macro: panel', () => {
     });
   });
 
-  describe('mode: bare', () => {
-    it('has the correct class set', () => {
-      const $ = cheerio.load(
-        renderComponent('panel', {
-          ...EXAMPLE_PANEL_BASIC,
-          type: 'bare',
-        }),
-      );
-
-      expect($('.ons-panel').hasClass('ons-panel--bare')).toBe(true);
-    });
-  });
-
   describe('mode: warn', () => {
     it('has a default "!" prefix', () => {
       const $ = cheerio.load(
@@ -352,7 +343,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect($('.ons-census-warning').length).toBe(1);
+      expect($('.ons-branded-warning').length).toBe(1);
       expect($('.ons-container').length).toBe(1);
     });
 

package/components/panel/_panel.scss

@@ -3,6 +3,7 @@
     &--#{$name} {
       background: $color-bg;
       border-color: $color;
+      outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
     }
 
     &--#{$name} & {
@@ -13,7 +14,7 @@
   }
 }
 
-.ons-census-warning {
+.ons-branded-warning {
   background: $color-branded-tertiary;
 }
 
@@ -21,6 +22,11 @@
   background-color: $color-black;
 }
 
+.ons-branded-warning,
+.ons-announcement {
+  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+}
+
 .ons-panel {
   border-radius: 0;
   position: relative;
@@ -37,12 +43,11 @@
   &:focus {
     box-shadow: none;
     outline: 4px solid $color-focus !important;
-    outline-offset: 0;
   }
 
   &__header {
     border-radius: 0;
-    color: $color-white;
+    color: $color-text-inverse;
     margin: 0;
     padding: 0.75rem 1rem;
   }
@@ -111,6 +116,7 @@
   &--warn {
     border: 0 !important;
     margin-bottom: 1rem;
+    outline: none !important;
     padding: 0;
 
     &--footer {
@@ -125,6 +131,7 @@
     border: 0 !important;
     color: $color-white;
     margin-bottom: 0;
+    outline: none !important;
     padding: 1rem 0 !important;
     a {
       color: inherit;
@@ -137,7 +144,7 @@
 
   &--announcement {
     a:focus {
-      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
+      box-shadow: 0 -2px $color-focus, 0 4px $color-text-inverse-link !important; // Override focus style because the black border is not visible on a black background
     }
   }
 
@@ -178,6 +185,7 @@
       line-height: 2rem;
       min-height: 2rem;
       min-width: 2rem;
+      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
       text-align: center;
     }
   }
@@ -245,6 +253,6 @@
 @include panel-type(success, $color-success, $color-success-tint);
 @include panel-type(info, $color-info, $color-info-tint);
 @include panel-type(branded, $color-branded, $color-branded-tint);
-@include panel-type(warn, $color-white, $color-white);
+@include panel-type(warn, transparent, transparent);
 @include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
 @include panel-type(announcement, $color-black, $color-black);

package/components/phase-banner/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsPhaseBanner(params) %}
     <div class="ons-phase-banner">
-        <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                 {% if not params.hideBadge %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">

package/components/phase-banner/_macro.spec.js

@@ -70,4 +70,35 @@ describe('macro: phase-banner', () => {
 
     expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
   });
+
+  it('does not have `container--wide` class when `wide` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+  });
+
+  it('has `container--full-width` class when `fullWidth` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        fullWidth: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+  });
+
+  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+  });
 });