@ons/design-system 64.0.0 → 65.1.0

package/scss/base/_global.scss

@@ -61,7 +61,7 @@ a {
     color: var(--ons-color-text-link-hover);
     text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
   }
-  &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
+  &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-to-content) {
     @extend %a-focus;
   }
 }

package/scss/main.scss

@@ -3,7 +3,7 @@
 @import 'helpers/index';
 @import 'base/index';
 @import 'objects/index';
-@import '../components/access-code/uac';
+@import '../components/access-code/access-code';
 @import '../components/address-output/address-output';
 @import '../components/autosuggest/autosuggest';
 @import '../components/breadcrumbs/breadcrumbs';

package/scss/objects/_spacing.scss

@@ -2,11 +2,11 @@
 .ons-field-group +,
 .ons-fieldset +,
 .ons-input-items +,
-.ons-figure +,
+.ons-image +,
 .ons-panel +,
 .ons-summary__group +,
 .ons-details:not(.ons-details--accordion) + {
-  .ons-figure,
+  .ons-image,
   .ons-panel,
   .ons-field,
   .ons-field-group,
@@ -17,6 +17,6 @@
   }
 }
 
-.ons-breadcrumb + .ons-grid {
+.ons-breadcrumbs + .ons-grid {
   margin-top: -1rem;
 }

package/scss/overrides/hcm.scss

@@ -3,7 +3,7 @@
   // Brightness makes all images black, except transparent parts, which remain transparent
   // Then, invert(1) makes the black parts white
   .ons-footer__ogl-img,
-  .ons-quote .ons-svg-icon,
+  .ons-quote .ons-icon,
   .ons-footer img {
     filter: brightness(0) invert(1);
   }
@@ -15,17 +15,17 @@
   }
 
   // Adds some style adjustments to the focused item to make it obvious something is selected
-  .ons-autosuggest-input {
+  .ons-autosuggest {
     &__results {
       border: 1px solid Highlight !important;
     }
 
-    .ons-autosuggest-input__option {
+    .ons-autosuggest__option {
       &:focus,
       &:hover,
-      &:hover .ons-autosuggest-input__category,
+      &:hover .ons-autosuggest__category,
       &--focused,
-      &--focused .ons-autosuggest-input__category {
+      &--focused .ons-autosuggest__category {
         background: Highlight !important;
         color: HighlightText !important;
         forced-color-adjust: none;
@@ -36,7 +36,7 @@
   // Select - Overrides custom background image icon
   .ons-input--select {
     background: var(--ons-color-input-bg)
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-svg-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
       no-repeat center right 10px;
     background-size: 1rem;
   }
@@ -48,12 +48,12 @@
 
   // Element icons – matches icon with the link colour
   .ons-details,
-  .ons-breadcrumb__item,
+  .ons-breadcrumbs__item,
   .ons-panel,
   .ons-btn__inner,
   .ons-external-link,
   .ons-list--icons {
-    & .ons-svg-icon {
+    & .ons-icon {
       fill: currentColor !important;
       forced-color-adjust: auto;
     }
@@ -63,7 +63,7 @@
   .ons-header__org-logo,
   .ons-header__title-logo,
   .ons-footer {
-    & .ons-svg-logo {
+    & .ons-icon--logo {
       fill: currentColor !important;
       forced-color-adjust: auto;
     }
@@ -115,7 +115,7 @@
   }
 
   // Add borders to separate banners with no backgrounds
-  .ons-skip-link,
+  .ons-skip-to-content,
   .ons-browser-banner,
   .ons-cookies-banner,
   .ons-header,

package/scss/overrides/rtl.scss

@@ -63,7 +63,7 @@
 
   // Buttons
   .ons-btn {
-    .ons-svg-icon {
+    .ons-icon {
       margin: 0 0.5rem 0.1rem 0;
       transform: rotate(180deg);
     }
@@ -83,7 +83,7 @@
       margin: 0 2rem 0 0;
     }
 
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(180deg);
     }
   }

package/scss/print.scss

@@ -4,7 +4,7 @@
 .ons-footer,
 .ons-cookies-banner,
 .ons-language-links,
-.ons-breadcrumb,
+.ons-breadcrumbs,
 .ons-u-ph {
   display: none !important;
 }
@@ -51,7 +51,7 @@ details > summary {
 }
 
 .ons-hero {
-  color-adjust: exact;
+  print-color-adjust: exact;
 }
 
 .ons-grid__col {

package/components/access-code/uac.dom.js

@@ -1,11 +0,0 @@
-import domready from '../../js/domready';
-
-domready(async () => {
-  const uacInputs = [...document.querySelectorAll('.ons-js-uac')];
-
-  if (uacInputs.length) {
-    const UAC = (await import('./uac')).default;
-
-    uacInputs.forEach(element => new UAC(element));
-  }
-});