@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.2

package/styles/components/modal/modal.scss

@@ -1,96 +1,7 @@
 @charset "UTF-8";
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-modal-container,
-    .jkl-modal-overlay {
-        position: fixed;
-        inset: 0;
-    }
-
-    .jkl-modal-container {
-        z-index: jkl.$z-index--modal;
-        display: flex;
-
-        &[aria-hidden="true"] {
-            display: none;
-        }
-    }
-
-    .jkl-modal-overlay {
-        background-color: rgb(27 25 23 / 80%);
-    }
-
-    .jkl-modal {
-        --jkl-modal-padding: var(--jkl-unit-50);
-        --jkl-modal-min-width: #{jkl.rem(220px)};
-        --jkl-modal-max-width: #{jkl.rem(660px)};
-
-        margin: auto;
-        z-index: jkl.$z-index--modal;
-        position: relative;
-
-        background-color: var(--jkl-color-background-container-high);
-        border-radius: jkl.rem(2px);
-        box-shadow: jkl.$shadow-task-card;
-
-        width: 100%;
-        min-width: var(--jkl-modal-min-width);
-        max-width: var(--jkl-modal-max-width);
-        max-height: 90vh;
-        overflow: auto;
-
-        padding: var(--jkl-modal-padding);
-        display: flex;
-        flex-direction: column;
-
-        @include jkl.forced-colors-mode {
-            border-color: CanvasText;
-        }
-
-        @include jkl.small-device {
-            margin: auto var(--jkl-unit-30);
-        }
-    }
-
-    .jkl-modal-header {
-        --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
-
-        @include jkl.small-device {
-            --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
-        }
-
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        margin: var(--jkl-modal-header-margin);
-        gap: var(--jkl-modal-gap);
-    }
-
-    .jkl-modal-body {
-        @include jkl.text-style("paragraph-medium");
-    }
-
-    .jkl-modal-title {
-        @include jkl.text-style("heading-3");
-    }
-
-    .jkl-modal-actions {
-        --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
-
-        @include jkl.small-device {
-            --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
-        }
-
-        margin: var(--jkl-modal-actions-margin);
-        display: flex;
-        flex-direction: column;
-        gap: var(--jkl-unit-20);
-
-        @include jkl.screen-from(60ch) {
-            flex-direction: row-reverse;
-            align-self: flex-end;
-        }
-    }
-}
+@forward "layout";
+@forward "overlay";
+@forward "modal-base";
+@forward "motion";
+@forward "placement";
+@forward "parts";

package/styles/components/nav-link/nav-link.css

@@ -5,7 +5,7 @@
   .jkl-nav-link {
     color: var(--jkl-color-text-default);
     box-sizing: border-box;
-    font-weight: var(--jkl-typography-weight-normal);
+    font-weight: var(--jkl-font-weight-normal);
     text-decoration: none;
     position: relative;
     padding-right: 0.15rem;
@@ -35,7 +35,7 @@
     color: var(--jkl-color-text-subdued);
   }
   .jkl-nav-link:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
@@ -45,13 +45,13 @@
     margin-inline-start: 0.1em;
     margin-block-start: -0.1em;
     vertical-align: middle;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform;
   }
   .jkl-nav-link--active {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-nav-link--back {

package/styles/components/nav-link/nav-link.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);font-weight:var(--jkl-typography-weight-normal);margin-right:-.15rem;outline:0;outline-style:none;padding-right:.15rem;position:relative;text-decoration:none}.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert;outline:revert;outline-style:revert}.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:hover:not(:focus){color:var(--jkl-color-text-subdued)}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-nav-link:focus-visible .jkl-nav-link__icon,.jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon{transform:translateX(.3rem)}.jkl-nav-link__icon{-webkit-margin-start:.1em;margin-inline-start:.1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;vertical-align:middle}.jkl-nav-link--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.15rem;margin-right:0;padding-left:.15rem;padding-right:0}.jkl-nav-link--back .jkl-nav-link__icon{margin-inline:0 .1em}.jkl-nav-link--back:focus-visible .jkl-nav-link__icon,.jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon{padding-left:0;transform:translateX(-.3rem)}}
+@layer jokul.components{.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);font-weight:var(--jkl-font-weight-normal);margin-right:-.15rem;outline:0;outline-style:none;padding-right:.15rem;position:relative;text-decoration:none}.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert;outline:revert;outline-style:revert}.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:hover:not(:focus){color:var(--jkl-color-text-subdued)}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-nav-link:focus-visible .jkl-nav-link__icon,.jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon{transform:translateX(.3rem)}.jkl-nav-link__icon{-webkit-margin-start:.1em;margin-inline-start:.1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;transition-duration:var(--jkl-motion-timing-productive);transition-property:transform;transition-timing-function:var(--jkl-motion-easing-standard);vertical-align:middle}.jkl-nav-link--active{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.15rem;margin-right:0;padding-left:.15rem;padding-right:0}.jkl-nav-link--back .jkl-nav-link__icon{margin-inline:0 .1em}.jkl-nav-link--back:focus-visible .jkl-nav-link__icon,.jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon{padding-left:0;transform:translateX(-.3rem)}}

