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

package/styles/components.css

@@ -25,8 +25,8 @@
     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;
@@ -77,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;
@@ -95,15 +95,15 @@
     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) {
@@ -112,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) {
@@ -244,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;
   }
@@ -256,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;
   }
@@ -357,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 {
@@ -431,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: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-udz455c 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;
@@ -485,7 +485,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-udz455c {
+  @keyframes jkl-support-icon-entrance-ufcxafr {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -533,10 +533,10 @@
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-container-inverted);
+    --background-color: var(--jkl-color-background-action);
     font: var(--jkl-text-style-paragraph-small);
     background-color: var(--background-color);
-    color: var(--jkl-color-text-inverted);
+    color: var(--jkl-color-text-on-action);
     display: inline-block;
     min-width: min-content;
     max-width: min(19.375rem, 100%);
@@ -587,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 {
@@ -611,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 {
@@ -680,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) {
@@ -698,6 +698,7 @@
     --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;
@@ -759,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;
@@ -773,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 {
@@ -781,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;
     }
   }
@@ -829,22 +833,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-udz455l;
+    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-udz4564;
+    animation-name: jkl-loader-middle-spin-ufcxaga;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-udz456e;
+    animation-name: jkl-loader-right-spin-ufcxaha;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-udz455l {
+  @keyframes jkl-loader-left-spin-ufcxag3 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -858,7 +862,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-udz4564 {
+  @keyframes jkl-loader-middle-spin-ufcxaga {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -875,7 +879,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-udz456e {
+  @keyframes jkl-loader-right-spin-ufcxaha {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -897,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));
@@ -915,7 +919,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-udz456m;
+      animation: 2s ease infinite jkl-blink-ufcxahy;
     }
   }
   .jkl-skeleton-input {
@@ -963,10 +967,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-udz456m;
+      animation: 2s ease-in-out infinite jkl-blink-ufcxahy;
     }
   }
-  @keyframes jkl-blink-udz456m {
+  @keyframes jkl-blink-ufcxahy {
     0% {
       opacity: 1;
     }
@@ -992,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;
@@ -1037,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 {
@@ -1105,12 +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);
+  --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;
@@ -1119,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 {
@@ -1156,8 +1167,8 @@
     --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-action);
-    --check-color: var(--jkl-color-border-action);
+    --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: var(--jkl-text-style-text-medium);
@@ -1168,10 +1179,37 @@
   }
   .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;
@@ -1197,15 +1235,22 @@
     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 {
@@ -1220,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);
@@ -1243,26 +1288,28 @@
     position: relative;
     padding: var(--jkl-unit-20) var(--padding-inline);
   }
+  .jkl-input-panel__header .jkl-radio-button,
+  .jkl-input-panel__header .jkl-checkbox {
+    grid-column: 1/-1;
+    grid-row: 1;
+    inline-size: 100%;
+  }
+  .jkl-input-panel__header label {
+    inline-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__header label,
-  .jkl-input-panel__header .jkl-radio-button,
-  .jkl-input-panel__header .jkl-checkbox {
-    position: unset;
-  }
-  .jkl-input-panel__header label::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    inline-size: 100%;
-    block-size: 100%;
-  }
   .jkl-input-panel__description {
     height: 0;
     overflow: hidden;
@@ -1275,18 +1322,18 @@
     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;
   }
@@ -1296,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);
@@ -1303,7 +1353,7 @@
   --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: var(--jkl-text-style-text-small);
@@ -1340,7 +1390,7 @@
   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 {
@@ -1423,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;
@@ -1441,15 +1491,15 @@
     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) {
@@ -1458,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) {
@@ -1505,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;
@@ -1520,6 +1570,7 @@
     outline: none;
     padding: 0;
     flex: 1 1 1ch;
+    min-width: 0;
     max-height: var(--jkl-combobox-search-input-height);
     background: none;
     -webkit-appearance: none;
@@ -1593,8 +1644,8 @@
     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));
@@ -1632,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 {
@@ -1646,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;
@@ -1765,6 +1818,7 @@
   }
 }
 @layer jokul.components {
+  /* Base layout */
   .jkl-modal-container,
   .jkl-modal-overlay {
     position: fixed;
@@ -1773,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;
   }
@@ -1804,26 +1875,100 @@
       border-color: CanvasText;
     }
   }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal {
-      margin: auto var(--jkl-unit-30);
-    }
+}
+@layer jokul.components {
+  .jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 0px;
+    --jkl-modal-slide-y: 12px;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-property: visibility;
+    transition-duration: 0ms;
   }
