@fremtind/jokul 1.4.0 → 1.5.0

package/styles/styles.css

@@ -1,12 +1,14 @@
 @charset "UTF-8";
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 @media screen and (prefers-color-scheme: light) {
   :root {
     --jkl-autosuggest-text-color: #1b1917;
-    --jkl-autosuggest-menu-background-color: #ffffff;
+    --jkl-autosuggest-menu-background-color: #fff;
     --jkl-autosuggest-focus-color: #1b1917;
     --jkl-autosuggest-error-text-color: #1b1917;
     --jkl-autosuggest-error-placeholder-color: #636060;
@@ -16,7 +18,7 @@
 }
 [data-theme=light] {
   --jkl-autosuggest-text-color: #1b1917;
-  --jkl-autosuggest-menu-background-color: #ffffff;
+  --jkl-autosuggest-menu-background-color: #fff;
   --jkl-autosuggest-focus-color: #1b1917;
   --jkl-autosuggest-error-text-color: #1b1917;
   --jkl-autosuggest-error-placeholder-color: #636060;
@@ -27,7 +29,7 @@
 @media screen and (prefers-color-scheme: dark) {
   :root {
     --jkl-autosuggest-text-color: #f9f9f9;
-    --jkl-autosuggest-menu-background-color: #000000;
+    --jkl-autosuggest-menu-background-color: #000;
     --jkl-autosuggest-focus-color: #f9f9f9;
     --jkl-autosuggest-error-text-color: #1b1917;
     --jkl-autosuggest-error-placeholder-color: #636060;
@@ -37,7 +39,7 @@
 }
 [data-theme=dark] {
   --jkl-autosuggest-text-color: #f9f9f9;
-  --jkl-autosuggest-menu-background-color: #000000;
+  --jkl-autosuggest-menu-background-color: #000;
   --jkl-autosuggest-focus-color: #f9f9f9;
   --jkl-autosuggest-error-text-color: #1b1917;
   --jkl-autosuggest-error-placeholder-color: #636060;
@@ -337,192 +339,188 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
   margin: -0.125rem 0.25rem;
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
+@layer jokul.theme {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-icon-grade: 0;
+    }
+  }
+  [data-theme=light] {
     --jkl-icon-grade: 0;
   }
-}
-[data-theme=light] {
-  --jkl-icon-grade: 0;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-icon-grade: -25;
+    }
+  }
+  [data-theme=dark] {
     --jkl-icon-grade: -25;
   }
 }
