@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/progress-bar/progress-bar.scss

@@ -2,24 +2,26 @@
 @use "../../core/jkl";
 @use "../../shared/track/track";
 
-.jkl-progress-bar {
-    @include track.track;
+@layer jokul.components {
+    .jkl-progress-bar {
+        @include track.track;
 
-    &__tracker {
-        transition-property: width;
+        &__tracker {
+            transition-property: width;
 
-        @include jkl.motion("standard", "productive");
+            @include jkl.motion("standard", "productive");
+        }
     }
-}
 
-$_downcount: jkl-downcount-#{string.unique-id()};
+    $_downcount: jkl-downcount-#{string.unique-id()};
 
-@keyframes #{$_downcount} {
-    from {
-        width: 100%;
-    }
+    @keyframes #{$_downcount} {
+        from {
+            width: 100%;
+        }
 
-    to {
-        width: 0%;
+        to {
+            width: 0%;
+        }
     }
-}
+}

package/styles/components/radio-button/radio-button.css

@@ -1,6 +1,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.
  */
 :root,
 [data-layout-density=comfortable],
@@ -45,7 +47,7 @@
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-ufyc2kf {
+@keyframes jkl-dot-in-uhrw98r {
   0% {
     transform: scale(0.8);
   }
@@ -91,7 +93,7 @@
 }
 .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-ufyc2kf 150ms ease;
+  animation: jkl-dot-in-uhrw98r 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {

package/styles/components/radio-button/radio-button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:calc(var(--jkl-unit-10)*0.5) 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-ufyc2kf{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{left:calc(var(--jkl-radio-button-size)*-.5);opacity:0;position:absolute;top:var(--jkl-radio-button-size)}.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-ufyc2kf .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:calc(var(--jkl-unit-10)*0.5) 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uhrw98r{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{left:calc(var(--jkl-radio-button-size)*-.5);opacity:0;position:absolute;top:var(--jkl-radio-button-size)}.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-uhrw98r .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}

package/styles/components/radio-panel/development/styles.css

@@ -1,6 +1,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.
  */
 .input-panel-example__season-tag {
   position: absolute;

package/styles/components/radio-panel/radio-panel.css

@@ -1,6 +1,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.
  */
 .jkl-input-panel {
   --outer-border-color: var(--jkl-color-border-input);
@@ -62,62 +64,64 @@
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-dot-in-urfidlk {
-  0% {
-    transform: scale(0.8);
+@layer jokul.components {
+  @keyframes jkl-dot-in-udty8hk {
+    0% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
-  100% {
-    transform: scale(1);
+  .jkl-radio-panel {
+    --radio-dot-color: transparent;
+    --radio-ring-color: transparent;
+    /* The ring */
   }
-}
-.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;
+    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;
+    }
+  }
+  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
+    animation: jkl-dot-in-udty8hk 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-urfidlk 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);
 }

package/styles/components/radio-panel/radio-panel.min.css

@@ -1 +1 @@
-.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-dot-in-urfidlk{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@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-urfidlk .15s 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-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@layer jokul.components{@keyframes jkl-dot-in-udty8hk{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@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-udty8hk .15s 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)}}

package/styles/components/radio-panel/radio-panel.scss

@@ -4,78 +4,79 @@
 
 $_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
 
-@keyframes #{$_radio-panel-dot-animation-name} {
-    0% {
-        transform: scale(0.8);
-    }
+@layer jokul.components {
+    @keyframes #{$_radio-panel-dot-animation-name} {
+        0% {
+            transform: scale(0.8);
+        }
 
-    100% {
-        transform: scale(1);
+        100% {
+            transform: scale(1);
+        }
     }
-}
 
-.jkl-radio-panel {
-    --radio-dot-color: transparent;
-    --radio-ring-color: transparent;
+    .jkl-radio-panel {
+        --radio-dot-color: transparent;
+        --radio-ring-color: transparent;
 
-    /* The ring */
-    &__decorator {
-        cursor: pointer;
+        /* The ring */
+        &__decorator {
+            cursor: pointer;
 
-        display: inline-block;
-        position: relative;
+            display: inline-block;
+            position: relative;
 
-        height: jkl.rem(24px);
-        width: jkl.rem(24px);
-        border-radius: 50%;
-        border: jkl.rem(1px) solid var(--jkl-color-border-action);
-        background-color: var(--radio-ring-color);
+            height: jkl.rem(24px);
+            width: jkl.rem(24px);
+            border-radius: 50%;
+            border: jkl.rem(1px) solid var(--jkl-color-border-action);
+            background-color: var(--radio-ring-color);
 
-        transition-property: background-color, outline;
+            transition-property: background-color, outline;
 
-        @include jkl.motion;
+            @include jkl.motion;
 
-        /* The dot */
-        &::after {
-            content: "";
+            /* The dot */
+            &::after {
+                content: "";
 
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            translate: -50% -50%;
-            scale: 1;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                translate: -50% -50%;
+                scale: 1;
 
-            height: jkl.rem(16px);
-            width: jkl.rem(16px);
-            border-radius: 50%;
-            background-color: var(--radio-dot-color);
+                height: jkl.rem(16px);
+                width: jkl.rem(16px);
+                border-radius: 50%;
+                background-color: var(--radio-dot-color);
 
-            transition-property: transform;
+                transition-property: transform;
 
-            @include jkl.motion;
-        }
+                @include jkl.motion;
+            }
 
-        @include jkl.forced-colors-mode {
-            border: 1px solid ButtonText;
+            @include jkl.forced-colors-mode {
+                border: 1px solid ButtonText;
+            }
         }
-    }
 
-    &__input:checked + &__decorator {
-        &::after {
-            animation: $_radio-panel-dot-animation-name jkl.timing("productive")
-                ease;
+        &__input:checked + &__decorator {
+            &::after {
+                animation: $_radio-panel-dot-animation-name jkl.timing("productive") ease;
+            }
         }
-    }
 
-    &:has(:checked) {
-        --radio-dot-color: var(--jkl-color-border-action);
-    }
+        &:has(:checked) {
+            --radio-dot-color: var(--jkl-color-border-action);
+        }
 
-    [aria-invalid="true"] & {
-        --radio-ring-color: var(--jkl-color-background-alert-error);
-    }
+        [aria-invalid="true"] & {
+            --radio-ring-color: var(--jkl-color-background-alert-error);
+        }
 
-    [aria-invalid="true"] &:has(:checked) {
-        --radio-dot-color: var(--jkl-color-text-on-alert);
+        [aria-invalid="true"] &:has(:checked) {
+            --radio-dot-color: var(--jkl-color-text-on-alert);
+        }
     }
-}
+}