@fremtind/jokul 0.27.3 → 0.27.5

package/styles/components/accordion/accordion.scss

@@ -5,22 +5,30 @@
     width: 100%;
 
     @include jkl.comfortable-density {
-        --title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(--jkl-spacing-16) var(--jkl-spacing-16);
+        --title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
+                --jkl-spacing-16
+            ) var(--jkl-spacing-16);
         --arrow-top: #{jkl.rem(20px)};
         --arrow-right: var(--jkl-spacing-12);
-        --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);
+        --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
+            var(--jkl-spacing-16);
         @include jkl.declare-font-variables("title", "body");
         @include jkl.declare-font-variables("content", "body");
 
         @include jkl.small-device {
-            --title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(--jkl-spacing-12) var(--jkl-spacing-12);
-            --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
+            --title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
+                    --jkl-spacing-12
+                ) var(--jkl-spacing-12);
+            --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12)
+                var(--jkl-spacing-16) var(--jkl-spacing-12);
             --arrow-top: #{jkl.rem(23px)};
         }
     }
 
     @include jkl.compact-density {
-        --title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(--jkl-spacing-8) var(--jkl-spacing-8);
+        --title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
+                --jkl-spacing-8
+            ) var(--jkl-spacing-8);
         --arrow-top: var(--jkl-spacing-8);
         --arrow-right: var(--jkl-spacing-4);
         --content-padding: var(--jkl-spacing-8);