package/styles/components/nav-link/nav-link.scss

@@ -1,11 +1,11 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-nav-link {
         color: var(--jkl-color-text-default);
 
         box-sizing: border-box;
-        font-weight: var(--jkl-typography-weight-normal);
+        font-weight: var(--jkl-font-weight-normal);
         text-decoration: none;
         position: relative;
 

package/styles/components/pagination/development/styles.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 .pagination-example {
     display: flex;

package/styles/components/pagination/pagination.css

@@ -31,12 +31,12 @@
     color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-pagination-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-pagination-button--current {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-pagination-button--elipsis {

package/styles/components/pagination/pagination.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-pagination{display:flex}.jkl-pagination__pages{align-items:center;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-pagination-button{--button-size:var(--jkl-unit-40);all:unset;align-items:center;border-radius:.1875rem;color:var(--jkl-color-text-interactive);cursor:pointer;display:flex;height:var(--button-size);justify-content:center;min-width:var(--button-size);text-align:center;-webkit-user-select:none;user-select:none}.jkl-pagination-button:hover:not(:focus){color:var(--jkl-color-text-interactive-hover)}.jkl-pagination-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-pagination-button--current{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-pagination-button--elipsis{display:block;height:var(--button-size);text-align:center;-webkit-user-select:none;user-select:none;width:var(--button-size)}}
+@layer jokul.components{.jkl-pagination{display:flex}.jkl-pagination__pages{align-items:center;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-pagination-button{--button-size:var(--jkl-unit-40);all:unset;align-items:center;border-radius:.1875rem;color:var(--jkl-color-text-interactive);cursor:pointer;display:flex;height:var(--button-size);justify-content:center;min-width:var(--button-size);text-align:center;-webkit-user-select:none;user-select:none}.jkl-pagination-button:hover:not(:focus){color:var(--jkl-color-text-interactive-hover)}.jkl-pagination-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-pagination-button--current{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-pagination-button--elipsis{display:block;height:var(--button-size);text-align:center;-webkit-user-select:none;user-select:none;width:var(--button-size)}}

package/styles/components/pagination/pagination.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-pagination {

package/styles/components/popover/popover.css

@@ -2,27 +2,26 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-    }
-  }
-  [data-theme=light] {
-    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-  }
   .jkl-popover {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --shadow-color: rgb(49 48 48 / 20%);
+    --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     padding: var(--popover-padding, 0);
     z-index: 10000;
-    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
-    background-color: var(--jkl-color-background-container-high);
+    box-shadow: 0 4px 20px 0 var(--shadow-color);
+    background-color: var(--jkl-color-background-container);
     border-radius: var(--jkl-border-radius-s);
   }
+  .jkl-popover:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-popover-trigger:focus {
+    outline: 0;
+  }
+  .jkl-popover-trigger:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
 }

package/styles/components/popover/popover.min.css

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-box-shadow:rgba(49,48,48,.2)}}[data-theme=light]{--jkl-datepicker-box-shadow:rgba(49,48,48,.2)}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-box-shadow:rgba(0,0,0,.5)}}[data-theme=dark]{--jkl-datepicker-box-shadow:rgba(0,0,0,.5)}.jkl-popover{background-color:var(--jkl-color-background-container-high);border-radius:var(--jkl-border-radius-s);box-shadow:0 4px 20px 0 var(--jkl-datepicker-box-shadow);padding:var(--popover-padding,0);z-index:10000}}
+@layer jokul.components{.jkl-popover{--shadow-color:rgba(49,48,48,.2);--shadow-color:light-dark(rgba(49,48,48,.2),rgba(0,0,0,.5));background-color:var(--jkl-color-background-container);border-radius:var(--jkl-border-radius-s);box-shadow:0 4px 20px 0 var(--shadow-color);padding:var(--popover-padding,0);z-index:10000}.jkl-popover:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-popover-trigger:focus{outline:0}.jkl-popover-trigger:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}