-[data-theme=dark] {
-  --jkl-icon-grade: -25;
-}
-
-.jkl-icon {
-  --jkl-icon-fill: 0;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
-  font-feature-settings: "liga";
-  -webkit-font-feature-settings: "liga";
-  font-size: var(--jkl-icon-size, 1.5rem);
-  font-weight: var(--jkl-icon-weight, 300);
-  line-height: 1;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: font-variation-settings, transform;
-}
-.jkl-icon--bold {
-  --jkl-icon-weight: 400;
-}
-.jkl-icon--filled {
-  --jkl-icon-fill: 1;
-}
-.jkl-icon--medium {
-  --jkl-icon-opsz: 24;
-  --jkl-icon-size: 1.5rem;
-}
-.jkl-icon--small {
-  --jkl-icon-opsz: 20;
-  --jkl-icon-size: 1.25rem;
-}
-.jkl-icon--inherit {
-  --jkl-icon-opsz: 20;
-  --jkl-icon-size: 1.2em;
-}
-.jkl-icon--animated {
-  display: block;
-}
-
-.jkl-icon-red-cross {
-  --red-cross-circle: var(--jkl-color-background-alert-error);
-  --red-cross-path: #1b1917;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.jkl-icon-red-cross path {
-  fill: var(--red-cross-path);
-}
-.jkl-icon-red-cross circle {
-  fill: var(--red-cross-circle);
-}
-
-.jkl-icon-green-check {
-  --green-check-circle: var(--jkl-color-background-alert-success);
-  --green-check-path: #1b1917;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.jkl-icon-green-check path {
-  fill: var(--green-check-path);
-}
-.jkl-icon-green-check circle {
-  fill: var(--green-check-circle);
-}
-
-.jkl-animated-horizontal-arrows,
-.jkl-animated-vertical-arrows {
-  overflow: hidden;
-  width: var(--jkl-icon-size, 1.5rem);
-  height: var(--jkl-icon-size, 1.5rem);
-}
-.jkl-animated-horizontal-arrows__slider,
-.jkl-animated-vertical-arrows__slider {
-  display: flex;
-  transition-timing-function: ease;
-  transition-duration: 250ms;
-  transition-delay: calc(250ms * 0.3333333333);
-  transition-property: transform;
-}
-.jkl-animated-horizontal-arrows__arrow,
-.jkl-animated-vertical-arrows__arrow {
-  flex-shrink: 0;
-}
-
-.jkl-animated-vertical-arrows__slider {
-  flex-direction: column;
-  height: calc(var(--jkl-icon-size, 1.5rem) * 2);
-}
-.jkl-animated-vertical-arrows__slider[data-show=up] {
-  transform: translate3d(0, 0, 0);
-}
-.jkl-animated-vertical-arrows__slider[data-show=down] {
-  transform: translate3d(0, -50%, 0);
-}
-
-.jkl-animated-horizontal-arrows__slider {
-  flex-direction: row;
-  width: calc(var(--jkl-icon-size, 1.5rem) * 2);
-}
-.jkl-animated-horizontal-arrows__slider[data-show=left] {
-  transform: translate3d(0, 0, 0);
-}
-.jkl-animated-horizontal-arrows__slider[data-show=right] {
-  transform: translate3d(-50%, 0, 0);
-}
-
-.jkl-icons-animated__plus {
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 250ms;
-  transition-property: transform;
-  transform-origin: 50% 50%;
-}
-.jkl-icons-animated__plus--plus {
-  transform: rotate(0);
-}
-.jkl-icons-animated__plus--close {
-  transform: rotate(135deg);
-}
-
-.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;
-}
-.jkl-icon-button {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
-  outline: 0;
-  outline-style: none;
+@layer jokul.components {
+  .jkl-icon {
+    --jkl-icon-fill: 0;
+    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    font-size: var(--jkl-icon-size, 1.5rem);
+    font-weight: var(--jkl-icon-weight, 300);
+    line-height: 1;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: font-variation-settings, transform;
+  }
+  .jkl-icon--bold {
+    --jkl-icon-weight: 400;
+  }
+  .jkl-icon--filled {
+    --jkl-icon-fill: 1;
+  }
+  .jkl-icon--medium {
+    --jkl-icon-opsz: 24;
+    --jkl-icon-size: 1.5rem;
+  }
+  .jkl-icon--small {
+    --jkl-icon-opsz: 20;
+    --jkl-icon-size: 1.25rem;
+  }
+  .jkl-icon--inherit {
+    --jkl-icon-opsz: 20;
+    --jkl-icon-size: 1.2em;
+  }
+  .jkl-icon--animated {
+    display: block;
+  }
+  .jkl-icon-red-cross {
+    --red-cross-circle: var(--jkl-color-background-alert-error);
+    --red-cross-path: #1B1917;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .jkl-icon-red-cross path {
+    fill: var(--red-cross-path);
+  }
+  .jkl-icon-red-cross circle {
+    fill: var(--red-cross-circle);
+  }
+  .jkl-icon-green-check {
+    --green-check-circle: var(--jkl-color-background-alert-success);
+    --green-check-path: #1B1917;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .jkl-icon-green-check path {
+    fill: var(--green-check-path);
+  }
+  .jkl-icon-green-check circle {
+    fill: var(--green-check-circle);
+  }
+  .jkl-animated-horizontal-arrows,
+  .jkl-animated-vertical-arrows {
+    overflow: hidden;
+    width: var(--jkl-icon-size, 1.5rem);
+    height: var(--jkl-icon-size, 1.5rem);
+  }
+  .jkl-animated-horizontal-arrows__slider,
+  .jkl-animated-vertical-arrows__slider {
+    display: flex;
+    transition-timing-function: ease;
+    transition-duration: 250ms;
+    transition-delay: calc(250ms * 0.3333333333);
+    transition-property: transform;
+  }
+  .jkl-animated-horizontal-arrows__arrow,
+  .jkl-animated-vertical-arrows__arrow {
+    flex-shrink: 0;
+  }
+  .jkl-animated-vertical-arrows__slider {
+    flex-direction: column;
+    height: calc(var(--jkl-icon-size, 1.5rem) * 2);
+  }
+  .jkl-animated-vertical-arrows__slider[data-show=up] {
+    transform: translate3d(0, 0, 0);
+  }
+  .jkl-animated-vertical-arrows__slider[data-show=down] {
+    transform: translate3d(0, -50%, 0);
+  }
+  .jkl-animated-horizontal-arrows__slider {
+    flex-direction: row;
+    width: calc(var(--jkl-icon-size, 1.5rem) * 2);
+  }
+  .jkl-animated-horizontal-arrows__slider[data-show=left] {
+    transform: translate3d(0, 0, 0);
+  }
+  .jkl-animated-horizontal-arrows__slider[data-show=right] {
+    transform: translate3d(-50%, 0, 0);
+  }
+  .jkl-icons-animated__plus {
+    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
+    transition-duration: 250ms;
+    transition-property: transform;
+    transform-origin: 50% 50%;
+  }
+  .jkl-icons-animated__plus--plus {
+    transform: rotate(0);
+  }
+  .jkl-icons-animated__plus--close {
+    transform: rotate(135deg);
+  }
 }
-@media screen and (forced-colors: active) {
+@layer jokul.components {
   .jkl-icon-button {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    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;
+  }
+  .jkl-icon-button {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-icon-button {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-icon-button .jkl-icon {
+    display: flex;
+    align-items: center;
   }
-}
-.jkl-icon-button .jkl-icon {
-  display: flex;
-  align-items: center;
-}
-.jkl-icon-button .jkl-icon--animated {
-  display: revert;
-}
-.jkl-icon-button:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 3px;
-}
-.jkl-icon-button:hover {
-  color: var(--jkl-color-text-interactive-hover);
-}
-@media screen and (forced-colors: active) {
-  .jkl-icon-button {
-    border: none;
-    background: none;
+  .jkl-icon-button .jkl-icon--animated {
+    display: revert;
+  }
+  .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-icon-button:hover {
+    color: var(--jkl-color-text-interactive-hover);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-icon-button {
+      border: none;
+      background: none;
+    }
   }
 }
-
 .jkl-field-group {
   outline: 0;
   border-style: none;
@@ -599,7 +597,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
   --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-uodaewq forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u0wcewa forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -674,7 +672,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-wra
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-uodaewq {
+@keyframes jkl-support-icon-entrance-u0wcewa {
   0% {
     margin-right: 0;
     opacity: 0;
@@ -971,6 +969,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   transition-duration: 150ms;
   transition-property: background-color;
 }
+.jkl-button:has(.jkl-button__text) {
+  min-width: 9.5ch;
+}
 .jkl-button:has(.jkl-icon:first-child) {
   padding-inline-start: var(--jkl-button-padding-icon);
 }
@@ -1055,244 +1056,241 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   padding-inline: calc(var(--jkl-button-teritary-padding-icon) * 2) var(--jkl-button-teritary-padding-icon);
 }
 
-.jkl-loader {
-  display: flex;
-}
-.jkl-loader--inline {
-  display: inline-flex;
-}
-.jkl-loader__dot {
-  display: block;
-  transform-origin: center;
-  background-color: currentColor;
-  height: 0.9em;
-  width: 0.9em;
-  animation: 2500ms linear infinite;
-}
-.jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-uodaex8;
-  margin-right: 1.71em;
-}
-.jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-uodaexb;
-  margin-right: 1.9em;
-}
-.jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-uodaext;
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
+  .jkl-loader {
+    display: flex;
+  }
+  .jkl-loader--inline {
+    display: inline-flex;
+  }
   .jkl-loader__dot {
-    background-color: CanvasText;
+    display: block;
+    transform-origin: center;
+    background-color: currentColor;
+    height: 0.9em;
+    width: 0.9em;
+    animation: 2500ms linear infinite;
+  }
+  .jkl-loader__dot--left {
+    animation-name: jkl-loader-left-spin-u0wcex6;
+    margin-right: 1.71em;
+  }
+  .jkl-loader__dot--middle {
+    animation-name: jkl-loader-middle-spin-u0wcexf;
+    margin-right: 1.9em;
+  }
+  .jkl-loader__dot--right {
+    animation-name: jkl-loader-right-spin-u0wcexw;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-loader__dot {
+      background-color: CanvasText;
+    }
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot, .jkl-loader--medium > .jkl-loader__dot {
+    height: 0.35em;
+    width: 0.35em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
+    margin-right: 0.585em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
+    margin-right: 0.65em;
+  }
+  .jkl-loader--small > .jkl-loader__dot {
+    height: 0.25em;
+    width: 0.25em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--left {
+    margin-right: 0.27em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--middle {
+    margin-right: 0.3em;
+  }
+  @keyframes jkl-loader-left-spin-u0wcex6 {
+    0% {
+      transform: rotate(0) scale(0);
+    }
+    30% {
+      transform: rotate(90deg) scale(1);
+    }
+    70% {
+      transform: rotate(180deg) scale(0);
+    }
+    100% {
+      transform: rotate(180deg) scale(0);
+    }
+  }
+  @keyframes jkl-loader-middle-spin-u0wcexf {
+    0% {
+      transform: rotate(20deg) scale(0);
+    }
+    10% {
+      transform: rotate(20deg) scale(0);
+    }
+    40% {
+      transform: rotate(110deg) scale(1.4);
+    }
+    85% {
+      transform: rotate(200deg) scale(0);
+    }
+    100% {
+      transform: rotate(200deg) scale(0);
+    }
+  }
+  @keyframes jkl-loader-right-spin-u0wcexw {
+    0% {
+      transform: rotate(40deg) scale(0);
+    }
+    20% {
+      transform: rotate(40deg) scale(0);
+    }
+    50% {
+      transform: rotate(130deg) scale(1);
+    }
+    100% {
+      transform: rotate(220deg) scale(0);
+    }
+  }
+}
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-skeleton-element-color: #e0dbd4;
+      --jkl-skeleton-sweeper-color: #f9f9f9;
+    }
+  }
+  [data-theme=light] {
+    --jkl-skeleton-element-color: #e0dbd4;
+    --jkl-skeleton-sweeper-color: #f9f9f9;
   }
-}
-.jkl-button .jkl-loader > .jkl-loader__dot, .jkl-loader--medium > .jkl-loader__dot {
-  height: 0.35em;
-  width: 0.35em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
-  margin-right: 0.585em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
-  margin-right: 0.65em;
-}
-.jkl-loader--small > .jkl-loader__dot {
-  height: 0.25em;
-  width: 0.25em;
-}
-.jkl-loader--small > .jkl-loader__dot--left {
-  margin-right: 0.27em;
-}
-.jkl-loader--small > .jkl-loader__dot--middle {
-  margin-right: 0.3em;
-}
-
-@keyframes jkl-loader-left-spin-uodaex8 {
-  0% {
-    transform: rotate(0) scale(0);
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-skeleton-element-color: #636060;
+      --jkl-skeleton-sweeper-color: #1b1917;
+    }
   }
-  30% {
-    transform: rotate(90deg) scale(1);
+  [data-theme=dark] {
+    --jkl-skeleton-element-color: #636060;
+    --jkl-skeleton-sweeper-color: #1b1917;
   }
-  70% {
-    transform: rotate(180deg) scale(0);
+  .jkl-skeleton-animation {
+    --jkl-skeleton-sweep-duration: 3s;
+    position: relative;
+    overflow: hidden;
   }
-  100% {
-    transform: rotate(180deg) scale(0);
+  .jkl-skeleton-animation::after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    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-u0wcey6;
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-animation {
+      width: 9.375rem;
+    }
+  }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .jkl-skeleton-animation::after {
+      background: none;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-animation::after {
+      animation: none;
+    }
+  }
+  .jkl-skeleton-animation--compact::after {
+    width: 9.375rem;
   }
-}
-@keyframes jkl-loader-middle-spin-uodaexb {
-  0% {
-    transform: rotate(20deg) scale(0);
+  .jkl-skeleton-element {
+    border-radius: 0.125rem;
+    background-color: var(--jkl-skeleton-element-color);
   }
-  10% {
-    transform: rotate(20deg) scale(0);
+  .jkl-skeleton-element--circle {
+    border-radius: 50%;
   }
-  40% {
-    transform: rotate(110deg) scale(1.4);
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-element {
+      border: 1px solid CanvasText;
+      animation: 2s ease infinite jkl-blink-u0wceys;
+    }
   }
-  85% {
-    transform: rotate(200deg) scale(0);
+  .jkl-skeleton-input {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
   }
-  100% {
-    transform: rotate(200deg) scale(0);
+  .jkl-skeleton-input__checkbox {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
   }
-}
-@keyframes jkl-loader-right-spin-uodaext {
-  0% {
-    transform: rotate(40deg) scale(0);
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-input {
+      gap: 0.5rem;
+    }
   }
-  20% {
-    transform: rotate(40deg) scale(0);
+  .jkl-skeleton-input--compact::after {
+    gap: 0.5rem;
   }
-  50% {
-    transform: rotate(130deg) scale(1);
+  .jkl-skeleton-table {
+    display: flex;
+    flex-direction: column;
   }
-  100% {
-    transform: rotate(220deg) scale(0);
+  .jkl-skeleton-table__header, .jkl-skeleton-table__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: solid 1px var(--jkl-skeleton-element-color);
   }
-}
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-skeleton-element-color: #e0dbd4;
-    --jkl-skeleton-sweeper-color: #f9f9f9;
+  .jkl-skeleton-table__header {
+    padding: 0.75rem 0.5rem;
   }
-}
-[data-theme=light] {
-  --jkl-skeleton-element-color: #e0dbd4;
-  --jkl-skeleton-sweeper-color: #f9f9f9;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-skeleton-element-color: #636060;
-    --jkl-skeleton-sweeper-color: #1b1917;
+  .jkl-skeleton-table__row {
+    padding: 1rem 0.5rem;
   }
-}
-[data-theme=dark] {
-  --jkl-skeleton-element-color: #636060;
-  --jkl-skeleton-sweeper-color: #1b1917;
-}
-
-.jkl-skeleton-animation {
-  --jkl-skeleton-sweep-duration: 3s;
-  position: relative;
-  overflow: hidden;
-}
-.jkl-skeleton-animation::after {
-  content: " ";
-  position: absolute;
-  top: 0;
-  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-uodaeyb;
-}
-@media (width >= 0) and (max-width: 679px) {
-  .jkl-skeleton-animation {
-    width: 9.375rem;
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-table__header {
+      padding: 0.5rem 0.25rem;
+    }
+    .jkl-skeleton-table__row {
+      padding: 0.75rem 0.25rem;
+    }
   }
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .jkl-skeleton-animation::after {
-    background: none;
+  .jkl-skeleton-table--compact::after__header {
+    padding: 0.5rem 0.25rem;
   }
-}
-@media screen and (forced-colors: active) {
-  .jkl-skeleton-animation::after {
-    animation: none;
+  .jkl-skeleton-table--compact::after__row {
+    padding: 0.75rem 0.25rem;
   }
-}
-.jkl-skeleton-animation--compact::after {
-  width: 9.375rem;
-}
-
-.jkl-skeleton-element {
-  border-radius: 0.125rem;
-  background-color: var(--jkl-skeleton-element-color);
-}
-.jkl-skeleton-element--circle {
-  border-radius: 50%;
-}
-@media screen and (forced-colors: active) {
-  .jkl-skeleton-element {
-    border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-uodaeyp;
-  }
-}
-
-.jkl-skeleton-input {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-.jkl-skeleton-input__checkbox {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 0.5rem;
-}
-@media (width >= 0) and (max-width: 679px) {
-  .jkl-skeleton-input {
-    gap: 0.5rem;
-  }
-}
-.jkl-skeleton-input--compact::after {
-  gap: 0.5rem;
-}
-
-.jkl-skeleton-table {
-  display: flex;
-  flex-direction: column;
-}
-.jkl-skeleton-table__header, .jkl-skeleton-table__row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-bottom: solid 1px var(--jkl-skeleton-element-color);
-}
-.jkl-skeleton-table__header {
-  padding: 0.75rem 0.5rem;
-}
-.jkl-skeleton-table__row {
-  padding: 1rem 0.5rem;
-}
-@media (width >= 0) and (max-width: 679px) {
-  .jkl-skeleton-table__header {
-    padding: 0.5rem 0.25rem;
-  }
-  .jkl-skeleton-table__row {
-    padding: 0.75rem 0.25rem;
-  }
-}
-.jkl-skeleton-table--compact::after__header {
-  padding: 0.5rem 0.25rem;
-}
-.jkl-skeleton-table--compact::after__row {
-  padding: 0.75rem 0.25rem;
-}
-@media screen and (forced-colors: active) {
-  .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-uodaeyp;
-  }
-}
-
-@keyframes jkl-sweep-uodaeyb {
-  0% {
-    transform: translateX(calc(0vw - 200px));
-  }
-  80%, 100% {
-    transform: translateX(calc(100vw + 400px));
-  }
-}
-@keyframes jkl-blink-uodaeyp {
-  0% {
-    opacity: 1;
-  }
-  40%, 50% {
-    opacity: 0.3;
-  }
-  70%, 100% {
-    opacity: 1;
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-table {
+      animation: 2s ease-in-out infinite jkl-blink-u0wceys;
+    }
+  }
+  @keyframes jkl-sweep-u0wcey6 {
+    0% {
+      transform: translateX(calc(0vw - 200px));
+    }
+    80%, 100% {
+      transform: translateX(calc(100vw + 400px));
+    }
+  }
+  @keyframes jkl-blink-u0wceys {
+    0% {
+      opacity: 1;
+    }
+    40%, 50% {
+      opacity: 0.3;
+    }
+    70%, 100% {
+      opacity: 1;
+    }
   }
 }
 .jkl-card {
@@ -1367,9 +1365,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 }
 
 .jkl-card-image {
-  --margin: calc(
-      var(--padding, 0) * -1
-  );
+  --margin: calc(var(--padding, 0) * -1);
   width: calc(100% + 2 * var(--padding, 0));
   aspect-ratio: var(--image-aspect-ratio, 3/2);
   margin-inline: var(--margin, 0);
@@ -1380,34 +1376,38 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 .jkl-card-image--bottom {
   margin-bottom: var(--margin, 0);
 }
-
-.jkl-image {
-  display: block;
-  overflow: hidden;
-  position: relative;
-}
-.jkl-image__placeholder {
-  filter: blur(20px);
-}
-.jkl-image__image {
-  transition-timing-function: ease;
-  transition-duration: 400ms;
-  transition-property: opacity;
-  opacity: 1;
-}
-.jkl-image__image, .jkl-image__placeholder {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  object-fit: cover;
-}
-.jkl-image--loading .jkl-image__image {
-  opacity: 0;
+.jkl-card-image--full {
+  margin-block: var(--margin, 0);
 }
 
+@layer jokul.components {
+  .jkl-image {
+    display: block;
+    overflow: hidden;
+    position: relative;
+  }
+  .jkl-image__placeholder {
+    filter: blur(20px);
+  }
+  .jkl-image__image {
+    transition-timing-function: ease;
+    transition-duration: 400ms;
+    transition-property: opacity;
+    opacity: 1;
+  }
+  .jkl-image__image, .jkl-image__placeholder {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    object-fit: cover;
+  }
+  .jkl-image--loading .jkl-image__image {
+    opacity: 0;
+  }
+}
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -1471,194 +1471,193 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   }
 }
 
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-checkbox-font-size: var(--jkl-body-font-size);
-  --jkl-checkbox-line-height: var(--jkl-body-line-height);
-  --jkl-checkbox-font-weight: var(--jkl-body-font-weight);
-  --jkl-checkbox-height: 3rem;
-  --jkl-checkbox-box-size: 1.5rem;
-  --jkl-checkbox-line-height: 2rem;
-}
-@media (width >= 0) and (max-width: 679px) {
+@layer jokul.components {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-checkbox-height: 2.5rem;
+    --jkl-checkbox-font-size: var(--jkl-body-font-size);
+    --jkl-checkbox-line-height: var(--jkl-body-line-height);
+    --jkl-checkbox-font-weight: var(--jkl-body-font-weight);
+    --jkl-checkbox-height: 3rem;
     --jkl-checkbox-box-size: 1.5rem;
-    --jkl-checkbox-line-height: 1.75rem;
+    --jkl-checkbox-line-height: 2rem;
   }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-checkbox-font-size: var(--jkl-small-font-size);
-  --jkl-checkbox-line-height: var(--jkl-small-line-height);
-  --jkl-checkbox-font-weight: var(--jkl-small-font-weight);
-  --jkl-checkbox-height: 1.75rem;
-  --jkl-checkbox-box-size: 1.125rem;
-  --jkl-checkbox-line-height: 1.5rem;
-}
-
-@keyframes jkl-checkbox-checked-uodaez5 {
-  0% {
-    width: 0;
-    height: 0;
+  @media (width >= 0) and (max-width: 679px) {
+    :root,
+    [data-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-checkbox-height: 2.5rem;
+      --jkl-checkbox-box-size: 1.5rem;
+      --jkl-checkbox-line-height: 1.75rem;
+    }
   }
-  40% {
-    width: 18%;
-    height: 0;
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-checkbox-font-size: var(--jkl-small-font-size);
+    --jkl-checkbox-line-height: var(--jkl-small-line-height);
+    --jkl-checkbox-font-weight: var(--jkl-small-font-weight);
+    --jkl-checkbox-height: 1.75rem;
+    --jkl-checkbox-box-size: 1.125rem;
+    --jkl-checkbox-line-height: 1.5rem;
+  }
+  @keyframes jkl-checkbox-checked-u0wcezi {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    40% {
+      width: 18%;
+      height: 0;
+    }
+    100% {
+      width: 18%;
+      height: 58%;
+    }
+  }
+  @keyframes jkl-checkbox-indeterminate-u0wcezp {
+    0% {
+      width: 0;
+    }
+    100% {
+      width: 66%;
+    }
+  }
+  .jkl-checkbox {
+    --box-color: var(--jkl-color-border-action);
+    --check-color: var(--jkl-color-border-action);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    font-size: var(--jkl-checkbox-font-size);
+    line-height: var(--jkl-checkbox-line-height);
+    font-weight: var(--jkl-checkbox-font-weight);
+    display: flex;
+    flex-wrap: wrap;
+    min-height: var(--jkl-checkbox-height);
+    color: var(--text-color);
+    position: relative;
   }
-  100% {
-    width: 18%;
-    height: 58%;
+  .jkl-checkbox__input {
+    position: absolute;
+    opacity: 0;
+    top: var(--jkl-checkbox-box-size);
+    left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
-}
-@keyframes jkl-checkbox-indeterminate-uodaeza {
-  0% {
-    width: 0;
+  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
+    animation: jkl-checkbox-checked-u0wcezi 150ms ease-in-out forwards;
+    opacity: 1;
   }
-  100% {
-    width: 66%;
+  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
+    animation: jkl-checkbox-indeterminate-u0wcezp 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 {
+    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;
+    max-width: 100%;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
+    outline: 1px solid var(--box-color);
+  }
+  .jkl-checkbox__text {
+    margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+    translate: 0 0.0625rem;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: color;
   }
-}
-.jkl-checkbox {
-  --box-color: var(--jkl-color-border-action);
-  --check-color: var(--jkl-color-border-action);
-  --text-color: var(--jkl-color-text-default);
-  --background-color: transparent;
-  font-size: var(--jkl-checkbox-font-size);
-  line-height: var(--jkl-checkbox-line-height);
-  font-weight: var(--jkl-checkbox-font-weight);
-  display: flex;
-  flex-wrap: wrap;
-  min-height: var(--jkl-checkbox-height);
-  color: var(--text-color);
-  position: relative;
-}
-.jkl-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  top: var(--jkl-checkbox-box-size);
-  left: calc(-0.5 * var(--jkl-checkbox-box-size));
-}
-.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-uodaez5 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-uodaeza 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 {
-  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;
-  max-width: 100%;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
-  outline: 1px solid var(--box-color);
-}
-.jkl-checkbox__text {
-  margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
-  translate: 0 0.0625rem;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: color;
-}
-.jkl-checkbox__mark {
-  box-sizing: border-box;
-  position: relative;
-  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-unit-10);
-  align-self: flex-start;
-  flex-shrink: 0;
-  outline: none;
-  border-radius: 0;
-  border: 1px solid;
-  border-color: var(--box-color);
-  background-color: var(--background-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: background-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox__mark {
-    outline: revert;
-    border: 1px solid ButtonText;
+    box-sizing: border-box;
+    position: relative;
+    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-unit-10);
+    align-self: flex-start;
+    flex-shrink: 0;
+    outline: none;
+    border-radius: 0;
+    border: 1px solid;
+    border-color: var(--box-color);
+    background-color: var(--background-color);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__mark {
+      outline: revert;
+      border: 1px solid ButtonText;
+    }
   }
-}
-.jkl-checkbox__check-mark::after {
-  content: "";
-  position: absolute;
-  transform-origin: bottom left;
-  bottom: 42%;
-  left: 18%;
-  display: block;
-  width: 18%;
-  height: 58%;
-  transform: rotate(45deg);
-  border: solid 0.125rem var(--check-color);
-  border-left-width: 0;
-  border-top-width: 0;
-  opacity: 0;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity, border-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox__check-mark::after {
-    border-color: ButtonText;
+    content: "";
+    position: absolute;
+    transform-origin: bottom left;
+    bottom: 42%;
+    left: 18%;
+    display: block;
+    width: 18%;
+    height: 58%;
+    transform: rotate(45deg);
+    border: solid 0.125rem var(--check-color);
+    border-left-width: 0;
+    border-top-width: 0;
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__check-mark::after {
+      border-color: ButtonText;
+    }
   }
-}
-.jkl-checkbox__indeterminate-mark::after {
-  --width: 66%;
-  --thickness: 0.125rem;
-  content: "";
-  position: absolute;
-  bottom: calc(50% - var(--thickness) / 2);
-  left: calc((100% - var(--width)) / 2);
-  display: block;
-  width: var(--width);
-  border-bottom: solid var(--thickness) var(--check-color);
-  opacity: 0;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity, border-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox__indeterminate-mark::after {
-    border-color: ButtonText;
+    --width: 66%;
+    --thickness: 0.125rem;
+    content: "";
+    position: absolute;
+    bottom: calc(50% - var(--thickness) / 2);
+    left: calc((100% - var(--width)) / 2);
+    display: block;
+    width: var(--width);
+    border-bottom: solid var(--thickness) var(--check-color);
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__indeterminate-mark::after {
+      border-color: ButtonText;
+    }
+  }
+  .jkl-checkbox--inline {
+    display: inline-flex;
+  }
+  .jkl-checkbox--inline:not(:last-of-type) {
+    margin-right: calc(var(--jkl-unit-10) * 3);
+  }
+  .jkl-checkbox--error {
+    --background-color: var(--jkl-color-background-alert-error);
+    --check-color: var(--jkl-color-text-on-alert);
   }
 }
-.jkl-checkbox--inline {
-  display: inline-flex;
-}
-.jkl-checkbox--inline:not(:last-of-type) {
-  margin-right: calc(var(--jkl-unit-10) * 3);
-}
-.jkl-checkbox--error {
-  --background-color: var(--jkl-color-background-alert-error);
-  --check-color: var(--jkl-color-text-on-alert);
-}
-
 .jkl-input-panel {
   --outer-border-color: var(--jkl-color-border-input);
   --outer-border-thickness: 0.0625rem;
@@ -1719,7 +1718,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-checkbox-checked-uodaf02 {
+@keyframes jkl-checkbox-checked-u0wcf02 {
   0% {
     width: 0;
     height: 0;
@@ -1733,63 +1732,66 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
     height: 58%;
   }
 }
-.jkl-checkbox-panel {
-  --checkbox-background-color: transparent;
-  --checkbox-box-color: var(--jkl-color-border-action);
-  --checkbox-check-color: var(--jkl-color-border-action);
-}
-.jkl-checkbox-panel__decorator {
-  box-sizing: border-box;
-  height: var(--jkl-checkbox-box-size);
-  width: var(--jkl-checkbox-box-size);
-  position: relative;
-  outline: none;
-  border-radius: 0;
-  border: 1px solid;
-  border-color: var(--checkbox-box-color);
-  background-color: var(--checkbox-background-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: background-color;
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
+  .jkl-checkbox-panel {
+    --checkbox-background-color: transparent;
+    --checkbox-box-color: var(--jkl-color-border-action);
+    --checkbox-check-color: var(--jkl-color-border-action);
+  }
   .jkl-checkbox-panel__decorator {
-    outline: revert;
-    border: 1px solid ButtonText;
+    box-sizing: border-box;
+    height: var(--jkl-checkbox-box-size);
+    width: var(--jkl-checkbox-box-size);
+    position: relative;
+    outline: none;
+    border-radius: 0;
+    border: 1px solid;
+    border-color: var(--checkbox-box-color);
+    background-color: var(--checkbox-background-color);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox-panel__decorator {
+      outline: revert;
+      border: 1px solid ButtonText;
+    }
   }
-}
-.jkl-checkbox-panel__decorator::after {
-  content: "";
-  position: absolute;
-  transform-origin: bottom left;
-  bottom: 42%;
-  left: 18%;
-  display: block;
-  width: 18%;
-  height: 58%;
-  transform: rotate(45deg);
-  border: solid 0.125rem var(--checkbox-check-color);
-  border-left-width: 0;
-  border-top-width: 0;
-  opacity: 0;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity, border-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox-panel__decorator::after {
-    border-color: ButtonText;
+    content: "";
+    position: absolute;
+    transform-origin: bottom left;
+    bottom: 42%;
+    left: 18%;
+    display: block;
+    width: 18%;
+    height: 58%;
+    transform: rotate(45deg);
+    border: solid 0.125rem var(--checkbox-check-color);
+    border-left-width: 0;
+    border-top-width: 0;
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox-panel__decorator::after {
+      border-color: ButtonText;
+    }
+  }
+  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
+    animation: jkl-checkbox-checked-u0wcf02 150ms ease-in-out forwards;
+    opacity: 1;
+  }
+  .jkl-checkbox-panel:has([aria-invalid=true]) {
+    --checkbox-background-color: var(
+        --jkl-color-background-alert-error
+    );
+    --checkbox-check-color: var(--jkl-color-text-on-alert);
   }
 }
-.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-uodaf02 150ms ease-in-out forwards;
-  opacity: 1;
-}
-.jkl-checkbox-panel:has([aria-invalid=true]) {
-  --checkbox-background-color: var(--jkl-color-background-alert-error);
-  --checkbox-check-color: var(--jkl-color-text-on-alert);
-}
-
 [data-layout-density=compact],
 [data-density=compact] {
   --padding-inline-s: 0.5rem;
@@ -1898,7 +1900,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
     --jkl-combobox-text-color: #636060;
     --jkl-combobox-background-color: transparent;
     --jkl-combobox-open-color: #1b1917;
-    --jkl-combobox-open-background-color: #ffffff;
+    --jkl-combobox-open-background-color: #fff;
     --jkl-combobox-focus-color: #1b1917;
     --jkl-combobox-error-background-color: #f6b3b3;
     --jkl-combobox-error-text-color: #636060;
@@ -1916,7 +1918,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   --jkl-combobox-text-color: #636060;
   --jkl-combobox-background-color: transparent;
   --jkl-combobox-open-color: #1b1917;
-  --jkl-combobox-open-background-color: #ffffff;
+  --jkl-combobox-open-background-color: #fff;
   --jkl-combobox-focus-color: #1b1917;
   --jkl-combobox-error-background-color: #f6b3b3;
   --jkl-combobox-error-text-color: #636060;
@@ -2277,221 +2279,216 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   --jkl-list-text-color: #f9f9f9;
 }
 
-.jkl-list {
-  list-style-type: "•";
-  padding-left: calc(var(--jkl-unit-10) * 2);
-  margin: 0;
-}
-.jkl-list > .jkl-list__item > .jkl-list {
-  margin: 0.5rem 0;
-}
-.jkl-list:has(.jkl-list__item--iconed) {
-  padding: 0;
-}
-.jkl-list--ordered {
-  padding-left: revert;
-}
-.jkl-list--ordered > .jkl-list__item {
-  padding-left: revert;
-  list-style: decimal;
-}
-.jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
-  list-style: lower-alpha;
-}
-.jkl-list__item {
-  color: var(--jkl-list-text-color);
-  padding-left: calc(var(--jkl-unit-10) * 1.5);
-}
-.jkl-list__item::marker {
-  color: var(--jkl-list-text-color);
-}
-.jkl-list__item--iconed {
-  display: flex;
-  list-style: none;
-  position: relative;
-  padding-left: 0;
-}
-.jkl-list__item--iconed::before {
-  text-indent: -9999px;
-  background-size: contain;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-  margin-right: 0.5em;
-  margin-top: 0.2em;
-}
-.jkl-list__item--check::before {
-  content: "✓";
-  content: "✓"/"";
-  alt: " ";
-  background-image: var(--jkl-list-marker-check);
-}
-.jkl-list__item--cross::before {
-  content: "❌";
-  content: "❌"/"";
-  alt: " ";
-  background-image: var(--jkl-list-marker-cross);
-}
-@media screen and (forced-colors: active) {
-  .jkl-list .jkl-list__item--check::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='CanvasText'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='Canvas' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+@layer jokul.components {
+  .jkl-list {
+    list-style-type: "•";
+    padding-left: calc(var(--jkl-unit-10) * 2);
+    margin: 0;
   }
-  .jkl-list .jkl-list__item--cross::before {
-    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='CanvasText'/%3E%3Cpath fill='Canvas' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='Canvas' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+  .jkl-list > .jkl-list__item > .jkl-list {
+    margin: 0.5rem 0;
   }
-}
-
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-modal-body-font-size: var(--jkl-body-font-size);
-  --jkl-modal-body-line-height: var(--jkl-body-line-height);
-  --jkl-modal-body-font-weight: var(--jkl-body-font-weight);
-  --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: calc(var(--jkl-unit-10) * 5);
-  --jkl-modal-min-width: 13.75rem;
-  --jkl-modal-max-width: 41.25rem;
-  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
-  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 5) 0 0 0;
-}
-@media (width >= 0) and (max-width: 679px) {
+  .jkl-list:has(.jkl-list__item--iconed) {
+    padding: 0;
+  }
+  .jkl-list--ordered {
+    padding-left: revert;
+  }
+  .jkl-list--ordered > .jkl-list__item {
+    padding-left: revert;
+    list-style: decimal;
+  }
+  .jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
+    list-style: lower-alpha;
+  }
+  .jkl-list__item {
+    color: var(--jkl-list-text-color);
+    padding-left: calc(var(--jkl-unit-10) * 1.5);
+  }
+  .jkl-list__item::marker {
+    color: var(--jkl-list-text-color);
+  }
+  .jkl-list__item--iconed {
+    display: flex;
+    list-style: none;
+    position: relative;
+    padding-left: 0;
+  }
+  .jkl-list__item--iconed::before {
+    text-indent: -9999px;
+    background-size: contain;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    margin-top: 0.2em;
+  }
+  .jkl-list__item--check::before {
+    content: "✓";
+    content: "✓"/"";
+    alt: " ";
+    background-image: var(--jkl-list-marker-check);
+  }
+  .jkl-list__item--cross::before {
+    content: "❌";
+    content: "❌"/"";
+    alt: " ";
+    background-image: var(--jkl-list-marker-cross);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-list .jkl-list__item--check::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='CanvasText'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='Canvas' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    }
+    .jkl-list .jkl-list__item--cross::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='CanvasText'/%3E%3Cpath fill='Canvas' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='Canvas' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    }
+  }
+}
+@layer jokul.components {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-modal-padding: calc(var(--jkl-unit-10) * 4);
-    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
-    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
+    --jkl-modal-body-font-size: var(--jkl-body-font-size);
+    --jkl-modal-body-line-height: var(--jkl-body-line-height);
+    --jkl-modal-body-font-weight: var(--jkl-body-font-weight);
+    --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: calc(var(--jkl-unit-10) * 5);
+    --jkl-modal-min-width: 13.75rem;
+    --jkl-modal-max-width: 41.25rem;
+    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
+    --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: calc(var(--jkl-unit-10) * 4);
+      --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
+      --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
+    }
   }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-modal-body-font-size: var(--jkl-small-font-size);
-  --jkl-modal-body-line-height: var(--jkl-small-line-height);
-  --jkl-modal-body-font-weight: var(--jkl-small-font-weight);
-  --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: calc(var(--jkl-unit-10) * 3);
-  --jkl-modal-header-margin: 0 0 0.5rem;
-  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
-  --jkl-modal-min-width: 13.75rem;
-}
-
-.jkl-modal-container,
-.jkl-modal-overlay {
-  position: fixed;
-  inset: 0;
-}
-
-.jkl-modal-container {
-  z-index: 9000;
-  display: flex;
-}
-.jkl-modal-container[aria-hidden=true] {
-  display: none;
-}
-
-.jkl-modal-overlay {
-  background-color: rgba(27, 25, 23, 0.8);
-}
-
-.jkl-modal {
-  margin: auto;
-  z-index: 9000;
-  position: relative;
-  background-color: var(--jkl-color-background-container-high);
-  border-radius: 0.125rem;
-  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);
-  max-height: 90vh;
-  overflow: auto;
-  padding: var(--jkl-modal-padding);
-  display: flex;
-  flex-direction: column;
-}
-@media screen and (forced-colors: active) {
-  .jkl-modal {
-    border-color: CanvasText;
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-modal-body-font-size: var(--jkl-small-font-size);
+    --jkl-modal-body-line-height: var(--jkl-small-line-height);
+    --jkl-modal-body-font-weight: var(--jkl-small-font-weight);
+    --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: calc(var(--jkl-unit-10) * 3);
+    --jkl-modal-header-margin: 0 0 0.5rem;
+    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
+    --jkl-modal-min-width: 13.75rem;
+  }
+  .jkl-modal-container,
+  .jkl-modal-overlay {
+    position: fixed;
+    inset: 0;
+  }
+  .jkl-modal-container {
+    z-index: 9000;
+    display: flex;
+  }
+  .jkl-modal-container[aria-hidden=true] {
+    display: none;
+  }
+  .jkl-modal-overlay {
+    background-color: rgba(27, 25, 23, 0.8);
   }
-}
-@media (width >= 0) and (max-width: 679px) {
   .jkl-modal {
-    margin: auto calc(var(--jkl-unit-10) * 3);
+    margin: auto;
+    z-index: 9000;
+    position: relative;
+    background-color: var(--jkl-color-background-container-high);
+    border-radius: 0.125rem;
+    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);
+    max-height: 90vh;
+    overflow: auto;
+    padding: var(--jkl-modal-padding);
+    display: flex;
+    flex-direction: column;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-modal {
+      border-color: CanvasText;
+    }
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal {
+      margin: auto calc(var(--jkl-unit-10) * 3);
+    }
+  }
+  .jkl-modal-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: var(--jkl-modal-header-margin);
+    gap: var(--jkl-modal-gap);
+  }
+  .jkl-modal-body {
+    font-size: var(--jkl-modal-body-font-size);
+    line-height: var(--jkl-modal-body-line-height);
+    font-weight: var(--jkl-modal-body-font-weight);
+  }
+  .jkl-modal-title {
+    font-size: var(--jkl-modal-title-font-size);
+    line-height: var(--jkl-modal-title-line-height);
+    font-weight: var(--jkl-modal-title-font-weight);
   }
-}
-
-.jkl-modal-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin: var(--jkl-modal-header-margin);
-  gap: var(--jkl-modal-gap);
-}
-
-.jkl-modal-body {
-  font-size: var(--jkl-modal-body-font-size);
-  line-height: var(--jkl-modal-body-line-height);
-  font-weight: var(--jkl-modal-body-font-weight);
-}
-
-.jkl-modal-title {
-  font-size: var(--jkl-modal-title-font-size);
-  line-height: var(--jkl-modal-title-line-height);
-  font-weight: var(--jkl-modal-title-font-weight);
-}
-
-.jkl-modal-actions {
-  margin: var(--jkl-modal-actions-margin);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--jkl-unit-10) * 2);
-}
-@media (min-width: 680px) {
   .jkl-modal-actions {
-    flex-direction: row;
+    margin: var(--jkl-modal-actions-margin);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--jkl-unit-10) * 2);
+  }
+  @media (min-width: 60ch) {
+    .jkl-modal-actions {
+      flex-direction: row;
+      align-self: flex-end;
+    }
   }
 }