@@ -104,7 +112,10 @@
         @include jkl.motion("standard", "snappy");
         transition-property: translate;
 
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText, $fill: ButtonText);
+        @include jkl.forced-colors-svg-fallback(
+            $stroke: ButtonText,
+            $fill: ButtonText
+        );
     }
 
     &__content-wrapper {

package/styles/components/button/button.css

@@ -136,7 +136,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u9jrvy5;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ubnpk7x;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -180,7 +180,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-u9jrvy5 {
+@keyframes jkl-tertiary-flash-ubnpk7x {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u9jrvy5 .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u9jrvy5{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ubnpk7x .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ubnpk7x{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/button/button.scss

@@ -130,7 +130,8 @@ $_flash-animation-name: jkl-tertiary-flash-#{string.unique-id()};
     }
 
     html[data-touchnavigation] &.jkl-button--pressed::before {
-        animation: jkl.easing("focus") jkl.timing("expressive") $_flash-animation-name;
+        animation: jkl.easing("focus") jkl.timing("expressive")
+            $_flash-animation-name;
     }
 
     &--primary,

package/styles/components/card/card.css

@@ -321,7 +321,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 
 .jkl-card-image {
-  --margin: calc(var(--padding, 0) * -1);
+  --margin: calc(
+      var(--padding, 0) * -1
+  );
   width: calc(100% + 2 * var(--padding, 0));
   aspect-ratio: var(--image-aspect-ratio, 3/2);
   margin-inline: var(--margin, 0);

package/styles/components/card/card.scss

@@ -83,7 +83,9 @@
 }
 
 .jkl-card-image {
-    --margin: calc(var(--padding, 0) * -1); // Sett negativ margin tilsvarende padding (fra Card)
+    --margin: calc(
+        var(--padding, 0) * -1
+    ); // Sett negativ margin tilsvarende padding (fra Card)
 
     width: calc(100% + 2 * var(--padding, 0));
     aspect-ratio: var(--image-aspect-ratio, 3/2);

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-uruweob {
+@keyframes jkl-checkbox-checked-u7v26ib {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uruweop {
+@keyframes jkl-checkbox-indeterminate-u7v26jb {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-uruweob 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u7v26ib 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-uruweop 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u7v26jb 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uruweob{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uruweop{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uruweob .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uruweop .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u7v26ib{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u7v26jb{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u7v26ib .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u7v26jb .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/styles/components/checkbox/checkbox.scss

@@ -26,7 +26,9 @@
 }
 
 $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
-$_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.unique-id()};
+$_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.unique-id(
+
+    )};
 
 @keyframes #{$_checkbox-checked-animation-name} {
     0% {
@@ -79,7 +81,8 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         // Checked state:
         &:checked {
             + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-                animation: $_checkbox-checked-animation-name jkl.timing("productive") ease-in-out forwards;
+                animation: $_checkbox-checked-animation-name
+                    jkl.timing("productive") ease-in-out forwards;
                 opacity: 1;
             }
         }
@@ -87,7 +90,8 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         // Indeterminate state:
         &:indeterminate:not(:checked) {
             + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-                animation: $_checkbox-indeterminate-animation-name jkl.timing("productive") ease-in-out forwards;
+                animation: $_checkbox-indeterminate-animation-name
+                    jkl.timing("productive") ease-in-out forwards;
                 opacity: 1;
             }
         }
@@ -128,7 +132,11 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
     }
 
     &__text {
-        margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+        margin: calc(
+                (var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) *
+                    0.5
+            )
+            0;
         translate: 0 jkl.rem(1px);
 
         @include jkl.motion;
@@ -141,7 +149,9 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         height: var(--jkl-checkbox-box-size);
         width: var(--jkl-checkbox-box-size);
 
-        margin-block: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5);
+        margin-block: calc(
+            (var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5
+        );
         margin-inline-end: var(--jkl-spacing-8);
         align-self: flex-start;
         flex-shrink: 0; // Don't allow the mark to shrink in case of really long text

package/styles/components/combobox/combobox.css

@@ -82,7 +82,8 @@
   --jkl-combobox-font-size: var(--jkl-body-font-size);
   --jkl-combobox-line-height: var(--jkl-body-line-height);
   --jkl-combobox-font-weight: var(--jkl-body-font-weight);
-  --jkl-combobox-button-padding: 0.5rem 0.375rem 0.5rem 0.75rem;
+  --jkl-combobox-button-padding: 0.5rem 0.375rem 0.5rem
+      0.75rem;
   --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem 0.5rem 0.5rem;
   --jkl-combobox-input-height: 3rem;
   --jkl-combobox-actions-right: 0.5rem;
@@ -109,7 +110,8 @@
   --jkl-combobox-font-size: var(--jkl-small-font-size);
   --jkl-combobox-line-height: var(--jkl-small-line-height);
   --jkl-combobox-font-weight: var(--jkl-small-font-weight);
-  --jkl-combobox-button-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
+  --jkl-combobox-button-padding: 0.25rem 1.875rem 0.25rem
+      0.5rem;
   --jkl-combobox-button-active-value-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
   --jkl-combobox-input-height: 2rem;
   --jkl-combobox-actions-right: 0;

package/styles/components/combobox/combobox.scss

@@ -54,8 +54,11 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-combobox", "body");
 
-    --jkl-combobox-button-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8} #{jkl.$spacing-12};
-    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8} #{jkl.$spacing-8};
+    --jkl-combobox-button-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8}
+        #{jkl.$spacing-12};
+    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-8} #{jkl.rem(
+            6px
+        )} #{jkl.$spacing-8} #{jkl.$spacing-8};
     --jkl-combobox-input-height: #{jkl.rem(48px)};
     --jkl-combobox-actions-right: #{jkl.$spacing-8};
     --jkl-combobox-actions-top: #{jkl.rem(12px)};
@@ -76,8 +79,11 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 @include jkl.compact-density-variables {
     @include jkl.declare-font-variables("jkl-combobox", "small");
 
-    --jkl-combobox-button-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4} #{jkl.$spacing-8};
-    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-button-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4}
+        #{jkl.$spacing-8};
+    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-4} #{jkl.rem(
+            30px
+        )} #{jkl.$spacing-4} #{jkl.$spacing-8};
     --jkl-combobox-input-height: #{jkl.rem(32px)};
     --jkl-combobox-actions-right: #{jkl.rem(0)};
     --jkl-combobox-actions-top: #{jkl.rem(6px)};
@@ -170,7 +176,10 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         @include jkl.motion;
         transition-property: transform, color;
 
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
+        @include jkl.forced-colors-svg-fallback(
+            $stroke: CanvasText,
+            $fill: CanvasText
+        );
     }
 
     &__menu {
@@ -188,7 +197,10 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         border-top: none;
         border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
         box-sizing: border-box;
-        max-height: calc(calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
+        max-height: calc(
+            calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) *
+                var(--jkl-combobox-input-height)
+        );
     }
 
     &__option {
@@ -254,7 +266,8 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 
             &__marked {
                 border-radius: 6px;
-                box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;
+                box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow)
+                    inset;
                 box-sizing: border-box;
                 border: 1px solid var(--jkl-combobox-marked-value-border);
                 margin: 0 4px;

package/styles/components/datepicker/_calendar.scss

@@ -20,17 +20,20 @@
     color: var(--jkl-calendar-text-color);
 
     @include jkl.comfortable-density {
-        --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);
+        --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16)
+            var(--jkl-spacing-16);
         --jkl-calendar-gap: var(--jkl-spacing-12);
 
         // Custom tweaks for iPhone SE
         @include jkl.screen-to(375px) {
-            --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+            --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
+                var(--jkl-spacing-16);
         }
     }
 
     @include jkl.compact-density {
-        --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+        --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
+            var(--jkl-spacing-16);
         --jkl-calendar-gap: 0;
     }
 

