@fremtind/jokul 0.27.3 → 0.27.5

package/styles/components/table/_table-cell.scss

@@ -49,7 +49,8 @@
 
     // only show inline text if it's not an ExpandController with text inside. if it doesn't
     // have text inside. the text is moved inside the ExpandButton
-    .jkl-table--collapse-to-list &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
+    .jkl-table--collapse-to-list
+        &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
         display: none;
 
         @include jkl.small-device {
@@ -57,11 +58,14 @@
         }
     }
 
-    .jkl-table--collapse-to-list[data-collapse] &:not(.jkl-table-cell--expand-without-text)::before {
+    .jkl-table--collapse-to-list[data-collapse]
+        &:not(.jkl-table-cell--expand-without-text)::before {
         @include _responsive-table-header;
     }
 
-    .jkl-table--collapse-to-list:not([data-collapse]) &--expand-without-text .jkl-expand-button__text {
+    .jkl-table--collapse-to-list:not([data-collapse])
+        &--expand-without-text
+        .jkl-expand-button__text {
         @include jkl.from-medium-device {
             display: none;
         }
@@ -73,7 +77,9 @@
     }
 }
 
-.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external) {
+.jkl-table-row--expandable.jkl-table-row--clickable:not(
+        .jkl-expandable-table-row--clickable-external
+    ) {
     &:hover,
     html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus {
         .jkl-table-row-expand-button {

package/styles/components/table/_table-head.scss

@@ -24,7 +24,8 @@ $_border-size: jkl.rem(-1px);
 
             border-bottom: none;
 
-            box-shadow: inset 0 0 0 #000, inset 0 $_border-size 0 var(--jkl-table-row-hover-border-color);
+            box-shadow: inset 0 0 0 #000,
+                inset 0 $_border-size 0 var(--jkl-table-row-hover-border-color);
             background-clip: padding-box;
 
             // legg til litt (nesten-cirka 16px) over headingen

package/styles/components/table/_table-row.scss

@@ -21,7 +21,8 @@ $_focus-ring-width: jkl.rem(2px);
     border-bottom: solid $_border-size var(--jkl-table-row-border-color);
 
     .jkl-table-head > & {
-        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
+        border-bottom: solid $_border-size
+            var(--jkl-table-row-hover-border-color);
     }
 
     /* stylelint-disable-next-line selector-not-notation */
@@ -39,8 +40,10 @@ $_focus-ring-width: jkl.rem(2px);
             * https://stackoverflow.com/a/4096554
             * https://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
             */
-            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
-            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-top: double $_border-size
+                var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size
+                var(--jkl-table-row-hover-border-color);
         }
     }
 
@@ -77,7 +80,9 @@ $_focus-ring-width: jkl.rem(2px);
         @include _responsive-table-row;
     }
 
-    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &.jkl-table-row--expandable {
+    .jkl-table--collapse-to-list[data-collapse]
+        :not(.jkl-table-head)
+        > &.jkl-table-row--expandable {
         transition-property: border, padding;
         @include jkl.motion;
 
@@ -113,7 +118,8 @@ $_focus-ring-width: jkl.rem(2px);
     @mixin _responsive-table-row--hover {
         /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
         border-top: solid $_border-size var(--jkl-table-row-hover-border-color);
-        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
+        border-bottom: solid $_border-size
+            var(--jkl-table-row-hover-border-color);
     }
 
     .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
@@ -122,7 +128,9 @@ $_focus-ring-width: jkl.rem(2px);
         }
     }
 
-    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
+    .jkl-table--collapse-to-list[data-collapse]
+        :not(.jkl-table-head)
+        > &:hover {
         @include _responsive-table-row--hover;
     }
 
@@ -134,8 +142,10 @@ $_focus-ring-width: jkl.rem(2px);
             cursor: pointer;
             background-color: var(--jkl-table-row-highlight-color);
 
-            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
-            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-top: double $_border-size
+                var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size
+                var(--jkl-table-row-hover-border-color);
         }
 
         .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
@@ -144,7 +154,9 @@ $_focus-ring-width: jkl.rem(2px);
             }
         }
 
-        .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
+        .jkl-table--collapse-to-list[data-collapse]
+            :not(.jkl-table-head)
+            > &:hover {
             @include _responsive-table-row--hover;
         }
 