-
-.jkl-countdown {
-  --track-color: var(--jkl-color-border-separator);
-  --bar-color: var(--jkl-color-border-input-focus);
-  --bar-height: 0.25rem;
-  background-color: var(--track-color);
-  border-radius: 6.25rem;
-  height: var(--bar-height);
-  width: 100%;
-  overflow: hidden;
-}
-.jkl-countdown__tracker {
-  display: block;
-  height: var(--bar-height);
-  background-color: var(--bar-color);
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
   .jkl-countdown {
-    background-color: Canvas;
+    --track-color: var(--jkl-color-border-separator);
+    --bar-color: var(--jkl-color-border-input-focus);
+    --bar-height: 0.25rem;
+    background-color: var(--track-color);
+    border-radius: 6.25rem;
+    height: var(--bar-height);
+    width: 100%;
+    overflow: hidden;
   }
   .jkl-countdown__tracker {
-    background-color: CanvasText;
+    display: block;
+    height: var(--bar-height);
+    background-color: var(--bar-color);
   }
-}
-.jkl-countdown__tracker {
-  animation: jkl-downcount-uodaf0a var(--duration) linear forwards;
-  animation-play-state: var(--play-state, running);
-}
-
-@keyframes jkl-downcount-uodaf0a {
-  from {
-    width: 100%;
+  @media screen and (forced-colors: active) {
+    .jkl-countdown {
+      background-color: Canvas;
+    }
+    .jkl-countdown__tracker {
+      background-color: CanvasText;
+    }
   }
-  to {
-    width: 0%;
+  .jkl-countdown__tracker {
+    animation: jkl-downcount-u0wcf10 var(--duration) linear forwards;
+    animation-play-state: var(--play-state, running);
+  }
+  @keyframes jkl-downcount-u0wcf10 {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
   }
 }
 :root,
@@ -2700,7 +2697,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   :root {
     --jkl-calendar-adjacent-month-color: #636060;
     --jkl-calendar-disabled-day-color: #c8c5c3;
-    --jkl-calendar-active-day-color: #ffffff;
+    --jkl-calendar-active-day-color: #fff;
     --jkl-calendar-hover-date-background-color: #ece9e5;
     --jkl-calendar-selected-date-background-color: #1b1917;
   }
@@ -2708,7 +2705,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
 [data-theme=light] {
   --jkl-calendar-adjacent-month-color: #636060;
   --jkl-calendar-disabled-day-color: #c8c5c3;
-  --jkl-calendar-active-day-color: #ffffff;
+  --jkl-calendar-active-day-color: #fff;
   --jkl-calendar-hover-date-background-color: #ece9e5;
   --jkl-calendar-selected-date-background-color: #1b1917;
 }
@@ -2717,7 +2714,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   :root {
     --jkl-calendar-adjacent-month-color: #c8c5c3;
     --jkl-calendar-disabled-day-color: #636060;
-    --jkl-calendar-active-day-color: #000000;
+    --jkl-calendar-active-day-color: #000;
     --jkl-calendar-hover-date-background-color: #636060;
     --jkl-calendar-selected-date-background-color: #f9f9f9;
   }
@@ -2725,7 +2722,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
 [data-theme=dark] {
   --jkl-calendar-adjacent-month-color: #c8c5c3;
   --jkl-calendar-disabled-day-color: #636060;
-  --jkl-calendar-active-day-color: #000000;
+  --jkl-calendar-active-day-color: #000;
   --jkl-calendar-hover-date-background-color: #636060;
   --jkl-calendar-selected-date-background-color: #f9f9f9;
 }
@@ -2908,70 +2905,70 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   }
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-  }
-}
-[data-theme=light] {
-  --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-  }
-}
-[data-theme=dark] {
-  --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-}
-
-.jkl-popover {
-  padding: var(--popover-padding, 0);
-  z-index: 10000;
-  box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
-  background-color: var(--jkl-color-background-container-high);
-}
-
-.jkl-description-list__term {
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-}
-.jkl-description-list__term:not(:first-child) {
-  margin-top: 0.75rem;
-}
-.jkl-description-list__detail {
-  margin-left: 0;
-}
-.jkl-description-list__detail + .jkl-description-list__detail {
-  margin-top: 0.25rem;
-}
-@media (min-width: 680px) {
-  .jkl-description-list {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-columns: fit-content(40%) 1fr;
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
+    }
   }