-  .jkl-modal-header {
-    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
+  .jkl-modal-container--slide-in[aria-hidden=true] {
+    display: flex;
+    visibility: hidden;
+    pointer-events: none;
+    transition-delay: var(--jkl-motion-timing-expressive);
   }
-  @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:not([aria-hidden=true]) {
+    visibility: visible;
+    transition-delay: 0ms;
+  }
+  .jkl-modal-container--slide-in .jkl-modal {
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-property: transform, opacity;
+    transform: translate(var(--jkl-modal-slide-x), var(--jkl-modal-slide-y));
+    opacity: 0;
+    will-change: transform, opacity;
+  }
+  .jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .jkl-modal-container--slide-in .jkl-modal {
+      transition-duration: 0ms;
     }
   }
+}
+@layer jokul.components {
+  /* Placement: bottom */
+  .jkl-modal-container--placement-bottom {
+    align-items: flex-end;
+  }
+  .jkl-modal-container--placement-bottom.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 0px;
+    --jkl-modal-slide-y: 24px;
+  }
+  .jkl-modal-container--placement-bottom .jkl-modal {
+    --margin: 0px;
+    width: min(100vw, var(--modal-width, 100vw));
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  /* Placement: left */
+  .jkl-modal-container--placement-left {
+    justify-content: flex-start;
+  }
+  .jkl-modal-container--placement-left.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: -24px;
+    --jkl-modal-slide-y: 0px;
+  }
+  .jkl-modal-container--placement-left .jkl-modal {
+    height: 100%;
+    max-height: 100%;
+    margin-block: 0;
+    margin-inline-start: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  /* Placement: right */
+  .jkl-modal-container--placement-right {
+    justify-content: flex-end;
+  }
+  .jkl-modal-container--placement-right.jkl-modal-container--slide-in {
+    --jkl-modal-slide-x: 24px;
+    --jkl-modal-slide-y: 0px;
+  }
+  .jkl-modal-container--placement-right .jkl-modal {
+    height: 100%;
+    max-height: 100%;
+    margin-block: 0;
+    margin-inline-end: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+@layer jokul.components {
   .jkl-modal-header {
+    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin: var(--jkl-modal-header-margin);
-    gap: var(--jkl-modal-gap);
   }
   .jkl-modal-body {
     font: var(--jkl-text-style-paragraph-medium);
@@ -1832,20 +1977,12 @@
     font: var(--jkl-text-style-heading-3);
   }
   .jkl-modal-actions {
-    --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
-  }
-  @media (width >= 0) and (max-width: 679px) {
-    .jkl-modal-actions {
-      --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
-    }
-  }
-  .jkl-modal-actions {
-    margin: var(--jkl-modal-actions-margin);
+    margin-block-start: var(--jkl-unit-50);
     display: flex;
     flex-direction: column;
-    gap: var(--jkl-unit-20);
+    gap: var(--jkl-unit-15) var(--jkl-unit-20);
   }
-  @media (min-width: 60ch) {
+  @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
     .jkl-modal-actions {
       flex-direction: row-reverse;
       align-self: flex-end;
@@ -1854,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;
@@ -1877,10 +2014,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-udz458g var(--duration) linear forwards;
+    animation: jkl-downcount-ufcxaj2 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-udz458g {
+  @keyframes jkl-downcount-ufcxaj2 {
     from {
       width: 100%;
     }
@@ -1890,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 {
@@ -1970,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 {
@@ -2002,11 +2143,15 @@
   }
 }
 @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: var(--jkl-text-style-text-small);
     appearance: none;
     position: relative;
@@ -2059,8 +2204,8 @@
     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 {
@@ -2070,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;
   }
 }
@@ -2135,9 +2280,20 @@
     padding: var(--popover-padding, 0);
     z-index: 10000;
     box-shadow: 0 4px 20px 0 var(--shadow-color);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     border-radius: var(--jkl-border-radius-s);
   }
+  .jkl-popover:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-popover-trigger:focus {
+    outline: 0;
+  }
+  .jkl-popover-trigger:focus-visible {
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
 }
 @layer jokul.components {
   .jkl-description-list {
@@ -2196,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;
@@ -2221,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);
@@ -2229,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;
@@ -2345,12 +2501,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-udz4593 0.25s ease-out;
+    animation: jkl-show-ufcxajq 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-udz4593 {
+  @keyframes jkl-show-ufcxajq {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2396,10 +2552,6 @@
     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);
@@ -2414,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 {
@@ -2426,13 +2580,15 @@
     --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;
@@ -2536,26 +2692,34 @@
     }
   }
   .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-udz45a1 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-ufcxak2 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2577,7 +2741,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-udz45a1 {
+  @keyframes jkl-dismiss-ufcxak2 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2619,10 +2783,37 @@
   }
   .jkl-radio-button__input {
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0 auto 0 0;
-    width: 1lh;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 1lh;
+    inline-size: 1lh;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    z-index: 1;
+    appearance: none;
+    background: transparent;
+    border: 0;
+  }
+  .jkl-radio-button__input {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-radio-button__input {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-radio-button__input:active, .jkl-radio-button__input:hover, .jkl-radio-button__input:focus {
+      outline: revert;
+      outline-style: revert;
+    }
   }
   .jkl-radio-button__label {
     cursor: pointer;
@@ -2648,10 +2839,18 @@
     transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
-  .jkl-radio-button__label:has(+ :checked)::before {
+  .jkl-radio-button__input:focus-visible + .jkl-radio-button__label::before {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
+  }
+  .jkl-radio-button__input:is(:hover, :active) + .jkl-radio-button__label, .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
+    --jkl-icon-weight: var(--jkl-font-weight-bold);
+  }
+  .jkl-radio-button__input:checked + .jkl-radio-button__label::before {
     content: "radio_button_checked";
   }
-  .jkl-radio-button__label:has(+ [aria-invalid=true])::before {
+  .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
     color: var(--jkl-radio-button-error-color);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
@@ -2682,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;
@@ -2700,15 +2899,15 @@
     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) {
@@ -2717,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) {
@@ -2944,7 +3143,7 @@
     --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: var(--jkl-motion-timing-expressive);
@@ -2988,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;
@@ -3047,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 {
@@ -3076,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;
@@ -3093,8 +3292,8 @@
     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 {
@@ -3114,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 {
@@ -3164,7 +3363,7 @@
 }
 @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: var(--jkl-text-style-paragraph-medium);
   }
@@ -3181,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;
@@ -3223,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;
   }
@@ -3376,16 +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 {
   .jkl-menu {
     /* 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-input-focus));
+    --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-high);
+    background-color: var(--jkl-color-background-container);
     width: 100%;
     max-width: 21rem;
     display: flex;
@@ -3438,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 {
@@ -3473,14 +3676,14 @@
 }
 .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: var(--jkl-text-style-paragraph-medium);
@@ -3564,7 +3767,7 @@
     color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-pagination-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-pagination-button--current {
@@ -3617,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 {
@@ -3631,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;
@@ -3652,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%;
@@ -3668,8 +3871,8 @@
     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));
@@ -3678,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 {
@@ -3708,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;
@@ -3716,8 +3919,8 @@
     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;
@@ -3774,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 {
@@ -3784,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 {
@@ -3817,8 +4020,8 @@
 }
 @layer jokul.components {
   .jkl-progress-bar {
-    --track-color: var(--jkl-color-border-separator);
-    --bar-color: var(--jkl-color-border-input-focus);
+    --track-color: var(--jkl-color-border-subdued);
+    --bar-color: var(--jkl-color-border-strong);
     --bar-height: 0.25rem;
     background-color: var(--track-color);
     border-radius: 6.25rem;
@@ -3839,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: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-udz45ax {
+  @keyframes jkl-downcount-ufcxakc {
     from {
       width: 100%;
     }
@@ -3858,10 +4085,13 @@
     /* 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;
@@ -3894,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 {
@@ -3928,12 +4158,12 @@
   --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;
@@ -3944,11 +4174,11 @@
   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;
 }
 
@@ -3962,7 +4192,7 @@ 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: var(--jkl-text-style-text-medium);
 }
@@ -4076,7 +4306,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   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;
 }
 
@@ -4105,7 +4335,7 @@ 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);
+  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;
@@ -4130,7 +4360,7 @@ 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;
@@ -4144,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]) {
@@ -4208,8 +4438,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     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,
@@ -4225,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;
   }
@@ -4326,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) {
@@ -4339,20 +4571,28 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-udz45ci var(--jkl-motion-timing-lazy) forwards;
+    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 {
@@ -4369,7 +4609,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-udz45ci {
+  @keyframes jkl-dismiss-ufcxalc {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -4485,7 +4725,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     z-index: 1;
     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 var(--jkl-border-width-1) 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;
@@ -4655,9 +4895,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
 }
 @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);
   }
@@ -4862,7 +5102,7 @@ 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 {
@@ -4937,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;
@@ -5011,7 +5251,7 @@ 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] {
@@ -5063,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;
@@ -5133,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 {
@@ -5165,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-udz45ct var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-ufcxall var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-udz45db var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-ufcxalu var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-udz45ct {
+  @keyframes jkl-entering-ufcxall {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5180,7 +5427,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-udz45db {
+  @keyframes jkl-exiting-ufcxalu {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6540,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);
@@ -6644,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;
@@ -6691,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
@@ -6714,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;
@@ -6736,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 {
@@ -6762,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 {
@@ -6797,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] {