Update dependency stylelint to v16

package.json

@@ -67,13 +67,12 @@
     "postcss": "8.4.33",
     "postcss-cli": "10.1.0",
     "postcss-scss": "4.0.9",
-    "prettier": "2.8.8",
+    "prettier": "3.2.4",
     "sass": "1.70.0",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
     "svgo": "2.8.0",
     "yaml": "2.3.4"
   }

scss/_patterns_form-tick-elements.scss

@@ -16,7 +16,9 @@
 
     &::before,
     &::after {
-      $properties: #{background-color, border-color};
+      $properties:
+        #{background-color,
+        border-color};
       @include vf-transition($properties);
 
       position: absolute;

scss/_patterns_navigation.scss

@@ -55,7 +55,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   %navigation-link {
-    $properties: #{background-color, color, opacity};
+    $properties:
+      #{background-color,
+      color,
+      opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %vf-navigation-separator;

scss/_patterns_strip.scss

@@ -116,9 +116,19 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to top right, #fff 0%, #fff 49%, transparent 50%, transparent 100%), linear-gradient(to top right, #fff 0%, #fff 100%),
       linear-gradient(111deg, $color-suru-start 10%, $color-suru-middle 37%, $color-suru-end 100%);
 
-    background-position: 0% 0%, top right, right 0 bottom 4rem, right bottom, 0% 0%;
+    background-position:
+      0% 0%,
+      top right,
+      right 0 bottom 4rem,
+      right bottom,
+      0% 0%;
     background-repeat: no-repeat;
-    background-size: 100% calc(100% - 4rem), 50% 100%, 100% 4rem, 100% 4rem, auto;
+    background-size:
+      100% calc(100% - 4rem),
+      50% 100%,
+      100% 4rem,
+      100% 4rem,
+      auto;
     color: $color-x-light;
     margin-bottom: -4rem;
     overflow: hidden;
@@ -136,16 +146,36 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
     &.is-deep {
       $padding: 3rem;
 
-      background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-      background-size: 100% calc(100% - $padding), 100% 100%, 100% $padding, 100% $padding, auto;
+      background-position:
+        0% 0%,
+        top right,
+        right 0 bottom $padding,
+        right bottom,
+        0% 0%;
+      background-size:
+        100% calc(100% - $padding),
+        100% 100%,
+        100% $padding,
+        100% $padding,
+        auto;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
       @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
-        background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-        background-size: 100% calc(100% - $padding), 50% 100%, 100% $padding, 100% $padding, auto;
+        background-position:
+          0% 0%,
+          top right,
+          right 0 bottom $padding,
+          right bottom,
+          0% 0%;
+        background-size:
+          100% calc(100% - $padding),
+          50% 100%,
+          100% $padding,
+          100% $padding,
+          auto;
         margin-bottom: -$padding;
         padding-bottom: ($padding * 3) !important;
       }
@@ -167,9 +197,17 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to bottom right, transparent 0%, transparent 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%),
       linear-gradient(90deg, $color-suru-start 4%, $color-suru-middle 50%, $color-suru-end 88%);
 
-    background-position: top right, top right, top left, top left;
+    background-position:
+      top right,
+      top right,
+      top left,
+      top left;
     background-repeat: no-repeat;
-    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
+    background-size:
+      39.4% 6rem,
+      54% 4rem,
+      63% 4rem,
+      62.6% 4rem;
     padding-bottom: 4rem;
     padding-top: 6rem;
 

scss/_settings_placeholders.scss

@@ -6,5 +6,8 @@ $input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $color-mid-light !default;
-$box-shadow: 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
+$box-shadow:
+  0 1px 1px 0 transparentize($color-x-dark, 0.85),
+  0 2px 2px -1px transparentize($color-x-dark, 0.85),
+  0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

templates/docs/examples/layouts/global-nav.css

@@ -9,7 +9,17 @@ based on global-nav@2.4.1
   display: -webkit-box;
   display: flex;
   flex-shrink: 0;
-  font-family: Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    Ubuntu,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   font-size: 0.875rem;
   font-weight: 300;
   line-height: 1.5rem;
@@ -340,16 +350,28 @@ p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .global-nav p:no
     font-family: Ubuntu;
     font-style: normal;
     font-weight: 300;
-    src: url(https://assets.ubuntu.com/v1/e8c07df6-Ubuntu-L_W.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/8619add2-Ubuntu-L_W.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/e8c07df6-Ubuntu-L_W.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/8619add2-Ubuntu-L_W.woff) format('woff');
     font-weight: 400;
-    src: url(https://assets.ubuntu.com/v1/fff37993-Ubuntu-R_W.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/7af50859-Ubuntu-R_W.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/fff37993-Ubuntu-R_W.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/7af50859-Ubuntu-R_W.woff) format('woff');
     font-style: italic;
-    src: url(https://assets.ubuntu.com/v1/f8097dea-Ubuntu-LI_W.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/8be89d02-Ubuntu-LI_W.woff) format('woff');
-    src: url(https://assets.ubuntu.com/v1/fca66073-ubuntu-ri-webfont.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/f0898c72-ubuntu-ri-webfont.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/f8097dea-Ubuntu-LI_W.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/8be89d02-Ubuntu-LI_W.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/fca66073-ubuntu-ri-webfont.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/f0898c72-ubuntu-ri-webfont.woff) format('woff');
     font-weight: 100;
-    src: url(https://assets.ubuntu.com/v1/7f100985-Ubuntu-Th_W.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/502cc3a1-Ubuntu-Th_W.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/7f100985-Ubuntu-Th_W.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/502cc3a1-Ubuntu-Th_W.woff) format('woff');
     font-family: Ubuntu Mono;
-    src: url(https://assets.ubuntu.com/v1/fdd692b9-UbuntuMono-R_W.woff2) format('woff2'), url(https://assets.ubuntu.com/v1/85edb898-UbuntuMono-R_W.woff) format('woff');
+    src:
+      url(https://assets.ubuntu.com/v1/fdd692b9-UbuntuMono-R_W.woff2) format('woff2'),
+      url(https://assets.ubuntu.com/v1/85edb898-UbuntuMono-R_W.woff) format('woff');
   }
 }
 .global-nav .measure--p {
@@ -359,7 +381,17 @@ p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .global-nav p:no
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: #111;
-  font-family: Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    Ubuntu,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   font-smoothing: subpixel-antialiased;
   font-weight: 300;
   line-height: 1.5rem;
@@ -524,7 +556,9 @@ p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .global-nav p:no
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  transition-property:
+    transform,
+    -webkit-transform;
   position: absolute;
 }
 .global-nav .global-nav__dropdown {

templates/docs/examples/patterns/side-navigation/_toggle_script.js

@@ -154,7 +154,7 @@ function setupSideNavigation(sideNavigation) {
       sideNavigation.classList.remove('is-drawer-expanded');
       sideNavigation.classList.remove('is-drawer-collapsed');
       sideNavigation.classList.add('is-drawer-hidden');
-    }, 10)
+    }, 10),
   );
 }
 

templates/static/js/example.js

@@ -200,7 +200,7 @@
         'resize',
         throttle(function () {
           resizeIframe(iframe);
-        }, 10)
+        }, 10),
       );
     }
 

templates/static/js/scripts.js

@@ -155,7 +155,7 @@
         sideNavigation.classList.remove('is-drawer-expanded');
         sideNavigation.classList.remove('is-drawer-collapsed');
         sideNavigation.classList.add('is-drawer-hidden');
-      }, 10)
+      }, 10),
     );
   }