@ons/design-system 62.2.2 → 62.2.3

package/components/autosuggest/_macro.njk

@@ -41,7 +41,7 @@
                 <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest-input__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
-            <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" role="status" tabindex="-1"></div>
+            <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
 
         {{ onsInput({

package/components/autosuggest/_macro.spec.js

@@ -216,6 +216,12 @@ describe('macro: autosuggest', () => {
       expect($('.ons-autosuggest-input__instructions').attr('id')).toBe('country-of-birth-instructions');
     });
 
+    it('adds aria-atomic=true value to status container', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__status').attr('aria-atomic')).toBe('true');
+    });
+
     it('renders instructions text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 

package/components/radios/_radio.scss

@@ -9,13 +9,15 @@
     box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);
 
     &::after {
-      border-color: var(--ons-color-input-border);
+      background-color: var(--ons-color-input-border);
       border-radius: 50%;
-      border-width: 6px;
-      height: 0;
-      left: 3px;
-      top: 3px;
-      width: 0;
+      border-width: 0;
+      height: 12px;
+      left: 50%;
+      margin-left: -6px;
+      margin-top: -6px;
+      top: 50%;
+      width: 12px;
     }
   }
 

package/components/search/_macro.njk

@@ -20,7 +20,7 @@
                 "html": buttonLabel,
                 "id": params.searchButton.id,
                 "variants": 'small',
-                "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
+                "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                 "attributes": params.searchButton.attributes,
                 "iconType": params.searchButton.iconType,
                 "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'

package/components/search/_macro.spec.js

@@ -35,7 +35,7 @@ describe('macro: search', () => {
       type: 'button',
       html: 'Search for address',
       variants: 'small',
-      classes: 'ons-search__btn ons-u-mt-xs@xxs@s extra-search-button-class',
+      classes: 'ons-search__btn extra-search-button-class',
       attributes: EXAMPLE_SEARCH.searchButton.attributes,
       iconType: 'search',
       iconPosition: 'before',
@@ -61,7 +61,7 @@ describe('macro: search', () => {
       type: 'button',
       html: '<span class="ons-u-vh">Search for address</span>',
       variants: 'small',
-      classes: 'ons-search__btn ons-u-mt-xs@xxs@s',
+      classes: 'ons-search__btn',
       iconPosition: 'only',
       iconType: 'search',
     });

package/components/search/_search.scss

@@ -1,16 +1,9 @@
 .ons-search-component {
   display: flex;
   flex-flow: row wrap;
+  gap: 0.5rem;
 
   @include mq(s) {
     flex-flow: row nowrap !important;
   }
-  .ons-search__btn {
-    margin-top: -3px;
-  }
-  .ons-search__btn {
-    @include mq(s) {
-      margin-left: 0.5rem;
-    }
-  }
 }

package/components/table/_table.scss

@@ -112,7 +112,7 @@
     }
     &__content {
       overflow: visible;
-      overflow-x: scroll;
+      overflow-x: auto;
       width: 100%;
       &:focus {
         box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);