@limetech/lime-elements 38.21.2 → 38.21.3

package/dist/collection/components/list/list.css

@@ -3802,20 +3802,15 @@ img {
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
-/**
-* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
-*/
-:host(limel-checkbox) {
-  min-height: var(--limel-checkbox-min-height, 2.5rem);
-}
-
 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }
 
-.checkbox {
+.boolean-input {
+  --limel-boolean-input-box-size: 1.25rem;
+  --limel-boolean-input-gap-size: 0.5rem;
   position: relative;
   isolation: isolate;
   display: flex;
@@ -3824,7 +3819,8 @@ img {
   width: 100%;
 }
 
-input[type=checkbox] {
+.boolean-input input[type=checkbox],
+.boolean-input input[type=radio] {
   position: absolute;
   width: 0;
   height: 0;
@@ -3840,34 +3836,38 @@ input[type=checkbox] {
   appearance: none;
 }
 
-label {
-  min-width: 1.25rem;
-  min-height: 1.25rem;
+label.boolean-input-label {
+  min-width: var(--limel-boolean-input-box-size);
+  min-height: var(--limel-boolean-input-box-size);
   padding-top: 0.125rem;
   cursor: pointer;
   position: relative;
   width: 100%;
   font-size: var(--limel-theme-default-small-font-size);
   color: var(--limel-theme-text-primary-on-background-color);
-  padding-left: 1.75rem;
+  padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
 }
-.disabled:not([readonly]):not([readonly=true]) label {
+
+.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label {
   cursor: not-allowed;
   color: var(--limel-theme-text-disabled-color);
 }
-.required label:after {
+
+.required label.boolean-input-label:after {
   margin-left: 0.0625rem;
   content: "*";
 }
-.invalid:not(.readonly) label {
+
+.invalid:not(.readonly) label.boolean-input-label {
   color: var(--limel-theme-error-text-color);
 }
-:host(limel-checkbox.hide-label) label, .hide-label label {
+
+:host(limel-checkbox.hide-label) label.boolean-input-label, .hide-label label.boolean-input-label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   opacity: 0;
-  width: 1.25rem;
+  width: var(--limel-boolean-input-box-size);
 }
 
 .box {
@@ -3876,29 +3876,34 @@ label {
   transition: border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
   display: inline-block;
   vertical-align: middle;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.5rem;
-  border-radius: 0.25rem;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
+  margin-right: var(--limel-boolean-input-gap-size);
+  border-radius: var(--limel-boolean-input-box-border-radius);
   border: 0.125rem solid;
   border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
   background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
 }
-.checked .box, .checkbox:has(input[type=checkbox]:checked) .box {
+
+.checked .box, .boolean-input:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
   background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
   border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
+
 .disabled .box {
   opacity: 0.4;
 }
-.checkbox:not(.disabled):has(label:hover) .box {
+
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-hovered);
 }
-.checkbox:not(.disabled):has(label:active) .box {
+
+.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-pressed);
 }
+
 .box:before {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   content: "";
@@ -3906,34 +3911,77 @@ label {
   inset: -0.1875rem;
   border-radius: inherit;
 }
-.checkbox:has(input[type=checkbox]:focus-visible) .box:before {
+
+.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
   will-change: box-shadow;
   box-shadow: var(--shadow-depth-8-focused);
 }
+
 .box:after {
-  transition: opacity 0.2s ease, width 0.4s ease;
+  transition: opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
-  height: 0.125rem;
-  width: 0.25rem;
   border-radius: 1rem;
   opacity: 0;
   background-color: rgb(var(--color-white));
 }
+
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+  will-change: opacity, box-shadow, transform, width;
+}
+
+/**
+* :::important
+* The `CheckboxTemplate` can be imported and used in the HTML of
+* other components, to render a non-functional and decorative checkbox in
+* their UI. An example of this is the list component.
+* This means the content of `CheckboxTemplate` will become a part of the
+* consumer's DOM structure.
+*
+* Additionally, the consumer components' also need to import the current `.scss`
+* file into their own styles file, for the checkbox to be rendered correctly!
+* This means, if the styles in this file are not "specific" enough,
+* there is a risk that the consumer component's styles are affected by
+* our styles here.
+*
+* For instance if the consumer has a `<label>` or `<svg>` element,
+* it might unintentionally inherit styles from the checkbox; unless we
+* make the such styles more specific here.
+*
+* Naturally, we cannot mitigate all sorts of potential styling problems.
+* The consumer component should be aware of this issue too.
+* But we can ensure that our styles here both make sense,
+* are readable, and are as specific as possible to avoid unintended side effects.
+* :::
+*/
+/**
+* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
+*/
+:host(limel-checkbox) {
+  min-height: var(--limel-checkbox-min-height, 2.5rem);
+}
+
+.box:after {
+  height: 0.125rem;
+  width: 0.25rem;
+}
 .indeterminate .box:after {
   opacity: 1;
-  width: 0.75rem;
+  width: calc(var(--limel-boolean-input-box-size) - 0.5rem);
 }
 
-svg {
+.checkbox {
+  --limel-boolean-input-box-border-radius: 0.25rem;
+}
+.checkbox svg.check-mark {
   position: absolute;
   z-index: 1;
   inset: 0;
   transform: translate3d(-0.125rem, -0.125rem, 0);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
   padding: 0.25rem;
   color: rgb(var(--color-white));
   opacity: 0;
@@ -3942,15 +3990,15 @@ svg {
   stroke-linecap: round;
   stroke-linejoin: round;
 }
-svg path {
+.checkbox svg.check-mark path {
   stroke-dashoffset: 29.7833;
   stroke-dasharray: 29.7833;
   transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg {
+.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark {
   opacity: 1;
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg path {
+.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path {
   stroke-dashoffset: 0;
 }
 
@@ -3978,445 +4026,249 @@ limel-dynamic-label {
   will-change: grid-template-rows;
 }
 
-.mdc-touch-target-wrapper {
-  display: inline;
-}
-
-.mdc-radio {
-  padding: calc((40px - 20px) / 2);
-}
-
-.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
-  border-color: rgba(0, 0, 0, 0.54);
-}
-
-.mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
-  border-color: #018786;
-  /* @alternate */
-  border-color: var(--mdc-theme-secondary, #018786);
-}
-
-.mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
-  border-color: #018786;
-  /* @alternate */
-  border-color: var(--mdc-theme-secondary, #018786);
-}
-
-.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
-.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
-  border-color: rgba(0, 0, 0, 0.38);
-}
-
-.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
-.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
-  border-color: rgba(0, 0, 0, 0.38);
-}
-
-.mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
-.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
-  border-color: rgba(0, 0, 0, 0.38);
-}
-
-.mdc-radio .mdc-radio__background::before {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-
-.mdc-radio .mdc-radio__background::before {
-  top: calc(-1 * (40px - 20px) / 2);
-  left: calc(-1 * (40px - 20px) / 2);
-  width: 40px;
-  height: 40px;
-}
-
-.mdc-radio .mdc-radio__native-control {
-  top: calc((40px - 40px) / 2);
-  right: calc((40px - 40px) / 2);
-  left: calc((40px - 40px) / 2);
-  width: 40px;
-  height: 40px;
-}
-
-@media screen and (forced-colors: active), (-ms-high-contrast: active) {
-  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
-  .mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
-    border-color: GrayText;
-  }
-  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
-  .mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
-    border-color: GrayText;
-  }
-  .mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
-  .mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
-    border-color: GrayText;
-  }
-}
-.mdc-radio {
-  display: inline-block;
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: content-box;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  /* @alternate */
-  will-change: opacity, transform, border-color, color;
-}
-
-.mdc-radio__background {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-}
-
-.mdc-radio__background::before {
-  position: absolute;
-  transform: scale(0, 0);
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-  transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-
-.mdc-radio__outer-circle {
-  position: absolute;
-  top: 0;
-  left: 0;
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+*,
+*:before,
+*:after {
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
 }
 
-.mdc-radio__inner-circle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
+.boolean-input {
+  --limel-boolean-input-box-size: 1.25rem;
+  --limel-boolean-input-gap-size: 0.5rem;
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  min-height: var(--limel-checkbox-min-height, 2.5rem);
   width: 100%;
-  height: 100%;
-  transform: scale(0, 0);
-  border-width: 10px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
 }
 
-.mdc-radio__native-control {
+.boolean-input input[type=checkbox],
+.boolean-input input[type=radio] {
   position: absolute;
-  margin: 0;
+  width: 0;
+  height: 0;
+  margin: -1px;
   padding: 0;
-  opacity: 0;
-  cursor: inherit;
-  z-index: 1;
-}
-
-.mdc-radio--touch {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  margin-right: 4px;
-  margin-left: 4px;
-}
-
-.mdc-radio--touch .mdc-radio__native-control {
-  top: calc((40px - 48px) / 2);
-  right: calc((40px - 48px) / 2);
-  left: calc((40px - 48px) / 2);
-  width: 48px;
-  height: 48px;
-}
-
-.mdc-radio__native-control:checked + .mdc-radio__background,
-.mdc-radio__native-control:disabled + .mdc-radio__background {
-  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
-.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__outer-circle {
-  transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle,
-.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
-  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
-.mdc-radio--disabled {
-  cursor: default;
-  pointer-events: none;
+label.boolean-input-label {
+  min-width: var(--limel-boolean-input-box-size);
+  min-height: var(--limel-boolean-input-box-size);
+  padding-top: 0.125rem;
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  font-size: var(--limel-theme-default-small-font-size);
+  color: var(--limel-theme-text-primary-on-background-color);
+  padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
 }
 
-.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle {
-  transform: scale(0.5);
-  transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label {
+  cursor: not-allowed;
+  color: var(--limel-theme-text-disabled-color);
 }
 
-.mdc-radio__native-control:disabled + .mdc-radio__background,
-[aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background {
-  cursor: default;
+.required label.boolean-input-label:after {
+  margin-left: 0.0625rem;
+  content: "*";
 }
 
-.mdc-radio__native-control:focus + .mdc-radio__background::before {
-  transform: scale(1);
-  opacity: 0.12;
-  transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+.invalid:not(.readonly) label.boolean-input-label {
+  color: var(--limel-theme-error-text-color);
 }
 
-.mdc-radio {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
+:host(limel-checkbox.hide-label) label.boolean-input-label, .hide-label label.boolean-input-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: 0;
+  width: var(--limel-boolean-input-box-size);
 }
 
-.mdc-radio .mdc-radio__ripple::before,
-.mdc-radio .mdc-radio__ripple::after {
+.box {
   position: absolute;
-  border-radius: 50%;
-  opacity: 0;
   pointer-events: none;
-  content: "";
-}
-
-.mdc-radio .mdc-radio__ripple::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-
-.mdc-radio .mdc-radio__ripple::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
-  top: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-
-.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-
-.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-
-.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-radio .mdc-radio__ripple::before,
-.mdc-radio .mdc-radio__ripple::after {
-  top: calc(50% - 50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
+  transition: border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
+  display: inline-block;
+  vertical-align: middle;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
+  margin-right: var(--limel-boolean-input-gap-size);
+  border-radius: var(--limel-boolean-input-box-border-radius);
+  border: 0.125rem solid;
+  border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
+  background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
 }
 
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before,
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.checked .box, .boolean-input:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.disabled .box {
+  opacity: 0.4;
 }
 
-.mdc-radio .mdc-radio__ripple::before, .mdc-radio .mdc-radio__ripple::after {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786));
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box {
+  will-change: box-shadow;
+  box-shadow: var(--button-shadow-hovered);
 }
 
-.mdc-radio:hover .mdc-radio__ripple::before, .mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
+.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
+  will-change: box-shadow;
+  box-shadow: var(--button-shadow-pressed);
 }
 
-.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple::before, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
+.box:before {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  content: "";
+  position: absolute;
+  inset: -0.1875rem;
+  border-radius: inherit;
 }
 
-.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple::after {
-  transition: opacity 150ms linear;
+.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
+  will-change: box-shadow;
+  box-shadow: var(--shadow-depth-8-focused);
 }
 
-.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
+.box:after {
+  transition: opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  border-radius: 1rem;
+  opacity: 0;
+  background-color: rgb(var(--color-white));
 }
 
-.mdc-radio.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12);
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+  will-change: opacity, box-shadow, transform, width;
 }
 
-.mdc-radio.mdc-ripple-upgraded .mdc-radio__background::before, .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background::before {
-  content: none;
+/**
+* :::important
+* The `RadioButtonTemplate` can be imported and used in the HTML of
+* other components, to render a non-functional and decorative radio button in
+* their UI. An example of this is the list component.
+* This means the content of `RadioButtonTemplate` will become a part of the
+* consumer's DOM structure.
+*
+* Additionally, the consumer components' also need to import the current `.scss`
+* file into their own styles file, for the radio button to be rendered correctly!
+* This means, if the styles in this file are not "specific" enough,
+* there is a risk that the consumer component's styles are affected by
+* our styles here.
+*
+* For instance if the consumer has a `<label>`,
+* it might unintentionally inherit styles from the radio button; unless we
+* make the such styles more specific here.
+*
+* Naturally, we cannot mitigate all sorts of potential styling problems.
+* The consumer component should be aware of this issue too.
+* But we can ensure that our styles here both make sense,
+* are readable, and are as specific as possible to avoid unintended side effects.
+* :::
+*/
+.radio-button {
+  --limel-boolean-input-box-border-radius: var(
+      --limel-boolean-input-box-size
+  );
 }
 
-.mdc-radio__ripple {
-  position: absolute;
-  top: 0;
-  left: 0;
+.box:after {
   width: 100%;
   height: 100%;
-  pointer-events: none;
-}
-
-.mdc-form-field {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-  line-height: 1.25rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-  font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body2-font-weight, 400);
-  letter-spacing: 0.0178571429em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body2-text-transform, inherit);
-  color: rgba(0, 0, 0, 0.87);
-  /* @alternate */
-  color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.mdc-form-field > label {
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: auto;
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 4px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 0;
-  order: 0;
-}
-[dir=rtl] .mdc-form-field > label, .mdc-form-field > label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: auto;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-  /*rtl:end:ignore*/
-}
-
-[dir=rtl] .mdc-form-field > label, .mdc-form-field > label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 4px;
-  /*rtl:end:ignore*/
-}
-
-.mdc-form-field--nowrap > label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.mdc-form-field--align-end > label {
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: auto;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 4px;
-  order: -1;
-}
-[dir=rtl] .mdc-form-field--align-end > label, .mdc-form-field--align-end > label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: auto;
-  /*rtl:end:ignore*/
-}
-
-[dir=rtl] .mdc-form-field--align-end > label, .mdc-form-field--align-end > label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 4px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 0;
-  /*rtl:end:ignore*/
-}
-
-.mdc-form-field--space-between {
-  justify-content: space-between;
-}
-.mdc-form-field--space-between > label {
-  margin: 0;
-}
-[dir=rtl] .mdc-form-field--space-between > label, .mdc-form-field--space-between > label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  margin: 0;
-  /*rtl:end:ignore*/
-}
-
-.mdc-form-field {
-  display: flex;
-}
-.mdc-form-field .mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
-  border-color: #6200ee;
-  /* @alternate */
-  border-color: var(--mdc-theme-primary, #6200ee);
+  border-radius: 50%;
 }
-
-.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
-  border-color: var(--mdc-checkbox-unchecked-color);
+.boolean-input:has(input[type=radio]:checked) .box:after {
+  opacity: 1;
+  transform: scale(0.6);
+  box-shadow: var(--shadow-depth-8);
 }
 
 /**