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

package/styles/components/modal/modal.css

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
+  /* Base layout */
   .jkl-modal-container,
   .jkl-modal-overlay {
     position: fixed;
@@ -10,29 +11,46 @@
   .jkl-modal-container {
     z-index: 9000;
     display: flex;
+    align-items: center;
+    justify-content: center;
   }
   .jkl-modal-container[aria-hidden=true] {
-    display: none;
+    visibility: hidden;
+    pointer-events: none;
   }
+}
+@layer jokul.components {
   .jkl-modal-overlay {
     background-color: rgba(27, 25, 23, 0.8);
+    opacity: 0;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-property: opacity;
+  }
+  .jkl-modal-container:not([aria-hidden=true]) .jkl-modal-overlay {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .jkl-modal-overlay {
+      transition-duration: 0ms;
+    }
   }
+}
+@layer jokul.components {
   .jkl-modal {
-    --jkl-modal-padding: var(--jkl-unit-50);
-    --jkl-modal-min-width: 13.75rem;
-    --jkl-modal-max-width: 41.25rem;
-    margin: auto;
+    --margin: var(--jkl-spacing-m);
+    container-type: inline-size;
+    box-sizing: border-box;
+    margin: var(--margin);
+    padding: var(--modal-padding, var(--jkl-unit-40));
     z-index: 9000;
-    position: relative;
-    background-color: var(--jkl-color-background-container-high);
-    border-radius: 0.125rem;
+    background-color: var(--jkl-color-background-container);
+    border-radius: var(--jkl-border-radius-l);
     box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
-    width: 100%;
-    min-width: var(--jkl-modal-min-width);
-    max-width: var(--jkl-modal-max-width);
+    width: min(100vw - 2 * var(--margin), var(--modal-width, 60ch));
+    max-width: none;
     max-height: 90vh;
     overflow: auto;
-    padding: var(--jkl-modal-padding);
     display: flex;
     flex-direction: column;
   }
@@ -41,26 +59,100 @@
       border-color: CanvasText;
     }
   }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal {
-      margin: auto var(--jkl-unit-30);
+}
+@layer jokul.components {
+  .jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 0px;
+    --jkl-modal-slide-y: 12px;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-property: visibility;
+    transition-duration: 0ms;
+  }
+  .jkl-modal-container--slide-in[aria-hidden=true] {
+    display: flex;
+    visibility: hidden;
+    pointer-events: none;
+    transition-delay: var(--jkl-motion-timing-expressive);
+  }
+  .jkl-modal-container--slide-in:not([aria-hidden=true]) {
+    visibility: visible;
+    transition-delay: 0ms;
+  }
+  .jkl-modal-container--slide-in .jkl-modal {
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-property: transform, opacity;
+    transform: translate(var(--jkl-modal-slide-x), var(--jkl-modal-slide-y));
+    opacity: 0;
+    will-change: transform, opacity;
+  }
+  .jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .jkl-modal-container--slide-in .jkl-modal {
+      transition-duration: 0ms;
     }
   }