-  .jkl-description-list .jkl-description-list__term {
-    grid-column-start: 1;
-    margin: 0;
-    overflow-wrap: break-word;
+  [data-theme=light] {
+    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
   }
-  .jkl-description-list .jkl-description-list__term:not(:first-of-type) {
-    margin-top: 0.5rem;
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
+    }
   }
-  .jkl-description-list .jkl-description-list__detail {
-    margin-left: 1.5rem;
-    grid-column-start: 2;
+  [data-theme=dark] {
+    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
   }
-  .jkl-description-list .jkl-description-list__detail + .jkl-description-list__detail {
-    margin-top: 0.5rem;
+  .jkl-popover {
+    padding: var(--popover-padding, 0);
+    z-index: 10000;
+    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+    background-color: var(--jkl-color-background-container-high);
   }
-  .jkl-description-list .jkl-description-list__term + .jkl-description-list__detail:not(:first-of-type) {
-    margin-top: 0.5rem;
+}
+@layer jokul.components {
+  .jkl-description-list__term {
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+  .jkl-description-list__term:not(:first-child) {
+    margin-top: 0.75rem;
+  }
+  .jkl-description-list__detail {
+    margin-left: 0;
+  }
+  .jkl-description-list__detail + .jkl-description-list__detail {
+    margin-top: 0.25rem;
+  }
+  @media (min-width: 680px) {
+    .jkl-description-list {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-columns: fit-content(40%) 1fr;
+    }
+    .jkl-description-list .jkl-description-list__term {
+      grid-column-start: 1;
+      margin: 0;
+      overflow-wrap: break-word;
+    }
+    .jkl-description-list .jkl-description-list__term:not(:first-of-type) {
+      margin-top: 0.5rem;
+    }
+    .jkl-description-list .jkl-description-list__detail {
+      margin-left: 1.5rem;
+      grid-column-start: 2;
+    }
+    .jkl-description-list .jkl-description-list__detail + .jkl-description-list__detail {
+      margin-top: 0.5rem;
+    }
+    .jkl-description-list .jkl-description-list__term + .jkl-description-list__detail:not(:first-of-type) {
+      margin-top: 0.5rem;
+    }
   }
 }
-
 .jkl-expandable {
   background-color: var(--jkl-color-background-container-low);
   border: 1px solid transparent;
@@ -3099,7 +3096,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   }
 }
 
-@keyframes jkl-show-uodaf12 {
+@keyframes jkl-show-u0wcf17 {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -3134,7 +3131,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-uodaf12 0.25s ease-out;
+  animation: jkl-show-u0wcf17 0.25s ease-out;
 }
 .jkl-feedback__buttons {
   display: flex;
@@ -3376,7 +3373,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-uodaf15 400ms ease-in-out forwards;
+  animation: jkl-dismiss-u0wcf23 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -3396,7 +3393,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
   }
 }
 
-@keyframes jkl-dismiss-uodaf15 {
+@keyframes jkl-dismiss-u0wcf23 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -3453,7 +3450,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-uodaf20 {
+@keyframes jkl-dot-in-u0wcf2y {
   0% {
     transform: scale(0.8);
   }
@@ -3499,7 +3496,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-uodaf20 150ms ease;
+  animation: jkl-dot-in-u0wcf2y 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -3955,290 +3952,287 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area-wrap
   font-size: var(--jkl-small-font-size);
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-logo-color: #1b1917;
+    }
+  }
+  [data-theme=light] {
     --jkl-logo-color: #1b1917;
   }
-}
-[data-theme=light] {
-  --jkl-logo-color: #1b1917;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-logo-color: #f9f9f9;
+    }
+  }
+  [data-theme=dark] {
     --jkl-logo-color: #f9f9f9;
   }
-}
-[data-theme=dark] {
-  --jkl-logo-color: #f9f9f9;
-}
-
-.jkl-logo {
-  color: var(--jkl-logo-color);
-}
-@media screen and (forced-colors: active) {
   .jkl-logo {
-    stroke: CanvasText;
-    fill: CanvasText;
+    color: var(--jkl-logo-color);
   }
-  .jkl-logo svg, .jkl-logo path {
-    stroke: CanvasText;
-    fill: CanvasText;
+  @media screen and (forced-colors: active) {
+    .jkl-logo {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+    .jkl-logo svg, .jkl-logo path {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+  }
+  .jkl-logo__F {
+    transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
+  }
+  .jkl-logo__F-line {
+    transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+  }
+  .jkl-logo__remtind {
+    opacity: 1;
+  }
+  .jkl-logo--symbol-only .jkl-logo__F {
+    transform: rotate(45deg);
+  }
+  .jkl-logo--symbol-only .jkl-logo__F-line {
+    transform: scaleX(1.5);
+  }
+  .jkl-logo--symbol-only .jkl-logo__remtind {
+    transition-delay: 0ms;
+    opacity: 0;
+    transform: translateX(-5%);
+  }
+  .jkl-logo--animated .jkl-logo__F {
+    transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
+  }
+  .jkl-logo--animated .jkl-logo__F-line {
+    transition: transform 250ms ease-in;
+  }
+  .jkl-logo--animated .jkl-logo__remtind {
+    transition: opacity 250ms 75ms ease-in, transform 250ms ease;
+  }
+  .jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
+    transform: translateX(35%) rotate(45deg);
   }
-}
-.jkl-logo__F {
-  transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
-}
-.jkl-logo__F-line {
-  transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
-}
-.jkl-logo__remtind {
-  opacity: 1;
-}
-.jkl-logo--symbol-only .jkl-logo__F {
-  transform: rotate(45deg);
-}
-.jkl-logo--symbol-only .jkl-logo__F-line {
-  transform: scaleX(1.5);
-}
-.jkl-logo--symbol-only .jkl-logo__remtind {
-  transition-delay: 0ms;
-  opacity: 0;
-  transform: translateX(-5%);
-}
-.jkl-logo--animated .jkl-logo__F {
-  transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
-}
-.jkl-logo--animated .jkl-logo__F-line {
-  transition: transform 250ms ease-in;
-}
-.jkl-logo--animated .jkl-logo__remtind {
-  transition: opacity 250ms 75ms ease-in, transform 250ms ease;
-}
-
-.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
-  transform: translateX(35%) rotate(45deg);
-}
-
-.jkl-logo-stamp {
-  color: var(--logo-stamp-color);
-}
-@media screen and (forced-colors: active) {
   .jkl-logo-stamp {
-    stroke: CanvasText;
-    fill: CanvasText;
+    color: var(--logo-stamp-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-logo-stamp {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+    .jkl-logo-stamp svg, .jkl-logo-stamp path {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+  }
+  .jkl-logo-stamp--animated .jkl-logo-stamp__text {
+    transform-origin: 256px 256px;
+    transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
+    transition-duration: 150ms;
+    transition-property: transform;
+  }
+  .jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
+    transition-duration: 1500ms;
+    transform: rotate(360deg);
+  }
+}
+@layer jokul.components {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-menu-item-height: 3rem;
+    --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);
   }
-  .jkl-logo-stamp svg, .jkl-logo-stamp path {
-    stroke: CanvasText;
-    fill: CanvasText;
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-menu-item-height: jkl.rem(32px);
+    --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);
   }
-}
-.jkl-logo-stamp--animated .jkl-logo-stamp__text {
-  transform-origin: 256px 256px;
-  transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
-  transition-duration: 1500ms;
-  transform: rotate(360deg);
-}
-
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-menu-item-height: 3rem;
-  --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);
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-menu-item-height: jkl.rem(32px);
-  --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);
-}
-
-.jkl-menu-item {
-  --background-color: var(--jkl-color-background-interactive);
-  background-color: var(--background-color);
-  color: var(--jkl-color-text-default);
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-  user-select: none;
-  font-size: var(--jkl-menu-item-font-size);
-  line-height: var(--jkl-menu-item-line-height);
-  font-weight: var(--jkl-menu-item-font-weight);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  height: var(--jkl-menu-item-height);
-  padding: var(--jkl-menu-item-padding);
-}
-.jkl-menu-item {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
   .jkl-menu-item {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    --background-color: var(--jkl-color-background-interactive);
+    background-color: var(--background-color);
+    color: var(--jkl-color-text-default);
+    cursor: pointer;
+    text-decoration: none;
+    box-sizing: border-box;
+    user-select: none;
+    font-size: var(--jkl-menu-item-font-size);
+    line-height: var(--jkl-menu-item-line-height);
+    font-weight: var(--jkl-menu-item-font-weight);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    height: var(--jkl-menu-item-height);
+    padding: var(--jkl-menu-item-padding);
+  }
+  .jkl-menu-item {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-menu-item {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-menu-item__content {
+    display: flex;
+    gap: calc(var(--jkl-unit-10) * 0.5);
+    justify-content: flex-start;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 100%;
+  }
+  .jkl-menu-item__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .jkl-menu-item__arrow {
+    display: flex;
+    align-items: center;
+  }
+  .jkl-menu-item__chevron {
+    flex-shrink: 0;
+  }
+  .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
+    --background-color: var(--jkl-color-background-interactive-hover);
   }
 }
-.jkl-menu-item__content {
-  display: flex;
-  gap: calc(var(--jkl-unit-10) * 0.5);
-  justify-content: flex-start;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex-grow: 1;
-  flex-shrink: 1;
-  max-width: 100%;
-}
-.jkl-menu-item__icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.jkl-menu-item__arrow {
-  display: flex;
-  align-items: center;
-}
-.jkl-menu-item__chevron {
-  flex-shrink: 0;
-}
-.jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-  --background-color: var(--jkl-color-background-interactive-hover);
-}
-
-.jkl-menu-divider {
-  width: 100%;
-  margin-block: 0;
-  border: none;
-  border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
+@layer jokul.components {
+  .jkl-menu-divider {
+    width: 100%;
+    margin-block: 0;
+    border: none;
+    border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
+  }
 }
-
-@media screen and (prefers-color-scheme: light) {
-  :root {
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-menu-border-color: transparent;
+    }
+  }
+  [data-theme=light] {
     --jkl-menu-border-color: transparent;
   }
-}
-[data-theme=light] {
-  --jkl-menu-border-color: transparent;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-menu-border-color: #f9f9f9;
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-menu-border-color: #f9f9f9;
+    }
+  }
+  [data-theme=dark] {
+    --jkl-menu-border-color: #f9f9f9;
+  }
+  .jkl-menu {
+    background-color: var(--jkl-color-background-container-high);
+    width: 100%;
+    max-width: 21rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
+    border-radius: 0.125rem;
+    border: 2px solid var(--jkl-menu-border-color);
+    z-index: 7000;
+  }
+  .jkl-menu:focus-visible {
+    outline: none;
+  }
+  .jkl-menu .jkl-menu[data-placement=bottom-start] {
+    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 2px 0, rgba(0, 0, 0, 0.14) -1px 2px 2px 0, rgba(0, 0, 0, 0.12) 3px 1px 5px 0;
   }
 }
