style: automatic lint fixes

src/components/breadcrumbs/breadcrumbs.scss

@@ -77,7 +77,9 @@ a.step {
     cursor: pointer;
     transition: color 0.2s ease;
     &:before {
-        transition: opacity 0.2s ease, transform 0.3s ease-out;
+        transition:
+            opacity 0.2s ease,
+            transform 0.3s ease-out;
         content: '';
         position: absolute;
         inset: auto 0 0 0;

src/components/button/partial-styles/_has-reduced-presence.scss

@@ -16,7 +16,8 @@ $speed-of-reducing-presence: 0.3s;
         &[disabled]:not(.loading):not(.just-loaded) {
             animation: reduced-presence $speed-of-reducing-presence ease
                 forwards;
-            transition: padding $speed-of-reducing-presence ease,
+            transition:
+                padding $speed-of-reducing-presence ease,
                 min-width $speed-of-reducing-presence ease;
             transition-delay: $speed-of-reducing-presence;
 

src/components/chip-set/chip-set.e2e.ts

@@ -330,12 +330,10 @@ describe('limel-chip-set', () => {
                 chipSet.setAttribute('disabled', true);
                 await page.waitForChanges();
 
-                firstChipRemoveButton = await chips[0].find(
-                    'div[role="button"]'
-                );
-                secondChipRemoveButton = await chips[1].find(
-                    'div[role="button"]'
-                );
+                firstChipRemoveButton =
+                    await chips[0].find('div[role="button"]');
+                secondChipRemoveButton =
+                    await chips[1].find('div[role="button"]');
             });
 
             it('renders the chips without delete-buttons', async () => {
@@ -353,12 +351,10 @@ describe('limel-chip-set', () => {
                 chipSet.setAttribute('readonly', true);
                 await page.waitForChanges();
 
-                firstChipRemoveButton = await chips[0].find(
-                    'div[role="button"]'
-                );
-                secondChipRemoveButton = await chips[1].find(
-                    'div[role="button"]'
-                );
+                firstChipRemoveButton =
+                    await chips[0].find('div[role="button"]');
+                secondChipRemoveButton =
+                    await chips[1].find('div[role="button"]');
             });
 
             it('renders the chips without delete-buttons', async () => {

src/components/chip-set/chip-set.scss

@@ -179,7 +179,9 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 
 .mdc-chip__icon {
     &.mdc-chip__icon--trailing {
-        transition: background-color 0.2s ease, color 0.2s ease;
+        transition:
+            background-color 0.2s ease,
+            color 0.2s ease;
 
         color: var(--mdc-theme-on-surface);
         margin-left: 0;

src/components/collapsible-section/collapsible-section.scss

@@ -29,7 +29,9 @@
     inset: 0;
     width: 100%; // for Firefox
     @include mixins.visualize-keyboard-focus;
-    transition: background-color 0.4s ease, border-radius 0.1s ease;
+    transition:
+        background-color 0.4s ease,
+        border-radius 0.1s ease;
     cursor: pointer;
     z-index: -1;
 

src/components/collapsible-section/partial-styles/expand-icon.scss

@@ -22,7 +22,9 @@
 
     &:first-of-type,
     &:last-of-type {
-        transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
+        transition:
+            opacity 0.2s ease 0.1s,
+            transform 0.4s ease 0.3s;
     }
 
     &:first-of-type {
@@ -35,13 +37,17 @@
 
     &:nth-of-type(2),
     &:nth-of-type(3) {
-        transition: opacity 0.2s ease, transform 0.18s ease;
+        transition:
+            opacity 0.2s ease,
+            transform 0.18s ease;
     }
 
     section.open & {
         &:first-of-type,
         &:last-of-type {
-            transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
+            transition:
+                opacity 0.2s ease 0.1s,
+                transform 0.4s ease 0.3s;
         }
         &:first-of-type {
             transform: rotate3d(0, 0, 1, 0deg);
@@ -53,7 +59,9 @@
 
         &:nth-of-type(2),
         &:nth-of-type(3) {
-            transition: opacity 1s ease, transform 0.4s ease;
+            transition:
+                opacity 1s ease,
+                transform 0.4s ease;
         }
 
         &:nth-of-type(2) {
@@ -80,7 +88,8 @@
 
         &:nth-of-type(2),
         &:nth-of-type(3) {
-            transition: opacity 0.5s ease 0.4s,
+            transition:
+                opacity 0.5s ease 0.4s,
                 transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
         }
 
@@ -101,7 +110,8 @@ section.open {
         .line {
             &:first-of-type,
             &:last-of-type {
-                transition: opacity 0.2s ease 0.4s,
+                transition:
+                    opacity 0.2s ease 0.4s,
                     transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
             }
 

src/components/color-picker/color-picker-palette.scss

@@ -39,8 +39,11 @@
     // We could use the `@include mixins.is-flat-clickable();` mixin
     // But its `background-color` arguments would interfere with the
     // styles here. So we just copy/pasted the useful parts of the mixin here
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 
     &:hover {
         box-shadow: var(--button-shadow-hovered);
@@ -54,7 +57,8 @@
     cursor: pointer;
 
     &:focus-visible {
-        box-shadow: var(--shadow-depth-8-focused),
+        box-shadow:
+            var(--shadow-depth-8-focused),
             0 0 0 0.25rem rgb(var(--contrast-100)) inset;
     }
 }

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss

@@ -106,7 +106,9 @@ svg {
         }
 
         &:before {
-            transition: opacity 0.2s ease, top 0.2s ease;
+            transition:
+                opacity 0.2s ease,
+                top 0.2s ease;
 
             pointer-events: none;
             content: var(--today-label);

src/components/info-tile/info-tile.scss

@@ -193,8 +193,8 @@ limel-linear-progress {
 
 .value-and-suffix,
 .label {
-    text-shadow: 0 0 0.5rem
-            var(--info-tile-background-color, rgb(var(--contrast-100))),
+    text-shadow:
+        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),
         0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));
 }
 
@@ -223,7 +223,8 @@ limel-linear-progress {
 }
 
 .value {
-    transition: opacity 0.2s ease,
+    transition:
+        opacity 0.2s ease,
         transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);
     transform-origin: left;
     transform: translate3d(0, 0, 0) scale(1);

src/components/list/list.scss

@@ -139,8 +139,9 @@ $list-mdc-list-item: 0;
                 --list-right-padding: #{functions.pxToRem(12)};
                 right: 0;
                 width: calc(
-                    100% - var(--icon-width) - var(--icon-right-padding) -
-                        var(--list-right-padding)
+                    100% - var(--icon-width) - var(--icon-right-padding) - var(
+                            --list-right-padding
+                        )
                 );
 
                 &.x-small {

src/components/progress-flow/progress-flow-item/progress-flow-item.scss

@@ -62,7 +62,9 @@ $limel-progress-flow-divider: 1;
 }
 
 .step {
-    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.2s ease,
+        box-shadow 0.2s ease;
 
     display: flex;
     justify-content: center;

src/components/table/partial-styles/_tabulator-footer.scss

@@ -1,6 +1,8 @@
 .tabulator {
     .tabulator-footer {
-        transition: transform 0.5s ease-out, opacity 0.35s ease; //For some reason the footer is not animated when it gets hidden/removed
+        transition:
+            transform 0.5s ease-out,
+            opacity 0.35s ease; //For some reason the footer is not animated when it gets hidden/removed
         padding-top: 0;
         padding-bottom: 0;
         color: var(--table-text-color);

src/components/table/partial-styles/tabulator-custom-styles.scss

@@ -12,8 +12,11 @@
     // But the "arguments" of the mixin would make the CSS for
     // even and odd row colors and background color very complicated.
     // So instead, I've copy/pasted the useful parts of the mixin here
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 }
 
 .tabulator-row:not(.tabulator-calcs) {

src/components/table/table.tsx

@@ -497,9 +497,8 @@ export class Table {
                     return undefined;
                 }
 
-                const value = this.aggregates.find(
-                    (a) => a.field === col.field
-                )?.value;
+                const value = this.aggregates.find((a) => a.field === col.field)
+                    ?.value;
 
                 if (col.formatter) {
                     return col.formatter(value);

src/design-guidelines/size/examples/size.scss

@@ -26,7 +26,8 @@
 
     font-size: functions.pxToRem(16);
     background-color: rgb(var(--contrast-200));
-    box-shadow: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(3.6)} 0
+    box-shadow:
+        0 #{functions.pxToRem(1.5)} #{functions.pxToRem(3.6)} 0
             rgba(0, 0, 0, 0.232),
         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
             rgba(0, 0, 0, 0.208);

src/style/internal/shared_input-select-picker.scss

@@ -247,7 +247,9 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 @mixin trailing-icon {
     .mdc-text-field--with-trailing-icon {
         .mdc-text-field__icon--trailing {
-            transition: background-color 0.2s ease, box-shadow 0.3s ease;
+            transition:
+                background-color 0.2s ease,
+                box-shadow 0.3s ease;
             border-radius: 50%;
             padding: functions.pxToRem(8);
 

src/style/mixins.scss

@@ -56,8 +56,11 @@
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 
     cursor: pointer;
     color: $color;
@@ -84,8 +87,11 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 
     cursor: pointer;
     color: $color;
@@ -111,8 +117,11 @@
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 
     cursor: pointer;
     color: $color;
@@ -138,8 +147,11 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition: color 0.2s ease, background-color 0.2s ease,
-        box-shadow 0.2s ease, transform 0.1s ease-out;
+    transition:
+        color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.1s ease-out;
 
     cursor: pointer;
     color: $color;