+}
+@layer jokul.components {
+  /* Placement: bottom */
+  .jkl-modal-container--placement-bottom {
+    align-items: flex-end;
+  }
+  .jkl-modal-container--placement-bottom.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 0px;
+    --jkl-modal-slide-y: 24px;
+  }
+  .jkl-modal-container--placement-bottom .jkl-modal {
+    --margin: 0px;
+    width: min(100vw, var(--modal-width, 100vw));
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  /* Placement: left */
+  .jkl-modal-container--placement-left {
+    justify-content: flex-start;
+  }
+  .jkl-modal-container--placement-left.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: -24px;
+    --jkl-modal-slide-y: 0px;
+  }
+  .jkl-modal-container--placement-left .jkl-modal {
+    height: 100%;
+    max-height: 100%;
+    margin-block: 0;
+    margin-inline-start: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  /* Placement: right */
+  .jkl-modal-container--placement-right {
+    justify-content: flex-end;
+  }
+  .jkl-modal-container--placement-right.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 24px;
+    --jkl-modal-slide-y: 0px;
+  }
+  .jkl-modal-container--placement-right .jkl-modal {
+    height: 100%;
+    max-height: 100%;
+    margin-block: 0;
+    margin-inline-end: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+@layer jokul.components {
   .jkl-modal-header {
     --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
-  }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal-header {
-      --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
-    }
-  }
-  .jkl-modal-header {
     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 {
     font: var(--jkl-text-style-paragraph-medium);
@@ -69,20 +161,12 @@
     font: var(--jkl-text-style-heading-3);
   }
   .jkl-modal-actions {
-    --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
-  }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal-actions {
-      --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
-    }
-  }
-  .jkl-modal-actions {
-    margin: var(--jkl-modal-actions-margin);
+    margin-block-start: var(--jkl-unit-50);
     display: flex;
     flex-direction: column;
-    gap: var(--jkl-unit-20);
+    gap: var(--jkl-unit-15) var(--jkl-unit-20);
   }
-  @media (min-width: 60ch) {
+  @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
     .jkl-modal-actions {
       flex-direction: row-reverse;
       align-self: flex-end;

package/styles/components/modal/modal.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:rgba(27,25,23,.8)}.jkl-modal{--jkl-modal-padding:var(--jkl-unit-50);--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem rgba(37,42,49,.03);display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto var(--jkl-unit-30)}}.jkl-modal-header{--jkl-modal-header-margin:0 0 var(--jkl-unit-20)}@media (width >= 0) and (max-width:679px){.jkl-modal-header{--jkl-modal-header-margin:0 0 var(--jkl-unit-15)}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font:var(--jkl-text-style-paragraph-medium)}.jkl-modal-title{font:var(--jkl-text-style-heading-3)}.jkl-modal-actions{--jkl-modal-actions-margin:var(--jkl-unit-50) 0 0 0}@media (width >= 0) and (max-width:679px){.jkl-modal-actions{--jkl-modal-actions-margin:var(--jkl-unit-40) 0 0 0}}.jkl-modal-actions{display:flex;flex-direction:column;gap:var(--jkl-unit-20);margin:var(--jkl-modal-actions-margin)}@media (min-width:60ch){.jkl-modal-actions{align-self:flex-end;flex-direction:row-reverse}}}
+@layer jokul.components{.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{align-items:center;display:flex;justify-content:center;z-index:9000}.jkl-modal-container[aria-hidden=true]{pointer-events:none;visibility:hidden}}@layer jokul.components{.jkl-modal-overlay{background-color:rgba(27,25,23,.8);opacity:0;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-entrance)}.jkl-modal-container:not([aria-hidden=true]) .jkl-modal-overlay{opacity:1}@media (prefers-reduced-motion:reduce){.jkl-modal-overlay{transition-duration:0s}}}@layer jokul.components{.jkl-modal{--margin:var(--jkl-spacing-m);background-color:var(--jkl-color-background-container);border-radius:var(--jkl-border-radius-l);box-shadow:0 .25rem .75rem rgba(37,42,49,.03);box-sizing:border-box;container-type:inline-size;display:flex;flex-direction:column;margin:var(--margin);max-height:90vh;max-width:none;overflow:auto;padding:var(--modal-padding,var(--jkl-unit-40));width:min(100vw - 2 * var(--margin),var(--modal-width,60ch));z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}}@layer jokul.components{.jkl-modal-container--slide-in{--jkl-modal-slide-x:0px;--jkl-modal-slide-y:12px;transition-duration:var(--jkl-motion-timing-expressive);transition-duration:0s;transition-property:visibility;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-modal-container--slide-in[aria-hidden=true]{display:flex;pointer-events:none;transition-delay:var(--jkl-motion-timing-expressive);visibility:hidden}.jkl-modal-container--slide-in:not([aria-hidden=true]){transition-delay:0s;visibility:visible}.jkl-modal-container--slide-in .jkl-modal{opacity:0;transform:translate(var(--jkl-modal-slide-x),var(--jkl-modal-slide-y));transition-duration:var(--jkl-motion-timing-expressive);transition-property:transform,opacity;transition-timing-function:var(--jkl-motion-easing-entrance);will-change:transform,opacity}.jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal{opacity:1;transform:translate(0)}@media (prefers-reduced-motion:reduce){.jkl-modal-container--slide-in .jkl-modal{transition-duration:0s}}}@layer jokul.components{.jkl-modal-container--placement-bottom{align-items:flex-end}.jkl-modal-container--placement-bottom.jkl-modal-container--slide-in{--jkl-modal-slide-x:0px;--jkl-modal-slide-y:24px}.jkl-modal-container--placement-bottom .jkl-modal{--margin:0px;border-bottom-left-radius:0;border-bottom-right-radius:0;width:min(100vw,var(--modal-width,100vw))}.jkl-modal-container--placement-left{justify-content:flex-start}.jkl-modal-container--placement-left.jkl-modal-container--slide-in{--jkl-modal-slide-x:-24px;--jkl-modal-slide-y:0px}.jkl-modal-container--placement-left .jkl-modal{height:100%;margin-block:0;max-height:100%;-webkit-margin-start:0;border-bottom-left-radius:0;border-top-left-radius:0;margin-inline-start:0}.jkl-modal-container--placement-right{justify-content:flex-end}.jkl-modal-container--placement-right.jkl-modal-container--slide-in{--jkl-modal-slide-x:24px;--jkl-modal-slide-y:0px}.jkl-modal-container--placement-right .jkl-modal{height:100%;margin-block:0;max-height:100%;-webkit-margin-end:0;border-bottom-right-radius:0;border-top-right-radius:0;margin-inline-end:0}.jkl-modal-header{--jkl-modal-header-margin:0 0 var(--jkl-unit-20);align-items:center;display:flex;flex-direction:row;justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font:var(--jkl-text-style-paragraph-medium)}.jkl-modal-title{font:var(--jkl-text-style-heading-3)}.jkl-modal-actions{-webkit-margin-before:var(--jkl-unit-50);display:flex;flex-direction:column;gap:var(--jkl-unit-15) var(--jkl-unit-20);margin-block-start:var(--jkl-unit-50)}}@layer jokul.components{@container (width > 35ch  ){.jkl-modal-actions{align-self:flex-end;flex-direction:row-reverse}}}

package/styles/components/modal/modal.scss

@@ -1,96 +1,7 @@
 @charset "UTF-8";
-@use "../../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

@@ -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 {

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-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-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: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)}}
+@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/pagination/pagination.css

