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

package/styles/components/toast/toast.css

@@ -27,11 +27,13 @@
     left: var(--jkl-unit-30);
   }
   .jkl-toast {
-    --background-color: var(--jkl-color-background-container-high);
+    --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
+    --border-color: transparent;
     --jkl-toast-padding: var(--jkl-unit-20);
     color: var(--text-color);
     background-color: var(--background-color);
+    border: 1px solid var(--border-color);
     border-radius: 4px;
     box-sizing: border-box;
     align-items: start;
@@ -97,20 +99,25 @@
     position: absolute;
     inset: calc((var(--tap-size) - 100%) / 2 * -1);
   }
-  .jkl-toast--info, .jkl-toast--warning, .jkl-toast--error, .jkl-toast--success {
-    --text-color: var(--jkl-color-text-on-alert);
-  }
   .jkl-toast--info {
-    --background-color: var(--jkl-color-background-alert-info);
+    --background-color: var(--jkl-color-info-background-container);
+    --text-color: var(--jkl-color-info-text-default);
+    --border-color: var(--jkl-color-info-border-subdued);
   }
   .jkl-toast--warning {
-    --background-color: var(--jkl-color-background-alert-warning);
+    --background-color: var(--jkl-color-warning-background-container);
+    --text-color: var(--jkl-color-warning-text-default);
+    --border-color: var(--jkl-color-warning-border-subdued);
   }
   .jkl-toast--error {
-    --background-color: var(--jkl-color-background-alert-error);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
+    --border-color: var(--jkl-color-error-border-subdued);
   }
   .jkl-toast--success {
-    --background-color: var(--jkl-color-background-alert-success);
+    --background-color: var(--jkl-color-success-background-container);
+    --text-color: var(--jkl-color-success-text-default);
+    --border-color: var(--jkl-color-success-border-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-toast {
@@ -129,12 +136,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uv80qec var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uwmfbw5 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uv80qev var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uwmfbwb var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uv80qec {
+  @keyframes jkl-entering-uwmfbw5 {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -144,7 +151,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uv80qev {
+  @keyframes jkl-exiting-uwmfbwb {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uv80qec var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uv80qev var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uv80qec{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uv80qev{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uwmfbw5 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uwmfbwb var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uwmfbw5{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uwmfbwb{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/components/toast/toast.scss

@@ -31,12 +31,14 @@
     }
 
     .jkl-toast {
-        --background-color: var(--jkl-color-background-container-high);
+        --background-color: var(--jkl-color-background-container);
         --text-color: var(--jkl-color-text-default);
+        --border-color: transparent;
         --jkl-toast-padding: var(--jkl-unit-20);
 
         color: var(--text-color);
         background-color: var(--background-color);
+        border: 1px solid var(--border-color);
         border-radius: 4px;
         box-sizing: border-box;
         align-items: start;
@@ -103,27 +105,28 @@
             }
         }
 
-        &--info,
-        &--warning,
-        &--error,
-        &--success {
-            --text-color: var(--jkl-color-text-on-alert);
-        }
-
         &--info {
-            --background-color: var(--jkl-color-background-alert-info);
+            --background-color: var(--jkl-color-info-background-container);
+            --text-color: var(--jkl-color-info-text-default);
+            --border-color: var(--jkl-color-info-border-subdued);
         }
 
         &--warning {
-            --background-color: var(--jkl-color-background-alert-warning);
+            --background-color: var(--jkl-color-warning-background-container);
+            --text-color: var(--jkl-color-warning-text-default);
+            --border-color: var(--jkl-color-warning-border-subdued);
         }
 
         &--error {
-            --background-color: var(--jkl-color-background-alert-error);
+            --background-color: var(--jkl-color-error-background-container);
+            --text-color: var(--jkl-color-error-text-default);
+            --border-color: var(--jkl-color-error-border-subdued);
         }
 
         &--success {
-            --background-color: var(--jkl-color-background-alert-success);
+            --background-color: var(--jkl-color-success-background-container);
+            --text-color: var(--jkl-color-success-text-default);
+            --border-color: var(--jkl-color-success-border-subdued);
         }
 
         @include jkl.forced-colors-mode {

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

@@ -4,12 +4,12 @@
 $_slider-rounded: jkl.rem(100px);
 
 .jkl-toggle-slider {
-    --jkl-slider-bg: var(--jkl-color-background-container-low);
-    --jkl-slider-pill: var(--jkl-color-background-container-high);
+    --jkl-slider-bg: var(--jkl-color-background-page);
+    --jkl-slider-pill: var(--jkl-color-background-container);
     --jkl-slider-text: var(--jkl-color-text-default);
     --jkl-slider-text--active: var(--jkl-color-text-default);
-    --jkl-slider-focus-color: var(--jkl-color-border-action);
-    --jkl-slider-hover-color: var(--jkl-color-border-action);
+    --jkl-slider-focus-color: var(--jkl-color-border-strong);
+    --jkl-slider-hover-color: var(--jkl-color-border-strong);
 
     @include jkl.use-font-variables("jkl-slider");
 

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

@@ -2,12 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 .jkl-toggle-slider {
-  --jkl-slider-bg: var(--jkl-color-background-container-low);
-  --jkl-slider-pill: var(--jkl-color-background-container-high);
+  --jkl-slider-bg: var(--jkl-color-background-page);
+  --jkl-slider-pill: var(--jkl-color-background-container);
   --jkl-slider-text: var(--jkl-color-text-default);
   --jkl-slider-text--active: var(--jkl-color-text-default);
-  --jkl-slider-focus-color: var(--jkl-color-border-action);
-  --jkl-slider-hover-color: var(--jkl-color-border-action);
+  --jkl-slider-focus-color: var(--jkl-color-border-strong);
+  --jkl-slider-hover-color: var(--jkl-color-border-strong);
   font-size: var(--jkl-slider-font-size);
   line-height: var(--jkl-slider-line-height);
   font-weight: var(--jkl-slider-font-weight);
@@ -106,14 +106,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
   --border-width: 0.0625rem;
-  --switch-padding: 0.25rem;
+  --switch-padding: var(--jkl-unit-05);
   --knob-position: 0;
-  --switch-border-color: var(--jkl-color-border-action);
-  --indicator-color: var(--jkl-color-background-container-high);
-  --knob-border-color: var(--jkl-color-border-action);
-  --knob-color: var(--jkl-color-background-container-high);
+  --switch-border-color: var(--jkl-color-border-strong);
+  --indicator-color: var(--jkl-color-background-container);
+  --knob-border-color: var(--jkl-color-border-strong);
+  --knob-color: var(--jkl-color-background-container);
   --text-color: var(--jkl-color-text-default);
-  --icon-color: var(--jkl-color-text-inverted);
+  --icon-color: var(--jkl-color-text-on-action);
   background: transparent;
   color: var(--text-color);
   padding: 0;
@@ -153,8 +153,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch[aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch {
-  --indicator-color: var(--jkl-color-background-container-inverted);
-  --knob-color: var(--jkl-color-text-inverted);
+  --indicator-color: var(--jkl-color-background-action);
+  --knob-color: var(--jkl-color-text-on-action);
   --knob-position: calc(
       var(--jkl-toggle-switch-width) - var(
               --jkl-toggle-switch-knob-size
@@ -176,7 +176,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-height: var(--jkl-unit-40);
   --jkl-toggle-switch-width: var(--jkl-unit-60);
   --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-  --jkl-toggle-switch-indicator-spacing: 0;
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -198,7 +197,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 .jkl-toggle-switch-widget__slider {
@@ -224,10 +223,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   position: absolute;
   top: 50%;
   right: 100%;
-  margin-right: var(--jkl-toggle-switch-indicator-spacing);
+  font-size: var(--jkl-unit-20);
   transform: translate(0, -50%);
-}
-.jkl-toggle-switch-widget__indicator > .jkl-icon__icon {
-  position: absolute;
-  inset: 0;
 }

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

@@ -1,3 +1,3 @@
-.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-container-low);--jkl-slider-pill:var(--jkl-color-background-container-high);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-action);--jkl-slider-hover-color:var(--jkl-color-border-action);align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-slider-font-size);font-weight:var(--jkl-slider-font-weight);line-height:var(--jkl-slider-line-height);overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{font-size:var(--jkl-slider-legend-font-size);font-weight:var(--jkl-slider-legend-font-weight);line-height:var(--jkl-slider-legend-line-height);margin-bottom:var(--jkl-spacing-8)}.jkl-toggle-slider__legend--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}.jkl-toggle-slider__inputs{background-color:var(--jkl-slider-bg);border:2px solid var(--jkl-slider-bg);border-radius:6.25rem;display:flex;overflow:hidden;position:relative}.jkl-toggle-slider__input{opacity:0;position:absolute}.jkl-toggle-slider__label{align-items:center;color:var(--jkl-slider-pill-text);cursor:pointer;display:flex;justify-content:center;padding:var(--jkl-unit-02) var(--jkl-unit-20);z-index:1;-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;color:var(--jkl-slider-pill-text--active);font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:var(--jkl-motion-timing-expressive);transition-property:width,transform;transition-timing-function:var(--jkl-motion-easing-standard)}@media (min-width:680px){.jkl-toggle-slider{align-items:center;flex-direction:row}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:0.25rem;--knob-position:0;--switch-border-color:var(--jkl-color-border-action);--indicator-color:var(--jkl-color-background-container-high);--knob-border-color:var(--jkl-color-border-action);--knob-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-inverted);background:transparent;color:var(--text-color);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;align-items:center;border-style:none;display:flex;flex-direction:row-reverse;font:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-10);outline:0;outline-style:none;touch-action:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert;outline:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-container-inverted);--knob-color:var(--jkl-color-text-inverted);--knob-position:calc(var(--jkl-toggle-switch-width) - var(
+.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-slider-font-size);font-weight:var(--jkl-slider-font-weight);line-height:var(--jkl-slider-line-height);overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{font-size:var(--jkl-slider-legend-font-size);font-weight:var(--jkl-slider-legend-font-weight);line-height:var(--jkl-slider-legend-line-height);margin-bottom:var(--jkl-spacing-8)}.jkl-toggle-slider__legend--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}.jkl-toggle-slider__inputs{background-color:var(--jkl-slider-bg);border:2px solid var(--jkl-slider-bg);border-radius:6.25rem;display:flex;overflow:hidden;position:relative}.jkl-toggle-slider__input{opacity:0;position:absolute}.jkl-toggle-slider__label{align-items:center;color:var(--jkl-slider-pill-text);cursor:pointer;display:flex;justify-content:center;padding:var(--jkl-unit-02) var(--jkl-unit-20);z-index:1;-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;color:var(--jkl-slider-pill-text--active);font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-toggle-slider__pill{background-color:var(--jkl-slider-pill);border-radius:6.25rem;height:100%;position:absolute;transition-duration:var(--jkl-motion-timing-expressive);transition-property:width,transform;transition-timing-function:var(--jkl-motion-easing-standard)}@media (min-width:680px){.jkl-toggle-slider{align-items:center;flex-direction:row}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-action);background:transparent;color:var(--text-color);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;align-items:center;border-style:none;display:flex;flex-direction:row-reverse;font:var(--jkl-text-style-text-medium);gap:var(--jkl-unit-10);outline:0;outline-style:none;touch-action:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert;outline:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-action);--knob-color:var(--jkl-color-text-on-action);--knob-position:calc(var(--jkl-toggle-switch-width) - var(
               --jkl-toggle-switch-knob-size
-          ) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--jkl-toggle-switch-indicator-spacing:0;align-items:center;background-color:var(--indicator-color);border:var(--border-width) solid var(--switch-border-color);border-radius:9999px;box-sizing:border-box;display:flex;flex-direction:row;height:var(--jkl-toggle-switch-height);overflow:hidden;padding:var(--switch-padding);pointer-events:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--jkl-toggle-switch-width)}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);font-size:var(--jkl-font-size-1);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:var(--knob-position);width:var(--jkl-toggle-switch-knob-size)}.jkl-toggle-switch-widget__knob{background-color:var(--knob-color);border:var(--border-width) solid var(--knob-border-color);border-radius:9999px;inset:0;position:absolute}.jkl-toggle-switch-widget__indicator{margin-right:var(--jkl-toggle-switch-indicator-spacing);position:absolute;right:100%;top:50%;transform:translateY(-50%)}.jkl-toggle-switch-widget__indicator>.jkl-icon__icon{inset:0;position:absolute}
+          ) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);align-items:center;background-color:var(--indicator-color);border:var(--border-width) solid var(--switch-border-color);border-radius:9999px;box-sizing:border-box;display:flex;flex-direction:row;height:var(--jkl-toggle-switch-height);overflow:hidden;padding:var(--switch-padding);pointer-events:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--jkl-toggle-switch-width)}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{box-sizing:border-box;color:var(--icon-color);font-size:var(--jkl-font-size-1);height:var(--jkl-toggle-switch-knob-size);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:var(--knob-position);width:var(--jkl-toggle-switch-knob-size)}.jkl-toggle-switch-widget__knob{background-color:var(--knob-color);border:var(--border-width) solid var(--knob-border-color);border-radius:9999px;inset:0;position:absolute}.jkl-toggle-switch-widget__indicator{font-size:var(--jkl-unit-20);position:absolute;right:100%;top:50%;transform:translateY(-50%)}

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

@@ -7,14 +7,14 @@
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
     --border-width: #{jkl.rem(1px)};
-    --switch-padding: #{jkl.rem(4px)};
+    --switch-padding: var(--jkl-unit-05);
     --knob-position: 0;
-    --switch-border-color: var(--jkl-color-border-action);
-    --indicator-color: var(--jkl-color-background-container-high);
-    --knob-border-color: var(--jkl-color-border-action);
-    --knob-color: var(--jkl-color-background-container-high);
+    --switch-border-color: var(--jkl-color-border-strong);
+    --indicator-color: var(--jkl-color-background-container);
+    --knob-border-color: var(--jkl-color-border-strong);
+    --knob-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --icon-color: var(--jkl-color-text-inverted);
+    --icon-color: var(--jkl-color-text-on-action);
 
     background: transparent;
     color: var(--text-color);
@@ -38,8 +38,8 @@
 
     &[aria-pressed="true"],
     [aria-checked="true"] > & {
-        --indicator-color: var(--jkl-color-background-container-inverted);
-        --knob-color: var(--jkl-color-text-inverted);
+        --indicator-color: var(--jkl-color-background-action);
+        --knob-color: var(--jkl-color-text-on-action);
         --knob-position: calc(
             var(--jkl-toggle-switch-width) - var(
                     --jkl-toggle-switch-knob-size
@@ -66,7 +66,6 @@
     --jkl-toggle-switch-height: var(--jkl-unit-40);
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-    --jkl-toggle-switch-indicator-spacing: 0;
 
     position: relative;
     box-sizing: border-box;
@@ -116,13 +115,7 @@
         position: absolute;
         top: 50%;
         right: 100%;
-        margin-right: var(--jkl-toggle-switch-indicator-spacing);
+        font-size: var(--jkl-unit-20);
         transform: translate(0, -50%);
-
-        & > .jkl-icon__icon {
-            // Uten dette får ikonet feil alignment. Mulig bug i ikonpakken?
-            position: absolute;
-            inset: 0;
-        }
     }
 }

package/styles/components/tooltip/tooltip.css

@@ -12,10 +12,10 @@
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-container-inverted);
+    --background-color: var(--jkl-color-background-action);
     font: var(--jkl-text-style-paragraph-small);
     background-color: var(--background-color);
-    color: var(--jkl-color-text-inverted);
+    color: var(--jkl-color-text-on-action);
     display: inline-block;
     min-width: min-content;
     max-width: min(19.375rem, 100%);
@@ -66,7 +66,7 @@
     --button-color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-tooltip-question-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-tooltip-question-button::after {

package/styles/components/tooltip/tooltip.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-container-inverted);background-color:var(--background-color);color:var(--jkl-color-text-inverted);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
+@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-action);background-color:var(--background-color);color:var(--jkl-color-text-on-action);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}

package/styles/components/tooltip/tooltip.scss

@@ -18,11 +18,11 @@ $_focus-ring-width: jkl.rem(2px);
 
     .jkl-tooltip-content {
         --content-padding: var(--jkl-unit-15);
-        --background-color: var(--jkl-color-background-container-inverted);
+        --background-color: var(--jkl-color-background-action);
 
         @include jkl.text-style("paragraph-small");
         background-color: var(--background-color);
-        color: var(--jkl-color-text-inverted);
+        color: var(--jkl-color-text-on-action);
         display: inline-block;
         min-width: min-content;
         max-width: min(jkl.rem(310px),
@@ -70,4 +70,4 @@ $_focus-ring-width: jkl.rem(2px);
             min-height: 44px;
         }
     }
-}
+}