@entur/form 5.2.3 → 5.3.2

package/dist/styles.css

@@ -2,12 +2,6 @@
   --eds-form: 1;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-textarea.eds-form-control.eds-textarea {
-  min-height: 7.75rem;
-  resize: vertical;
-  line-height: 1.5rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-fieldset {
   margin: 0;
   padding: 0;
@@ -72,8 +66,13 @@ textarea.eds-form-control.eds-textarea {
   position: relative;
   cursor: pointer;
   height: 2rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
   border-color: #54568c;
@@ -153,13 +152,22 @@ textarea.eds-form-control.eds-textarea {
   display: flex;
   align-items: center;
   position: relative;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   cursor: pointer;
   height: 2rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 .eds-checkbox__container--reduced-click-area {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
   height: fit-content;
 }
 .eds-checkbox__container input {
@@ -176,7 +184,8 @@ textarea.eds-form-control.eds-textarea {
 }
 .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
   stroke: #ffffff;
-  animation: stroke ease-in-out 0.2s 0.1s forwards;
+  -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
+          animation: stroke ease-in-out 0.2s 0.1s forwards;
 }
 .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
   opacity: 0.5;
@@ -206,12 +215,22 @@ textarea.eds-form-control.eds-textarea {
   border-color: #8285a8;
 }
 .eds-checkbox__container:focus + .eds-checkbox__icon,
+.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-checkbox__container:focus + .eds-checkbox__icon,
 .eds-checkbox__container :focus-within + .eds-checkbox__icon {
   outline: none;
   box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
   outline-offset: 0.125rem;
 }
 .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
 .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
   box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
 }
@@ -255,245 +274,16 @@ textarea.eds-form-control.eds-textarea {
   stroke-width: 0.375rem;
 }
 
-@keyframes stroke {
+@-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: 0;
   }
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-switch {
-  cursor: pointer;
-  user-select: none;
-  padding: 0.5rem 0;
-  width: fit-content;
-}
-.eds-switch input {
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-}
-.eds-switch--right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.eds-switch--bottom {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.eds-switch__circle {
-  border-radius: 50%;
-  height: 1.25rem;
-  width: 1.25rem;
-  content: "";
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
-  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
-  top: 0.125rem;
-  left: 0.125rem;
-  position: relative;
-}
-.eds-switch__switch--large .eds-switch__circle {
-  height: 1.75rem;
-  width: 1.75rem;
-}
-.eds-switch .eds-switch__switch svg g,
-.eds-switch .eds-switch__switch path {
-  fill: #949494;
-  transition: fill ease-in-out 0.1s;
-}
-.eds-switch__switch {
-  position: relative;
-  background-color: #d1d3d3;
-  content: "";
-  display: block;
-  transition: background-color 0.1s ease-in-out;
-  height: 1.5rem;
-  width: 3rem;
-  border-radius: 1.5rem;
-}
-.eds-switch--right .eds-switch__switch {
-  margin-right: 0.75rem;
-}
-:checked + .eds-switch__switch {
-  background-color: var(--eds-switch-color);
-}
-:checked + .eds-switch__switch .eds-switch__circle {
-  left: 1.625rem;
-}
-:checked + .eds-switch__switch .eds-switch__circle svg g,
-:checked + .eds-switch__switch .eds-switch__circle path {
-  fill: var(--eds-switch-color);
-}
-.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
-.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
-  fill: var(--eds-switch-color);
-}
-.eds-contrast :checked + .eds-switch__switch {
-  background-color: var(--eds-switch-contrast-color);
-}
-:focus + .eds-switch__switch {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
-}
-.eds-contrast :focus + .eds-switch__switch {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-contrast .eds-switch__switch {
-  background-color: #54568c;
-}
-.eds-switch__switch--large {
-  width: 3.75rem;
-  height: 2rem;
-  border-radius: 3.75rem;
-}
-:checked + .eds-switch__switch--large .eds-switch__circle {
-  left: 1.875rem;
-}
-.eds-switch__label--large--right {
-  font-size: 1rem;
-}
-.eds-switch__label--large--bottom {
-  font-size: 0.875rem;
-}
-.eds-switch__label--medium--right {
-  font-size: 0.875rem;
-}
-.eds-switch__label--medium--bottom {
-  font-size: 0.75rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
-  border-color: #181c56;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-}
-.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
-  border-color: #ffffff;
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-radio-panel__wrapper input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
-  border-color: #181c56;
-  background: #f5f5f8;
-}
-.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
-  border-color: #aeb7e2;
-  background: #393d79;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
-  background-color: #181c56;
-  border-color: #181c56;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
-  visibility: visible;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
-  stroke: #5ac39a;
-  animation: stroke ease-in-out 0.2s 0.1s forwards;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
-  opacity: 0.5;
-}
-.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
-  opacity: 0.5;
-}
-.eds-radio-panel__container {
-  background: #ffffff;
-  border: 0.125rem solid #d1d3d3;
-  border-radius: 0.25rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  min-width: 20rem;
-  position: relative;
-  padding: 1rem;
-  user-select: none;
-  width: fit-content;
-}
-.eds-contrast .eds-radio-panel__container {
-  background: #181c56;
-  border-color: #54568c;
-}
-.eds-radio-panel__title-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.eds-radio-panel__label {
-  display: flex;
-  justify-content: center;
-}
-.eds-radio-panel__check {
-  height: 2rem;
-  width: 2rem;
-  margin-left: 1rem;
-  border-radius: 50%;
-  border: 0.125rem solid #e9e9e9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
-}
-.eds-contrast .eds-radio-panel__check {
-  background: #181c56;
-  border-color: #54568c;
-}
-.eds-radio-panel__additional-content {
-  margin-top: 0.25rem;
-  word-wrap: break-word;
-}
-.eds-radio-panel--medium .eds-radio-panel__title {
-  font-size: 1rem;
-  font-weight: 500;
-}
-.eds-radio-panel--medium.eds-radio-panel__container {
-  padding-bottom: 1rem;
-  min-height: 3.75rem;
-}
-.eds-radio-panel--large.eds-radio-panel__container {
-  min-height: 6.5rem;
-}
-.eds-radio-panel--large .eds-radio-panel__title-wrapper {
-  height: 2rem;
-}
-.eds-radio-panel--large .eds-radio-panel__title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.875rem;
-}
-.eds-radio-panel--disabled {
-  background: #f3f3f3;
-  border-color: #f3f3f3;
-  color: #656782;
-}
-.eds-contrast .eds-radio-panel--disabled {
-  background: #181c56;
-  border-style: dashed;
-  border-color: #54568c;
-  color: #babbcf;
 }
 
-.eds-checkbox-icon {
-  width: 1.5em;
-  height: 1.5em;
-}
-.eds-checkbox-icon__path {
-  transform-origin: 50% 50%;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  stroke-width: 0.375rem;
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-input-group {
@@ -513,7 +303,10 @@ textarea.eds-form-control.eds-textarea {
   margin-left: 1rem;
   top: -0.125rem;
   transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 .eds-form-control-wrapper--is-filled .eds-input-group__label {
@@ -577,7 +370,7 @@ textarea.eds-form-control.eds-textarea {
   font-size: 1rem;
 }
 
-.eds-form-control-wrapper:focus-within .eds-input-group__label {
+.eds-form-control-wrapper[focus-within] .eds-input-group__label {
   top: calc(0.5rem - 0.125rem);
   font-size: 0.75rem;
   line-height: 0.75rem;
@@ -585,12 +378,33 @@ textarea.eds-form-control.eds-textarea {
   padding: 0;
   margin-left: 1rem;
 }
-.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
-  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
-  background: var(--textarea-label-background);
-  width: calc( 100% - 1rem - 1rem - 4px );
-}
-.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
+
+.eds-form-control-wrapper:focus-within .eds-input-group__label {
+  top: calc(0.5rem - 0.125rem);
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 10px;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
+  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
+  background: var(--textarea-label-background);
+  width: calc( 100% - 1rem - 1rem - 4px );
+}
+.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
+  box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
+  background: var(--textarea-label-background);
+  width: calc( 100% - 1rem - 1rem - 4px );
+}
+.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
+  top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  padding: 0;
+  margin-left: 1rem;
+}
+.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
   top: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -623,6 +437,9 @@ textarea.eds-form-control.eds-textarea {
   background-color: #ffffff;
   border-color: #54568c;
 }
+.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
+  border-color: #181c56;
+}
 .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
   border-color: #181c56;
 }
@@ -630,14 +447,28 @@ textarea.eds-form-control.eds-textarea {
   border-color: #aeb7e2;
   background: #ebebf1;
 }
+.eds-form-control-wrapper[focus-within] {
+  box-shadow: inset 0 0 0 1px var(--border-color);
+}
 .eds-form-control-wrapper:focus-within {
   box-shadow: inset 0 0 0 1px var(--border-color);
 }
+.eds-contrast .eds-form-control-wrapper[focus-within] {
+  border-color: #181c56;
+  --border-color: #aeb7e2;
+  box-shadow: 0 0 0 0.125rem var(--border-color);
+}
 .eds-contrast .eds-form-control-wrapper:focus-within {
   border-color: #181c56;
   --border-color: #aeb7e2;
   box-shadow: 0 0 0 0.125rem var(--border-color);
 }
+.eds-form-control-wrapper ::-moz-placeholder {
+  color: #656782;
+}
+.eds-form-control-wrapper :-ms-input-placeholder {
+  color: #656782;
+}
 .eds-form-control-wrapper ::placeholder {
   color: #656782;
 }
@@ -697,6 +528,9 @@ textarea.eds-form-control.eds-textarea {
 .eds-form-control-wrapper--success:hover {
   border-color: #5ac39a;
 }
+.eds-form-control-wrapper--success[focus-within] {
+  border-color: #1a8e60;
+}
 .eds-form-control-wrapper--success:focus-within {
   border-color: #1a8e60;
 }
@@ -707,6 +541,10 @@ textarea.eds-form-control.eds-textarea {
 .eds-contrast .eds-form-control-wrapper--success:hover {
   border-color: #1a8e60;
 }
+.eds-contrast .eds-form-control-wrapper--success[focus-within] {
+  --border-color: #5ac39a;
+  border-color: #181c56;
+}
 .eds-contrast .eds-form-control-wrapper--success:focus-within {
   --border-color: #5ac39a;
   border-color: #181c56;
@@ -718,6 +556,9 @@ textarea.eds-form-control.eds-textarea {
 .eds-form-control-wrapper--error:hover {
   border-color: #ff9494;
 }
+.eds-form-control-wrapper--error[focus-within] {
+  border-color: #d31b1b;
+}
 .eds-form-control-wrapper--error:focus-within {
   border-color: #d31b1b;
 }
@@ -728,6 +569,10 @@ textarea.eds-form-control.eds-textarea {
 .eds-contrast .eds-form-control-wrapper--error:hover {
   border-color: #d31b1b;
 }
+.eds-contrast .eds-form-control-wrapper--error[focus-within] {
+  border-color: #181c56;
+  --border-color: #ff9494;
+}
 .eds-contrast .eds-form-control-wrapper--error:focus-within {
   border-color: #181c56;
   --border-color: #ff9494;
@@ -736,12 +581,22 @@ textarea.eds-form-control.eds-textarea {
   background-color: #181c56;
   color: #ffffff;
 }
+.eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
+  color: #aeb7e2;
+}
+.eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
+  color: #aeb7e2;
+}
 .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
   color: #aeb7e2;
 }
 .eds-contrast .eds-form-control-wrapper--dark:hover {
   border-color: #aeb7e2;
 }
+.eds-contrast .eds-form-control-wrapper--dark[focus-within] {
+  background-color: #292b6a;
+  border-color: #aeb7e2;
+}
 .eds-contrast .eds-form-control-wrapper--dark:focus-within {
   background-color: #292b6a;
   border-color: #aeb7e2;
@@ -756,7 +611,9 @@ textarea.eds-form-control.eds-textarea {
 }
 
 .eds-form-control {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background-color: transparent;
   border: 0;
   color: inherit;
@@ -767,6 +624,16 @@ textarea.eds-form-control.eds-textarea {
   padding: 20px 1rem 0.25rem;
   width: 100%;
 }
+.eds-form-control::-moz-placeholder {
+  opacity: 0;
+  -moz-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+}
+.eds-form-control:-ms-input-placeholder {
+  opacity: 0;
+  -ms-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+}
 .eds-form-control::placeholder {
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
@@ -774,6 +641,12 @@ textarea.eds-form-control.eds-textarea {
 .eds-form-control:focus {
   outline: none;
 }
+.eds-form-control:focus::-moz-placeholder {
+  opacity: 1;
+}
+.eds-form-control:focus:-ms-input-placeholder {
+  opacity: 1;
+}
 .eds-form-control:focus::placeholder {
   opacity: 1;
 }
@@ -795,6 +668,154 @@ textarea.eds-form-control.eds-textarea {
   margin-left: 0;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
+  border-color: #181c56;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+}
+.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
+  border-color: #181c56;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+}
+.eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-radio-panel__wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+  border-color: #181c56;
+  background: #f5f5f8;
+}
+.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
+  border-color: #aeb7e2;
+  background: #393d79;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
+  background-color: #181c56;
+  border-color: #181c56;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
+  visibility: visible;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
+  stroke: #5ac39a;
+  -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
+          animation: stroke ease-in-out 0.2s 0.1s forwards;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
+  opacity: 0.5;
+}
+.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
+  opacity: 0.5;
+}
+.eds-radio-panel__container {
+  background: #ffffff;
+  border: 0.125rem solid #d1d3d3;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: 20rem;
+  position: relative;
+  padding: 1rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-contrast .eds-radio-panel__container {
+  background: #181c56;
+  border-color: #54568c;
+}
+.eds-radio-panel__title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.eds-radio-panel__label {
+  display: flex;
+  justify-content: center;
+}
+.eds-radio-panel__check {
+  height: 2rem;
+  width: 2rem;
+  margin-left: 1rem;
+  border-radius: 50%;
+  border: 0.125rem solid #e9e9e9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
+}
+.eds-contrast .eds-radio-panel__check {
+  background: #181c56;
+  border-color: #54568c;
+}
+.eds-radio-panel__additional-content {
+  margin-top: 0.25rem;
+  word-wrap: break-word;
+}
+.eds-radio-panel--medium .eds-radio-panel__title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.eds-radio-panel--medium.eds-radio-panel__container {
+  padding-bottom: 1rem;
+  min-height: 3.75rem;
+}
+.eds-radio-panel--large.eds-radio-panel__container {
+  min-height: 6.5rem;
+}
+.eds-radio-panel--large .eds-radio-panel__title-wrapper {
+  height: 2rem;
+}
+.eds-radio-panel--large .eds-radio-panel__title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.875rem;
+}
+.eds-radio-panel--disabled {
+  background: #f3f3f3;
+  border-color: #f3f3f3;
+  color: #656782;
+}
+.eds-contrast .eds-radio-panel--disabled {
+  background: #181c56;
+  border-style: dashed;
+  border-color: #54568c;
+  color: #babbcf;
+}
+
+.eds-checkbox-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+.eds-checkbox-icon__path {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  stroke-width: 0.375rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+textarea.eds-form-control.eds-textarea {
+  min-height: 7.75rem;
+  resize: vertical;
+  line-height: 1.5rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-textfield__clear-button {
   background: none;
   border: none;
@@ -831,6 +852,118 @@ textarea.eds-form-control.eds-textarea {
   background-color: #8285a8;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-switch {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 0.5rem 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-switch input {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.eds-switch--right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.eds-switch--bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.eds-switch__circle {
+  border-radius: 50%;
+  height: 1.25rem;
+  width: 1.25rem;
+  content: "";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+  background-color: #ffffff;
+  top: 0.125rem;
+  left: 0.125rem;
+  position: relative;
+}
+.eds-switch__switch--large .eds-switch__circle {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+.eds-switch .eds-switch__switch svg g,
+.eds-switch .eds-switch__switch path {
+  fill: #949494;
+  transition: fill ease-in-out 0.1s;
+}
+.eds-switch__switch {
+  position: relative;
+  background-color: #d1d3d3;
+  content: "";
+  display: block;
+  transition: background-color 0.1s ease-in-out;
+  height: 1.5rem;
+  width: 3rem;
+  border-radius: 1.5rem;
+}
+.eds-switch--right .eds-switch__switch {
+  margin-right: 0.75rem;
+}
+:checked + .eds-switch__switch {
+  background-color: var(--eds-switch-color);
+}
+:checked + .eds-switch__switch .eds-switch__circle {
+  left: 1.625rem;
+}
+:checked + .eds-switch__switch .eds-switch__circle svg g,
+:checked + .eds-switch__switch .eds-switch__circle path {
+  fill: var(--eds-switch-color);
+}
+.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
+.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
+  fill: var(--eds-switch-color);
+}
+.eds-contrast :checked + .eds-switch__switch {
+  background-color: var(--eds-switch-contrast-color);
+}
+:focus + .eds-switch__switch {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast :focus + .eds-switch__switch {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-contrast .eds-switch__switch {
+  background-color: #54568c;
+}
+.eds-switch__switch--large {
+  width: 3.75rem;
+  height: 2rem;
+  border-radius: 3.75rem;
+}
+:checked + .eds-switch__switch--large .eds-switch__circle {
+  left: 1.875rem;
+}
+.eds-switch__label--large--right {
+  font-size: 1rem;
+}
+.eds-switch__label--large--bottom {
+  font-size: 0.875rem;
+}
+.eds-switch__label--medium--right {
+  font-size: 0.875rem;
+}
+.eds-switch__label--medium--bottom {
+  font-size: 0.75rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-segmented-control {
   margin-top: 0.25rem;
   display: flex;
@@ -858,7 +991,10 @@ textarea.eds-form-control.eds-textarea {
   padding: calc(0.25rem/ 2) 0.75rem;
   height: 1.5rem;
   text-align: center;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .eds-contrast .eds-segmented-choice .eds-base-segmented {
   border-color: #393d79;
@@ -876,7 +1012,9 @@ textarea.eds-form-control.eds-textarea {
   --background-color: #54568c;
 }
 .eds-segmented-choice input {
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   position: absolute;
   opacity: 0;
   height: 0;