-[data-theme=dark] {
-  --jkl-menu-border-color: #f9f9f9;
-}
-
-.jkl-menu {
-  background-color: var(--jkl-color-background-container-high);
-  width: 100%;
-  max-width: 21rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
-  border-radius: 0.125rem;
-  border: 2px solid var(--jkl-menu-border-color);
-  z-index: 7000;
-}
-.jkl-menu:focus-visible {
-  outline: none;
-}
-.jkl-menu .jkl-menu[data-placement=bottom-start] {
-  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 2px 0, rgba(0, 0, 0, 0.14) -1px 2px 2px 0, rgba(0, 0, 0, 0.12) 3px 1px 5px 0;
-}
-
-.jkl-nav-link {
-  color: var(--jkl-color-text-default);
-  box-sizing: border-box;
-  font-weight: 400;
-  text-decoration: none;
-  position: relative;
-  padding-right: 0.15rem;
-  margin-right: -0.15rem;
-}
-.jkl-nav-link {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
   .jkl-nav-link {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    color: var(--jkl-color-text-default);
+    box-sizing: border-box;
+    font-weight: 400;
+    text-decoration: none;
+    position: relative;
+    padding-right: 0.15rem;
+    margin-right: -0.15rem;
+  }
+  .jkl-nav-link {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-nav-link {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-nav-link:hover:not(:focus) {
+    color: var(--jkl-color-text-subdued);
+  }
+  .jkl-nav-link:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 0;
+  }
+  .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
+    transform: translateX(0.3rem);
+  }
+  .jkl-nav-link__icon {
+    margin-inline-start: 0.1em;
+    margin-block-start: -0.1em;
+    vertical-align: middle;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: transform;
+  }
+  .jkl-nav-link--active {
+    --jkl-icon-weight: 400;
+    font-weight: 700;
+    letter-spacing: -0.014em;
+  }
+  .jkl-nav-link--back {
+    padding-right: 0;
+    margin-right: 0;
+    padding-left: 0.15rem;
+    margin-left: -0.15rem;
+  }
+  .jkl-nav-link--back .jkl-nav-link__icon {
+    margin-inline: 0 0.1em;
+  }
+  .jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
+    padding-left: 0;
+    transform: translateX(-0.3rem);
   }
 }