package/styles/components/popover/popover.scss

@@ -1,20 +1,30 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-    }
-
     .jkl-popover {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+        --shadow-color: rgb(49 48 48 / 20%);
+        --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
         padding: var(--popover-padding, 0);
         z-index: jkl.$z-index--floating;
-        box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
-        background-color: var(--jkl-color-background-container-high);
+        box-shadow: 0 4px 20px 0 var(--shadow-color);
+        background-color: var(--jkl-color-background-container);
         border-radius: var(--jkl-border-radius-s);
+
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
+    }
+
+    .jkl-popover-trigger {
+        &:focus {
+            outline: 0;
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
     }
 }

package/styles/components/progress-bar/progress-bar.css

@@ -3,8 +3,8 @@
  */
 @layer jokul.components {
   .jkl-progress-bar {
-    --track-color: var(--jkl-color-border-separator);
-    --bar-color: var(--jkl-color-border-input-focus);
+    --track-color: var(--jkl-color-border-subdued);
+    --bar-color: var(--jkl-color-border-strong);
     --bar-height: 0.25rem;
     background-color: var(--track-color);
     border-radius: 6.25rem;
@@ -25,12 +25,36 @@
       background-color: CanvasText;
     }
   }
+  .jkl-progress-bar {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-progress-bar {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-progress-bar:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
   .jkl-progress-bar__tracker {
     transition-property: width;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u8tpbe9 {
+  @keyframes jkl-downcount-upzg6xb {
     from {
       width: 100%;
     }

package/styles/components/progress-bar/progress-bar.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}@keyframes jkl-downcount-u8tpbe9{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar{border-style:none;outline:0;outline-style:none}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-progress-bar{border-style:revert;outline:revert;outline-style:revert}.jkl-progress-bar:active,.jkl-progress-bar:focus,.jkl-progress-bar:hover{outline:revert;outline-style:revert}}.jkl-progress-bar:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-progress-bar__tracker{transition-duration:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-upzg6xb{0%{width:100%}to{width:0}}}

package/styles/components/progress-bar/progress-bar.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use "../../core/jkl";
+@use "../../jkl";
 @use "../../shared/track/track";
 
 $_downcount: jkl-downcount-#{string.unique-id()};
@@ -7,6 +7,11 @@ $_downcount: jkl-downcount-#{string.unique-id()};
 @layer jokul.components {
     .jkl-progress-bar {
         @include track.track;
+        @include jkl.reset-outline;
+
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
 
         &__tracker {
             transition-property: width;

package/styles/components/radio-button/radio-button.css

@@ -2,23 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-radio-button-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-radio-button-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-radio-button-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-radio-button-error-color: #d79ba5;
-  }
   .jkl-radio-button {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-radio-button-error-color: #ab2e43;
+    --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     display: flex;
     position: relative;
   }
@@ -44,45 +32,74 @@
   }
   .jkl-radio-button__input {
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0 auto 0 0;
-    width: 1lh;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 1lh;
+    inline-size: 1lh;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-radio-button__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-radio-button__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-radio-button__label {
     cursor: pointer;
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-  .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-radio-button__label::before {
     content: "radio_button_unchecked";
     margin-inline-end: 0.25em;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", 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);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
-  .jkl-radio-button__label:has(+ :checked)::before {
+  .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-radio-button__input:is(:hover, :active) + .jkl-radio-button__label, .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
+    --jkl-icon-weight: var(--jkl-font-weight-bold);
+  }
+  .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
     content: "radio_button_checked";
   }
-  .jkl-radio-button__label:has(+ [aria-invalid=true])::before {
+  .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
     color: var(--jkl-radio-button-error-color);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
@@ -98,6 +115,6 @@
   .jkl-radio-button + .jkl-form-support-label {
     margin-left: 1.75em;
     margin-top: 0.25lh;
-    margin-bottom: var(--jkl-unit-base);
+    margin-bottom: var(--jkl-unit-10);
   }
 }

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

@@ -1 +1 @@
-@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-radio-button-error-color:#ab2e43}}[data-theme=light]{--jkl-radio-button-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-radio-button-error-color:#d79ba5}}[data-theme=dark]{--jkl-radio-button-error-color:#d79ba5}.jkl-radio-button{border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.jkl-radio-button__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:400}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-radio-button__label:has(+:checked):before{content:"radio_button_checked"}.jkl-radio-button__label:has(+[aria-invalid=true]):before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-base);margin-left:1.75em;margin-top:.25lh}}
+@layer jokul.components{.jkl-radio-button{--jkl-radio-button-error-color:#ab2e43;--jkl-radio-button-error-color:light-dark(#ab2e43,#d79ba5);border-style:none;display:flex;outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-10);margin-left:1.75em;margin-top:.25lh}}

package/styles/components/radio-button/radio-button.scss

@@ -1,33 +1,35 @@
 @charset "UTF-8";
 @use "sass:string";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
+@use "../../jkl";
 @use "../icon/base-styles" as icon;
 
 @layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-radio-button-error-color: #ab2e43;
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-radio-button-error-color: #d79ba5;
-    }
-
     .jkl-radio-button {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+        --jkl-radio-button-error-color: #ab2e43;
+        --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
         display: flex;
         position: relative;
 
         @include jkl.reset-outline;
 
         &__input {
-            // Hide native radio button
+            // Keep the real input on top of the icon so automation tools can target it.
             position: absolute;
-            opacity: 0;
-            pointer-events: none;
-            // Make sure that when the browser scrolls here because of focus, the control
-            // is positioned below the label so that the label becomes visible.
-            inset: 0 auto 0 0;
-            width: 1lh;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            block-size: 1lh;
+            inline-size: 1lh;
+            margin: 0;
+            padding: 0;
+            cursor: pointer;
+            z-index: 1;
+            appearance: none;
+            background: transparent;
+            border: 0;
+
+            @include jkl.reset-outline;
         }
 
         &__label {
@@ -39,31 +41,38 @@
 
             @include jkl.text-style("text-medium");
 
-            &:hover,
-            &:active {
-                --jkl-icon-weight: #{jkl.$icon-weight-bold};
-            }
-
             &::before {
                 content: "radio_button_unchecked";
                 margin-inline-end: 0.25em;
 
                 @include icon.base-styles;
             }
+        }
 
-            &:has(+ :checked)::before {
-                content: "radio_button_checked";
-            }
+        &__input:focus-visible + &__label::before {
+            border-radius: var(--jkl-border-radius-full);
 
-            &:has(+ [aria-invalid="true"])::before {
-                color: var(--jkl-radio-button-error-color);
-            }
+            @include jkl.focus-outline;
+        }
+
+        &__input:is(:hover, :active) + &__label,
+        &__label:hover,
+        &__label:active {
+            --jkl-icon-weight: #{jkl.$font-weight-bold};
+        }
+
+        &__input:checked + &__label::before {
+            content: "radio_button_checked";
+        }
+
+        &__input[aria-invalid="true"] + &__label::before {
+            color: var(--jkl-radio-button-error-color);
         }
 
         & + &,
         /* Ta høyde for at det rendres support label etter radio button inntil videre */
-       .jkl-dormant-form-support-label + &,
-       .jkl-form-support-label + & {
+        .jkl-dormant-form-support-label + &,
+        .jkl-form-support-label + & {
             margin-top: 0.75lh;
         }
 
@@ -85,4 +94,4 @@
             margin-bottom: jkl.$unit-10;
         }
     }
-}
+}

package/styles/components/radio-panel/development/styles.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl/" as jkl;
+@use "../../jkl/" as jkl;
 
 .input-panel-example {
     &__season-tag {