@fremtind/jokul 0.8.0 → 0.9.0

package/src/components/modal/styles/modal.css

@@ -0,0 +1,115 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+: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: 2.5rem;
+  --jkl-modal-min-width: 13.75rem;
+  --jkl-modal-max-width: 41.25rem;
+  --jkl-modal-header-margin: 0 0 1.5rem;
+  --jkl-modal-actions-margin: 2.5rem 0 0 0;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-modal-padding: 2rem;
+    --jkl-modal-header-margin: 0 0 1rem;
+    --jkl-modal-actions-margin: 2rem 0 0 0;
+  }
+}
+
+[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: 1.5rem;
+  --jkl-modal-header-margin: 0 0 0.75rem;
+  --jkl-modal-actions-margin: 1.5rem 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;
+  }
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-modal {
+    margin: auto 1.5rem;
+  }
+}
+
+.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: row;
+  gap: 1rem;
+}

package/src/components/modal/styles/modal.min.css

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-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:2.5rem;--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;--jkl-modal-header-margin:0 0 1.5rem;--jkl-modal-actions-margin:2.5rem 0 0 0}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-padding:2rem;--jkl-modal-header-margin:0 0 1rem;--jkl-modal-actions-margin:2rem 0 0 0}}[data-density=compact],[data-layout-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:1.5rem;--jkl-modal-header-margin:0 0 0.75rem;--jkl-modal-actions-margin:1.5rem 0 0 0;--jkl-modal-min-width:13.75rem}.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:#1b1917cc}.jkl-modal{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem #252a3108;display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto 1.5rem}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font-size:var(--jkl-modal-body-font-size);font-weight:var(--jkl-modal-body-font-weight);line-height:var(--jkl-modal-body-line-height)}.jkl-modal-title{font-size:var(--jkl-modal-title-font-size);font-weight:var(--jkl-modal-title-font-weight);line-height:var(--jkl-modal-title-line-height)}.jkl-modal-actions{display:flex;flex-direction:row;gap:1rem;margin:var(--jkl-modal-actions-margin)}

package/src/components/modal/styles/modal.scss

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-modal-body", "body");
+    @include jkl.declare-font-variables("jkl-modal-title", "heading-3");
+
+    --jkl-modal-padding: #{jkl.$spacing-40};
+    --jkl-modal-min-width: #{jkl.rem(220px)};
+    --jkl-modal-max-width: #{jkl.rem(660px)};
+    --jkl-modal-header-margin: 0 0 #{jkl.$spacing-24};
+    --jkl-modal-actions-margin: #{jkl.$spacing-40} 0 0 0;
+
+    @include jkl.small-device {
+        --jkl-modal-padding: #{jkl.$spacing-32};
+        --jkl-modal-header-margin: 0 0 #{jkl.$spacing-16};
+        --jkl-modal-actions-margin: #{jkl.$spacing-32} 0 0 0;
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-modal-body", "small");
+    @include jkl.declare-font-variables("jkl-modal-title", "heading-4");
+
+    --jkl-modal-padding: #{jkl.$spacing-24};
+    --jkl-modal-header-margin: 0 0 #{jkl.$spacing-12};
+    --jkl-modal-actions-margin: #{jkl.$spacing-24} 0 0 0;
+    --jkl-modal-min-width: #{jkl.rem(220px)};
+}
+
+.jkl-modal-container,
+.jkl-modal-overlay {
+    position: fixed;
+    inset: 0;
+}
+
+.jkl-modal-container {
+    z-index: jkl.$z-index--modal;
+    display: flex;
+
+    &[aria-hidden="true"] {
+        display: none;
+    }
+}
+
+.jkl-modal-overlay {
+    background-color: rgba(27 25 23 / 80%);
+}
+
+.jkl-modal {
+    margin: auto;
+    z-index: jkl.$z-index--modal;
+    position: relative;
+
+    background-color: var(--jkl-color-background-container-high);
+    border-radius: jkl.rem(2px);
+    box-shadow: jkl.$shadow-task-card;
+
+    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;
+
+    @include jkl.forced-colors-mode {
+        border-color: CanvasText;
+    }
+
+    @include jkl.small-device {
+        margin: auto jkl.$spacing-24;
+    }
+}
+
+.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 {
+    @include jkl.use-font-variables("jkl-modal-body");
+}
+
+.jkl-modal-title {
+    @include jkl.use-font-variables("jkl-modal-title");
+}
+
+.jkl-modal-actions {
+    margin: var(--jkl-modal-actions-margin);
+    display: flex;
+    flex-direction: row;
+    gap: jkl.$spacing-16;
+}