package/styles/components/datepicker/datepicker.css

@@ -38,16 +38,19 @@
   color: var(--jkl-calendar-text-color);
 }
 .jkl .jkl-calendar, .jkl-calendar[data-layout-density=comfortable], .jkl-calendar[data-density=comfortable], [data-layout-density=comfortable] .jkl-calendar, [data-density=comfortable] .jkl-calendar {
-  --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);
+  --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16)
+      var(--jkl-spacing-16);
   --jkl-calendar-gap: var(--jkl-spacing-12);
 }
 @media (width >= 0) and (max-width: 374px) {
   .jkl .jkl-calendar, .jkl-calendar[data-layout-density=comfortable], .jkl-calendar[data-density=comfortable], [data-layout-density=comfortable] .jkl-calendar, [data-density=comfortable] .jkl-calendar {
-    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
+        var(--jkl-spacing-16);
   }
 }
 .jkl-calendar[data-layout-density=compact], .jkl-calendar[data-density=compact], [data-layout-density=compact] .jkl-calendar, [data-density=compact] .jkl-calendar {
-  --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+  --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
+      var(--jkl-spacing-16);
   --jkl-calendar-gap: 0;
 }
 .jkl-calendar__padding {

package/styles/components/datepicker/datepicker.scss

@@ -42,7 +42,8 @@
 
     &--open {
         .jkl-text-input-wrapper {
-            box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+            box-shadow: inset 0 0 0 jkl.rem(1px)
+                    var(--jkl-text-input-focus-color),
                 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
             border-color: var(--jkl-text-input-focus-color);
         }

package/styles/components/feedback/feedback.css

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
-@keyframes jkl-show-uemraho {
+@keyframes jkl-show-uytl86e {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-uemraho 0.25s ease-out;
+  animation: jkl-show-uytl86e 0.25s ease-out;
 }
 
 .jkl-feedback-smileys {

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@keyframes jkl-show-uemraho{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-uemraho .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}
+@keyframes jkl-show-uytl86e{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-uytl86e .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}

package/styles/components/feedback/feedback.scss

@@ -59,7 +59,10 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
     @include jkl.motion;
     transition-property: transform, color;
 
-    @include jkl.forced-colors-svg-fallback($stroke: ButtonFace, $fill: ButtonText);
+    @include jkl.forced-colors-svg-fallback(
+        $stroke: ButtonFace,
+        $fill: ButtonText
+    );
 
     &::before,
     &::after {

package/styles/components/icon/icon.scss

@@ -13,8 +13,8 @@
     --jkl-icon-fill: 0;
 
     font-family: "Fremtind Material Symbols", Arial, Helvetica, sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0),
-        "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0),
+        "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: var(--jkl-icon-size, #{jkl.rem(24px)});

package/styles/components/input-group/_labels.scss

@@ -7,7 +7,9 @@
     pointer-events: none;
 }
 
-$_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.unique-id()};
+$_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.unique-id(
+
+    )};
 
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-form-support-label", "small");
@@ -43,7 +45,10 @@ $_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.uniqu
         height: var(--jkl-form-support-label-icon-size);
         margin: var(--jkl-form-support-label-icon-margin);
 
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: Canvas);
+        @include jkl.forced-colors-svg-fallback(
+            $stroke: CanvasText,
+            $fill: Canvas
+        );
     }
 
     &--error,
@@ -52,8 +57,9 @@ $_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.uniqu
         --color: var(--jkl-color-text-default);
 
         .jkl-form-support-label__icon {
-            animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1) jkl.timing("expressive")
-                $_support-icon-entrance-animation-name forwards;
+            animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1)
+                jkl.timing("expressive") $_support-icon-entrance-animation-name
+                forwards;
         }
     }
 
@@ -83,7 +89,9 @@ $_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.uniqu
 
     --jkl-label-small-margin: 0 0 #{$_label-spacing-small--compact} 0;
     --jkl-label-medium-margin: 0 0 #{$_label-spacing-medium--compact} 0;
