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

package/styles/{styles.css → components.css}

@@ -21,15 +21,12 @@
   }
   .jkl-autosuggest__no-hits-message {
     padding: var(--jkl-autosuggest-option-padding);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
   }
   .jkl-autosuggest__menu {
-    background-color: var(--jkl-color-background-container-high);
-    border: 0.125rem solid var(--jkl-color-border-input-focus);
+    background-color: var(--jkl-color-background-container);
+    border: 0.125rem solid var(--jkl-color-border-strong);
     border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
@@ -49,10 +46,7 @@
     padding: 0;
   }
   .jkl-autosuggest__item {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: unset;
     display: flex;
     align-items: center;
@@ -60,8 +54,8 @@
     background-color: var(--jkl-color-background-interactive);
     min-height: var(--jkl-autosuggest-option-height);
     text-align: left;
-    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, background-color;
     position: relative;
     padding: var(--jkl-autosuggest-option-padding);
@@ -83,8 +77,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -92,27 +86,24 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -121,11 +112,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {
@@ -172,10 +163,7 @@
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-text-input__input {
     outline: 0;
@@ -233,43 +221,22 @@
     margin: -0.125rem 0.25rem;
   }
 }
-@layer jokul.theme {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-icon-grade: 0;
-    }
-  }
-  [data-theme=light] {
-    --jkl-icon-grade: 0;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-icon-grade: -25;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-icon-grade: -25;
-  }
-}
 @layer jokul.components {
   .jkl-icon {
     --jkl-icon-fill: 0;
     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-icon--bold {
-    --jkl-icon-weight: var(--jkl-icon-weight-bold);
-  }
   .jkl-icon--filled {
     --jkl-icon-fill: 1;
   }
@@ -277,8 +244,8 @@
     display: block;
   }
   .jkl-icon-red-cross {
-    --red-cross-circle: var(--jkl-color-background-alert-error);
-    --red-cross-path: var(--jkl-color-text-on-alert);
+    --red-cross-circle: var(--jkl-color-error-background-action);
+    --red-cross-path: var(--jkl-color-error-text-on-action);
     width: 1.3em;
     height: 1.3em;
   }
@@ -289,8 +256,8 @@
     fill: var(--red-cross-circle);
   }
   .jkl-icon-green-check {
-    --green-check-circle: var(--jkl-color-background-alert-success);
-    --green-check-path: var(--jkl-color-text-on-alert);
+    --green-check-circle: var(--jkl-color-success-background-action);
+    --green-check-path: var(--jkl-color-success-text-on-action);
     width: 1.3em;
     height: 1.3em;
   }
@@ -309,9 +276,9 @@
   .jkl-animated-horizontal-arrows__slider,
   .jkl-animated-vertical-arrows__slider {
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 250ms;
-    transition-delay: calc(250ms * 0.3333333333);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-delay: calc(var(--jkl-motion-timing-expressive) * 0.3333333333);
     transition-property: transform;
   }
   .jkl-animated-horizontal-arrows__arrow,
@@ -339,8 +306,8 @@
     transform: translate3d(-50%, 0, 0);
   }
   .jkl-icons-animated__plus {
-    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: transform;
     transform-origin: 50% 50%;
   }
@@ -359,8 +326,8 @@
     position: relative;
     transition-property: box-shadow;
     padding: 0;
-    transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-focus);
+    transition-duration: var(--jkl-motion-timing-snappy);
   }
   .jkl-icon-button {
     outline: 0;
@@ -390,7 +357,7 @@
     display: revert;
   }
   .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-icon-button:hover {
@@ -436,17 +403,14 @@
     --jkl-form-support-label-icon-size: 1.25rem;
     --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem 0;
     --color: var(--jkl-color-text-subdued);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    font: var(--jkl-text-style-text-small);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
     display: flex;
     margin: var(--jkl-form-support-label-margin);
     color: var(--color);
     transition-property: color;
-    transition-delay: 150ms;
+    transition-delay: var(--jkl-motion-timing-productive);
   }
   .jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
     opacity: 0;