package/src/components/radio-button/styles/_index.scss

@@ -0,0 +1 @@
+@forward "radio-button";

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

@@ -0,0 +1,180 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-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-layout-density=comfortable],
+  [data-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: translate3d(0, 0, 0);
+    --jkl-radio-button-dot-margin: 0.625rem 0.5rem 0.625rem 0;
+    --jkl-radio-button-dot-size: 1rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-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: 0.25rem 0;
+  --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+  --jkl-radio-button-dot-margin: 0.4375rem 0.5rem 0.4375rem 0;
+  --jkl-radio-button-dot-size: 0.625rem;
+  --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-u8irt39 {
+  0% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.jkl-radio-button {
+  --ring-color: var(--jkl-color-border-action);
+  --dot-color: transparent;
+  --background-color: transparent;
+  --text-color: var(--jkl-color-text-default);
+  display: flex;
+  min-height: var(--jkl-radio-button-height);
+  color: var(--text-color);
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-radio-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-radio-button__input {
+  position: absolute;
+  opacity: 0;
+  top: -6px;
+}
+.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-u8irt39 150ms 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 {
+  --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: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.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 {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  font-size: var(--jkl-radio-button-label-font-size);
+  line-height: var(--jkl-radio-button-label-line-height);
+  font-weight: var(--jkl-radio-button-label-font-weight);
+}
+.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: 0.9;
+}
+.jkl-radio-button__dot {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  margin: var(--jkl-radio-button-dot-margin);
+  flex-shrink: 0;
+  height: var(--jkl-radio-button-size);
+  width: var(--jkl-radio-button-size);
+  border-radius: 50%;
+  border: 0.0625rem solid var(--ring-color);
+  background-color: var(--background-color);
+  transition-property: background-color, outline;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  /* Inner dot */
+}
+.jkl-radio-button__dot::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  scale: 1;
+  height: var(--jkl-radio-button-dot-size);
+  width: var(--jkl-radio-button-dot-size);
+  border-radius: 50%;
+  background-color: var(--dot-color);
+  transition-property: transform;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+}
+@media screen and (forced-colors: active) {
+  .jkl-radio-button__dot {
+    outline: revert;
+    border: 1px solid ButtonText;
+  }
+}
+.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-top: unset;
+  margin-right: 1.5rem;
+}
+.jkl-radio-button + .jkl-form-support-label {
+  margin-left: calc(var(--jkl-radio-button-size) + 0.5rem);
+  margin-top: -0.375rem;
+  margin-bottom: 0.5rem;
+}

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

@@ -0,0 +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:0.25rem 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-u8irt39{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{opacity:0;position:absolute;top:-6px}.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-u8irt39 .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{--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:2px solid var(--jkl-color-border-action);outline-offset:2px}.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/src/components/radio-button/styles/radio-button.scss

@@ -0,0 +1,201 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_radio-button-dot-padding: jkl.rem(4px);
+$_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
+
+@include jkl.comfortable-density-variables {
+    $_radio-button-height: jkl.rem(48px);
+    $_radio-button-line-height: jkl.rem(32px);
+    $_radio-button-size: jkl.rem(24px);
+
+    --jkl-radio-button-height: #{$_radio-button-height};
+    --jkl-radio-button-line-height: #{$_radio-button-line-height};
+    --jkl-radio-button-size: #{$_radio-button-size};
+    --jkl-radio-button-text-margin: #{(($_radio-button-height - $_radio-button-line-height) * 0.5)} 0;
+    --jkl-radio-button-text-transform: translate3d(0, #{jkl.rem(1px)}, 0);
+    --jkl-radio-button-dot-margin: #{(($_radio-button-height - $_radio-button-size) * 0.5)} #{jkl.$spacing-xs} #{(
+            ($_radio-button-height - $_radio-button-size) * 0.5
+        )} 0;
+    --jkl-radio-button-dot-size: #{$_radio-button-size - (2 * $_radio-button-dot-padding)};
+
+    @include jkl.declare-font-variables("jkl-radio-button-label", "body");
+
+    @include jkl.small-device {
+        $_mobile-radio-button-height: jkl.rem(40px);
+        $_mobile-radio-button-size: jkl.rem(24px);
+        $_mobile-radio-button-line-height: jkl.rem(28px);
+
+        --jkl-radio-button-height: #{$_mobile-radio-button-height};
+        --jkl-radio-button-line-height: #{$_mobile-radio-button-line-height};
+        --jkl-radio-button-size: #{$_mobile-radio-button-size};
+        --jkl-radio-button-text-margin: #{jkl.$spacing-8} 0;
+        --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+        --jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(10px)} 0;
+        --jkl-radio-button-dot-size: #{$_mobile-radio-button-size - (2 * $_radio-button-dot-padding)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    $_compact-radio-button-height: jkl.rem(28px);
+    $_compact-radio-button-size: jkl.rem(18px);
+    $_compact-radio-button-line-height: jkl.rem(24px);
+
+    --jkl-radio-button-height: #{$_compact-radio-button-height};
+    --jkl-radio-button-line-height: #{$_compact-radio-button-line-height};
+    --jkl-radio-button-size: #{$_compact-radio-button-size};
+    --jkl-radio-button-text-margin: #{jkl.$spacing-4} 0;
+    --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+    --jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(7px)} 0;
+    --jkl-radio-button-dot-size: #{$_compact-radio-button-size - (2 * $_radio-button-dot-padding)};
+
+    @include jkl.declare-font-variables("jkl-radio-button-label", "small");
+}
+
+@keyframes #{$_radio-button-dot-animation-name} {
+    0% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.jkl-radio-button {
+    --ring-color: var(--jkl-color-border-action);
+    --dot-color: transparent;
+    --background-color: transparent;
+    --text-color: var(--jkl-color-text-default);
+
+    display: flex;
+    min-height: var(--jkl-radio-button-height);
+    color: var(--text-color);
+    position: relative;
+
+    @include jkl.reset-outline;
+
+    &__input {
+        // hide default radio button
+        position: absolute;
+        opacity: 0;
+        // Position the hidden input so that Cypress can hit it without it being obscured by the visual checkbox
+        top: -6px;
+
+        // Checked state
+        &:checked {
+            + .jkl-radio-button__label > .jkl-radio-button__dot::after {
+                --dot-color: var(--jkl-color-border-action);
+                animation: $_radio-button-dot-animation-name jkl.timing("productive") ease;
+
+                @include jkl.forced-colors-mode {
+                    background-color: ButtonText;
+                }
+            }
+
+            .jkl-radio-button--error & + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-alert-error);
+                --dot-color: var(--jkl-color-text-on-alert);
+            }
+        }
+
+        // Focused state
+        &:focus-visible {
+            + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-input-focus);
+
+                & > .jkl-radio-button__dot {
+                    @include jkl.focus-outline;
+                }
+            }
+
+            .jkl-radio-button--error & + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-alert-error);
+                --dot-color: var(--jkl-color-text-on-alert);
+            }
+        }
+    }
+
+    &__label {
+        cursor: pointer;
+        display: flex;
+        align-items: flex-start;
+
+        @include jkl.use-font-variables("jkl-radio-button-label");
+
+        // Hovered state
+        &:hover > .jkl-radio-button__dot {
+            outline: 1px solid var(--ring-color);
+        }
+
+        // Active state
+        &:active > .jkl-radio-button__dot &::after {
+            scale: 0.9;
+        }
+    }
+
+    &__dot {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+        margin: var(--jkl-radio-button-dot-margin);
+        flex-shrink: 0;
+
+        height: var(--jkl-radio-button-size);
+        width: var(--jkl-radio-button-size);
+        border-radius: 50%;
+        border: jkl.rem(1px) solid var(--ring-color);
+        background-color: var(--background-color);
+
+        transition-property: background-color, outline;
+        @include jkl.motion;
+
+        /* Inner dot */
+        &::after {
+            content: "";
+
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            translate: -50% -50%;
+            scale: 1;
+
+            height: var(--jkl-radio-button-dot-size);
+            width: var(--jkl-radio-button-dot-size);
+            border-radius: 50%;
+            background-color: var(--dot-color);
+
+            transition-property: transform;
+            @include jkl.motion;
+        }
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            border: 1px solid ButtonText;
+        }
+    }
+
+    &__text {
+        display: inline-block;
+        margin: var(--jkl-radio-button-text-margin);
+        transform: var(--jkl-radio-button-text-transform);
+    }
+
+    &--error {
+        --background-color: var(--jkl-color-background-alert-error);
+    }
+
+    &--inline {
+        display: inline-flex;
+        margin-top: unset;
+        margin-right: jkl.$spacing-l;
+    }
+
+    + .jkl-form-support-label {
+        margin-left: calc(var(--jkl-radio-button-size) + #{jkl.$spacing-8});
+        margin-top: jkl.rem(-6px);
+        margin-bottom: jkl.$spacing-8;
+    }
+}

package/src/components/select/styles/_index.scss

@@ -0,0 +1 @@
+@forward "select";