-    --jkl-label-large-margin: 0 0 #{$_label-spacing-large--compact} #{jkl.rem(-1px)};
+    --jkl-label-large-margin: 0 0 #{$_label-spacing-large--compact} #{jkl.rem(
+            -1px
+        )};
 }
 
 .jkl-label {

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

@@ -78,7 +78,7 @@
   --color: var(--jkl-color-text-default);
 }
 .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ug3g0e8 forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-unl5y5g forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -153,7 +153,7 @@
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-ug3g0e8 {
+@keyframes jkl-support-icon-entrance-unl5y5g {
   0% {
     margin-right: 0;
     opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-ug3g0e8 .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-ug3g0e8{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
+.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-unl5y5g .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-unl5y5g{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

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

@@ -5,5 +5,8 @@
 @use "labels";
 
 .jkl-text-input-action-button {
-    @include jkl.forced-colors-svg-fallback($stroke: ButtonText, $fill: ButtonFace);
+    @include jkl.forced-colors-svg-fallback(
+        $stroke: ButtonText,
+        $fill: ButtonFace
+    );
 }

package/styles/components/link/link.scss

@@ -25,7 +25,13 @@ $_link-underline-thickness--focus: jkl.rem(2px);
 .jkl-link {
     color: var(--jkl-link-color);
     @include _underline-gradient(var(--jkl-link-color));
-    background-position: 0 calc(100% - (#{$_link-underline-thickness--focus} - #{$_link-underline-thickness}));
+    background-position: 0
+        calc(
+            100% -
+                (
+                    #{$_link-underline-thickness--focus} - #{$_link-underline-thickness}
+                )
+        );
     background-size: $_link-underline-thickness $_link-underline-thickness;
     background-repeat: repeat-x;
     @include jkl.motion("standard", "energetic");
@@ -48,7 +54,13 @@ $_link-underline-thickness--focus: jkl.rem(2px);
     }
 
     &:active {
-        background-position: 0 calc(100% - (#{$_link-underline-thickness--focus} - #{$_link-underline-thickness}));
+        background-position: 0
+            calc(
+                100% -
+                    (
+                        #{$_link-underline-thickness--focus} - #{$_link-underline-thickness}
+                    )
+            );
     }
 
     /* Show arrow after external links, or links opening

package/styles/components/list/list.scss

@@ -49,16 +49,28 @@ $_color-feil--darkbg: #ff8b79;
 @include jkl.light-mode-variables {
     --jkl-list-marker-default: #{_solid-diamond(jkl.$color-granitt)};
     --jkl-list-marker-secondary: #{_outline-diamond(jkl.$color-granitt)};
-    --jkl-list-marker-cross: #{_cross(jkl.$color-functional-error, jkl.$color-granitt)};
-    --jkl-list-marker-check: #{_check(jkl.$color-functional-success, jkl.$color-granitt)};
+    --jkl-list-marker-cross: #{_cross(
+            jkl.$color-functional-error,
+            jkl.$color-granitt
+        )};
+    --jkl-list-marker-check: #{_check(
+            jkl.$color-functional-success,
+            jkl.$color-granitt
+        )};
     --jkl-list-text-color: #{jkl.$color-granitt};
 }
 
 @include jkl.dark-mode-variables {
     --jkl-list-marker-default: #{_solid-diamond(jkl.$color-snohvit)};
     --jkl-list-marker-secondary: #{_outline-diamond(jkl.$color-snohvit)};
-    --jkl-list-marker-cross: #{_cross(jkl.$color-functional-error-dark, jkl.$color-granitt)};
-    --jkl-list-marker-check: #{_check(jkl.$color-functional-success-dark, jkl.$color-granitt)};
+    --jkl-list-marker-cross: #{_cross(
+            jkl.$color-functional-error-dark,
+            jkl.$color-granitt
+        )};
+    --jkl-list-marker-check: #{_check(
+            jkl.$color-functional-success-dark,
+            jkl.$color-granitt
+        )};
     --jkl-list-text-color: #{jkl.$color-snohvit};
 }
 
@@ -145,11 +157,14 @@ $_color-feil--darkbg: #ff8b79;
     }
 
     @include jkl.forced-colors-mode {
-        &:not(.jkl-list--ordered) > .jkl-list__item:not(.jkl-list__item--iconed) {
+        &:not(.jkl-list--ordered)
+            > .jkl-list__item:not(.jkl-list__item--iconed) {
             list-style: disc _solid-diamond(CanvasText);
         }
 
-        & &:not(.jkl-list--ordered):not(.jkl-list--iconed) > .jkl-list__item:not(.jkl-list__item--iconed) {
+        &
+            &:not(.jkl-list--ordered):not(.jkl-list--iconed)
+            > .jkl-list__item:not(.jkl-list__item--iconed) {
             list-style: disc _outline-diamond(CanvasText);
         }