@@ -31,7 +31,7 @@
     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 {

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: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)}}
+@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/popover/popover.css

@@ -10,7 +10,18 @@
     padding: var(--popover-padding, 0);
     z-index: 10000;
     box-shadow: 0 4px 20px 0 var(--shadow-color);
-    background-color: var(--jkl-color-background-container-high);
+    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{.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-high);border-radius:var(--jkl-border-radius-s);box-shadow:0 4px 20px 0 var(--shadow-color);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

@@ -10,7 +10,21 @@
         padding: var(--popover-padding, 0);
         z-index: jkl.$z-index--floating;
         box-shadow: 0 4px 20px 0 var(--shadow-color);
-        background-color: var(--jkl-color-background-container-high);
+        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: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u9avzon {
+  @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:var(--jkl-motion-timing-productive);transition-property:width;transition-timing-function:var(--jkl-motion-easing-standard)}@keyframes jkl-downcount-u9avzon{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

@@ -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

@@ -32,10 +32,37 @@
   }
   .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;
@@ -61,10 +88,18 @@
     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 {

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

@@ -1 +1 @@
-@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{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.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__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-10);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

@@ -15,14 +15,21 @@
         @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 {
@@ -40,20 +47,32 @@
 
                 @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;
         }
 
@@ -75,4 +94,4 @@
             margin-bottom: jkl.$unit-10;
         }
     }
-}
+}