-.jkl-nav-link:hover:not(:focus) {
-  color: var(--jkl-color-text-subdued);
-}
-.jkl-nav-link:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 0;
-}
-.jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
-  transform: translateX(0.3rem);
-}
-.jkl-nav-link__icon {
-  margin-inline-start: 0.1em;
-  margin-block-start: -0.1em;
-  vertical-align: middle;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-.jkl-nav-link--active {
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-  letter-spacing: -0.014em;
-}
-.jkl-nav-link--back {
-  padding-right: 0;
-  margin-right: 0;
-  padding-left: 0.15rem;
-  margin-left: -0.15rem;
-}
-.jkl-nav-link--back .jkl-nav-link__icon {
-  margin-inline: 0 0.1em;
-}
-.jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
-  padding-left: 0;
-  transform: translateX(-0.3rem);
-}
-
 .jkl-pagination {
   display: flex;
 }
@@ -4561,103 +4555,105 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   }
 }
 
-.jkl-progress-bar {
-  --track-color: var(--jkl-color-border-separator);
-  --bar-color: var(--jkl-color-border-input-focus);
-  --bar-height: 0.25rem;
-  background-color: var(--track-color);
-  border-radius: 6.25rem;
-  height: var(--bar-height);
-  width: 100%;
-  overflow: hidden;
-}
-.jkl-progress-bar__tracker {
-  display: block;
-  height: var(--bar-height);
-  background-color: var(--bar-color);
-}
-@media screen and (forced-colors: active) {
+@layer jokul.components {
   .jkl-progress-bar {
-    background-color: Canvas;
+    --track-color: var(--jkl-color-border-separator);
+    --bar-color: var(--jkl-color-border-input-focus);
+    --bar-height: 0.25rem;
+    background-color: var(--track-color);
+    border-radius: 6.25rem;
+    height: var(--bar-height);
+    width: 100%;
+    overflow: hidden;
   }
   .jkl-progress-bar__tracker {
-    background-color: CanvasText;
+    display: block;
+    height: var(--bar-height);
+    background-color: var(--bar-color);
   }
-}
-.jkl-progress-bar__tracker {
-  transition-property: width;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-}
-
-@keyframes jkl-downcount-uodaf2r {
-  from {
-    width: 100%;
+  @media screen and (forced-colors: active) {
+    .jkl-progress-bar {
+      background-color: Canvas;
+    }
+    .jkl-progress-bar__tracker {
+      background-color: CanvasText;
+    }
   }
-  to {
-    width: 0%;
+  .jkl-progress-bar__tracker {
+    transition-property: width;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+  }
+  @keyframes jkl-downcount-u0wcf3k {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
+}
+@layer jokul.components {
+  @keyframes jkl-dot-in-u0wcf44 {
+    0% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  .jkl-radio-panel {
+    --radio-dot-color: transparent;
+    --radio-ring-color: transparent;
+    /* The ring */
   }
-}
-@keyframes jkl-dot-in-uodaf3n {
-  0% {
-    transform: scale(0.8);
+  .jkl-radio-panel__decorator {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 50%;
+    border: 0.0625rem solid var(--jkl-color-border-action);
+    background-color: var(--radio-ring-color);
+    transition-property: background-color, outline;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    /* The dot */
   }
-  100% {
-    transform: scale(1);
+  .jkl-radio-panel__decorator::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+    scale: 1;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+    background-color: var(--radio-dot-color);
+    transition-property: transform;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
   }
-}
-.jkl-radio-panel {
-  --radio-dot-color: transparent;
-  --radio-ring-color: transparent;
-  /* The ring */
-}
-.jkl-radio-panel__decorator {
-  cursor: pointer;
-  display: inline-block;
-  position: relative;
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 50%;
-  border: 0.0625rem solid var(--jkl-color-border-action);
-  background-color: var(--radio-ring-color);
-  transition-property: background-color, outline;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  /* The dot */
-}
-.jkl-radio-panel__decorator::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% -50%;
-  scale: 1;
-  height: 1rem;
-  width: 1rem;
-  border-radius: 50%;
-  background-color: var(--radio-dot-color);
-  transition-property: transform;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-}
-@media screen and (forced-colors: active) {
-  .jkl-radio-panel__decorator {
-    border: 1px solid ButtonText;
+  @media screen and (forced-colors: active) {
+    .jkl-radio-panel__decorator {
+      border: 1px solid ButtonText;
+    }
+  }
+  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
+    animation: jkl-dot-in-u0wcf44 150ms ease;
+  }
+  .jkl-radio-panel:has(:checked) {
+    --radio-dot-color: var(--jkl-color-border-action);
+  }
+  [aria-invalid=true] .jkl-radio-panel {
+    --radio-ring-color: var(--jkl-color-background-alert-error);
+  }
+  [aria-invalid=true] .jkl-radio-panel:has(:checked) {
+    --radio-dot-color: var(--jkl-color-text-on-alert);
   }
 }
-.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
-  animation: jkl-dot-in-uodaf3n 150ms ease;
-}
-.jkl-radio-panel:has(:checked) {
-  --radio-dot-color: var(--jkl-color-border-action);
-}
-[aria-invalid=true] .jkl-radio-panel {
-  --radio-ring-color: var(--jkl-color-background-alert-error);
-}
-[aria-invalid=true] .jkl-radio-panel:has(:checked) {
-  --radio-dot-color: var(--jkl-color-text-on-alert);
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -4716,7 +4712,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
 .jkl-segmented-control .jkl-segmented-control-item:hover {
   background-color: var(--jkl-color-background-interactive-hover);
   border-color: var(--jkl-color-border-separator-hover);
-  z-index: 1;
+  z-index: 2;
 }
 .jkl-segmented-control .jkl-segmented-control-item:has(input:checked) {
   background-color: var(--jkl-color-background-container-high);
@@ -4748,64 +4744,63 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   border-start-end-radius: var(--jkl-segmented-controls-border-radius);
 }
 
-@media screen and (prefers-color-scheme: light) {
-  :root {
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-summary-table-border-color: #1b1917;
+    }
+  }
+  [data-theme=light] {
     --jkl-summary-table-border-color: #1b1917;
   }
-}
-[data-theme=light] {
-  --jkl-summary-table-border-color: #1b1917;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-summary-table-border-color: #c8c5c3;
+    }
+  }
+  [data-theme=dark] {
     --jkl-summary-table-border-color: #c8c5c3;
   }
+  .jkl-summary-table {
+    display: flex;
+    flex-direction: column;
+    overflow-wrap: anywhere;
+    width: 100%;
+  }
+  .jkl-summary-table tr {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+  }
+  .jkl-summary-table th,
+  .jkl-summary-table td {
+    flex-basis: 50%;
+    padding-right: 1rem;
+  }
+  .jkl-summary-table th:first-child,
+  .jkl-summary-table td:first-child {
+    text-align: left;
+  }
+  .jkl-summary-table th:last-child,
+  .jkl-summary-table td:last-child {
+    text-align: right;
+    padding-right: 0;
+  }
+  .jkl-summary-table > tbody th {
+    font-weight: 400;
+  }
+  .jkl-summary-table > tfoot {
+    border-top: 0.0625rem solid #1b1917;
+    border-top: 0.0625rem solid var(--jkl-summary-table-border-color);
+    border-bottom: 0.0625rem solid #1b1917;
+    border-bottom: 0.0625rem solid var(--jkl-summary-table-border-color);
+    padding-top: 0.5rem;
+  }
+  .jkl-summary-table > tfoot th,
+  .jkl-summary-table > tfoot td {
+    font-weight: 700;
+  }
 }
-[data-theme=dark] {
-  --jkl-summary-table-border-color: #c8c5c3;
-}
-
-.jkl-summary-table {
-  display: flex;
-  flex-direction: column;
-  overflow-wrap: anywhere;
-  width: 100%;
-}
-.jkl-summary-table tr {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 0.5rem;
-}
-.jkl-summary-table th,
-.jkl-summary-table td {
-  flex-basis: 50%;
-  padding-right: 1rem;
-}
-.jkl-summary-table th:first-child,
-.jkl-summary-table td:first-child {
-  text-align: left;
-}
-.jkl-summary-table th:last-child,
-.jkl-summary-table td:last-child {
-  text-align: right;
-  padding-right: 0;
-}
-.jkl-summary-table > tbody th {
-  font-weight: 400;
-}
-.jkl-summary-table > tfoot {
-  border-top: 0.0625rem solid #1b1917;
-  border-top: 0.0625rem solid var(--jkl-summary-table-border-color);
-  border-bottom: 0.0625rem solid #1b1917;
-  border-bottom: 0.0625rem solid var(--jkl-summary-table-border-color);
-  padding-top: 0.5rem;
-}
-.jkl-summary-table > tfoot th,
-.jkl-summary-table > tfoot td {
-  font-weight: 700;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -4949,7 +4944,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-uodaf40 400ms forwards;
+  animation: jkl-dismiss-u0wcf45 400ms forwards;
   transition: block 400ms 400ms;
 }
 .jkl-system-message--info {
@@ -4980,7 +4975,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
   }
 }
 
-@keyframes jkl-dismiss-uodaf40 {
+@keyframes jkl-dismiss-u0wcf45 {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -5556,144 +5551,138 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
   }
 }
 
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
-      var(--jkl-unit-02);
-  --jkl-tab-padding-inline-end: var(--jkl-unit-50);
-  --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);
-}
-@media (width >= 0) and (max-width: 679px) {
+@layer jokul.components {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
-        var(--jkl-unit-15) var(--jkl-unit-02);
-    --jkl-tab-padding-inline-end: var(--jkl-unit-30);
+    --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);
+    --jkl-tab-padding-inline-end: var(--jkl-unit-50);
+    --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);
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    :root,
+    [data-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);
+      --jkl-tab-padding-inline-end: var(--jkl-unit-30);
+    }
+  }
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --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-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;
+    --jkl-tab-padding-inline-end: var(--jkl-unit-40);
+  }
+  .jkl-tabs {
+    width: 100%;
   }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --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-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