@@ -467,7 +431,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uyjs4yv forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ufcxafr forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -487,22 +451,13 @@
     color: var(--jkl-color-text-default);
   }
   .jkl-label--small {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-label--medium {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-label--large {
-    font-size: var(--jkl-font-size-5);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-large);
   }
   .jkl-label--sr-only {
     border: 0 !important;
@@ -521,10 +476,7 @@
     top: -0.1ex;
   }
   .jkl-input-group-description {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     margin-block-end: var(--jkl-spacing-8);
     max-inline-size: 50ch;
@@ -533,14 +485,14 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uyjs4yv {
+  @keyframes jkl-support-icon-entrance-ufcxafr {
     0% {
       margin-right: 0;
       opacity: 0;
       transform: scale(1);
     }
     30% {
-      margin-right: 0.5rem;
+      margin-right: var(--jkl-spacing-8);
     }
     50% {
       opacity: 1;
@@ -554,7 +506,7 @@
     100% {
       transform: scale(1);
       opacity: 1;
-      margin-right: 0.5rem;
+      margin-right: var(--jkl-spacing-8);
     }
   }
 }
@@ -576,19 +528,15 @@
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-container-inverted);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    --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%);
@@ -602,8 +550,8 @@
     }
   }
   .jkl-tooltip-question-button {
-    transition-timing-function: ease-in;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: color;
     cursor: pointer;
     position: relative;
@@ -639,7 +587,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 {
@@ -663,7 +611,7 @@
     background-image: none;
   }
   .jkl-breadcrumb a:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-breadcrumb__list {
@@ -689,8 +637,8 @@
     color: inherit;
     outline: none;
     text-decoration: none;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: color;
   }
   .jkl-link__content {
@@ -707,22 +655,21 @@
   .jkl-link--external::after, .jkl-link[target=_blank]::after, .jkl-link[download]::after {
     --jkl-icon-fill: 0;
     --jkl-icon-size: 1em;
-    --jkl-icon-opsz: 20;
     content: "\e89e"/"(Åpnes i ny fane)";
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
     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;
     display: inline;
   }
@@ -733,7 +680,7 @@
     --link-color: var(--jkl-color-text-subdued);
   }
   .jkl-link:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   @media screen and (forced-colors: active) {
@@ -751,17 +698,15 @@
     --jkl-button-padding-icon: var(--jkl-unit-20);
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
+    --jkl-button-text-ink-offset: 0.1em;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
     --border-radius: 0;
     --border-width: 0.0625rem;
     display: inline-block;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
     cursor: pointer;
     user-select: none;
     background: var(--background-color);
@@ -776,8 +721,8 @@
     overflow: hidden;
     max-width: 100%;
     animation: a 0.3s linear;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
@@ -793,19 +738,19 @@
     padding-inline: var(--jkl-button-padding-icon-button);
   }
   .jkl-button__label {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: translate;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: calc(var(--jkl-unit-base) * 0.25);
+    gap: var(--jkl-unit-02);
     pointer-events: none;
   }
   .jkl-button__loader {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: opacity, translate;
     position: absolute;
     top: 50%;
@@ -815,8 +760,11 @@
     pointer-events: none;
   }
   .jkl-button__text {
+    display: block;
     width: 100%;
     max-width: 100%;
+    padding-block-start: var(--jkl-button-text-ink-offset);
+    margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -829,7 +777,7 @@
     opacity: 1;
   }
   .jkl-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-button:hover {
@@ -837,7 +785,7 @@
   }
   @media (forced-colors: active) {
     .jkl-button:hover {
-      outline: 3px solid var(--jkl-color-border-action);
+      outline: 3px solid var(--jkl-color-border-strong);
       outline-offset: 3px;
     }
   }
@@ -885,22 +833,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uyjs4z5;
+    animation-name: jkl-loader-left-spin-ufcxag3;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uyjs4zu;
+    animation-name: jkl-loader-middle-spin-ufcxaga;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uyjs500;
+    animation-name: jkl-loader-right-spin-ufcxaha;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uyjs4z5 {
+  @keyframes jkl-loader-left-spin-ufcxag3 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -914,7 +862,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uyjs4zu {
+  @keyframes jkl-loader-middle-spin-ufcxaga {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -931,7 +879,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uyjs500 {
+  @keyframes jkl-loader-right-spin-ufcxaha {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -953,7 +901,7 @@
     inherits: true;
   }
   .jkl-skeleton-animation {
-    --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
+    --jkl-skeleton-element-color: var(--jkl-color-background-page);
     --jkl-skeleton-sweep-duration: 4500ms;
     --jkl-skeleton-sweeper-width: 40%;
     mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
@@ -971,7 +919,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uyjs506;
+      animation: 2s ease infinite jkl-blink-ufcxahy;
     }
   }
   .jkl-skeleton-input {
@@ -1019,10 +967,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uyjs506;
+      animation: 2s ease-in-out infinite jkl-blink-ufcxahy;
     }
   }
-  @keyframes jkl-blink-uyjs506 {
+  @keyframes jkl-blink-ufcxahy {
     0% {
       opacity: 1;
     }
@@ -1048,7 +996,7 @@
     --padding-m: var(--jkl-unit-15);
     --padding-l: var(--jkl-unit-20);
     --padding-xl: var(--jkl-unit-30);
-    --border-radius: 0.25rem;
+    --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
     --background-color: transparent;
@@ -1069,8 +1017,8 @@
     pointer-events: none;
     border-radius: var(--border-radius);
     border: var(--border-width) solid var(--border-color);
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: border-color, border-size;
   }
   @media (min-width: 680px) {
@@ -1093,24 +1041,21 @@
   .jkl-card[data-padding=xl] {
     --padding: var(--padding-xl);
   }
-  .jkl-card--high {
-    --background-color: var(--jkl-color-background-container-high);
-  }
-  .jkl-card--low {
-    --background-color: var(--jkl-color-background-container-low);
+  .jkl-card--filled {
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-card--outlined {
-    --border-color: var(--jkl-color-border-separator);
+    --border-color: var(--jkl-color-border-default);
   }
   .jkl-card[data-clickable=true] {
     cursor: pointer;
   }
   .jkl-card[data-clickable=true]:hover {
-    --border-color: var(--jkl-color-border-separator-hover);
+    --border-color: var(--jkl-color-border-strong);
     --border-width: 0.125rem;
   }
   .jkl-card[data-clickable=true]:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-card-image {
@@ -1140,8 +1085,8 @@
     filter: blur(20px);
   }
   .jkl-image__image {
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
     transition-property: opacity;
     opacity: 1;
   }
@@ -1161,15 +1106,14 @@
 .jkl-tag {
   --padding: var(--jkl-unit-02) var(--jkl-unit-10);
   --gap: var(--jkl-unit-05);
-  --background-color: var(--jkl-color-background-alert-neutral);
-  --text-color: var(--jkl-color-text-on-alert);
-  font-size: var(--jkl-font-size-2);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  font-weight: 700;
+  --background-color: var(--jkl-color-background-container);
+  --text-color: var(--jkl-color-text-default);
+  --border-color: var(--jkl-color-border-subdued);
+  font: var(--jkl-text-style-text-small);
+  font-weight: var(--jkl-font-weight-bold);
   background-color: var(--background-color);
   color: var(--text-color);
+  border: 1px solid var(--border-color);
   border-radius: 0.25rem;
   display: inline-flex;
   align-items: center;
@@ -1178,16 +1122,24 @@
   gap: var(--gap);
 }
 .jkl-tag--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-tag--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-tag--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-tag--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-tag {
@@ -1210,31 +1162,16 @@
 }
 
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-checkbox-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-checkbox-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-checkbox-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-checkbox-error-color: #d79ba5;
-  }
   .jkl-checkbox {
-    --box-color: var(--jkl-color-border-action);
-    --check-color: var(--jkl-color-border-action);
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-checkbox-error-color: #ab2e43;
+    --jkl-checkbox-error-color: light-dark(#ab2e43, #d79ba5);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    --box-color: var(--jkl-color-border-strong);
+    --check-color: var(--jkl-color-border-strong);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     display: flex;
     flex-wrap: wrap;
     color: var(--text-color);
@@ -1242,50 +1179,78 @@
   }
   .jkl-checkbox__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-checkbox__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-checkbox__input:active, .jkl-checkbox__input:hover, .jkl-checkbox__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-checkbox__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-checkbox__label:hover, .jkl-checkbox__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";
     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-checkbox__label:has(+ :checked)::before {
+  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
+    --jkl-icon-weight: var(--jkl-font-weight-bold);
+  }
+  .jkl-checkbox__input:checked + .jkl-checkbox__label::before {
     content: "check_box";
     --jkl-icon-fill: 1;
   }
-  .jkl-checkbox__label:has(+ :indeterminate:not(:checked))::before {
+  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label::before {
     content: "indeterminate_check_box";
     --jkl-icon-fill: 1;
   }
-  .jkl-checkbox__label:has(+ [aria-invalid=true])::before {
+  .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
     color: var(--jkl-checkbox-error-color);
   }
   .jkl-checkbox + .jkl-checkbox {
@@ -1300,7 +1265,7 @@
 }
 @layer jokul.components {
   .jkl-input-panel {
-    --outer-border-color: var(--jkl-color-border-input);
+    --outer-border-color: var(--jkl-color-border-default);
     --outer-border-thickness: 0.0625rem;
     --background-color: transparent;
     --padding-inline: var(--jkl-unit-25);
@@ -1310,8 +1275,8 @@
     display: flex;
     flex-direction: column;
     interpolate-size: allow-keywords;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: box-shadow;
   }
   .jkl-input-panel__header {
@@ -1323,28 +1288,27 @@
     position: relative;
     padding: var(--jkl-unit-20) var(--padding-inline);
   }
-  .jkl-input-panel__header__amount {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
-  }
-  .jkl-input-panel__header label,
   .jkl-input-panel__header .jkl-radio-button,
   .jkl-input-panel__header .jkl-checkbox {
-    position: unset;
+    grid-column: 1/-1;
+    grid-row: 1;
+    inline-size: 100%;
   }
-  .jkl-input-panel__header label::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
+  .jkl-input-panel__header label {
     inline-size: 100%;
-    block-size: 100%;
+  }
+  .jkl-input-panel__header__amount {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    pointer-events: none;
+    position: relative;
+    z-index: 1;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__description {
     height: 0;
@@ -1352,27 +1316,24 @@
     padding-inline: var(--padding-inline);
     padding-block-end: var(--jkl-spacing-none);
     line-height: initial;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-paragraph-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-input-panel:has(:checked), .jkl-input-panel[data-always-open=true], .jkl-input-panel:not([data-always-open]) {
-    --background-color: var(--jkl-color-background-container-high);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-input-panel:has(:checked) .jkl-input-panel__description, .jkl-input-panel[data-always-open=true] .jkl-input-panel__description, .jkl-input-panel:not([data-always-open]) .jkl-input-panel__description {
     height: auto;
     padding-block-end: var(--jkl-unit-20);
   }
   .jkl-input-panel:has(input:hover) {
-    --outer-border-color: var(--jkl-color-border-separator-hover);
+    --outer-border-color: var(--jkl-color-border-default);
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
@@ -1382,6 +1343,9 @@
     /* Visuell justering ettersom ikonet ikke fyller bounding box helt */
     margin-inline-start: -0.1em;
   }
+  .jkl-checkbox-panel .jkl-checkbox__input:focus-visible + .jkl-checkbox__label::before {
+    outline: none;
+  }
 }
 .jkl-chip {
   --padding-inline: var(--jkl-unit-15);
@@ -1389,14 +1353,11 @@
   --height: var(--jkl-unit-40);
   --gap: var(--jkl-unit-05);
   --text-color: var(--jkl-color-text-default);
-  --border-color: var(--jkl-color-border-separator);
+  --border-color: var(--jkl-color-border-subdued);
   --background-color: transparent;
   --border-width: 0.0625rem;
-  font-size: var(--jkl-font-size-2);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  font-weight: 700;
+  font: var(--jkl-text-style-text-small);
+  font-weight: var(--jkl-font-weight-bold);
   cursor: pointer;
   position: relative;
   background-color: var(--background-color);
@@ -1424,12 +1385,12 @@
   inset: 0;
   border-radius: inherit;
   background-color: var(--text-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-chip:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 .jkl-chip:hover::after {
@@ -1512,8 +1473,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -1521,27 +1482,24 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-combobox__wrapper:hover, .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -1550,11 +1508,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-combobox__wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {
@@ -1597,9 +1555,9 @@
     padding: 0.46875rem;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
-    background-color: var(--jkl-color-background-input-focus);
+    background-color: var(--jkl-color-background-container);
   }
   .jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
     outline: none;
@@ -1612,14 +1570,12 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-combobox__search-input {
     outline: 0;
@@ -1664,8 +1620,8 @@
   .jkl-combobox__arrow {
     pointer-events: none;
     transform: translateY(-50%);
-    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, color;
   }
   @media screen and (forced-colors: active) {
@@ -1679,8 +1635,8 @@
     }
   }
   .jkl-combobox__menu {
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
     top: calc(100% - 1px);
     overflow-y: auto;
@@ -1688,19 +1644,16 @@
     z-index: 7000;
     left: -0.0625rem;
     right: -0.0625rem;
-    background-color: var(--jkl-color-background-container-high);
-    border: 0.125rem solid var(--jkl-color-border-input-focus);
+    background-color: var(--jkl-color-background-container);
+    border: 0.125rem solid var(--jkl-color-border-strong);
     border-radius: 0 0 0.1875rem 0.1875rem;
     box-sizing: border-box;
     max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
   }
   .jkl-combobox__option {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-small);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     display: flex;
     align-items: center;
     border: 0;
@@ -1717,10 +1670,7 @@
     background-color: var(--jkl-color-background-interactive-hover);
   }
   .jkl-combobox__option-description {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     display: block;
     width: 100%;
@@ -1733,10 +1683,12 @@
   }
   .jkl-combobox__chips {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--jkl-combobox-chips-gap);
-    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     padding: var(--jkl-text-input-padding);
   }
   .jkl-combobox__chips .jkl-chip {
@@ -1747,12 +1699,12 @@
   }
   .jkl-combobox--invalid .jkl-combobox__search-input,
   .jkl-combobox--invalid .jkl-combobox__wrapper {
-    background-color: var(--jkl-color-background-alert-error);
+    background-color: var(--jkl-color-error-background-container);
   }
   .jkl-combobox--invalid .jkl-combobox__search-input,
   .jkl-combobox--invalid .jkl-combobox__button,
   .jkl-combobox--invalid .jkl-combobox__wrapper {
-    color: var(--jkl-color-text-on-alert);
+    color: var(--jkl-color-error-text-default);
   }
   .jkl-combobox--menu-closed .jkl-combobox__search-input {
     position: absolute;
@@ -1786,46 +1738,21 @@
     transition: 0.2s;
   }
   .jkl-cookie-consent-modal__info-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-cookie-consent-modal__checkbox {
     margin-bottom: var(--jkl-unit-10);
     margin-top: var(--jkl-unit-30);
   }
 }
-/*
- * NOTE: These icon also exists as a copy in the jkl-icons-react package.
- *       If you're here to change them, consider changing them there as well, or
- *       finding a technical solution to sharing the SVG markup
- */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-  }
-}
-[data-theme=light] {
-  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-  }
-}
-[data-theme=dark] {
-  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-}
-
 @layer jokul.components {
   .jkl-list {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-cross: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"));
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     --list-text-color: var(--jkl-color-text-default);
     list-style-type: "•";
     padding-left: var(--jkl-unit-20);
@@ -1891,6 +1818,7 @@
   }
 }
 @layer jokul.components {
+  /* Base layout */
   .jkl-modal-container,
   .jkl-modal-overlay {
     position: fixed;
@@ -1899,29 +1827,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;
   }
@@ -1930,54 +1875,114 @@
       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-header {
-    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
+  .jkl-modal-container--slide-in:not([aria-hidden=true]) {
+    visibility: visible;
+    transition-delay: 0ms;
   }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal-header {
-      --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
+  .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);
     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-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-modal-title {
-    font-size: var(--jkl-font-size-6);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
-  }
-  .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;
-    }
+    font: var(--jkl-text-style-heading-3);
   }
   .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;
@@ -1986,8 +1991,8 @@
 }
 @layer jokul.components {
   .jkl-countdown {
-    --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;
@@ -2009,10 +2014,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uyjs51b var(--duration) linear forwards;
+    animation: jkl-downcount-ufcxaj2 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uyjs51b {
+  @keyframes jkl-downcount-ufcxaj2 {
     from {
       width: 100%;
     }
@@ -2022,14 +2027,18 @@
   }
 }
 @layer jokul.components {
-  @media (width >= 0) and (max-width: 374px) {
-    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-  }
   .jkl-calendar {
     --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
     --jkl-calendar-gap: var(--jkl-unit-15);
+  }
+  @media (width >= 0) and (max-width: 374px) {
+    .jkl-calendar {
+      --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
+    }
+  }
+  .jkl-calendar {
     display: block;
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     color: var(--jkl-color);
   }
   .jkl-calendar__padding {
@@ -2067,11 +2076,8 @@
   }
   .jkl-calendar-navigation-dropdown__select {
     appearance: none;
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     background-color: transparent;
     color: inherit;
     border-radius: 0;
@@ -2105,11 +2111,11 @@
   }
   .jkl-calendar-navigation-dropdown__select option {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     text-align: left;
   }
   .jkl-calendar-navigation-dropdown__select:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-calendar-navigation-dropdown__chevron {
@@ -2122,10 +2128,7 @@
 }
 @layer jokul.components {
   .jkl-calendar-table th {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding-bottom: var(--jkl-unit-10);
   }
   .jkl-calendar-table td {
@@ -2140,15 +2143,16 @@
   }
 }
 @layer jokul.components {
+  .jkl-calendar-date-button {
+    --jkl-calendar-date-size: var(--jkl-unit-50);
+  }
   @media (width >= 0) and (max-width: 374px) {
-    --jkl-calendar-date-size: var(--jkl-unit-40);
+    .jkl-calendar-date-button {
+      --jkl-calendar-date-size: var(--jkl-unit-40);
+    }
   }
   .jkl-calendar-date-button {
-    --jkl-calendar-date-size: var(--jkl-unit-50);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     appearance: none;
     position: relative;
     box-sizing: border-box;
@@ -2163,8 +2167,8 @@
     margin: var(--jkl-calendar-date-margin);
     padding: 0;
     padding-top: var(--jkl-unit-02);
-    transition-timing-function: ease-out;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: color, background-color, box-shadow;
   }
   .jkl-calendar-date-button {
@@ -2188,23 +2192,20 @@
     }
   }
   .jkl-calendar-date-button[data-adjacent=true] {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding: 0;
     color: var(--jkl-color-text-subdued);
   }
   .jkl-calendar-date-button[aria-current=date] {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
     background-color: var(--jkl-color-background-interactive-hover);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
-    background-color: var(--jkl-color-background-container-inverted);
-    color: var(--jkl-color-text-inverted);
+    background-color: var(--jkl-color-background-action);
+    color: var(--jkl-color-text-on-action);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
@@ -2214,7 +2215,7 @@
     color: color(from var(--jkl-color-text-subdued) srgb r g b/70%);
   }
   .jkl-calendar-date-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
 }
@@ -2271,29 +2272,28 @@
   }
 }
 @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;
+  }
 }
 @layer jokul.components {
   .jkl-description-list {
@@ -2314,7 +2314,7 @@
     display: unset;
   }
   .jkl-description-list__term {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-description-list__detail {
     margin-left: 0;
@@ -2352,12 +2352,12 @@
   }
   .jkl-description-list[data-separators=true] .seperator:not(:first-of-type) {
     margin-block: var(--jkl-unit-15);
-    border-top: 1px solid var(--jkl-color-border-separator);
+    border-top: 1px solid var(--jkl-color-border-subdued);
   }
 }
 @layer jokul.components {
   .jkl-expandable {
-    background-color: var(--jkl-color-background-container-low);
+    background-color: var(--jkl-color-background-page);
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -2377,7 +2377,7 @@
     padding: var(--jkl-unit-20);
   }
   .jkl-expandable--stroke {
-    border-color: var(--jkl-color-border-separator);
+    border-color: var(--jkl-color-border-subdued);
     background-color: transparent;
     border-radius: 0;
     border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
@@ -2385,34 +2385,34 @@
   .jkl-expandable__wrapper {
     --border-radius: 0.25rem;
     --outline-offset: 3px;
+    --stroke-outline-offset: 3px;
+    --border-top-left-radius: var(--border-radius);
+    --border-top-right-radius: var(--border-radius);
+    --border-bottom-left-radius: var(--border-radius);
+    --border-bottom-right-radius: var(--border-radius);
+    position: relative;
+  }
+  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
-    --border-bottom-left-radius: 0;
-    --border-bottom-right-radius: 0;
-    position: relative;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
     border-top: none;
   }
-  .jkl-expandable__wrapper:first-child {
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-  }
-  .jkl-expandable__wrapper:last-child {
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
+  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
-    --outline-offset: -1px;
+    --outline-offset: var(--stroke-outline-offset);
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper:has(:focus-visible):first-child:last-child {
-    --outline-offset: 3px;
-  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
@@ -2448,13 +2448,13 @@
   }
   .jkl-expander--open .jkl-expander__label {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-expander--open .jkl-expander__chevron {
     transform: rotate(-0.5turn);
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
   }
   @media (hover: hover) {
     .jkl-expander:hover {
@@ -2489,8 +2489,8 @@
   .jkl-feedback__submit-wrapper {
     width: 100%;
     transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
   }
   .jkl-feedback__submit-wrapper--hidden {
     display: none;
@@ -2498,19 +2498,15 @@
   .jkl-feedback__step-counter {
     color: var(--jkl-color-text-subdued);
     margin-bottom: var(--jkl-unit-20);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uyjs52a 0.25s ease-out;
+    animation: jkl-show-ufcxajq 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uyjs52a {
+  @keyframes jkl-show-ufcxajq {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2523,7 +2519,7 @@
     width: 100%;
     max-width: 22.5rem;
     flex-wrap: nowrap;
-    gap: 0.75rem;
+    gap: var(--jkl-spacing-12);
   }
   .jkl-feedback-smiley-option {
     display: inline-block;
@@ -2533,8 +2529,8 @@
     width: 2.5rem;
     color: var(--jkl-color-text-subdued);
     transform: translate3d(0, 0, 0);
-    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, color;
   }
   @media screen and (forced-colors: active) {
@@ -2552,14 +2548,10 @@
     position: absolute;
     border-radius: 50%;
     opacity: 0;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: opacity;
   }
-  .jkl-feedback-smiley-option::after {
-    inset: -0.125rem -0.125rem -0.125rem -0.125rem;
-    box-shadow: 0 0 0 0.125rem currentColor;
-  }
   .jkl-feedback-smiley-option::before {
     inset: 0;
     box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
@@ -2574,8 +2566,10 @@
   input:checked + .jkl-feedback-smiley-option::before {
     opacity: 1;
   }
-  html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-feedback-smiley-option::after {
-    opacity: 1;
+  input:focus-visible + .jkl-feedback-smiley-option {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
   }
 }
 @layer jokul.components {
@@ -2586,29 +2580,25 @@
     --jkl-message-dismiss-button-size: var(--jkl-unit-50);
     --jkl-message-gap: var(--jkl-unit-20);
     --jkl-message-padding: var(--jkl-unit-25) var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-background-container);
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     max-width: 35rem;
     padding: var(--jkl-message-padding);
     background-color: var(--background-color);
     color: var(--text-color);
+    border: 1px solid var(--border-color);
     border-radius: 0.25rem;
     box-sizing: border-box;
     display: grid;
     align-items: start;
     grid-template-areas: "icon content dismiss";
     grid-template-columns: auto 1fr auto;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-message:has(.jkl-message__title) {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   .jkl-message__icon {
     grid-area: icon;
@@ -2626,17 +2616,11 @@
     grid-area: content;
   }
   .jkl-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
     margin-top: -0.125rem;
   }
   .jkl-message__title {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
     margin: var(--jkl-message-title-margin);
   }
   .jkl-message__title ~ .jkl-message__message {
@@ -2708,27 +2692,35 @@
     }
   }
   .jkl-message__dismiss-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-message--full {
     max-width: 100%;
   }
   .jkl-message--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-message--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-message--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-message--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);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uyjs532 400ms ease-in-out forwards;
-    transition: visibility 0ms 400ms;
+    animation: jkl-dismiss-ufcxak2 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
   @media screen and (forced-colors: active) {
@@ -2747,9 +2739,9 @@
     }
   }
   .jkl-form-error-message {
-    padding-bottom: calc(var(--jkl-unit-base) * 5);
+    padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uyjs532 {
+  @keyframes jkl-dismiss-ufcxak2 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2761,23 +2753,11 @@
   }
 }
 @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;
   }
@@ -2803,45 +2783,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 {
@@ -2857,7 +2866,7 @@
   .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);
   }
 }
 @layer jokul.components {
@@ -2872,8 +2881,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
@@ -2881,27 +2890,24 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem transparent;
   }
   .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
-    --background-color: var(--jkl-color-background-input-focus);
+    --background-color: var(--jkl-color-background-container);
   }
   .jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
-    --background-color: var(--jkl-color-background-alert-error);
-    --text-color: var(--jkl-color-text-on-alert);
+    --background-color: var(--jkl-color-error-background-container);
+    --text-color: var(--jkl-color-error-text-default);
     --placeholder-color: color(from currentColor sRGB r g b / 75%);
   }
   .jkl-text-area-wrapper:hover, .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
-    --border-color: var(--jkl-color-border-input-focus);
+    --border-color: var(--jkl-color-border-strong);
     box-shadow: inset 0 0 0 0.0625rem var(--border-color), 0 0 0 0.0625rem var(--border-color);
   }
   @media screen and (forced-colors: active) {
@@ -2910,11 +2916,11 @@
     }
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-input__input:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrapper:has(.jkl-text-area__text-area:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-text-area-wrapper > .jkl-icon-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -8px;
   }
   @media screen and (forced-colors: active) {
@@ -2965,16 +2971,13 @@
     max-height: var(--text-input-height);
     height: var(--text-input-height);
     min-height: var(--text-input-height);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height, min-height, max-height, padding;
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-text-area__text-area {
     outline: 0;
@@ -3040,10 +3043,7 @@
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
     padding: var(--jkl-text-input-padding);
     color: var(--text-color);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
     background-color: transparent;
@@ -3058,8 +3058,8 @@
     height: var(--progress-bar-height);
     background-color: var(--border-color);
     transition-property: width;
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
   }
   .jkl-text-area__text-area--3-rows:focus,
   .jkl-text-area__text-area--3-rows:not(:placeholder-shown),
@@ -3143,14 +3143,14 @@
     --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
     --jkl-file-button-width: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-default);
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --border-radius: 2px;
     --bg: transparent;
-    --transition-time: 250ms;
+    --transition-time: var(--jkl-motion-timing-expressive);
   }
   .jkl-file__content {
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: background-color, border-color, color;
     color: var(--jkl-color-text-default);
     padding: var(--jkl-file-padding);
@@ -3165,11 +3165,7 @@
     height: fit-content;
   }
   .jkl-file__content__name {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     grid-area: text;
     /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
     word-break: break-word;
@@ -3191,7 +3187,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--jkl-color-background-container-low);
+    background: var(--jkl-color-background-page);
     border-radius: 2px;
     overflow: hidden;
     container-type: inline-size;
@@ -3239,11 +3235,7 @@
     grid-template-areas: "image image" "text button";
   }
   .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     content: attr(data-filetype);
   }
   .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
@@ -3254,16 +3246,16 @@
     scale: 1;
   }
   .jkl-file[data-state=error] {
-    --bg: var(--jkl-color-functional-error);
+    --bg: var(--jkl-color-error-background-container);
   }
   .jkl-file[data-state=error],
   .jkl-file[data-state=error] a,
   .jkl-file[data-state=error] a:hover,
   .jkl-file[data-state=error] button,
   .jkl-file[data-state=error] span {
-    --text-color: var(--jkl-color-text-on-alert);
+    --text-color: var(--jkl-color-error-text-default);
     --link-color: var(--text-color);
-    --jkl-color-border-action: currentColor;
+    --jkl-color-border-strong: currentColor;
   }
   @keyframes spin {
     from {
@@ -3283,7 +3275,7 @@
     --jkl-file-list-gap: var(--jkl-unit-10);
   }
   .jkl-file-input__dropzone {
-    --border-color: var(--jkl-color-border-input);
+    --border-color: var(--jkl-color-border-default);
     --background-color: transparent;
     border: var(--border-color) 1px dashed;
     border-radius: 0.25rem;
@@ -3294,22 +3286,18 @@
     flex-direction: column;
     flex-wrap: nowrap;
     gap: var(--jkl-file-input-dropzone-gap);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background-color;
     background-color: var(--background-color);
   }
   .jkl-file-input__dropzone--enter {
-    --border-color: var(--jkl-color-border-input-focus);
-    --background-color: var(--jkl-color-background-container-high);
+    --border-color: var(--jkl-color-border-strong);
+    --background-color: var(--jkl-color-background-container);
     border-style: solid;
   }
   .jkl-file-input__dropzone__drag-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   @media (width >= 0) and (max-width: 679px) {
     .jkl-file-input__dropzone__drag-text {
@@ -3325,7 +3313,7 @@
   }
   .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button {
     transform: scale(1.05);
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active {
@@ -3338,10 +3326,7 @@
     display: none;
   }
   .jkl-file-input__max-size-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     margin-top: var(--jkl-unit-30);
   }
@@ -3366,11 +3351,8 @@
     max-width: fit-content;
   }
   .jkl-file-input--small .jkl-file-input__call-to-action {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    gap: calc(var(--jkl-unit-base) * 1.5);
+    font: var(--jkl-text-style-text-small);
+    gap: var(--jkl-unit-15);
     flex-direction: row;
     justify-content: flex-start;
   }
@@ -3381,20 +3363,13 @@
 }
 @layer jokul.components {
   .jkl-link-list {
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-link-list .jkl-link-list-title {
     margin-block-end: var(--jkl-unit-10);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-link-list ul {
     display: flex;
@@ -3405,7 +3380,7 @@
     height: min-content;
     border-radius: var(--jkl-unit-05);
     overflow: hidden;
-    background: var(--jkl-color-background-container-low);
+    background: var(--jkl-color-background-page);
   }
   .jkl-link-list ul .jkl-link-list-link {
     display: flex;
@@ -3418,30 +3393,27 @@
     text-wrap: balance;
     box-sizing: border-box;
     padding: var(--jkl-unit-20);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background;
   }
   .jkl-link-list ul .jkl-link-list-link::after {
     content: "arrow_forward"/"";
     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;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
@@ -3450,6 +3422,10 @@
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
   }
+  .jkl-link-list ul .jkl-link-list-link:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
   .jkl-link-list .jkl-link-list-item {
     display: flex;
   }
@@ -3497,13 +3473,13 @@
     transform: translateX(-5%);
   }
   .jkl-logo--animated .jkl-logo__F {
-    transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
+    transition: transform var(--jkl-motion-timing-expressive) var(--jkl-motion-timing-energetic) cubic-bezier(0.5, 0, 0.62, 1);
   }
   .jkl-logo--animated .jkl-logo__F-line {
-    transition: transform 250ms ease-in;
+    transition: transform var(--jkl-motion-timing-expressive) ease-in;
   }
   .jkl-logo--animated .jkl-logo__fremtind {
-    transition: opacity 250ms 75ms ease-in, transform 250ms ease;
+    transition: opacity var(--jkl-motion-timing-expressive) var(--jkl-motion-timing-energetic) ease-in, transform var(--jkl-motion-timing-expressive) ease;
   }
   .jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
     transform: translateX(35%) rotate(45deg);
@@ -3524,7 +3500,7 @@
   .jkl-logo-stamp--animated .jkl-logo-stamp__text {
     transform-origin: 256px 256px;
     transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
-    transition-duration: 150ms;
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform;
   }
   .jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
@@ -3543,10 +3519,7 @@
     cursor: pointer;
     box-sizing: border-box;
     user-select: none;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     display: flex;
     align-items: center;
     gap: var(--jkl-unit-10);
@@ -3606,28 +3579,16 @@
     width: 100%;
     margin-block: 0;
     border: none;
-    border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
+    border-bottom: 0.0625rem solid var(--jkl-color-border-subdued);
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-menu-border-color: transparent;
-    }
-  }
-  [data-theme=light] {
-    --jkl-menu-border-color: transparent;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-menu-border-color: var(--jkl-color-border-input-focus);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-menu-border-color: var(--jkl-color-border-input-focus);
-  }
   .jkl-menu {
-    background-color: var(--jkl-color-background-container-high);
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --border-color: transparent;
+    --border-color: light-dark(transparent, var(--jkl-color-border-strong));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    background-color: var(--jkl-color-background-container);
     width: 100%;
     max-width: 21rem;
     display: flex;
@@ -3636,7 +3597,7 @@
     flex-wrap: nowrap;
     box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
     border-radius: 0.125rem;
-    border: 2px solid var(--jkl-menu-border-color);
+    border: 2px solid var(--border-color);
     z-index: 7000;
   }
   .jkl-menu:focus-visible {
@@ -3650,7 +3611,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;
@@ -3680,7 +3641,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 {
@@ -3690,13 +3651,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 {
@@ -3715,22 +3676,19 @@
 }
 .jkl-navlink--beta {
   --border-radius: 4px;
-  --separator: 1px solid var(--jkl-color-border-separator);
+  --separator: 1px solid var(--jkl-color-border-subdued);
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   column-gap: 2em;
   color: inherit;
   text-decoration: none;
-  background-color: var(--jkl-color-background-container-low);
+  background-color: var(--jkl-color-background-page);
   padding: var(--jkl-spacing-s);
   border-radius: 0;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-relaxed);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  font: var(--jkl-text-style-paragraph-medium);
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: background-color;
 }
 .jkl-navlink--beta .title,
@@ -3746,19 +3704,19 @@
   grid-row: 1/span 999;
   translate: 0;
   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;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
 }
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
@@ -3809,12 +3767,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 {
@@ -3862,7 +3820,7 @@
     outline: none;
   }
   .jkl-select .jkl-tooltip-question-button:focus {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-select select {
@@ -3876,7 +3834,7 @@
     font-weight: normal;
     font-family: sans-serif;
     color: var(--jkl-color-text-subdued);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
   }
   .jkl-select__outer-wrapper {
     position: relative;
@@ -3897,7 +3855,7 @@
     cursor: pointer;
     height: var(--jkl-select-input-height);
     border-radius: var(--border-radius);
-    border: var(--border-width) solid var(--jkl-color-border-input);
+    border: var(--border-width) solid var(--jkl-color-border-default);
     box-shadow: 0 0 0 0.0625rem transparent;
     text-align: left;
     width: 100%;
@@ -3905,19 +3863,16 @@
     /* Øk padding for å gi plass til ikonet */
     padding-inline-end: 2.05em;
     transition-property: color, border-color, box-shadow;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-select__search-input--active-value, .jkl-select__button--active-value {
     color: var(--jkl-color-text-default);
   }
   .jkl-select__search-input:hover, .jkl-select__button:hover {
-    border-color: var(--jkl-color-border-input-focus);
-    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
+    border-color: var(--jkl-color-border-strong);
+    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
   }
   .jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
     transform: translateY(calc(-50% + 0.1875rem));
@@ -3926,12 +3881,12 @@
     outline: none;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__search-input:has(:focus-visible), html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select__button:has(:focus-visible) {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__button,
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:focus-visible) .jkl-select__search-input {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-select__arrow {
@@ -3942,8 +3897,8 @@
     color: var(--jkl-color-text-default);
     transform: translateY(-50%);
     transition-property: transform, color;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   @media screen and (forced-colors: active) {
     .jkl-select__arrow {
@@ -3956,7 +3911,7 @@
     }
   }
   .jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
-    color: var(--jkl-color-text-on-alert);
+    color: var(--jkl-color-error-text-default);
   }
   .jkl-select__options-menu {
     position: absolute;
@@ -3964,16 +3919,16 @@
     right: -0.0625rem;
     top: 100%;
     z-index: 7000;
-    background-color: var(--jkl-color-background-container-high);
-    border: 0.125rem solid var(--jkl-color-border-input-focus);
+    background-color: var(--jkl-color-background-container);
+    border: 0.125rem solid var(--jkl-color-border-strong);
     border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
     overflow-y: auto;
     max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
     transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-select__option-wrapper {
     margin: 0;
@@ -3992,12 +3947,9 @@
     position: relative;
     padding: var(--option-padding);
     cursor: pointer;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    font: var(--jkl-text-style-text-medium);
     /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
     komponenten med data-focus="controlled". Uten dette satt vil valgene
     markeres ved hover som normalt. */
@@ -4010,10 +3962,7 @@
     color: var(--jkl-color-text-subdued);
     display: block;
     width: 100%;
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
   }
   .jkl-select {
     /* --------
@@ -4028,9 +3977,9 @@
   .jkl-select--open .jkl-select__button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    border-color: var(--jkl-color-border-input-focus);
-    background-color: var(--jkl-color-background-container-high);
-    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
+    border-color: var(--jkl-color-border-strong);
+    background-color: var(--jkl-color-background-container);
+    box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
   }
   .jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
   .jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
@@ -4038,8 +3987,8 @@
   }
   .jkl-select--invalid .jkl-select__search-input,
   .jkl-select--invalid .jkl-select__button {
-    background-color: var(--jkl-color-background-alert-error);
-    color: var(--jkl-color-text-on-alert-subdued);
+    background-color: var(--jkl-color-error-background-container);
+    color: var(--jkl-color-error-text-subdued);
   }
   .jkl-select--invalid .jkl-select__search-input--active-value,
   .jkl-select--invalid .jkl-select__button--active-value {
@@ -4064,15 +4013,15 @@
       border-top: 1px solid SelectedItem;
       border-bottom: 1px solid SelectedItem;
       --jkl-icon-weight: 400;
-      font-weight: 700;
+      font-weight: var(--jkl-font-weight-bold);
       letter-spacing: -0.014em;
     }
   }
 }
 @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;
@@ -4093,12 +4042,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-uyjs53m {
+  @keyframes jkl-downcount-ufcxakc {
     from {
       width: 100%;
     }
@@ -4112,15 +4085,18 @@
     /* Visuell justering pga. rundt ikon */
     margin-inline-start: -0.15em;
   }
+  .jkl-radio-panel .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    outline: none;
+  }
 }
 .jkl-select--beta {
-  --border-color: var(--jkl-color-border-input);
-  --background-color: var(transparent);
+  --border-color: var(--jkl-color-border-default);
+  --background-color: transparent;
   --color: var(--jkl-color-text-default);
   --box-shadow: 0 0 0 jkl.rem(1px) transparent;
   --border-width: 0.0625rem;
   --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
-  --arrow-right: calc(var(--jkl-unit-base) * 0.25);
+  --arrow-right: var(--jkl-unit-02);
   display: block;
   position: relative;
 }
@@ -4148,7 +4124,7 @@
   outline: none;
 }
 .jkl-select--beta .jkl-tooltip-question-button:focus {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 0;
 }
 .jkl-select--beta-wrapper {
@@ -4182,30 +4158,27 @@
   --color: var(--jkl-color-text-subdued);
 }
 .jkl-select--beta select:hover {
-  --border-color: var(--jkl-color-border-input-focus);
-  --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
+  --border-color: var(--jkl-color-border-strong);
+  --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
 }
 .jkl-select--beta select:invalid {
-  --background-color: var(--jkl-color-background-alert-error);
-  --color: var(--jkl-color-text-on-alert-subdued);
+  --background-color: var(--jkl-color-error-background-container);
+  --color: var(--jkl-color-error-text-subdued);
 }
 .jkl-select--beta select:focus-visible {
   outline: none;
 }
 .jkl-select--beta select {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
+  font: var(--jkl-text-style-text-medium);
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 
@@ -4219,12 +4192,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   --icon-size: var(--jkl-text-input-height);
   --border-radius: var(--jkl-border-radius-s);
   --border-width: 1px;
-  --border: var(--border-width) solid var(--jkl-color-border-input);
+  --border: var(--border-width) solid var(--jkl-color-border-default);
   width: 100%;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search] {
   appearance: none;
@@ -4254,10 +4224,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
 }
 .jkl-search input[type=search] {
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
   appearance: none;
@@ -4311,16 +4278,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   grid-column: 1;
   z-index: 1;
   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-search .clear-button::after {
@@ -4331,15 +4298,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   background-color: var(--jkl-color-text-default);
   opacity: 0;
   border-radius: inherit;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-search .clear-button:hover::after {
   opacity: 0.15;
 }
 .jkl-search .clear-button:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 
@@ -4368,9 +4335,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   width: 1px;
   inset: 0;
   inset-block: 20%;
-  background-color: var(--jkl-color-border-separator);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  background-color: var(--jkl-color-border-subdued);
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: inset;
 }
 .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
@@ -4393,12 +4360,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     display: inline-flex;
     align-items: center;
     background-color: var(--jkl-color-background-interactive);
-    border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);
+    border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
     border-radius: 0;
     margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
     margin-block-end: 0.5lh;
-    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: border background;
   }
   .jkl-segmented-control .jkl-segmented-control-item label {
@@ -4407,12 +4374,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-segmented-control .jkl-segmented-control-item:hover {
     background-color: var(--jkl-color-background-interactive-hover);
-    border-color: var(--jkl-color-border-separator-hover);
+    border-color: var(--jkl-color-border-default);
     z-index: 2;
   }
   .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
-    background-color: var(--jkl-color-background-container-high);
-    border-color: var(--jkl-color-border-separator);
+    background-color: var(--jkl-color-background-container);
+    border-color: var(--jkl-color-border-subdued);
     z-index: 1;
   }
   .jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]) {
@@ -4446,10 +4413,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     flex-direction: column;
     overflow-wrap: anywhere;
     width: 100%;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-summary-table tr {
     display: flex;
@@ -4471,16 +4435,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     padding-right: 0;
   }
   .jkl-summary-table > tbody th {
-    font-weight: 400;
+    font-weight: var(--jkl-font-weight-normal);
   }
   .jkl-summary-table > tfoot {
-    border-top: 0.0625rem solid var(--jkl-color-border-separator-strong);
-    border-bottom: 0.0625rem solid var(--jkl-color-border-separator-strong);
+    border-top: 0.0625rem solid var(--jkl-color-border-strong);
+    border-bottom: 0.0625rem solid var(--jkl-color-border-strong);
     padding-top: var(--jkl-unit-10);
   }
   .jkl-summary-table > tfoot th,
   .jkl-summary-table > tfoot td {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
 }
 @layer jokul.components {
@@ -4491,12 +4455,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
     --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
         auto;
-    --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
+    --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
+    --background-color: var(--jkl-color-background-container);
+    --text-color: var(--jkl-color-text-default);
+    --border-color: var(--jkl-color-border-subdued);
     width: 100%;
     background-color: var(--background-color);
     color: var(--text-color);
+    border: 1px solid var(--border-color);
     transition-behavior: allow-discrete;
     box-sizing: border-box;
   }
@@ -4523,10 +4489,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-system-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     margin: var(--jkl-system-message-message-margin);
   }
   .jkl-system-message__dismiss-button {
@@ -4595,7 +4558,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-system-message__dismiss-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   @media screen and (forced-colors: active) {
@@ -4608,20 +4571,28 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uyjs543 400ms forwards;
-    transition: block 400ms 400ms;
+    animation: jkl-dismiss-ufcxalc var(--jkl-motion-timing-lazy) forwards;
+    transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--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-system-message--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-system-message--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-system-message--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-system-message {
@@ -4638,7 +4609,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uyjs543 {
+  @keyframes jkl-dismiss-ufcxalc {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -4675,10 +4646,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     position: relative;
     text-align: left;
     vertical-align: top;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-table-cell:has(.jkl-button) {
     --jkl-table-cell-padding: var(--jkl-unit-05);
@@ -4713,19 +4681,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
       content: attr(data-th);
       display: block;
-      font-size: var(--jkl-font-size-4);
-      line-height: var(--jkl-line-height-tight);
-      font-weight: 700;
-      --jkl-icon-weight: 400;
+      font: var(--jkl-text-style-heading-5);
     }
   }
   .jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text)::before {
     content: attr(data-th);
     display: block;
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   @media (min-width: 680px) {
     .jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text {
@@ -4745,22 +4707,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=light] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
   .jkl-table-head--sr-only {
     border: 0 !important;
     clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
@@ -4777,9 +4723,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     position: sticky;
     top: var(--jkl-table-head-sticky-offset, 0);
     z-index: 1;
-    background-color: var(--jkl-table-head-sticky-color);
+    background-color: var(--jkl-table-head-sticky-color, var(--jkl-color-background-page));
     border-bottom: none;
-    box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-color-border-separator-strong);
+    box-shadow: inset 0 0 0 #000, inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-strong);
     background-clip: padding-box;
     vertical-align: bottom;
     height: 2.3em;
@@ -4789,11 +4735,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-table-header {
     --jkl-table-header-padding-inline: var(--jkl-unit-15);
     --jkl-table-header-padding-block: var(--jkl-unit-10);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     padding-block: var(--jkl-table-header-padding-block);
     padding-inline: var(--jkl-table-header-padding-inline);
     text-align: left;
@@ -4806,7 +4749,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     text-align: right;
   }
   .jkl-table-header--bold {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-table-header__arrows {
     display: flex;
@@ -4878,7 +4821,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     flex-direction: column;
     justify-content: center;
     flex-wrap: wrap;
-    gap: calc(var(--jkl-unit-base) * 2);
+    gap: var(--jkl-unit-20);
   }
   @media (min-width: 680px) {
     .jkl-table-pagination__nav {
@@ -4946,15 +4889,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table-pagination__page--active {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
 }
 @layer jokul.components {
   .jkl-table-row {
-    --jkl-table-row-border-color: var(--jkl-color-border-separator);
+    --jkl-table-row-border-color: var(--jkl-color-border-subdued);
     --jkl-table-row-border-none-color: transparent;
-    --jkl-table-row-hover-border-color: var(--jkl-color-border-separator-strong);
+    --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
     --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
     border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
   }
@@ -5007,8 +4950,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border, padding;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded {
     border-bottom-color: var(--jkl-table-row-border-none-color);
@@ -5027,8 +4970,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + [aria-hidden=false] .jkl-table-row {
     border-top-color: var(--jkl-table-row-border-none-color);
@@ -5088,13 +5031,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-expandable-table-row__expanded-row {
     display: none;
-    transition-timing-function: ease-in;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: height;
   }
   .jkl-expandable-table-row__expanded-row--expanded {
-    transition-timing-function: ease-out;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-lazy);
     display: block;
   }
 }
@@ -5159,16 +5102,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
 @layer jokul.components {
   .jkl-table-of-contents {
     --ordered-item-padding: var(--jkl-unit-10);
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
   }
   .jkl-table-of-contents .jkl-table-of-contents-title {
     margin-block-end: var(--jkl-unit-05);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-table-of-contents .jkl-table-of-contents-item {
     display: flex;
@@ -5220,8 +5159,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-table-of-contents ol .jkl-table-of-contents-link {
     padding-inline-end: var(--jkl-unit-20);
     padding-block: var(--ordered-item-padding);
-    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;
   }
   .jkl-table-of-contents ol .jkl-table-of-contents-link::before {
@@ -5238,8 +5177,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-tablist {
     --padding-inline-end: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-interactive);
-    --line-color: var(--jkl-color-border-separator);
-    --indicator-color: var(--jkl-color-border-separator-hover);
+    --line-color: var(--jkl-color-border-subdued);
+    --indicator-color: var(--jkl-color-border-default);
     scroll-snap-type: x proximity;
     overflow: scroll hidden;
     scrollbar-width: none;
@@ -5270,16 +5209,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       inset-block-start: calc(anchor(end) - 2px);
       inset-inline-start: calc(anchor(--active-tab start));
       background-color: var(--indicator-color);
-      transition-timing-function: ease;
-      transition-duration: 400ms;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-lazy);
     }
   }
   .jkl-tab {
     --padding-inline-end: var(--jkl-unit-50);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     color: var(--text-color);
     padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
     border: none;
@@ -5315,13 +5251,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --text-color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-tab:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: -2px;
   }
   .jkl-tab[aria-selected=true] {
     anchor-name: --active-tab;
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   @supports not (position-anchor: --active-tab) {
@@ -5336,8 +5272,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       inset-block-end: 0;
       inset-inline-start: 0;
       background-color: var(--indicator-color);
-      transition-timing-function: ease;
-      transition-duration: 400ms;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-lazy);
     }
   }
 }
@@ -5367,11 +5303,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     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;
@@ -5379,10 +5317,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     width: clamp(15em, 100%, min(30rem, 85vw));
     padding: var(--jkl-toast-padding);
     position: relative;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
     --bar-color: var(--text-color);
@@ -5413,10 +5348,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-top: var(--jkl-unit-15);
   }
   .jkl-toast__title {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   .jkl-toast__dismiss-button {
     background-color: transparent;
@@ -5443,20 +5375,25 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     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 {
@@ -5475,12 +5412,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uyjs54k 200ms ease-out forwards;
+    animation: jkl-entering-ufcxall var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uyjs558 150ms ease-in forwards;
+    animation: jkl-exiting-ufcxalu var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uyjs54k {
+  @keyframes jkl-entering-ufcxall {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5490,7 +5427,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uyjs558 {
+  @keyframes jkl-exiting-ufcxalu {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6850,12 +6787,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
 }
 .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);
@@ -6871,7 +6808,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   box-shadow: inset 0 0 0 0.125rem var(--jkl-slider-focus-color);
 }
 .jkl-toggle-slider__legend {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--jkl-spacing-8);
   font-size: var(--jkl-slider-legend-font-size);
   line-height: var(--jkl-slider-legend-line-height);
   font-weight: var(--jkl-slider-legend-font-weight);
@@ -6917,7 +6854,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 }
 .jkl-toggle-slider__label--selected {
   --jkl-icon-weight: 400;
-  font-weight: 700;
+  font-weight: var(--jkl-font-weight-bold);
   letter-spacing: -0.014em;
   color: var(--jkl-slider-pill-text--active);
 }
@@ -6927,8 +6864,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   position: absolute;
   transition-property: width, transform;
   border-radius: 6.25rem;
-  transition-timing-function: ease;
-  transition-duration: 250ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-expressive);
 }
 @media (min-width: 680px) {
   .jkl-toggle-slider {
@@ -6954,14 +6891,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;
@@ -6972,10 +6909,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   align-items: center;
   gap: var(--jkl-unit-10);
   touch-action: none;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-toggle-switch {
   outline: 0;
@@ -7004,8 +6938,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
@@ -7027,7 +6961,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;
@@ -7049,7 +6982,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 {
@@ -7059,8 +6992,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   width: var(--jkl-toggle-switch-knob-size);
   color: var(--icon-color);
   font-size: var(--jkl-font-size-1);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
   translate: var(--knob-position);
 }
@@ -7075,13 +7008,9 @@ 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;
-}
 
 @layer jokul.components {
   .jkl-help {
@@ -7110,8 +7039,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
     padding: var(--jkl-unit-30);
     margin: var(--jkl-unit-05);
     position-anchor: --trigger;
-    background-color: var(--jkl-color-background-container-inverted);
-    color: var(--jkl-color-text-inverted);
+    background-color: var(--jkl-color-background-action);
+    color: var(--jkl-color-text-on-action);
     anchor-name: --help-box;
   }
   .jkl-help-popover[data-position=top] {