@fremtind/jokul 0.37.10 → 0.37.12

package/styles/styles.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 :root,
 [data-layout-density=comfortable],
@@ -133,7 +133,7 @@
   translate: 0 0.25rem;
 }
 .jkl-accordion-item__title:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 0;
 }
 .jkl-accordion-item__arrow {
@@ -538,7 +538,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
   --jkl-text-input-action-button-size: 3rem;
   --jkl-text-input-action-button-icon-size: 1.25rem;
   --jkl-text-input-action-button-padding: 0.5rem 0;
-  --jkl-text-input-action-button-focus-position: 0.5rem;
+  --jkl-text-input-action-button-focus-position: 0.375rem;
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
@@ -565,7 +565,44 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
   --jkl-text-input-action-button-focus-position: 0;
 }
 
-.jkl-text-input-action-button {
+.jkl-text-input-wrapper {
+  border-radius: 0.1875rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--jkl-text-input-height);
+  font-size: var(--jkl-text-input-font-size);
+  line-height: var(--jkl-text-input-line-height);
+  font-weight: var(--jkl-text-input-font-weight);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, box-shadow, background-color;
+  color: var(--jkl-text-input-text-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-border-color), 0 0 0 0.0625rem transparent;
+  background-color: transparent;
+}
+.jkl-text-input-wrapper[data-invalid=true] {
+  background-color: var(--jkl-text-input-error-background-color);
+  color: var(--jkl-text-input-error-text-color);
+}
+.jkl-text-input-wrapper:hover {
+  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
+  border-color: var(--jkl-text-input-focus-color);
+}
+.jkl-text-input-wrapper:has(:active) {
+  background-color: var(--jkl-text-input-background-color);
+}
+.jkl-text-input-wrapper:has(.jkl-text-input__input:focus-visible), .jkl-text-input-wrapper:has(.jkl-text-area__text-area:focus-visible) {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
+}
+.jkl-text-input-wrapper > .jkl-icon-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: -8px;
+}
+.jkl-text-input-wrapper > .jkl-text-input-action-button {
   flex-shrink: 0;
   display: flex;
   box-sizing: border-box;
@@ -576,78 +613,33 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
   width: var(--jkl-text-input-action-button-size);
   margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
 }
-.jkl-text-input-action-button .jkl-icon-button__icon {
+.jkl-text-input-wrapper > .jkl-text-input-action-button .jkl-icon-button__icon {
   height: var(--jkl-text-input-action-button-icon-size);
   width: var(--jkl-text-input-action-button-icon-size);
 }
-.jkl-text-input-action-button:hover {
+.jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
   color: var(--jkl-text-input-focus-color);
 }
 @media screen and (forced-colors: active) {
-  .jkl-text-input-action-button:hover {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
     border: 0.125rem inset ButtonText;
   }
 }
-.jkl-text-input-action-button:focus-visible {
-  outline: none !important;
-}
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus {
-  position: relative;
-}
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus::after {
-  content: "";
-  position: absolute;
-  inset: var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position) var(--jkl-text-input-action-button-focus-position);
-  box-shadow: inset 0 0 0 0.125rem var(--jkl-text-input-focus-color);
-}
-
 @media screen and (forced-colors: active) {
-  .jkl-text-input-action-button {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button {
     border: revert;
     background-color: revert;
   }
 }
 @media screen and (forced-colors: active) {
-  .jkl-text-input-action-button {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button {
     stroke: ButtonText;
   }
-  .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
+  .jkl-text-input-wrapper > .jkl-text-input-action-button svg, .jkl-text-input-wrapper > .jkl-text-input-action-button path {
     stroke: ButtonText;
   }
 }
 
-.jkl-text-input-wrapper {
-  border-radius: 0.1875rem;
-  box-sizing: border-box;
-  max-width: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: var(--jkl-text-input-height);
-  font-size: var(--jkl-text-input-font-size);
-  line-height: var(--jkl-text-input-line-height);
-  font-weight: var(--jkl-text-input-font-weight);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: color, box-shadow, background-color;
-  color: var(--jkl-text-input-text-color);
-  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-border-color), 0 0 0 0.0625rem transparent;
-  background-color: transparent;
-}
-.jkl-text-input-wrapper:hover {
-  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
-  border-color: var(--jkl-text-input-focus-color);
-}
-.jkl-text-input-wrapper:focus-within {
-  background-color: var(--jkl-text-input-background-color);
-  box-shadow: inset 0 0 0 0.0625rem var(--jkl-text-input-focus-color), 0 0 0 0.0625rem var(--jkl-text-input-focus-color);
-  border-color: var(--jkl-text-input-focus-color);
-}
-.jkl-text-input-wrapper[data-invalid=true] {
-  background-color: var(--jkl-text-input-error-background-color);
-  color: var(--jkl-text-input-error-text-color);
-}
-
 .jkl-text-input {
   display: flex;
   flex-direction: column;
@@ -962,45 +954,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
   max-height: 100%;
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-icon-button-border-color: #1b1917;
-    --jkl-icon-button-focus-color: #636060;
-  }
-}
-[data-theme=light] {
-  --jkl-icon-button-border-color: #1b1917;
-  --jkl-icon-button-focus-color: #636060;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-icon-button-border-color: #f9f9f9;
-    --jkl-icon-button-focus-color: #c8c5c3;
-  }
-}
-[data-theme=dark] {
-  --jkl-icon-button-border-color: #f9f9f9;
-  --jkl-icon-button-focus-color: #c8c5c3;
-}
-
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-icon-button-icon-width: 1.25rem;
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-icon-button-icon-width: 0.875rem;
-}
-
 .jkl-icon-button {
   background-color: transparent;
   cursor: pointer;
   color: inherit;
   position: relative;
   transition-property: box-shadow;
+  padding: 0;
   transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
   transition-duration: 100ms;
 }
@@ -1039,19 +999,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
 .jkl-icon-button .jkl-icon--animated {
   display: revert;
 }
