@fremtind/jokul 0.28.1 → 0.29.0

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-urgdh93 .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-urgdh93{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
+.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-uh1re8r .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-uh1re8r{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

package/styles/components/input-panel/_index.scss

@@ -0,0 +1,2 @@
+@forward "radio-panel";
+@forward "checkbox-panel";

package/styles/components/input-panel/checkbox-panel.css

@@ -0,0 +1,132 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ */
+.jkl-input-panel {
+  --outer-border-color: var(--jkl-color-border-input);
+  --outer-border-thickness: 0.0625rem;
+  --background-color: transparent;
+  outline: var(--outer-border-thickness) solid var(--outer-border-color);
+  border-radius: 4px;
+  padding-left: 1rem;
+  background-color: var(--background-color);
+  cursor: pointer;
+}
+.jkl-input-panel__input {
+  opacity: 0;
+  position: absolute;
+  top: -6px;
+}
+.jkl-input-panel__label {
+  display: grid;
+  grid-template-columns: min-content fit-content(30%) 1fr;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.jkl-input-panel__main-label {
+  padding-block: 1.5rem;
+}
+.jkl-input-panel__extra-label {
+  margin-left: 1rem;
+  align-self: stretch;
+  margin-right: 1rem;
+}
+.jkl-input-panel__extra-label > :first-child {
+  padding-right: 1rem;
+}
+.jkl-input-panel__extra-label--text {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.jkl-input-panel__content {
+  height: 0;
+  overflow: hidden;
+  cursor: default;
+  padding-right: 1.5rem;
+}
+.jkl-input-panel__content[data-alwaysopen=true], .jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content {
+  padding-bottom: 24px;
+  height: auto;
+}
+.jkl-input-panel:has(:focus-visible), .jkl-input-panel:hover {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-separator-hover);
+}
+.jkl-input-panel:has(:checked) {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-action);
+  --background-color: var(--jkl-color-background-container-high);
+}
+
+@keyframes jkl-checkbox-checked-ume6fjj {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  40% {
+    width: 18%;
+    height: 0;
+  }
+  100% {
+    width: 18%;
+    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) {
+  .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;
+  }
+}
+.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
+  animation: jkl-checkbox-checked-ume6fjj 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);
+}

package/styles/components/input-panel/checkbox-panel.min.css

@@ -0,0 +1 @@
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-checkbox-checked-ume6fjj{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.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{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@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-ume6fjj .15s 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)}

package/styles/components/input-panel/checkbox-panel.scss

@@ -0,0 +1,88 @@
+@use "../../core/jkl/" as jkl;
+@use "sass:string";
+@use "./shared.scss";
+
+$_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
+
+@keyframes #{$_checkbox-checked-animation-name} {
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    40% {
+        width: 18%;
+        height: 0;
+    }
+
+    100% {
+        width: 18%;
+        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);
+
+    // The box
+    &__decorator {
+        box-sizing: border-box;
+        height: var(--jkl-checkbox-box-size);
+        width: var(--jkl-checkbox-box-size);
+        position: relative;
+
+        outline: none;
+        border-radius: 0; // fixes rounded corners in iOS Safari
+        border: 1px solid;
+        border-color: var(--checkbox-box-color);
+        background-color: var(--checkbox-background-color);
+        @include jkl.motion;
+        transition-property: background-color;
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            border: 1px solid ButtonText;
+        }
+
+        // The check
+        &::after {
+            content: "";
+            position: absolute;
+            transform-origin: bottom left;
+            bottom: 42%;
+            left: 18%;
+
+            display: block;
+            width: 18%;
+            height: 58%;
+            transform: rotate(45deg);
+
+            border: solid jkl.rem(2px) var(--checkbox-check-color);
+            border-left-width: 0;
+            border-top-width: 0;
+
+            opacity: 0;
+            @include jkl.motion;
+            transition-property: opacity, border-color;
+
+            @include jkl.forced-colors-mode {
+                border-color: ButtonText;
+            }
+        }
+    }
+
+    &:has(:checked) &__decorator {
+        &::after {
+            animation: $_checkbox-checked-animation-name
+                jkl.timing("productive") ease-in-out forwards;
+            opacity: 1;
+        }
+    }
+
+    &:has([aria-invalid="true"]) {
+        --checkbox-background-color: var(--jkl-color-background-alert-error);
+        --checkbox-check-color: var(--jkl-color-text-on-alert);
+    }
+}

package/styles/components/{radio-panel → input-panel}/radio-panel.css

@@ -2,38 +2,78 @@
  * Do not edit directly
  * Generated on Mon, 28 Oct 2024 14:22:00 GMT
  */
