@swisspost/design-system-styles 6.4.2 → 6.4.3

package/_svg-icon-map.scss

@@ -36,7 +36,7 @@ $svg-icon-map: (
   '8001':
     "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Crect/%3E%3Cpath d='m13.9 12.7-5.5 9.7H1.8l5.5-9.7-3.7-6.4h6.6l3.7 6.4zM30 0h-6.6L12.7 19.1 19.8 32h6.5l-7-12.9L30 0z'/%3E%3C/g%3E%3C/svg%3E",
   '8000':
-    "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Crect/%3E%3Cpath d='M32 6.4c-.9 1.3-2 2.5-3.3 3.4.4 9.2-6.5 19.5-18.7 19.5-3.7 0-7.2-1.1-10.1-2.9 3.5.4 7-.6 9.7-2.7-2.9-.1-5.3-2-6.1-4.6 1 .2 2 .1 3-.1-3.2-.6-5.3-3.5-5.3-6.5.9.5 1.9.8 3 .8-2.9-2-3.8-5.8-2-8.8 3.2 4 8.1 6.6 13.5 6.9-1-4.1 2.2-8.1 6.4-8.1 1.9 0 3.6.8 4.8 2.1 1.5-.3 2.9-.8 4.2-1.6-.5 1.5-1.5 2.8-2.9 3.6 1.4-.1 2.6-.5 3.8-1z'/%3E%3C/g%3E%3C/svg%3E",
+    "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m-50.985 27.059 11.325 15.444-11.397 12.556h2.565l9.978-10.993 8.062 10.993h8.729l-11.962-16.312 10.608-11.688h-2.565l-9.189 10.125-7.425-10.125h-8.729zm3.772 1.926h4.01l17.707 24.146h-4.01l-17.707-24.146z' transform='translate%2852.39 -25.059%29'/%3E%3C/g%3E%3C/svg%3E",
   '3260':
     "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Crect/%3E%3Cpath d='M16 4C9.3 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm0 1.3c2 0 3.9.6 5.5 1.6-1.5 1.7-6.8 6.6-14.7 3.7 1.9-3.2 5.3-5.3 9.2-5.3zm0 21.4c-5.9 0-10.7-4.8-10.7-10.7 0-1.5.3-2.9.9-4.2 1.9.7 3.8 1.1 5.4 1.1 5.8 0 9.7-3.8 11-5.2 2.5 2 4.1 5 4.1 8.4 0 5.8-4.8 10.6-10.7 10.6zm-3.3-10h-1.3c0-.4-.3-.7-.7-.7-.4 0-.7.3-.7.7H8.7c0-1.1.9-2 2-2s2 .9 2 2zm10.6 0H22c0-.4-.3-.7-.7-.7s-.7.3-.7.7h-1.3c0-1.1.9-2 2-2s2 .9 2 2zm-11.9 3.8h9.3v1.3h-9.3v-1.3z'/%3E%3C/g%3E%3C/svg%3E",
   '3259':

package/components/button-group.scss

@@ -17,7 +17,9 @@
 
     // added a transition delay on the "z-index" so the button only moves back after all other transitions
     z-index: 0;
-    transition: z-index 0s ease (0.5 * button.$btn-transition-duration), button.$btn-transition;
+    transition:
+      z-index 0s ease (0.5 * button.$btn-transition-duration),
+      button.$btn-transition;
 
     @include utilities.high-contrast-mode() {
       transition: none !important;

package/components/button.scss

@@ -144,7 +144,9 @@
     transform: rotateZ(315deg)
       translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
     transform-origin: center center;
-    transition: opacity 250ms, transform 250ms;
+    transition:
+      opacity 250ms,
+      transform 250ms;
     border-right: button.$btn-border-width solid currentColor;
     border-bottom: button.$btn-border-width solid currentColor;
     opacity: 0;
@@ -152,8 +154,10 @@
 
   @each $size in button.$btn-non-default-sizes {
     &.btn-#{$size}::after {
-      right: map.get(button.$btn-padding-x-map, $size) -
-        map.get(button.$btn-animation-distance-map, $size);
+      right: map.get(button.$btn-padding-x-map, $size) - map.get(
+          button.$btn-animation-distance-map,
+          $size
+        );
     }
   }
 

package/components/carousel.scss

@@ -14,7 +14,10 @@
 .carousel {
   &:focus-visible {
     outline: transparent;
-    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 12px 5px rgba(0, 0, 0, 0.24);
+    box-shadow:
+      0 0 0 2px #fff,
+      0 0 0 4px #000,
+      0 0 12px 5px rgba(0, 0, 0, 0.24);
   }
 
   @include utilities.high-contrast-mode() {

package/components/choice-control-card.scss

@@ -18,7 +18,9 @@
   border: 2px solid color.$gray-60;
   border-radius: commons.$border-radius;
   padding: spacing.$size-regular;
-  transition: color 100ms ease-in-out, background-color 100ms ease-in-out,
+  transition:
+    color 100ms ease-in-out,
+    background-color 100ms ease-in-out,
     border-color 100ms ease-in-out;
 
   // Checked

package/components/floating-label.scss

@@ -30,7 +30,7 @@
     font-size: forms.$form-floating-label-font-size;
     width: auto;
     height: auto;
-    max-width: calc(100% - (forms.$input-border-width * 2));
+    max-width: calc(100% - (#{forms.$input-border-width * 2}));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -56,9 +56,9 @@
       ~ label {
         padding-top: 0.7rem;
         max-width: calc(
-          (100% * forms.$form-floating-label-upscale) -
-            (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
-            (forms.$input-border-width * forms.$form-floating-label-upscale * 2)
+          (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+            forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
+            2}
         );
         transition: forms.$form-floating-transition-in;
       }
@@ -78,13 +78,14 @@
 
     padding-top: forms.$form-floating-input-padding-t;
     padding-bottom: forms.$form-floating-input-padding-b;
+    background-size: forms.$form-floating-select-bg-size;
 
     ~ label {
       padding-top: 0.7rem;
       max-width: calc(
-        (100% * forms.$form-floating-label-upscale) -
-          (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
-          (forms.$input-border-width * forms.$form-floating-label-upscale * 2)
+        (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+          forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
+          2}
       );
       transition: forms.$form-floating-transition-in;
     }
@@ -95,7 +96,7 @@
 
       ~ label {
         padding-top: forms.$form-floating-padding-y;
-        max-width: calc(100% - (forms.$input-border-width * 2));
+        max-width: calc(100% - (#{forms.$input-border-width * 2}));
         transform: none;
       }
     }
@@ -109,10 +110,9 @@
         padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
         padding-bottom: 0;
         width: calc(
-          (100% * forms.$form-floating-label-upscale) -
-            (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
-            (forms.$input-border-width * forms.$form-floating-label-upscale * 2) -
-            (forms.$form-floating-padding-x * forms.$form-floating-label-upscale)
+          (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+            forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
+            2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         height: auto;
         background: forms.$input-bg;
@@ -122,7 +122,9 @@
         ~ label {
           padding-top: forms.$form-floating-padding-y;
           padding-bottom: forms.$form-floating-padding-y;
-          width: calc(100% - (forms.$input-border-width * 2) - forms.$form-floating-padding-x);
+          width: calc(
+            100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x}
+          );
           height: forms.$form-floating-label-height;
         }
       }
@@ -136,7 +138,7 @@
 
     ~ label {
       padding-bottom: 0;
-      width: calc(100% - (forms.$input-border-width * 2));
+      width: calc(100% - (#{forms.$input-border-width * 2}));
       max-width: none;
       height: unset;
     }
@@ -149,10 +151,9 @@
       ~ label {
         padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
         width: calc(
-          (100% * forms.$form-floating-label-upscale) -
-            (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
-            (forms.$input-border-width * forms.$form-floating-label-upscale * 2) -
-            (forms.$form-floating-padding-x * forms.$form-floating-label-upscale)
+          (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+            forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
+            2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         max-width: none;
         background: forms.$input-bg;
@@ -162,8 +163,8 @@
     &:is(.is-valid, .is-invalid) {
       ~ label {
         width: calc(
-          100% - (forms.$input-border-width * 2) - forms.$form-floating-padding-x -
-            form-validation.$form-feedback-icon-offset - form-validation.$form-feedback-icon-size
+          100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x} - #{form-validation.$form-feedback-icon-offset} -
+            #{form-validation.$form-feedback-icon-size}
         );
       }
 
@@ -171,12 +172,11 @@
       &:not(:placeholder-shown) {
         ~ label {
           width: calc(
-            (100% * forms.$form-floating-label-upscale) -
-              (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
-              (forms.$input-border-width * forms.$form-floating-label-upscale * 2) -
-              (forms.$form-floating-padding-x * forms.$form-floating-label-upscale) -
-              (form-validation.$form-feedback-icon-offset * forms.$form-floating-label-upscale) -
-              (form-validation.$form-feedback-icon-size * forms.$form-floating-label-upscale)
+            (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
+              forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale *
+              2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} - #{form-validation.$form-feedback-icon-offset *
+              forms.$form-floating-label-upscale} - #{form-validation.$form-feedback-icon-size *
+              forms.$form-floating-label-upscale}
           );
         }
       }

package/components/fonts.scss

@@ -6,7 +6,8 @@
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 700;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff') format('woff');
 }
 
@@ -15,7 +16,8 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 700;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff') format('woff');
 }
 
@@ -23,7 +25,8 @@
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 400;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff') format('woff');
 }
 
@@ -32,7 +35,8 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 400;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff') format('woff');
 }
 
@@ -40,7 +44,8 @@
   font-display: swap;
   font-family: 'Frutiger Neue For Post';
   font-weight: 300;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-Lt.woff') format('woff');
 }
 
@@ -49,6 +54,7 @@
   font-family: 'Frutiger Neue For Post';
   font-weight: 300;
   font-style: italic;
-  src: url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff2') format('woff2'),
+  src:
+    url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff2') format('woff2'),
     url('#{options.$font-base-path}/FrutigerNeueforPostW05-LtIt.woff') format('woff');
 }

package/components/form-check.scss

@@ -40,7 +40,8 @@
   &-input {
     display: inline-flex;
     flex: 0 auto;
-    appearance: none;
+    -webkit-appearance: none;
+            appearance: none;
     background: none;
     height: form-check.$form-check-input-size;
     width: form-check.$form-check-input-size;
@@ -127,7 +128,8 @@
     background-image: form-check.$form-switch-background-image;
     background-size: 2 * form-check.$form-switch-width;
     background-position-x: 0;
-    transition: background-color animation.$transition-base-timing,
+    transition:
+      background-color animation.$transition-base-timing,
       background-position animation.$transition-base-timing;
 
     &::after {

package/components/form-validation.scss

@@ -1,5 +1,7 @@
 @forward './../variables/options';
 
+@use 'sass:map';
+
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/forms/validation' as bfv;
@@ -42,7 +44,7 @@
 }
 
 @each $state, $data in $form-validation-states {
-  $icon: map-get($data, 'icon');
+  $icon: map.get($data, 'icon');
 
   @include form-validation-state-selector($state) {
     ~ .#{$state}-feedback,

package/components/forms.scss

@@ -54,6 +54,7 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     // Fix Safari cutoff when change the initial position of the selector button.
+    /* stylelint-disable-next-line */
     @supports (background: -webkit-named-image(i)) {
       &::file-selector-button {
         display: initial;

package/components/tables.scss

@@ -1,5 +1,6 @@
 @forward './../variables/options';
 @use './../variables/color';
+@use './../variables/commons';
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/tables' as bt;
 
@@ -8,3 +9,50 @@
     border-width: 0;
   }
 }
+
+.table-mono {
+  // Set all border color
+  > thead,
+  > tbody,
+  > tfoot,
+  > :is(thead, tbody, tfoot) > tr,
+  > :is(thead, tbody, tfoot) > tr > :is(td, th) {
+    border-color: color.$white;
+    border-width: commons.$border-thick;
+  }
+
+  // Remove striped background, but only if not associated with table-hover and hover
+  &.table-striped:not(.table-hover) > tbody > tr > :is(th, td),
+  &.table-striped.table-hover > tbody > tr:not(:hover) > :is(th, td) {
+    box-shadow: none;
+  }
+
+  // Hide border between cells on tbody when hovered, but not bordered
+  &.table-hover:not(.table-bordered) {
+    > tbody > tr > :is(td, th) {
+      border: 0;
+    }
+  }
+
+  // Underline by default (Hide cells border)
+  &:not(.table-bordered) {
+    > :is(thead, tbody, tfoot) > tr > :is(td, th) {
+      border: 0;
+    }
+  }
+
+  // Remove border when borderless
+  &.table-borderless {
+    > thead,
+    > tbody,
+    > tfoot,
+    > :is(thead, tbody, tfoot) > tr,
+    > :is(thead, tbody, tfoot) > tr > :is(td, th) {
+      border: 0;
+    }
+  }
+
+  > tbody > tr {
+    background-color: color.$gray-background;
+  }
+}

package/components/tabs/index.scss

@@ -1,2 +1,4 @@
+@forward '../../variables/options';
+
 @use 'tabs-wrapper';
 @use 'tab-title';

package/components/topic-teaser.scss

@@ -40,7 +40,8 @@
         padding-right: 0;
         // webkit subpixel-issue fix
         margin-right: -1px;
-        clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
+        -webkit-clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
+                clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
       }
 
       > .row {

package/components/type.scss

@@ -99,10 +99,10 @@ fieldset {
 }
 
 q {
-  quotes: '\00ab''\00bb''\2039''\203A';
+  quotes: '\00ab' '\00bb' '\2039' '\203A';
 
   &:lang(en) {
-    quotes: '\0022''\0022''\0027''\0027';
+    quotes: '\0022' '\0022' '\0027' '\0027';
   }
 }
 

package/functions/_contrast.scss

@@ -1,13 +1,15 @@
 @use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
 
 // From https://codetuts.dev/text-contrast-sass/
 // with updated math.pow and math.div
 
 @function luminance($color) {
   $rgb: (
-    'red': red($color),
-    'green': green($color),
-    'blue': blue($color),
+    'red': color.red($color),
+    'green': color.green($color),
+    'blue': color.blue($color),
   );
 
   @each $color, $value in $rgb {
@@ -20,7 +22,7 @@
       $value: math.pow($value, 2.4);
     }
 
-    $rgb: map-merge(
+    $rgb: map.merge(
       $rgb,
       (
         $color: $value,
@@ -28,8 +30,8 @@
     );
   }
 
-  $result-luminance: (map-get($rgb, 'red') * 0.2126) + (map-get($rgb, 'green') * 0.7152) +
-    (map-get($rgb, 'blue') * 0.0722);
+  $result-luminance: (map.get($rgb, 'red') * 0.2126) + (map.get($rgb, 'green') * 0.7152) +
+    (map.get($rgb, 'blue') * 0.0722);
 
   @return $result-luminance;
 }

package/functions/_list.scss

@@ -1,19 +1,23 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:string';
+
 @function remove-nth($list, $index) {
   $result: null;
 
   @if type-of($index) != number {
-    @warn '$index: #{quote($index)} is not a number for `remove-nth`.';
+    @warn '$index: #{string.quote($index)} is not a number for `remove-nth`.';
   } @else if $index == 0 {
     @warn 'List index 0 must be a non-zero integer for `remove-nth`.';
-  } @else if abs($index) > length($list) {
-    @warn 'List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.';
+  } @else if math.abs($index) > list.length($list) {
+    @warn 'List index is #{$index} but list is only #{list.length($list)} item long for `remove-nth`.';
   } @else {
     $result: ();
-    $index: if($index < 0, length($list) + $index + 1, $index);
+    $index: if($index < 0, list.length($list) + $index + 1, $index);
 
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
       @if $i != $index {
-        $result: append($result, nth($list, $i));
+        $result: list.append($result, list.nth($list, $i));
       }
     }
   }

package/functions/_sizing.scss

@@ -1,7 +1,8 @@
 @use 'sass:math';
+@use 'sass:list';
 
 @use './utilities';
-@use './list';
+@use './list' as list-fn;
 
 @function strip-unit($value) {
   @return math.div($value, $value * 0 + 1);
@@ -59,7 +60,7 @@
 }
 
 @function calculate-single-box-shadow-size($box-shadow) {
-  $len: length($box-shadow);
+  $len: list.length($box-shadow);
   $multiplier: 1;
   $box-shadow-size: 0;
 
@@ -67,37 +68,37 @@
     @error "The function 'calculate-single-box-shadow-size($box-shadow)' is not for calculating the combined size of multiple box-shadows. Failed value: '#{$box-shadow}'.";
   }
 
-  @if (nth($box-shadow, 1) == 'inset') {
+  @if (list.nth($box-shadow, 1) == 'inset') {
     $multiplier: -1;
-    $box-shadow: list.remove-nth($box-shadow, 1);
+    $box-shadow: list-fn.remove-nth($box-shadow, 1);
   }
 
   @if (utilities.starts-with-any(nth($box-shadow, -1), 'hsl', 'rgb', '#')) {
-    $box-shadow: list.remove-nth($box-shadow, -1);
+    $box-shadow: list-fn.remove-nth($box-shadow, -1);
   }
 
-  $len: length($box-shadow);
+  $len: list.length($box-shadow);
 
   @if ($len > 4) {
     @error "The function 'calculate-single-box-shadow-size($box-shadow)' is not for calculating the combined size of multiple box-shadows. Failed value: '#{$box-shadow}'.";
   }
 
-  @if (abs(nth($box-shadow, 1)) >= abs(nth($box-shadow, 2))) {
-    $box-shadow-size: $box-shadow-size + abs(nth($box-shadow, 1));
+  @if (math.abs(list.nth($box-shadow, 1)) >= math.abs(list.nth($box-shadow, 2))) {
+    $box-shadow-size: $box-shadow-size + math.abs(list.nth($box-shadow, 1));
   } @else {
-    $box-shadow-size: $box-shadow-size + abs(nth($box-shadow, 2));
+    $box-shadow-size: $box-shadow-size + math.abs(list.nth($box-shadow, 2));
   }
 
   @if ($len >= 3) {
-    $box-shadow-size: $box-shadow-size + (abs(nth($box-shadow, 3)) * 0.7);
+    $box-shadow-size: $box-shadow-size + (math.abs(list.nth($box-shadow, 3)) * 0.7);
   }
 
   @if ($len == 4) {
-    $box-shadow-size: $box-shadow-size + nth($box-shadow, 4);
+    $box-shadow-size: $box-shadow-size + list.nth($box-shadow, 4);
   }
 
   @if (unit($box-shadow-size) == 'px') {
-    $box-shadow-size: ceil($box-shadow-size);
+    $box-shadow-size: math.ceil($box-shadow-size);
   }
 
   @return $box-shadow-size;

package/functions/_utilities.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:list';
 
 @use 'sass:string';
 @use 'sass:map';
@@ -17,11 +18,11 @@
   }
 
   @if (map-has-key($map, $key1)) {
-    $found-index: index(map.keys($map), $key1);
+    $found-index: list.index(map.keys($map), $key1);
 
     @if ($key2) {
       $map: map.get($map, $key1);
-      $found-index: index($map, $key2);
+      $found-index: list.index($map, $key2);
     }
   }