-.jkl-icon-button:hover {
-  color: var(--jkl-icon-button-focus-color);
-}
 .jkl-icon-button:focus-visible {
-  color: var(--jkl-icon-button-focus-color);
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  color: var(--jkl-color);
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 @media screen and (forced-colors: active) {
   .jkl-icon-button:focus-visible {
     border: revert;
   }
 }
+.jkl-icon-button:hover {
+  color: var(--jkl-color-text-interactive-hover);
+}
 @media screen and (forced-colors: active) {
   .jkl-icon-button {
     border: revert;
@@ -1135,7 +1095,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
   --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-uat1ig9 forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uhnyeai forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -1210,7 +1170,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-uat1ig9 {
+@keyframes jkl-support-icon-entrance-uhnyeai {
   0% {
     margin-right: 0;
     opacity: 0;
@@ -1248,13 +1208,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --content-padding: 1rem;
+  --content-padding: calc(var(--jkl-unit-10) * 2);
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --content-padding: 0.75rem;
+    --content-padding: calc(var(--jkl-unit-10) * 1.5);
   }
 }
 
@@ -1334,7 +1294,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   --button-color: var(--jkl-color-text-interactive-hover);
 }
 .jkl-tooltip-question-button:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 0;
 }
 .jkl-tooltip-question-button::after {
@@ -1361,6 +1321,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   color: var(--jkl-color-text-interactive-hover);
   background-image: none;
 }
+.jkl-breadcrumb a:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
+}
 .jkl-breadcrumb__list {
   display: flex;
   flex-wrap: wrap;
@@ -1425,9 +1389,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   background-image: linear-gradient(to bottom, var(--jkl-link-hover-color) 0%, var(--jkl-link-hover-color) 100%);
 }
 .jkl-link:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
-  background: none;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 0;
 }
 .jkl-link:active {
   background-position: 0 calc(100% - (0.125rem - 0.0625rem));
@@ -1491,8 +1454,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   padding-right: 0;
 }
 .jkl-nav-link:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 0;
 }
 .jkl-nav-link:focus-visible::after {
   padding-left: 0.7em;
@@ -1531,10 +1494,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 [data-layout-density=comfortable],
 [data-density=comfortable] {
   --jkl-button-padding-block: 0.5rem;
-  --jkl-button-padding-text: 1.5rem;
-  --jkl-button-padding-icon: 1rem;
+  --jkl-button-padding-text: calc(var(--jkl-unit-10) * 3);
+  --jkl-button-padding-icon: calc(var(--jkl-unit-10) * 2);
   --jkl-button-padding-icon-button: 0.5rem;
-  --jkl-button-padding-tertiary-inline: 0.25rem;
+  --jkl-button-padding-tertiary-inline: calc(var(--jkl-unit-10) * 0.5);
   --jkl-button-padding-ghost-inline: 0.5rem;
   --jkl-button-font-size: 1.125rem;
   --jkl-button-line-height: 1.75rem;
@@ -1550,12 +1513,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-button-padding-block: 0.25rem;
-  --jkl-button-padding-text: 0.75rem;
+  --jkl-button-padding-block: calc(var(--jkl-unit-10) * 0.5);
+  --jkl-button-padding-text: calc(var(--jkl-unit-10) * 1.5);
   --jkl-button-padding-icon: 0.5rem;
-  --jkl-button-padding-icon-button: 0.25rem;
-  --jkl-button-padding-tertiary-inline: 0.125rem;
-  --jkl-button-padding-ghost-inline: 0.25rem;
+  --jkl-button-padding-icon-button: calc(var(--jkl-unit-10) * 0.5);
+  --jkl-button-padding-tertiary-inline: calc(var(--jkl-unit-10) * 0.25);
+  --jkl-button-padding-ghost-inline: calc(var(--jkl-unit-10) * 0.5);
   --jkl-button-font-size: 1rem;
   --jkl-button-line-height: 1.5rem;
 }
@@ -1612,7 +1575,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.125rem;
+  gap: calc(var(--jkl-unit-10) * 0.25);
   pointer-events: none;
 }
 .jkl-button__loader {
@@ -1641,8 +1604,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   opacity: 1;
 }
 .jkl-button:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-button::before {
   content: "";
@@ -1660,7 +1623,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uat1igp;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uhnyeb9;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -1704,7 +1667,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-uat1igp {
+@keyframes jkl-tertiary-flash-uhnyeb9 {
   0% {
     opacity: 0.5;
     scale: 1;
@@ -1729,15 +1692,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-uat1igq;
+  animation-name: jkl-loader-left-spin-uhnyebe;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-uat1ih4;
+  animation-name: jkl-loader-middle-spin-uhnyec4;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-uat1ih8;
+  animation-name: jkl-loader-right-spin-uhnyecf;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -1765,7 +1728,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   margin-right: 0.3em;
 }
 
-@keyframes jkl-loader-left-spin-uat1igq {
+@keyframes jkl-loader-left-spin-uhnyebe {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -1779,7 +1742,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-uat1ih4 {
+@keyframes jkl-loader-middle-spin-uhnyec4 {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -1796,7 +1759,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-uat1ih8 {
+@keyframes jkl-loader-right-spin-uhnyecf {
   0% {
     transform: rotate(40deg) scale(0);
   }
@@ -1844,7 +1807,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uat1ihc;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uhnyede;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -1875,7 +1838,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-uat1ihh;
+    animation: 2s ease infinite jkl-blink-uhnyedx;
   }
 }
 
@@ -1931,11 +1894,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-uat1ihh;
+    animation: 2s ease-in-out infinite jkl-blink-uhnyedx;
   }
 }
 
-@keyframes jkl-sweep-uat1ihc {
+@keyframes jkl-sweep-uhnyede {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -1943,7 +1906,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-uat1ihh {
+@keyframes jkl-blink-uhnyedx {
   0% {
     opacity: 1;
   }
@@ -2122,7 +2085,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
 }
 .jkl-nav-card__tag-wrapper {
   display: flex;
-  gap: 0.75rem 1.5rem;
+  gap: calc(var(--jkl-unit-10) * 1.5) calc(var(--jkl-unit-10) * 3);
   flex-wrap: wrap;
 }
 .jkl-nav-card:hover {
@@ -2202,10 +2165,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 
 .jkl-card {
-  --padding-s: var(--jkl-spacing-4);
-  --padding-m: var(--jkl-spacing-12);
-  --padding-l: var(--jkl-spacing-16);
-  --padding-xl: var(--jkl-spacing-24);
+  --padding-s: var(--jkl-unit-05);
+  --padding-m: var(--jkl-unit-15);
+  --padding-l: var(--jkl-unit-20);
+  --padding-xl: var(--jkl-unit-30);
   --border-radius: 0.25rem;
   --border-color: transparent;
   --border-width: 0.0625rem;
@@ -2233,10 +2196,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 @media (min-width: 680px) {
   .jkl-card {
-    --padding-s: var(--jkl-spacing-8);
-    --padding-m: var(--jkl-spacing-16);
-    --padding-l: var(--jkl-spacing-24);
-    --padding-xl: var(--jkl-spacing-32);
+    --padding-s: var(--jkl-unit-10);
+    --padding-m: var(--jkl-unit-20);
+    --padding-l: var(--jkl-unit-30);
+    --padding-xl: var(--jkl-unit-40);
   }
 }
 .jkl-card[data-padding=s] {
@@ -2268,8 +2231,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --border-width: 0.125rem;
 }
 .jkl-card[data-clickable=true]:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 
 .jkl-card-image {
@@ -2317,14 +2280,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-tag-padding: var(--jkl-spacing-4) var(--jkl-spacing-8);
-  --jkl-tag-gap: var(--jkl-spacing-4);
+  --jkl-tag-padding: var(--jkl-unit-05) var(--jkl-unit-10);
+  --jkl-tag-gap: var(--jkl-unit-05);
 }
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-tag-padding: 0 var(--jkl-spacing-4);
-  --jkl-tag-gap: var(--jkl-spacing-2);
+  --jkl-tag-padding: 0 var(--jkl-unit-05);
+  --jkl-tag-gap: var(--jkl-unit-02);
 }
 
 .jkl-tag {
@@ -2407,7 +2370,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-uat1iho {
+@keyframes jkl-checkbox-checked-uhnyeej {
   0% {
     width: 0;
     height: 0;
@@ -2421,7 +2384,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uat1iii {
+@keyframes jkl-checkbox-indeterminate-uhnyeet {
   0% {
     width: 0;
   }
@@ -2449,24 +2412,26 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-uat1iho 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uhnyeej 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-uat1iii 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-uhnyeet 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
   color: var(--jkl-checkbox-focus-color);
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label > .jkl-checkbox__mark {
-  --background-color: var(--jkl-color-background-input-focus);
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-checkbox__input:disabled + .jkl-checkbox__label {
   color: var(--jkl-checkbox-disabled-color);
 }
+.jkl-checkbox__input:active {
+  --background-color: var(--jkl-color-background-input-focus);
+}
 .jkl-checkbox__label {
   display: flex;
   min-width: 0;
@@ -2477,9 +2442,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 .jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
   outline: 1px solid var(--box-color);
 }
-.jkl-checkbox__label:active {
-  --background-color: var(--jkl-color-background-input-focus);
-}
 .jkl-checkbox__text {
   margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
   translate: 0 0.0625rem;
@@ -2493,7 +2455,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   height: var(--jkl-checkbox-box-size);
   width: var(--jkl-checkbox-box-size);
   margin-block: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5);
-  margin-inline-end: var(--jkl-spacing-8);
+  margin-inline-end: var(--jkl-unit-10);
   align-self: flex-start;
   flex-shrink: 0;
   outline: none;
@@ -2558,7 +2520,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   display: inline-flex;
 }
 .jkl-checkbox--inline:not(:last-of-type) {
-  margin-right: 1.5rem;
+  margin-right: calc(var(--jkl-unit-10) * 3);
 }
 .jkl-checkbox--error {
   --background-color: var(--jkl-color-background-alert-error);
@@ -2568,25 +2530,25 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 [data-layout-density=compact],
 [data-density=compact] {
   --padding-inline-s: 0.5rem;
-  --padding-inline-l: 0.75rem;
-  --padding-icon-s: 0.25rem;
+  --padding-inline-l: calc(var(--jkl-unit-10) * 1.5);
+  --padding-icon-s: calc(var(--jkl-unit-10) * 0.5);
   --padding-icon-l: 0.5rem;
-  --height-l: 2rem;
-  --height-s: 1.5rem;
-  --gap-s: 0.125rem;
-  --gap-l: 0.25rem;
+  --height-l: calc(var(--jkl-unit-10) * 4);
+  --height-s: calc(var(--jkl-unit-10) * 3);
+  --gap-s: calc(var(--jkl-unit-10) * 0.25);
+  --gap-l: calc(var(--jkl-unit-10) * 0.5);
 }
 
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --padding-inline-s: 0.75rem;
-  --padding-inline-l: 1rem;
+  --padding-inline-s: calc(var(--jkl-unit-10) * 1.5);
+  --padding-inline-l: calc(var(--jkl-unit-10) * 2);
   --padding-icon-s: 0.5rem;
-  --padding-icon-l: 0.75rem;
-  --height-l: 2.5rem;
-  --height-s: 2rem;
-  --gap-s: 0.25rem;
+  --padding-icon-l: calc(var(--jkl-unit-10) * 1.5);
+  --height-l: calc(var(--jkl-unit-10) * 5);
+  --height-s: calc(var(--jkl-unit-10) * 4);
+  --gap-s: calc(var(--jkl-unit-10) * 0.5);
   --gap-l: 0.5rem;
 }
 
@@ -2632,8 +2594,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   transition-property: opacity;
 }
 .jkl-chip:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-chip:hover::after {
   opacity: 0.15;
@@ -2740,14 +2702,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --jkl-combobox-line-height: var(--jkl-body-line-height);
   --jkl-combobox-font-weight: var(--jkl-body-font-weight);
   --jkl-combobox-button-padding: 0.5rem 0.375rem 0.5rem
-      0.75rem;
-  --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem 0.5rem 0.5rem;
+      /* her har vi en random 6px verdi også*/ calc(var(--jkl-unit-10) * 1.5);
+  --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem
+      0.5rem 0.5rem;
   --jkl-combobox-input-height: 3rem;
   --jkl-combobox-actions-right: 0.5rem;
   --jkl-combobox-actions-top: 0.75rem;
   --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
-  --jkl-combobox-native-padding: 0 2.5rem 0 0.5rem;
-  --jkl-combobox-option-padding: 0.5rem 0.75rem;
+  --jkl-combobox-native-padding: 0 calc(var(--jkl-unit-10) * 5) 0 0.5rem;
+  --jkl-combobox-option-padding: 0.5rem calc(var(--jkl-unit-10) * 1.5);
   --jkl-combobox-option-line-height: 2rem;
   --jkl-combobox-input-padding: 3.75rem;
   --jkl-combobox-search-input-height: 1.75rem;
@@ -2765,17 +2728,18 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --jkl-combobox-font-size: var(--jkl-small-font-size);
   --jkl-combobox-line-height: var(--jkl-small-line-height);
   --jkl-combobox-font-weight: var(--jkl-small-font-weight);
-  --jkl-combobox-button-padding: 0.25rem 1.875rem 0.25rem
+  --jkl-combobox-button-padding: calc(var(--jkl-unit-10) * 0.5) 1.875rem calc(var(--jkl-unit-10) * 0.5)
       0.5rem;
-  --jkl-combobox-button-active-value-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
+  --jkl-combobox-button-active-value-padding: calc(var(--jkl-unit-10) * 0.5) 1.875rem
+      calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-combobox-input-height: 2rem;
   --jkl-combobox-actions-right: 0;
   --jkl-combobox-actions-top: 0.375rem;
-  --jkl-combobox-search-input-padding: 0.25rem 0.5rem;
-  --jkl-combobox-native-padding: 1.5rem 0.25rem 0.25rem;
-  --jkl-combobox-option-padding: 0.25rem 0.5rem;
+  --jkl-combobox-search-input-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
+  --jkl-combobox-native-padding: calc(var(--jkl-unit-10) * 3) calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 0.5);
+  --jkl-combobox-option-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-combobox-option-line-height: 1.5rem;
-  --jkl-combobox-input-padding: 0.75rem;
+  --jkl-combobox-input-padding: calc(var(--jkl-unit-10) * 1.5);
   --jkl-combobox-search-input-height: 1.25rem;
 }
 
@@ -2821,12 +2785,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 .jkl-combobox__wrapper--active-value {
   padding: var(--jkl-combobox-button-active-value-padding);
 }
-.jkl-combobox__wrapper:focus {
-  border-color: var(--jkl-combobox-focus-color);
-  color: var(--jkl-combobox-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
+.jkl-combobox__wrapper:has(:focus-visible) {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
   background-color: var(--jkl-combobox-open-background-color);
 }
+.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
+  outline: none;
+}
 .jkl-combobox__wrapper:hover {
   border-color: var(--jkl-combobox-focus-color);
   box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
@@ -2891,7 +2857,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   right: -0.0625rem;
   background-color: var(--jkl-combobox-open-background-color);
   border: 0.125rem solid var(--jkl-combobox-focus-color);
-  border-top: none;
   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));
@@ -2942,7 +2907,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   display: flex;
   position: absolute;
   right: var(--jkl-combobox-actions-right);
-  gap: 0.25rem;
+  gap: calc(var(--jkl-unit-10) * 0.5);
   top: var(--jkl-combobox-actions-top);
 }
 .jkl-combobox__chips {
@@ -2977,21 +2942,15 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 .jkl-combobox--invalid .jkl-combobox__search-input::selection {
   background-color: var(--jkl-combobox-search-input-selection-color);
 }
-.jkl-combobox--menu-open .jkl-combobox__wrapper {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-color: var(--jkl-combobox-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color) inset;
-}
-.jkl-combobox--menu-open .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
-  transform: translateY(calc(-50% + -0.1875rem));
-}
 .jkl-combobox--menu-closed .jkl-combobox__search-input {
   position: absolute;
   background-color: transparent;
   width: 94%;
   padding-right: 0;
 }
+.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions {
+  transform: translateY(-0.1875rem);
+}
 
 .jkl-cookie-consent-modal {
   position: fixed;
@@ -3017,7 +2976,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   left: 0;
   right: 0;
   width: 100%;
-  padding: 2.5rem 2.5rem 1.875rem 2.5rem;
+  padding: calc(var(--jkl-unit-10) * 5) calc(var(--jkl-unit-10) * 5) 1.875rem calc(var(--jkl-unit-10) * 5);
   min-width: 20rem;
   max-width: 41.25rem;
   background-color: var(--jkl-background-color);
@@ -3038,10 +2997,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-cookie-consent-modal__content {
-    top: 2.5rem;
-    margin: 1.5rem;
-    max-width: calc(100% - 1.5rem - 1.5rem);
-    padding: 1.5rem;
+    top: calc(var(--jkl-unit-10) * 5);
+    margin: calc(var(--jkl-unit-10) * 3);
+    max-width: calc(100% - calc(var(--jkl-unit-10) * 3) - calc(var(--jkl-unit-10) * 3));
+    padding: calc(var(--jkl-unit-10) * 3);
   }
 }
 @media screen and (forced-colors: active) {
@@ -3050,7 +3009,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   }
 }
 .jkl-cookie-consent-modal__checklist.jkl-list {
-  margin-block: 1rem;
+  margin-block: calc(var(--jkl-unit-10) * 2);
 }
 .jkl-cookie-consent-modal__info-text {
   font-size: 1rem;
@@ -3061,7 +3020,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   --jkl-icon-opsz: 20;
 }
 .jkl-cookie-consent-modal__header {
-  margin-bottom: 1.5rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 3);
   font-size: 1.3125rem;
   line-height: 1.75rem;
   font-weight: 700;
@@ -3079,13 +3038,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 .jkl-cookie-consent-modal__checkbox {
   margin-bottom: 0.5rem;
-  margin-top: 1.5rem;
+  margin-top: calc(var(--jkl-unit-10) * 3);
 }
 .jkl-cookie-consent-modal__button-group {
-  margin-top: 2.5rem;
+  margin-top: calc(var(--jkl-unit-10) * 5);
 }
 .jkl-cookie-consent-modal__button-group > :not(:first-child) {
-  margin-left: 1.5rem;
+  margin-left: calc(var(--jkl-unit-10) * 3);
 }
 
 /*
@@ -3121,7 +3080,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 
 .jkl-list {
   list-style-type: "•";
-  padding-left: 1rem;
+  padding-left: calc(var(--jkl-unit-10) * 2);
   margin: 0;
 }
 .jkl-list > .jkl-list__item > .jkl-list {
@@ -3142,7 +3101,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 }
 .jkl-list__item {
   color: var(--jkl-list-text-color);
-  padding-left: 0.75rem;
+  padding-left: calc(var(--jkl-unit-10) * 1.5);
 }
 .jkl-list__item::marker {
   color: var(--jkl-list-text-color);
@@ -3183,63 +3142,33 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   }
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-calendar-text-color: #1b1917;
-    --jkl-calendar-background-color: #ffffff;
-    --jkl-calendar-border-color: #1b1917;
-    --jkl-calendar-focus-color: #1b1917;
-  }
-}
-[data-theme=light] {
-  --jkl-calendar-text-color: #1b1917;
-  --jkl-calendar-background-color: #ffffff;
-  --jkl-calendar-border-color: #1b1917;
-  --jkl-calendar-focus-color: #1b1917;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-calendar-text-color: #f9f9f9;
-    --jkl-calendar-background-color: #313030;
-    --jkl-calendar-border-color: #f9f9f9;
-    --jkl-calendar-focus-color: #f9f9f9;
-  }
-}
-[data-theme=dark] {
-  --jkl-calendar-text-color: #f9f9f9;
-  --jkl-calendar-background-color: #313030;
-  --jkl-calendar-border-color: #f9f9f9;
-  --jkl-calendar-focus-color: #f9f9f9;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16)
-      var(--jkl-spacing-16);
-  --jkl-calendar-gap: var(--jkl-spacing-12);
+  --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) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
-        var(--jkl-spacing-16);
+    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+        var(--jkl-unit-20);
   }
 }
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8)
-      var(--jkl-spacing-16);
+  --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10)
+      var(--jkl-unit-20);
   --jkl-calendar-gap: 0;
 }
 
 .jkl-calendar {
   display: block;
-  background-color: var(--jkl-calendar-background-color);
-  color: var(--jkl-calendar-text-color);
+  background-color: var(--jkl-color-background-container-high);
+  color: var(--jkl-color);
 }
 .jkl-calendar__padding {
   display: flex;
@@ -3295,7 +3224,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -3322,11 +3251,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
 .jkl-calendar-navigation__arrow:hover {
   color: var(--jkl-calendar-navigation-arrow-focus-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation__arrow:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: -0.125rem;
+.jkl-calendar-navigation__arrow:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: -2px;
 }
-
 .jkl-calendar-navigation__arrow:disabled {
   color: var(--jkl-calendar-disabled-day-color);
 }
@@ -3383,17 +3311,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   color: var(--jkl-select-text-color);
   background-color: var(--jkl-select-open-background-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navigation-dropdown__select:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: 1px;
+.jkl-calendar-navigation-dropdown__select:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
-
 .jkl-calendar-navigation-dropdown__chevron {
   margin-left: calc(var(--chevron-size) * -1);
   pointer-events: none;
 }
 .jkl-calendar-navigation-dropdown + .jkl-calendar-navigation-dropdown {
-  margin-inline-start: var(--jkl-spacing-8);
+  margin-inline-start: var(--jkl-unit-10);
 }
 
 .jkl-calendar-table th {
@@ -3403,7 +3330,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   --jkl-icon-weight: 300;
   --jkl-icon-size: 1.25rem;
   --jkl-icon-opsz: 20;
-  padding-bottom: var(--jkl-spacing-8);
+  padding-bottom: var(--jkl-unit-10);
 }
 .jkl-calendar-table td {
   text-align: center;
@@ -3498,10 +3425,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   width: var(--jkl-calendar-date-size);
   border-radius: 50%;
   background-color: transparent;
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
   margin: var(--jkl-calendar-date-margin);
   padding: 0;
-  padding-top: 0.125rem;
+  padding-top: calc(var(--jkl-unit-10) * 0.25);
   transition-timing-function: ease-out;
   transition-duration: 75ms;
   transition-property: color, background-color, box-shadow;
@@ -3549,14 +3476,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-navig
   cursor: pointer;
 }
 .jkl-calendar-date-button[aria-pressed=true]:hover {
-  color: var(--jkl-calendar-text-color);
+  color: var(--jkl-color);
 }
 .jkl-calendar-date-button:disabled {
   color: var(--jkl-calendar-disabled-day-color);
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-button:focus {
-  outline: 0.125rem solid var(--jkl-calendar-focus-color);
-  outline-offset: 0.125rem;
+.jkl-calendar-date-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 
 @media screen and (prefers-color-scheme: light) {
@@ -3672,7 +3599,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
 }
 
 .jkl-expandable {
-  --border-radius: 0.25rem;
   background-color: var(--jkl-color-background-container-low);
   border-radius: var(--border-radius);
   box-sizing: border-box;
@@ -3695,22 +3621,39 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
   border: 1px solid var(--jkl-color-border-separator);
   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);
 }
-.jkl-expandable--stroke + .jkl-expandable--stroke {
+.jkl-expandable__wrapper {
+  --border-radius: 0.25rem;
+  --outline-offset: 3px;
+  position: relative;
+}
+.jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
   border-top: none;
 }
-.jkl-expandable--stroke:first-child {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
+.jkl-expandable__wrapper:first-child {
+  --border-top-left-radius: var(--border-radius);
+  --border-top-right-radius: var(--border-radius);
 }
-.jkl-expandable--stroke:last-child {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+.jkl-expandable__wrapper:last-child {
+  --border-bottom-left-radius: var(--border-radius);
+  --border-bottom-right-radius: var(--border-radius);
 }
-@media (hover: hover) {
-  .jkl-expandable:hover .jkl-expander {
-    background-color: var(--jkl-color-background-interactive-selected);
-  }
+.jkl-expandable__wrapper:has(:focus-visible):has(.jkl-expandable--stroke) {
+  --outline-offset: -1px;
+}
+.jkl-expandable__wrapper:has(:focus-visible) .jkl-expandable__focus-container {
+  outline: 3px solid var(--jkl-color-border-action);
+  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;
+  inset: 0;
 }
 
 .jkl-expander {
@@ -3722,6 +3665,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
   width: 100%;
   padding: 1rem;
   cursor: pointer;
+  color: var(--jkl-color);
   display: flex;
   gap: 0.5rem;
   align-items: center;
@@ -3755,6 +3699,26 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
     background-color: var(--jkl-color-background-interactive-hover);
   }
 }
+.jkl-expander {
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-expander {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-expander:active, .jkl-expander:hover, .jkl-expander:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
 
 .jkl-old-expander {
   --color: var(--jkl-color-text-interactive);
@@ -3792,8 +3756,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
 }
 .jkl-old-expander:focus-visible {
   border: none;
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-old-expander:focus-visible .jkl-old-expander__arrow {
   transform: translateY(0.1875rem);
@@ -3835,7 +3799,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
   padding: 1rem 0 2.5rem 0;
 }
 
-@keyframes jkl-show-uat1iij {
+@keyframes jkl-show-uhnyefp {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -3855,7 +3819,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
 }
 .jkl-feedback__step-counter {
   color: var(--jkl-color-text-subdued);
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 2);
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 400;
@@ -3870,7 +3834,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-uat1iij 0.25s ease-out;
+  animation: jkl-show-uhnyefp 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;
@@ -3951,17 +3915,17 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-message-icon-size: 1.5rem;
   --jkl-message-icon-left: 1rem;
   --jkl-message-icon-top: 1.5rem;
-  --jkl-message-title-margin: 0 0 0.25rem 0;
+  --jkl-message-title-margin: 0 0 calc(var(--jkl-unit-10) * 0.5) 0;
   --jkl-message-dismiss-button-size: 2.75rem;
-  --jkl-message-gap: 0.75rem;
-  --jkl-message-padding: 1rem 0.75rem;
+  --jkl-message-gap: calc(var(--jkl-unit-10) * 1.5);
+  --jkl-message-padding: calc(var(--jkl-unit-10) * 2) calc(var(--jkl-unit-10) * 1.5);
 }
 @media (min-width: 680px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-message-gap: 1rem;
-    --jkl-message-padding: 1.5rem 1rem;
+    --jkl-message-gap: calc(var(--jkl-unit-10) * 2);
+    --jkl-message-padding: calc(var(--jkl-unit-10) * 3) calc(var(--jkl-unit-10) * 2);
   }
 }
 
@@ -3978,7 +3942,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-message-icon-top: 0.875rem;
   --jkl-message-dismiss-button-size: 2rem;
   --jkl-message-gap: 0.5rem;
-  --jkl-message-padding: 0.75rem 0.5rem;
+  --jkl-message-padding: calc(var(--jkl-unit-10) * 1.5) 0.5rem;
 }
 
 .jkl-message {
@@ -4031,11 +3995,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   grid-area: dismiss;
   justify-self: end;
   position: relative;
-  margin-left: var(--jkl-message-gap);
   background-color: transparent;
   padding: 0;
   cursor: pointer;
   color: inherit;
+  display: grid;
+  place-content: center;
 }
 .jkl-message__dismiss-button {
   outline: 0;
@@ -4071,13 +4036,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 .jkl-message__dismiss-button::after {
-  --tap-increment: calc(
-      (var(--jkl-message-dismiss-button-size) - 1.25rem) / 2 *
-          - 1
-  );
   content: "";
   position: absolute;
-  inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
+  display: block;
+  width: var(--jkl-message-dismiss-button-size);
+  height: var(--jkl-message-dismiss-button-size);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .jkl-message__dismiss-button:hover {
   color: #636060;
@@ -4091,8 +4057,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 .jkl-message__dismiss-button:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 0;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-message--full {
   max-width: 100%;
@@ -4110,7 +4076,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --background-color: var(--jkl-color-background-alert-success);
 }
 .jkl-message--dismissed {
-  animation: jkl-dismiss-uat1iiq 400ms ease-in-out forwards;
+  animation: jkl-dismiss-uhnyegm 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -4130,7 +4096,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 
-@keyframes jkl-dismiss-uat1iiq {
+@keyframes jkl-dismiss-uhnyegm {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -4141,7 +4107,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 .jkl-form-error-message {
-  padding-bottom: 2.5rem;
+  padding-bottom: calc(var(--jkl-unit-10) * 5);
 }
 
 :root,
@@ -4177,7 +4143,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-radio-button-height: 1.75rem;
   --jkl-radio-button-line-height: 1.5rem;
   --jkl-radio-button-size: 1.125rem;
-  --jkl-radio-button-text-margin: 0.25rem 0;
+  --jkl-radio-button-text-margin: calc(var(--jkl-unit-10) * 0.5) 0;
   --jkl-radio-button-text-transform: translate3d(0, 0, 0);
   --jkl-radio-button-dot-margin: 0.4375rem 0.5rem 0.4375rem 0;
   --jkl-radio-button-dot-size: 0.625rem;
@@ -4186,7 +4152,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-uat1ijp {
+@keyframes jkl-dot-in-uhnyeh0 {
   0% {
     transform: scale(0.8);
   }
@@ -4231,7 +4197,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 }
 .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
   --dot-color: var(--jkl-color-border-action);
-  animation: jkl-dot-in-uat1ijp 150ms ease;
+  animation: jkl-dot-in-uhnyeh0 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4246,8 +4212,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --background-color: var(--jkl-color-background-input-focus);
 }
 .jkl-radio-button__input:focus-visible + .jkl-radio-button__label > .jkl-radio-button__dot {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-radio-button--error .jkl-radio-button__input:focus-visible + .jkl-radio-button__label {
   --background-color: var(--jkl-color-background-alert-error);
@@ -4327,7 +4293,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --outer-border-color: var(--jkl-color-border-input);
   --outer-border-thickness: 0.0625rem;
   --background-color: transparent;
-  outline: var(--outer-border-thickness) solid var(--outer-border-color);
+  box-shadow: inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);
   border-radius: 4px;
   padding-left: 1rem;
   background-color: var(--background-color);
@@ -4371,17 +4337,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   padding-bottom: 24px;
   height: auto;
 }
-.jkl-input-panel:has(:focus-visible), .jkl-input-panel:hover {
-  --outer-border-thickness: 0.125rem;
-  --outer-border-color: var(--jkl-color-border-separator-hover);
+.jkl-input-panel:has(:focus-visible) {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-input-panel:has(:checked) {
-  --outer-border-thickness: 0.125rem;
-  --outer-border-color: var(--jkl-color-border-action);
   --background-color: var(--jkl-color-background-container-high);
 }
+.jkl-input-panel:hover {
+  --outer-border-color: var(--jkl-color-border-separator-hover);
+  --outer-border-thickness: 0.125rem;
+}
 
-@keyframes jkl-dot-in-uat1ikn {
+@keyframes jkl-dot-in-uhnyehp {
   0% {
     transform: scale(0.8);
   }
@@ -4429,7 +4397,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
-  animation: jkl-dot-in-uat1ikn 150ms ease;
+  animation: jkl-dot-in-uhnyehp 150ms ease;
 }
 .jkl-radio-panel:has(:checked) {
   --radio-dot-color: var(--jkl-color-border-action);
@@ -4441,7 +4409,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --radio-dot-color: var(--jkl-color-text-on-alert);
 }
 
-@keyframes jkl-checkbox-checked-uat1iku {
+@keyframes jkl-checkbox-checked-uhnyei8 {
   0% {
     width: 0;
     height: 0;
@@ -4504,7 +4472,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-uat1iku 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uhnyei8 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -4515,12 +4483,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-link-list-padding: var(--jkl-spacing-8);
+  --jkl-link-list-padding: var(--jkl-unit-10);
 }
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-link-list-padding: var(--jkl-spacing-4);
+  --jkl-link-list-padding: var(--jkl-unit-05);
 }
 
 .jkl-link-list {
@@ -4551,7 +4519,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   display: flex;
   justify-content: space-between;
   align-items: first baseline;
-  gap: var(--jkl-spacing-16);
+  gap: var(--jkl-unit-20);
   padding: var(--jkl-link-list-padding) 0;
   border-top: 0.0625rem solid var(--border-color);
   width: 100%;
@@ -4568,7 +4536,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 .jkl-link-list-link:focus-visible {
   --border-color: transparent;
   z-index: 1;
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 0;
 }
 .jkl-link-list-link__arrow {
@@ -4686,7 +4654,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 [data-layout-density=comfortable],
 [data-density=comfortable] {
   --jkl-menu-item-height: 3rem;
-  --jkl-menu-item-padding: 0.5rem 1.5rem;
+  --jkl-menu-item-padding: 0.5rem calc(var(--jkl-unit-10) * 3);
   --jkl-menu-item-font-size: var(--jkl-body-font-size);
   --jkl-menu-item-line-height: var(--jkl-body-line-height);
   --jkl-menu-item-font-weight: var(--jkl-body-font-weight);
@@ -4695,7 +4663,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 [data-layout-density=compact],
 [data-density=compact] {
   --jkl-menu-item-height: jkl.rem(32px);
-  --jkl-menu-item-padding: 0.25rem 0.75rem;
+  --jkl-menu-item-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 1.5);
   --jkl-menu-item-font-size: var(--jkl-small-font-size);
   --jkl-menu-item-line-height: var(--jkl-small-line-height);
   --jkl-menu-item-font-weight: var(--jkl-small-font-weight);
@@ -4741,7 +4709,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 }
 .jkl-menu-item__content {
   display: flex;
-  gap: 0.25rem;
+  gap: calc(var(--jkl-unit-10) * 0.5);
   justify-content: flex-start;
   overflow: hidden;
   white-space: nowrap;
@@ -4820,19 +4788,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-modal-title-font-size: var(--jkl-heading-3-font-size);
   --jkl-modal-title-line-height: var(--jkl-heading-3-line-height);
   --jkl-modal-title-font-weight: var(--jkl-heading-3-font-weight);
-  --jkl-modal-padding: 2.5rem;
+  --jkl-modal-padding: calc(var(--jkl-unit-10) * 5);
   --jkl-modal-min-width: 13.75rem;
   --jkl-modal-max-width: 41.25rem;
-  --jkl-modal-header-margin: 0 0 1.5rem;
-  --jkl-modal-actions-margin: 2.5rem 0 0 0;
+  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 3);
+  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 5) 0 0 0;
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-modal-padding: 2rem;
-    --jkl-modal-header-margin: 0 0 1rem;
-    --jkl-modal-actions-margin: 2rem 0 0 0;
+    --jkl-modal-padding: calc(var(--jkl-unit-10) * 4);
+    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
+    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
   }
 }
 
@@ -4844,9 +4812,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   --jkl-modal-title-font-size: var(--jkl-heading-4-font-size);
   --jkl-modal-title-line-height: var(--jkl-heading-4-line-height);
   --jkl-modal-title-font-weight: var(--jkl-heading-4-font-weight);
-  --jkl-modal-padding: 1.5rem;
-  --jkl-modal-header-margin: 0 0 0.75rem;
-  --jkl-modal-actions-margin: 1.5rem 0 0 0;
+  --jkl-modal-padding: calc(var(--jkl-unit-10) * 3);
+  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
+  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
   --jkl-modal-min-width: 13.75rem;
 }
 
@@ -4891,7 +4859,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-modal {
-    margin: auto 1.5rem;
+    margin: auto calc(var(--jkl-unit-10) * 3);
   }
 }
 
@@ -4920,7 +4888,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   margin: var(--jkl-modal-actions-margin);
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
 }
 
 .jkl-pagination {
@@ -4951,8 +4919,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   color: var(--jkl-color-text-interactive-hover);
 }
 .jkl-pagination-button:focus-visible {
-  outline: 0.125rem solid var(--jkl-color-border-action);
-  outline-offset: 0;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-pagination-button--current {
   --jkl-icon-weight: 500;
@@ -4969,14 +4937,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 
 [data-layout-density=compact],
 [data-density=compact] {
-  --jkl-select-input-height: 2rem;
-  --jkl-select-arrow-right: 0.25rem;
-  --jkl-select-button-padding: 0.25rem 2rem 0.25rem
+  --jkl-select-input-height: calc(var(--jkl-unit-10) * 4);
+  --jkl-select-arrow-right: calc(var(--jkl-unit-10) * 0.5);
+  --jkl-select-button-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 4) calc(var(--jkl-unit-10) * 0.5)
       0.5rem;
-  --jkl-select-search-input-padding: 0.25rem 0.5rem;
-  --jkl-select-native-padding: 0.25rem 1.5rem 0.25rem
-      0.25rem;
-  --jkl-select-option-padding: 0.25rem 0.5rem;
+  --jkl-select-search-input-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
+  --jkl-select-native-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 3) calc(var(--jkl-unit-10) * 0.5)
+      calc(var(--jkl-unit-10) * 0.5);
+  --jkl-select-option-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-select-font-size: var(--jkl-small-font-size);
   --jkl-select-line-height: var(--jkl-small-line-height);
   --jkl-select-font-weight: var(--jkl-small-font-weight);
@@ -4985,13 +4953,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-select-input-height: 3rem;
+  --jkl-select-input-height: calc(var(--jkl-unit-10) * 6);
   --jkl-select-arrow-right: 0.5rem;
   --jkl-select-button-padding: 0.5rem 2.25rem 0.5rem
-      0.75rem;
+      calc(var(--jkl-unit-10) * 1.5);
   --jkl-select-search-input-padding: var(--jkl-select-button-padding);
-  --jkl-select-native-padding: 0 2.5rem 0 0.5rem;
-  --jkl-select-option-padding: 0.5rem 0.75rem;
+  --jkl-select-native-padding: 0 calc(var(--jkl-unit-10) * 5) 0 0.5rem;
+  --jkl-select-option-padding: 0.5rem calc(var(--jkl-unit-10) * 1.5);
   --jkl-select-font-size: var(--jkl-body-font-size);
   --jkl-select-line-height: var(--jkl-body-line-height);
   --jkl-select-font-weight: var(--jkl-body-font-weight);
@@ -5034,6 +5002,10 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 .jkl-select *:focus {
   outline: none;
 }
+.jkl-select .jkl-tooltip-question-button:focus {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 0;
+}
 .jkl-select select {
   appearance: none;
 }
@@ -5088,10 +5060,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   color: var(--jkl-color-text-default);
 }
 .jkl-select__search-input:focus, .jkl-select__button:focus {
-  border-color: var(--jkl-color-border-input-focus);
-  color: var(--jkl-color-border-input-focus);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
-  background-color: var(--jkl-color-background-container-high);
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-select__search-input:hover, .jkl-select__button:hover {
   border-color: var(--jkl-color-border-input-focus);
@@ -5127,7 +5097,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
     fill: CanvasText;
   }
 }
-:has([aria-invalid=true]) .jkl-select__arrow {
+.jkl-select:has([aria-invalid=true]) .jkl-select__arrow {
   color: var(--jkl-color-text-on-alert);
 }
 .jkl-select__options-menu {
@@ -5279,11 +5249,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 }
 
 .jkl-countdown__tracker {
-  animation: jkl-downcount-uat1ilh var(--duration) linear forwards;
+  animation: jkl-downcount-uhnyeiz var(--duration) linear forwards;
   animation-play-state: var(--play-state, running);
 }
 
-@keyframes jkl-downcount-uat1ilh {
+@keyframes jkl-downcount-uhnyeiz {
   from {
     width: 100%;
   }
@@ -5387,13 +5357,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
 .jkl-system-message__content {
   box-sizing: border-box;
   padding: var(--jkl-system-message-content-padding);
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
   align-items: flex-start;
   width: 100%;
   margin: 0 auto;
 }
 .jkl-system-message__icon {
-  align-self: flex-start;
   height: var(--jkl-system-message-icon-height);
   margin: var(--jkl-system-message-icon-padding);
   flex-shrink: 0;
@@ -5416,15 +5386,22 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   background-color: transparent;
   padding: 0;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+  display: grid;
+  place-content: center;
+  position: relative;
   flex-shrink: 0;
+  margin-top: 0.1875rem;
+  color: inherit;
+}
+.jkl-system-message__dismiss-button::after {
+  content: "";
+  position: absolute;
+  display: block;
   width: var(--jkl-system-message-dismiss-button-size);
   height: var(--jkl-system-message-dismiss-button-size);
-  margin: var(--jkl-system-message-dismiss-button-margin);
-  color: inherit;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 @media screen and (forced-colors: active) {
   .jkl-system-message__dismiss-button {
@@ -5470,21 +5447,21 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
     stroke: ButtonText;
   }
 }
-html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus {
-  outline: 2px solid #1b1917;
+.jkl-system-message__dismiss-button:focus-visible {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 @media screen and (forced-colors: active) {
-  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus {
+  .jkl-system-message__dismiss-button:focus-visible {
     outline: 2px solid ButtonText;
     outline-offset: 2px;
   }
 }
-
 .jkl-system-message__message, .jkl-system-message__message:last-child {
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-uat1im5 400ms ease-in forwards;
+  animation: jkl-dismiss-uhnyejl 400ms ease-in forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -5516,7 +5493,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   }
 }
 
-@keyframes jkl-dismiss-uat1im5 {
+@keyframes jkl-dismiss-uhnyejl {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -5720,8 +5697,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   transition-duration: 75ms;
   transition-property: opacity;
   display: inline-block;
-  margin-bottom: 0.125rem;
-  margin-left: 0.25rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 0.25);
+  margin-left: calc(var(--jkl-unit-10) * 0.5);
   vertical-align: middle;
   opacity: 0;
   width: 1.2em;
@@ -5740,14 +5717,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
 
 .jkl-table-pagination {
   display: flex;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
   flex-direction: column;
   width: 100%;
 }
 @media (min-width: 680px) {
   .jkl-table-pagination {
     flex-direction: row;
-    gap: 0.75rem;
+    gap: calc(var(--jkl-unit-10) * 1.5);
     justify-content: space-between;
   }
 }
@@ -5766,7 +5743,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   white-space: nowrap;
 }
 .jkl-table-pagination__picker--page {
-  padding-inline-end: 1.5rem;
+  padding-inline-end: calc(var(--jkl-unit-10) * 3);
   width: min(12rem, 100%);
 }
 @media (min-width: 680px) {
@@ -5786,7 +5763,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
   flex-direction: column;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
 }
 @media (min-width: 680px) {
   .jkl-table-pagination__nav {
@@ -6089,8 +6066,8 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40)
-      var(--jkl-spacing-12) var(--jkl-spacing-2);
+  --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
+      var(--jkl-unit-02);
   --jkl-tab-font-size: var(--jkl-body-font-size);
   --jkl-tab-line-height: var(--jkl-body-line-height);
   --jkl-tab-font-weight: var(--jkl-body-font-weight);
@@ -6099,8 +6076,8 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24)
-        var(--jkl-spacing-12) var(--jkl-spacing-2);
+    --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
+        var(--jkl-unit-15) var(--jkl-unit-02);
   }
 }
 
@@ -6109,8 +6086,8 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   --jkl-tab-font-size: var(--jkl-small-font-size);
   --jkl-tab-line-height: var(--jkl-small-line-height);
   --jkl-tab-font-weight: var(--jkl-small-font-weight);
-  --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32)
-      var(--jkl-spacing-4) 0;
+  --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
+      0;
 }
 
 .jkl-tabs {
@@ -6166,7 +6143,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   background-color: transparent;
   cursor: pointer;
   position: relative;
-  scroll-margin-inline-start: var(--jkl-spacing-16);
+  scroll-margin-inline-start: var(--jkl-unit-20);
   scroll-snap-align: start;
   text-decoration: none;
   white-space: nowrap;
@@ -6195,7 +6172,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   --text-color: var(--jkl-color-text-interactive-hover);
 }
 .jkl-tab:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-action);
   outline-offset: -2px;
 }
 .jkl-tab[aria-selected=true] {
@@ -6207,13 +6184,13 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --jkl-toast-padding: 1rem;
+  --jkl-toast-padding: calc(var(--jkl-unit-10) * 2);
 }
 @media (width >= 0) and (max-width: 679px) {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-toast-padding: 0.75rem;
+    --jkl-toast-padding: calc(var(--jkl-unit-10) * 1.5);
   }
 }
 
@@ -6228,7 +6205,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   display: flex;
   justify-content: center;
   position: fixed;
-  bottom: 1.5rem;
+  bottom: calc(var(--jkl-unit-10) * 3);
   right: 0;
   left: 0;
   width: 100%;
@@ -6240,11 +6217,11 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: calc(var(--jkl-unit-10) * 2);
 }
 .jkl-toast-region--left {
   justify-content: flex-start;
-  left: 1.5rem;
+  left: calc(var(--jkl-unit-10) * 3);
 }
 
 .jkl-toast {
@@ -6287,7 +6264,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 }
 .jkl-toast__progress {
   grid-area: progress;
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 2);
   margin-inline: calc(-1 * var(--jkl-toast-padding));
 }
 .jkl-toast__progress .jkl-countdown {
@@ -6297,8 +6274,8 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 }
 .jkl-toast__icon {
   grid-area: icon;
-  width: 1.5rem;
-  margin-right: 1rem;
+  width: calc(var(--jkl-unit-10) * 3);
+  margin-right: calc(var(--jkl-unit-10) * 2);
 }
 @media screen and (forced-colors: active) {
   .jkl-toast__icon {
@@ -6315,7 +6292,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   margin-top: -0.125rem;
 }
 .jkl-toast__title {
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 calc(var(--jkl-unit-10) * 0.5) 0;
   font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: 700;
@@ -6397,14 +6374,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-uat1imz 200ms ease-out forwards;
+  animation: jkl-entering-uhnyeke 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-uat1inl 150ms ease-in forwards;
+  animation: jkl-exiting-uhnyekx 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-uat1imz {
+@keyframes jkl-entering-uhnyeke {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -6414,7 +6391,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-uat1inl {
+@keyframes jkl-exiting-uhnyekx {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -6587,7 +6564,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --jkl-toggle-switch-width: 3rem;
   --jkl-toggle-switch-knob-size: 1.25rem;
   --jkl-toggle-switch-indicator-spacing: 0;
-  --jkl-toggle-switch-help-label-spacing: var(--jkl-spacing-2);
+  --jkl-toggle-switch-help-label-spacing: var(--jkl-unit-02);
 }
 
 [data-layout-density=compact],
@@ -6620,7 +6597,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  gap: var(--jkl-spacing-8);
+  gap: var(--jkl-unit-10);
   touch-action: none;
   font-size: var(--jkl-toggle-font-size);
   line-height: var(--jkl-toggle-line-height);
@@ -6692,8 +6669,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-toggle-switch-widget__slider {
   position: relative;