package/styles/components/tabs/tabs.css

@@ -5,7 +5,8 @@
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);
+  --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40)
+      var(--jkl-spacing-12) var(--jkl-spacing-2);
   --jkl-tab-font-size: var(--jkl-body-font-size);
   --jkl-tab-line-height: var(--jkl-body-line-height);
   --jkl-tab-font-weight: var(--jkl-body-font-weight);
@@ -14,7 +15,8 @@
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2);
+    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24)
+        var(--jkl-spacing-12) var(--jkl-spacing-2);
   }
 }
 
@@ -23,7 +25,8 @@
   --jkl-tab-font-size: var(--jkl-small-font-size);
   --jkl-tab-line-height: var(--jkl-small-line-height);
   --jkl-tab-font-weight: var(--jkl-small-font-weight);
-  --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0;
+  --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32)
+      var(--jkl-spacing-4) 0;
 }
 
 .jkl-tabs {

package/styles/components/tabs/tabs.scss

@@ -2,18 +2,21 @@
 @use "../../core/jkl";
 
 @include jkl.comfortable-density-variables {
-    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);
+    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40)
+        var(--jkl-spacing-12) var(--jkl-spacing-2);
 
     @include jkl.declare-font-variables("jkl-tab", "body");
     @include jkl.small-device {
-        --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2);
+        --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24)
+            var(--jkl-spacing-12) var(--jkl-spacing-2);
     }
 }
 
 @include jkl.compact-density-variables {
     @include jkl.declare-font-variables("jkl-tab", "small");
 
-    --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0;
+    --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32)
+        var(--jkl-spacing-4) 0;
 }
 
 .jkl-tabs {

package/styles/components/text-input/text-input.css

@@ -73,7 +73,8 @@
   --jkl-text-input-height: 3rem;
   --jkl-text-input-vertical-padding: 0.5rem;
   --jkl-text-input-horizontal-padding: 0.75rem;
-  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
+      var(--jkl-text-input-horizontal-padding);
   --jkl-text-input-action-button-size: 3rem;
   --jkl-text-input-action-button-icon-size: 1.25rem;
   --jkl-text-input-action-button-padding: 0.5rem 0;
@@ -96,7 +97,8 @@
   --jkl-text-input-height: 2rem;
   --jkl-text-input-vertical-padding: 0.25rem;
   --jkl-text-input-horizontal-padding: 0.5rem;
-  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+  --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
+      var(--jkl-text-input-horizontal-padding);
   --jkl-text-input-action-button-size: 2rem;
   --jkl-text-input-action-button-icon-size: 1.125rem;
   --jkl-text-input-action-button-padding: 0;

package/styles/components/text-input/text-input.scss

@@ -69,7 +69,8 @@ $_text-input-selection-color--inverted: color.scale(
     --jkl-text-input-height: #{$_text-input-height};
     --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding};
     --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding};
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
+        var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-action-button-size: #{$_action-button-size};
     --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size};
     --jkl-text-input-action-button-padding: #{$_action-button-padding};
@@ -87,7 +88,8 @@ $_text-input-selection-color--inverted: color.scale(
     --jkl-text-input-height: #{$_text-input-height--compact};
     --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding--compact};
     --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding--compact};
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
+        var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-action-button-size: #{$_action-button-size--compact};
     --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size--compact};
     --jkl-text-input-action-button-padding: #{$_action-button-padding--compact};
@@ -141,7 +143,8 @@ $_text-input-selection-color--inverted: color.scale(
             &:focus {
                 @include jkl.keyboard-navigation {
                     &::after {
-                        box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-error-text-color);
+                        box-shadow: inset 0 0 0 jkl.rem(2px)
+                            var(--jkl-text-input-error-text-color);
                     }
                 }
             }
@@ -195,7 +198,8 @@ $_text-input-selection-color--inverted: color.scale(
                     var(--jkl-text-input-action-button-focus-position)
                     var(--jkl-text-input-action-button-focus-position)
                     var(--jkl-text-input-action-button-focus-position);
-                box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-focus-color);
+                box-shadow: inset 0 0 0 jkl.rem(2px)
+                    var(--jkl-text-input-focus-color);
             }
         }
     }
