@ons/design-system 65.1.0 → 65.2.0

package/components/access-code/access-code.scss

@@ -6,17 +6,17 @@
     text-transform: uppercase;
     width: 15.1em;
 
-    @media all and (min-width: 375px) {
+    @media all and (width >= 375px) {
       font-size: 20px !important;
       width: 15.1em !important;
     }
 
-    @media all and (max-width: 374px) {
+    @media all and (width <= 374px) {
       letter-spacing: 0;
       max-width: 12.6em !important;
     }
 
-    @media all and (max-width: 299px) {
+    @media all and (width <= 299px) {
       max-width: 100%;
     }
 

package/components/autosuggest/_autosuggest.scss

@@ -51,7 +51,7 @@
       border-bottom: 1px solid var(--ons-color-input-border);
     }
 
-    &:not(&--no-results):not(&--more-results):hover,
+    &:not(&--no-results, &--more-results):hover,
     &--focused:not(&--no-results) {
       background: var(--ons-color-text-link-hover);
       border-color: var(--ons-color-text-link-hover);
@@ -63,7 +63,7 @@
       }
     }
 
-    &:active:not(&--no-results):not(&--more-results) {
+    &:active:not(&--no-results, &--more-results) {
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
 
@@ -91,11 +91,6 @@
     }
   }
 
-  &__wrapper {
-    max-width: max-content;
-    width: 100%;
-  }
-
   &__panel.ons-panel--warn {
     background: none;
     border: 0;
@@ -133,7 +128,7 @@
   &--header {
     .ons-autosuggest__results {
       border: none;
-      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6);
+      box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
       left: 0;
       position: absolute;
       z-index: 10;

package/components/autosuggest/_macro.njk

@@ -36,14 +36,13 @@
     >
 
         {% set autosuggestResults %}
-            <div class="ons-autosuggest__results ons-js-autosuggest-results">
+            <div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.width %} ons-input--w-{{ params.width }}{% else %} ons-input--w-20{% endif %}">
                 <div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
                 <ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
-        <div class="ons-autosuggest__wrapper">
             {{ onsInput({
                 "id": params.id,
                 "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
@@ -69,6 +68,5 @@
             {% if not params.mutuallyExclusive %}
                 {{ autosuggestResults | safe }}
             {% endif %}
-         </div>
     </div>
 {% endmacro %}

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/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/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/helpers/_grid.scss

@@ -0,0 +1,6 @@
+.ons-pl-grid-col {
+  background: var(--ons-color-grey-5);
+  font-size: 0.8rem;
+  margin: 0 0 1rem;
+  padding: 1rem;
+}

package/components/helpers/grid.njk

@@ -0,0 +1,19 @@
+{% macro patternLibExampleGrid(params) %}
+  {% if params.container -%}
+    <div class="ons-container">
+  {% endif -%}
+
+  <div class="ons-grid">
+      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+          {% for i in range(0, item.repeat | default(1)  ) -%}
+              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
+              </div>
+          {%- endfor %}
+      {%- endfor %}
+  </div>
+
+  {% if params.container -%}
+    </div>
+  {% endif -%}
+{% endmacro %}

package/components/input/_input-type.scss

@@ -57,13 +57,10 @@
     @extend %ons-input-focus;
 
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
     content: '';
     display: block;
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &:not(&--prefix) & {
@@ -100,16 +97,13 @@
 
   & + .ons-input-type__type::after {
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
 
     // Style input + prefix/suffix for errors
     box-shadow: 0 0 0 1px var(--ons-color-errors);
     content: '';
     display: block;
-    left: 0;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     position: absolute;
-    right: 0;
-    top: 0;
   }
 }

package/components/input/_input.scss

@@ -1,5 +1,6 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus);
+  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border),
+    0 0 0 4px var(--ons-color-focus);
 
   // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   outline: 3px solid transparent;
@@ -31,7 +32,7 @@
   @include mq(s) {
     &--text,
     &--select {
-      &:not(.ons-input--block):not([class*='input--w-']) {
+      &:not(.ons-input--block, [class*='input--w-']) {
         width: $input-width;
       }
     }
@@ -131,7 +132,7 @@
 }
 
 .ons-input--ghost {
-  border: 2px solid rgba(255, 255, 255, 0.6);
+  border: 2px solid rgb(255 255 255 / 60%);
   &:focus {
     border: 2px solid var(--ons-color-input-border);
   }

package/components/modal/_modal.scss

@@ -1,4 +1,4 @@
-$backdrop-colour: rgba(0, 0, 0, 0.8);
+$backdrop-colour: rgb(0 0 0 / 80%);
 
 .ons-modal {
   border: none;
@@ -13,7 +13,7 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
 
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     margin-left: auto;
     margin-right: auto;
     max-width: 500px;
@@ -21,12 +21,9 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
 
   &-ie11 & {
     background: var(--ons-color-white);
-    bottom: 0;
+    inset: 50% 0 0;
     height: 350px;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 50%;
     transform: translate(0, -50%);
   }
 

package/components/navigation/navigation.js

@@ -44,11 +44,15 @@ export default class NavigationToggle {
     this.navigation.classList.add(this.hideClass);
   }
 
+  isHidden(el) {
+    return el.offsetParent === null;
+  }
+
   setAria() {
-    const viewportDetails = GetViewportDetails();
+    const isToggleHidden = this.isHidden(this.toggle);
     const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (viewportDetails.width < 980) {
+    if (!isToggleHidden) {
       if (!hasAria) {
         this.closeNav();
       }

package/components/phase-banner/example-phase-banner-alpha.njk

@@ -2,9 +2,20 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "badge": 'Alpha',
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
+        "badge": "Alpha",
+        "html": "This is a new service. To help us improve it, " + feedbackLink
     })
 }}

package/components/phase-banner/example-phase-banner-beta.njk

@@ -2,8 +2,19 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
-    })
+        "html": "This is a new service. To help us improve it, " + feedbackLink
+  })
 }}

package/components/table/_table.scss

@@ -115,7 +115,9 @@
       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);
+        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);
         outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
         outline-offset: 1px;
       }
@@ -141,13 +143,15 @@
       .ons-table__right-shadow {
         right: 0;
         &.ons-visible {
-          box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset -1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
       .ons-table__left-shadow {
         left: 0;
         &.ons-visible {
-          box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset 1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
     }