-      0;
-  --jkl-tab-padding-inline-end: var(--jkl-unit-40);
-}
-
-.jkl-tabs {
-  width: 100%;
-}
-
-.jkl-tablist {
-  --text-color: var(--jkl-color-text-interactive);
-  --line-color: var(--jkl-color-border-separator);
-  --indicator-color: var(--jkl-color-border-separator-hover);
-  scroll-snap-type: x proximity;
-  overflow: scroll hidden;
-  scrollbar-width: none;
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  padding: 0;
-  margin: 0;
-  border-bottom: 1px solid var(--line-color);
-  width: fit-content;
-  max-width: 100%;
-}
-@media screen and (forced-colors: active) {
   .jkl-tablist {
-    border-color: GrayText;
+    --text-color: var(--jkl-color-text-interactive);
+    --line-color: var(--jkl-color-border-separator);
+    --indicator-color: var(--jkl-color-border-separator-hover);
+    scroll-snap-type: x proximity;
+    overflow: scroll hidden;
+    scrollbar-width: none;
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px solid var(--line-color);
+    width: fit-content;
+    max-width: 100%;
   }
-}
-.jkl-tablist::-webkit-scrollbar {
-  display: none;
-}
-@supports (position-anchor: --active-tab) {
-  .jkl-tablist::after {
-    content: "";
-    position: absolute;
-    position-anchor: --active-tab;
-    height: 2px;
-    width: calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end));
-    inset-block-start: calc(anchor(end) - 2px);
-    inset-inline-start: calc(anchor(--active-tab start));
-    background-color: var(--indicator-color);
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+  @media screen and (forced-colors: active) {
+    .jkl-tablist {
+      border-color: GrayText;
+    }
+  }
+  .jkl-tablist::-webkit-scrollbar {
+    display: none;
+  }
+  @supports (position-anchor: --active-tab) {
+    .jkl-tablist::after {
+      content: "";
+      position: absolute;
+      position-anchor: --active-tab;
+      height: 2px;
+      width: calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end));
+      inset-block-start: calc(anchor(end) - 2px);
+      inset-inline-start: calc(anchor(--active-tab start));
+      background-color: var(--indicator-color);
+      transition-timing-function: ease;
+      transition-duration: 400ms;
+    }
   }