@@ -223,7 +227,8 @@ $_text-input-selection-color--inverted: color.scale(
     transition-property: color, box-shadow, background-color;
 
     color: var(--jkl-text-input-text-color);
-    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color), 0 0 0 jkl.rem(1px) transparent;
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color),
+        0 0 0 jkl.rem(1px) transparent;
     background-color: transparent;
 
     &:hover {
@@ -267,7 +272,9 @@ $_text-input-selection-color--inverted: color.scale(
     }
 
     &__action-button {
-        margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+        margin-inline-start: calc(
+            var(--jkl-text-input-horizontal-padding) * -1
+        );
     }
 
     &--inline {
@@ -321,7 +328,9 @@ $_text-input-selection-color--inverted: color.scale(
 
             &[data-has-content="true"],
             &:focus-within {
-                padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
+                padding-bottom: calc(
+                    var(--jkl-text-input-height) + #{$progress-bar-height}
+                );
             }
         }
 
@@ -362,7 +371,9 @@ $_text-input-selection-color--inverted: color.scale(
 
         &:focus-within .jkl-text-area__counter {
             opacity: 1;
-            transition-delay: jkl.timing("productive"); // Vent med å fade inn til feltet er ekspandert
+            transition-delay: jkl.timing(
+                "productive"
+            ); // Vent med å fade inn til feltet er ekspandert
         }
 
         [aria-invalid="true"] ~ .jkl-text-area__counter {

package/styles/components/toast/toast.css

@@ -154,7 +154,9 @@
   }
 }
 .jkl-toast__dismiss-button::after {
-  --tap-increment: calc((2.75rem - 1.25rem) / 2 * -1);
+  --tap-increment: calc(
+      (2.75rem - 1.25rem) / 2 * -1
+  );
   content: "";
   position: absolute;
   inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
@@ -193,14 +195,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-usfxe18 200ms ease-out forwards;
+  animation: jkl-entering-uv7ylla 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-usfxe1g 150ms ease-in forwards;
+  animation: jkl-exiting-uv7yllq 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-usfxe18 {
+@keyframes jkl-entering-uv7ylla {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -210,7 +212,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-usfxe1g {
+@keyframes jkl-exiting-uv7yllq {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:1.5rem;display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 .25rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-usfxe18 .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-usfxe1g .15s ease-in forwards}@keyframes jkl-entering-usfxe18{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-usfxe1g{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:transparent;bottom:1.5rem;display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:transparent;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 .25rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uv7ylla .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uv7yllq .15s ease-in forwards}@keyframes jkl-entering-uv7ylla{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uv7yllq{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/styles/components/toast/toast.scss

@@ -77,7 +77,9 @@
     &__progress {
         grid-area: progress;
         margin-bottom: jkl.$spacing-16;
-        margin-inline: calc(-1 * var(--jkl-toast-padding)); // Motvirk padding for å gå kant i kant.
+        margin-inline: calc(
+            -1 * var(--jkl-toast-padding)
+        ); // Motvirk padding for å gå kant i kant.
 
         .jkl-countdown {
             --bar-color: var(--text-color);
@@ -98,7 +100,9 @@
     }
 
     &__message {
-        margin-top: jkl.rem(-2px); // Offset for å aligne med ikon hvis uten tittel.
+        margin-top: jkl.rem(
+            -2px
+        ); // Offset for å aligne med ikon hvis uten tittel.
     }
 
     &__title {
@@ -128,10 +132,13 @@
 
         // Sørg for å ha en stor nok touch target.
         &::after {
-            --tap-increment: calc((#{jkl.rem(44px)} - #{jkl.rem(20px)}) / 2 * -1);
+            --tap-increment: calc(
+                (#{jkl.rem(44px)} - #{jkl.rem(20px)}) / 2 * -1
+            );
             content: "";
             position: absolute;
-            inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
+            inset: var(--tap-increment) var(--tap-increment)
+                var(--tap-increment) var(--tap-increment);
             border-radius: jkl.rem(3px);
         }
     }

package/styles/components/toggle-switch/_toggle-slider.scss

@@ -48,7 +48,8 @@ $_slider-rounded: jkl.rem(100px);
     flex-direction: column;
     user-select: none;
 
-    html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus-within {
+    html:not([data-mousenavigation]):not([data-touchnavigation])
+        &:focus-within {
         .jkl-toggle-slider__pill {
             box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-slider-focus-color);
         }

package/styles/components/toggle-switch/toggle-switch.css

@@ -232,7 +232,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --indicator-color: var(--jkl-color-background-container-inverted);
   --knob-color: var(--jkl-color-text-inverted);
   --knob-position: calc(
-      var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2
+      var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) -
+          var(--switch-padding) * 2
   );
 }
 .jkl-toggle-switch[disabled] {

package/styles/components/toggle-switch/toggle-switch.scss

@@ -60,7 +60,8 @@
         --indicator-color: var(--jkl-color-background-container-inverted);
         --knob-color: var(--jkl-color-text-inverted);
         --knob-position: calc(
-            var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2
+            var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) -
+                var(--switch-padding) * 2
         );
     }
 

package/styles/components/tooltip/tooltip.scss

@@ -3,7 +3,9 @@
 
 $_tooltip-border-width: jkl.rem(1px);
 $_tooltip-arrow-height: jkl.rem(8px);
-$_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
+$_focus-ring-distance: jkl.rem(
+    -1px
+); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
 $_focus-ring-width: jkl.rem(2px);
 
 @include jkl.comfortable-density(".jkl-tooltip-content") {
@@ -34,7 +36,10 @@ $_focus-ring-width: jkl.rem(2px);
     color: var(--jkl-color-text-inverted);
     display: inline-block;
     min-width: min-content;
-    max-width: min(jkl.rem(310px), 100%); // 10px mindre enn smaleste støttede skjerm
+    max-width: min(
+        jkl.rem(310px),
+        100%
+    ); // 10px mindre enn smaleste støttede skjerm
     padding: var(--content-padding);
     position: absolute;
     z-index: jkl.$z-index--floating;

package/styles/core/_spacing.scss

@@ -17,7 +17,10 @@
     @each $spacing-combination in spacing.$combinations {
         $_step: list.nth($spacing-combination, 1);
 
-        --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+        --#{get-class-name($spacing-combination)}: #{map.get(
+                spacing.$spacing,
+                $_step
+            )};
     }
 
     @include screens.from-medium-device {
@@ -25,7 +28,10 @@
             @if list.length($spacing-combination) > 1 {
                 $_step: list.nth($spacing-combination, 2);
 
-                --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+                --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
             }
         }
     }
@@ -35,7 +41,10 @@
             @if list.length($spacing-combination) > 2 {
                 $_step: list.nth($spacing-combination, 3);
 
-                --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+                --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
             }
         }
     }

package/styles/core/core.scss

@@ -32,14 +32,19 @@
 
 :root {
     @each $level, $values in typography.$text-styles {
-        @each $property, $value in map.get(typography.$text-styles, $level, "small-screen") {
+        @each $property,
+            $value in map.get(typography.$text-styles, $level, "small-screen")
+        {
             --jkl-#{$level}-#{$property}: #{$value};
         }
     }
 
     @include jkl.from-medium-device {
         @each $level, $values in typography.$text-styles {
-            @each $property, $value in map.get(typography.$text-styles, $level, "large-screen") {
+            @each $property,
+                $value
+                    in map.get(typography.$text-styles, $level, "large-screen")
+            {
                 --jkl-#{$level}-#{$property}: #{$value};
             }
         }

package/styles/core/jkl/_convert.scss

@@ -35,7 +35,10 @@
         $character: string.slice($value, $i, $i);
 
         @if not(index(map.keys($numbers), $character) or $character == ".") {
-            @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+            @return to-length(
+                if($minus, -$result, $result),
+                string.slice($value, $i)
+            );
         }
 
         @if $character == "." {

package/styles/core/jkl/_helpers.scss

@@ -14,7 +14,13 @@
 /// @param {String} $left [initial]
 /// @param {String} $right [initial]
 /// @param {String} $bottom [initial]
-@mixin position($position, $top: initial, $left: initial, $right: initial, $bottom: initial) {
+@mixin position(
+    $position,
+    $top: initial,
+    $left: initial,
+    $right: initial,
+    $bottom: initial
+) {
     position: $position;
     inset: $top $right $bottom $left;
 }

package/styles/core/jkl/_ornaments.scss

@@ -6,7 +6,9 @@
     height: $size;
 
     transform-origin: 26.33% 73.66%; // places origin in center of chevron
-    transform: rotate((-45 + $rotate) * 1deg); // default orientation is pointing down
+    transform: rotate(
+        (-45 + $rotate) * 1deg
+    ); // default orientation is pointing down
 
     border-left: $weight solid $color;
     border-bottom: $weight solid $color;

package/styles/core/jkl/_spacing.scss

@@ -145,7 +145,10 @@ $positions: (top, bottom, left, right);
 
     $first-value: string.slice($string, 0, $delimiter-index - 1);
     // Finn eventuelt flere substrenger ved å kjøre funksjonen rekursivt
-    $other-values: _split-string(string.slice($string, $delimiter-index + 1), $delimiter);
+    $other-values: _split-string(
+        string.slice($string, $delimiter-index + 1),
+        $delimiter
+    );
 
     // Returner en kommaseparert liste over substrengene
     @return list.join($first-value, $other-values, "comma");

package/styles/core/jkl/_tokens.scss

@@ -132,14 +132,22 @@ $color-background-page-variant: var(--jkl-color-background-page-variant);
 $color-background-container: var(--jkl-color-background-container);
 $color-background-container-low: var(--jkl-color-background-container-low);
 $color-background-container-high: var(--jkl-color-background-container-high);
-$color-background-container-inverted: var(--jkl-color-background-container-inverted);
-$color-background-container-subdued: var(--jkl-color-background-container-subdued);
+$color-background-container-inverted: var(
+    --jkl-color-background-container-inverted
+);
+$color-background-container-subdued: var(
+    --jkl-color-background-container-subdued
+);
 $color-background-input-base: var(--jkl-color-background-input-base);
 $color-background-input-focus: var(--jkl-color-background-input-focus);
 $color-background-action: var(--jkl-color-background-action);
 $color-background-interactive: var(--jkl-color-background-interactive);
-$color-background-interactive-hover: var(--jkl-color-background-interactive-hover);
-$color-background-interactive-selected: var(--jkl-color-background-interactive-selected);
+$color-background-interactive-hover: var(
+    --jkl-color-background-interactive-hover
+);
+$color-background-interactive-selected: var(
+    --jkl-color-background-interactive-selected
+);
 $color-background-alert-neutral: var(--jkl-color-background-alert-neutral);
 $color-background-alert-info: var(--jkl-color-background-alert-info);
 $color-background-alert-success: var(--jkl-color-background-alert-success);

package/styles/core/jkl/_typography.scss

@@ -267,7 +267,9 @@ $text-styles: (
             // Styles heading-5 and small are the same size on small and large screens. Skip to generate less CSS.
             @if $style != "small" and $style != "heading-5" {
                 @include screens.from-medium-device {
-                    @each $property, $value in map.get($variants, "large-screen") {
+                    @each $property,
+                        $value in map.get($variants, "large-screen")
+                    {
                         #{$property}: $value;
                     }
                     @content;
@@ -325,7 +327,11 @@ $text-styles: (
     font-weight: var(--#{$name}-font-weight);
 }
 
-$_valid-font-family-values: ("Fremtind Grotesk", "Fremtind Grotesk Display", "Fremtind Grotesk Mono");
+$_valid-font-family-values: (
+    "Fremtind Grotesk",
+    "Fremtind Grotesk Display",
+    "Fremtind Grotesk Mono"
+);
 
 /// Hjelper sette riktig remse med fallback-fonts for Fremtind Grotesk, Fremtind Grotesk Display, og Fremtind Grotesk Mono.
 /// @param {"Fremtind Grotesk" | "Fremtind Grotesk Mono" | "Fremtind Grotesk Display"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
@@ -336,11 +342,13 @@ $_valid-font-family-values: ("Fremtind Grotesk", "Fremtind Grotesk Display", "Fr
     }
 
     @if $font == "Fremtind Grotesk Mono" {
-        font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont,
-            monospace;
+        font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback",
+            -apple-system, BlinkMacSystemFont, monospace;
     } @else if $font == "Fremtind Grotesk Display" {
-        font-family: "Fremtind Grotesk Display", "Adjusted Arial Display Fallback", Arial, sans-serif;
+        font-family: "Fremtind Grotesk Display",
+            "Adjusted Arial Display Fallback", Arial, sans-serif;
     } @else {
-        font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+        font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial,
+            sans-serif;
     }
 }