-@keyframes jkl-dot-in-u81qfui {
-  0% {
-    transform: scale(0.8);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-.jkl-radio-panel {
+.jkl-input-panel {
   --outer-border-color: var(--jkl-color-border-input);
   --outer-border-thickness: 0.0625rem;
-  --dot-color: transparent;
-  --ring-color: transparent;
+  --background-color: transparent;
   outline: var(--outer-border-thickness) solid var(--outer-border-color);
   border-radius: 4px;
   padding-left: 1rem;
+  background-color: var(--background-color);
   cursor: pointer;
-  /* The ring */
 }
-.jkl-radio-panel__label {
+.jkl-input-panel__input {
+  opacity: 0;
+  position: absolute;
+  top: -6px;
+}
+.jkl-input-panel__label {
   display: grid;
   grid-template-columns: min-content fit-content(30%) 1fr;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
 }
-.jkl-radio-panel__input {
-  opacity: 0;
-  position: absolute;
-  top: -6px;
+.jkl-input-panel__main-label {
+  padding-block: 1.5rem;
 }
-.jkl-radio-panel__dot {
+.jkl-input-panel__extra-label {
+  margin-left: 1rem;
+  align-self: stretch;
+  margin-right: 1rem;
+}
+.jkl-input-panel__extra-label > :first-child {
+  padding-right: 1rem;
+}
+.jkl-input-panel__extra-label--text {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.jkl-input-panel__content {
+  height: 0;
+  overflow: hidden;
+  cursor: default;
+  padding-right: 1.5rem;
+}
+.jkl-input-panel__content[data-alwaysopen=true], .jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content {
+  padding-bottom: 24px;
+  height: auto;
+}
+.jkl-input-panel:has(:focus-visible), .jkl-input-panel:hover {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-separator-hover);
+}
+.jkl-input-panel:has(:checked) {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-action);
+  --background-color: var(--jkl-color-background-container-high);
+}
+
+@keyframes jkl-dot-in-us88ymp {
+  0% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.jkl-radio-panel {
+  --radio-dot-color: transparent;
+  --radio-ring-color: transparent;
+  /* The ring */
+}
+.jkl-radio-panel__decorator {
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -41,13 +81,13 @@
   width: 1.5rem;
   border-radius: 50%;
   border: 0.0625rem solid var(--jkl-color-border-action);
-  background-color: var(--ring-color);
+  background-color: var(--radio-ring-color);
   transition-property: background-color, outline;
   transition-timing-function: ease;
   transition-duration: 150ms;
   /* The dot */
 }
-.jkl-radio-panel__dot::after {
+.jkl-radio-panel__decorator::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -57,54 +97,25 @@
   height: 1rem;
   width: 1rem;
   border-radius: 50%;
-  background-color: var(--dot-color);
+  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__dot {
+  .jkl-radio-panel__decorator {
     border: 1px solid ButtonText;
   }
 }
-.jkl-radio-panel__input:checked + .jkl-radio-panel__dot::after {
-  animation: jkl-dot-in-u81qfui 150ms ease;
-}
-.jkl-radio-panel__main-label {
-  padding-block: 1.5rem;
-}
-.jkl-radio-panel__extra-label {
-  margin-left: 1rem;
-  align-self: stretch;
-  margin-right: 1rem;
-}
-.jkl-radio-panel__extra-label > :first-child {
-  padding-right: 1rem;
-}
-.jkl-radio-panel__extra-label--text {
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-.jkl-radio-panel__content {
-  display: none;
-  cursor: default;
-  padding-right: 1.5rem;
-}
-.jkl-radio-panel__content[data-alwaysOpen=true], .jkl-radio-panel:has(:checked) .jkl-radio-panel__content[data-open=true] {
-  margin-bottom: 24px;
-  display: block;
-}
-.jkl-radio-panel:has(:checked), .jkl-radio-panel:has(:focus-visible), .jkl-radio-panel:hover {
-  --outer-border-color: var(--jkl-color-border-separator-hover);
-  --outer-border-thickness: 0.125rem;
+.jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
+  animation: jkl-dot-in-us88ymp 150ms ease;
 }
 .jkl-radio-panel:has(:checked) {
-  --dot-color: var(--jkl-color-border-action);
+  --radio-dot-color: var(--jkl-color-border-action);
 }
 [aria-invalid=true] .jkl-radio-panel {
-  --ring-color: var(--jkl-color-background-alert-error);
+  --radio-ring-color: var(--jkl-color-background-alert-error);
 }
 [aria-invalid=true] .jkl-radio-panel:has(:checked) {
-  --dot-color: var(--jkl-color-text-on-alert);
+  --radio-dot-color: var(--jkl-color-text-on-alert);
 }

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

@@ -0,0 +1 @@
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}@keyframes jkl-dot-in-us88ymp{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:transparent;--radio-ring-color:transparent}.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-us88ymp .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/input-panel/radio-panel.scss

@@ -0,0 +1,79 @@
+@use "../../core/jkl/" as jkl;
+@use "sass:string";
+@use "./shared.scss";
+
+$_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
+
+@keyframes #{$_radio-panel-dot-animation-name} {
+    0% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.jkl-radio-panel {
+    --radio-dot-color: transparent;
+    --radio-ring-color: transparent;
+
+    /* The ring */
+    &__decorator {
+        cursor: pointer;
+
+        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);
+
+        transition-property: background-color, outline;
+        @include jkl.motion;
+
+        /* The dot */
+        &::after {
+            content: "";
+
+            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);
+
+            transition-property: transform;
+            @include jkl.motion;
+        }
+
+        @include jkl.forced-colors-mode {
+            border: 1px solid ButtonText;
+        }
+    }
+
+    &__input:checked + &__decorator {
+        &::after {
+            animation: $_radio-panel-dot-animation-name jkl.timing("productive")
+                ease;
+        }
+    }
+
+    &: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"] &:has(:checked) {
+        --radio-dot-color: var(--jkl-color-text-on-alert);
+    }
+}

package/styles/components/input-panel/shared.css

@@ -0,0 +1,61 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ */
+.jkl-input-panel {
+  --outer-border-color: var(--jkl-color-border-input);
+  --outer-border-thickness: 0.0625rem;
+  --background-color: transparent;
+  outline: var(--outer-border-thickness) solid var(--outer-border-color);
+  border-radius: 4px;
+  padding-left: 1rem;
+  background-color: var(--background-color);
+  cursor: pointer;
+}
+.jkl-input-panel__input {
+  opacity: 0;
+  position: absolute;
+  top: -6px;
+}
+.jkl-input-panel__label {
+  display: grid;
+  grid-template-columns: min-content fit-content(30%) 1fr;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.jkl-input-panel__main-label {
+  padding-block: 1.5rem;
+}
+.jkl-input-panel__extra-label {
+  margin-left: 1rem;
+  align-self: stretch;
+  margin-right: 1rem;
+}
+.jkl-input-panel__extra-label > :first-child {
+  padding-right: 1rem;
+}
+.jkl-input-panel__extra-label--text {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.jkl-input-panel__content {
+  height: 0;
+  overflow: hidden;
+  cursor: default;
+  padding-right: 1.5rem;
+}
+.jkl-input-panel__content[data-alwaysopen=true], .jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content {
+  padding-bottom: 24px;
+  height: auto;
+}
+.jkl-input-panel:has(:focus-visible), .jkl-input-panel:hover {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-separator-hover);
+}
+.jkl-input-panel:has(:checked) {
+  --outer-border-thickness: 0.125rem;
+  --outer-border-color: var(--jkl-color-border-action);
+  --background-color: var(--jkl-color-background-container-high);
+}

package/styles/components/input-panel/shared.min.css

@@ -0,0 +1 @@
+.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:transparent;background-color:var(--background-color);border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);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),.jkl-input-panel:hover{--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-separator-hover)}.jkl-input-panel:has(:checked){--outer-border-thickness:0.125rem;--outer-border-color:var(--jkl-color-border-action);--background-color:var(--jkl-color-background-container-high)}

package/styles/components/input-panel/shared.scss

@@ -0,0 +1,75 @@
+@use "../../core/jkl/" as jkl;
+
+.jkl-input-panel {
+    --outer-border-color: var(--jkl-color-border-input);
+    --outer-border-thickness: #{jkl.rem(1px)};
+    --background-color: transparent;
+
+    outline: var(--outer-border-thickness) solid var(--outer-border-color);
+    border-radius: 4px;
+    padding-left: jkl.rem(16px);
+
+    background-color: var(--background-color);
+
+    cursor: pointer;
+
+    &__input {
+        opacity: 0;
+        position: absolute;
+        top: -6px;
+    }
+
+    &__label {
+        display: grid;
+        grid-template-columns: min-content fit-content(30%) 1fr;
+        align-items: center;
+        gap: jkl.rem(8px);
+        cursor: pointer;
+    }
+
+    &__main-label {
+        padding-block: jkl.rem(24px);
+    }
+
+    &__extra-label {
+        margin-left: jkl.rem(16px);
+        align-self: stretch;
+
+        margin-right: jkl.rem(16px);
+
+        > :first-child {
+            padding-right: jkl.rem(16px);
+        }
+
+        &--text {
+            display: flex;
+            height: 100%;
+            align-items: center;
+        }
+    }
+
+    &__content {
+        height: 0;
+        overflow: hidden;
+        cursor: default;
+        padding-right: jkl.rem(24px);
+
+        &[data-alwaysopen="true"],
+        .jkl-input-panel:has([aria-expanded="true"]) & {
+            padding-bottom: 24px;
+            height: auto;
+        }
+    }
+
+    &:has(:focus-visible),
+    &:hover {
+        --outer-border-thickness: #{jkl.rem(2px)};
+        --outer-border-color: var(--jkl-color-border-separator-hover);
+    }
+
+    &:has(:checked) {
+        --outer-border-thickness: #{jkl.rem(2px)};
+        --outer-border-color: var(--jkl-color-border-action);
+        --background-color: var(--jkl-color-background-container-high);
+    }
+}