-}
-
-.jkl-tab {
-  font-size: var(--jkl-tab-font-size);
-  line-height: var(--jkl-tab-line-height);
-  font-weight: var(--jkl-tab-font-weight);
-  color: var(--text-color);
-  padding: var(--jkl-tab-padding);
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  position: relative;
-  scroll-margin-inline-start: var(--jkl-unit-20);
-  scroll-snap-align: start;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.jkl-tab {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
   .jkl-tab {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    font-size: var(--jkl-tab-font-size);
+    line-height: var(--jkl-tab-line-height);
+    font-weight: var(--jkl-tab-font-weight);
+    color: var(--text-color);
+    padding: var(--jkl-tab-padding);
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    scroll-margin-inline-start: var(--jkl-unit-20);
+    scroll-snap-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .jkl-tab {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-tab {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-tab:hover {
+    --text-color: var(--jkl-color-text-interactive-hover);
+  }
+  .jkl-tab:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: -2px;
   }
-}
-.jkl-tab:hover {
-  --text-color: var(--jkl-color-text-interactive-hover);
-}
-.jkl-tab:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: -2px;
-}
-.jkl-tab[aria-selected=true] {
-  anchor-name: --active-tab;
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-  letter-spacing: -0.014em;
-}
-@supports not (position-anchor: --active-tab) {
   .jkl-tab[aria-selected=true] {
-    position: relative;
+    anchor-name: --active-tab;
+    --jkl-icon-weight: 400;
+    font-weight: 700;
+    letter-spacing: -0.014em;
   }
-  .jkl-tab[aria-selected=true]::after {
-    content: "";
-    position: absolute;
-    height: 2px;
-    width: calc(100% - var(--jkl-tab-padding-inline-end));
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    background-color: var(--indicator-color);
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+  @supports not (position-anchor: --active-tab) {
+    .jkl-tab[aria-selected=true] {
+      position: relative;
+    }
+    .jkl-tab[aria-selected=true]::after {
+      content: "";
+      position: absolute;
+      height: 2px;
+      width: calc(100% - var(--jkl-tab-padding-inline-end));
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      background-color: var(--indicator-color);
+      transition-timing-function: ease;
+      transition-duration: 400ms;
+    }
   }
 }
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -5880,14 +5869,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-uodaf48 200ms ease-out forwards;
+  animation: jkl-entering-u0wcf4g 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-uodaf4s 150ms ease-in forwards;
+  animation: jkl-exiting-u0wcf50 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-uodaf48 {
+@keyframes jkl-entering-u0wcf4g {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -5897,7 +5886,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-uodaf4s {
+@keyframes jkl-exiting-u0wcf50 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);
@@ -5912,18 +5901,18 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
     --jkl-slider-bg: #e0dbd4;
     --jkl-slider-pill: #f9f9f9;
     --jkl-slider-pill-text: #1b1917;
-    --jkl-slider-pill-text--active: #000000;
-    --jkl-slider-focus-color: #000000;
-    --jkl-slider-hover-color: #000000;
+    --jkl-slider-pill-text--active: #000;
+    --jkl-slider-focus-color: #000;
+    --jkl-slider-hover-color: #000;
   }
 }
 [data-theme=light] {
   --jkl-slider-bg: #e0dbd4;
   --jkl-slider-pill: #f9f9f9;
   --jkl-slider-pill-text: #1b1917;
-  --jkl-slider-pill-text--active: #000000;
-  --jkl-slider-focus-color: #000000;
-  --jkl-slider-hover-color: #000000;
+  --jkl-slider-pill-text--active: #000;
+  --jkl-slider-focus-color: #000;
+  --jkl-slider-hover-color: #000;
 }
 
 @media screen and (prefers-color-scheme: dark) {
@@ -5931,18 +5920,18 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
     --jkl-slider-bg: #444141;
     --jkl-slider-pill: #1b1917;
     --jkl-slider-pill-text: #f9f9f9;
-    --jkl-slider-pill-text--active: #ffffff;
+    --jkl-slider-pill-text--active: #fff;
     --jkl-slider-focus-color: #c8c5c3;
-    --jkl-slider-hover-color: #ffffff;
+    --jkl-slider-hover-color: #fff;
   }
 }
 [data-theme=dark] {
   --jkl-slider-bg: #444141;
   --jkl-slider-pill: #1b1917;
   --jkl-slider-pill-text: #f9f9f9;
-  --jkl-slider-pill-text--active: #ffffff;
+  --jkl-slider-pill-text--active: #fff;
   --jkl-slider-focus-color: #c8c5c3;
-  --jkl-slider-hover-color: #ffffff;
+  --jkl-slider-hover-color: #fff;
 }
 
 :root,
@@ -6215,10 +6204,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 }
 
 .jkl-help-popover {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  opacity: 0;
-  transition: opacity, overlay allow-discrete, display allow-discrete;
   max-width: 40ch;
   padding: var(--jkl-unit-30);
   margin: var(--jkl-unit-05);
@@ -6261,12 +6246,4 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 .jkl-help-popover[data-position=right] {
   position-area: right center;
   position-try: right, left, top, bottom;
-}
-.jkl-help-popover:popover-open {
-  opacity: 1;
-}
-@starting-style {
-  .jkl-help-popover:popover-open {
-    opacity: 0;
-  }
 }