@entur/form 5.4.14 → 5.4.16

package/dist/styles.css

@@ -2,204 +2,6 @@
   --eds-form: 1;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.eds-fieldset .eds-legend {
-  margin: 0 0 0.5rem;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-feedback-text {
-  display: flex;
-  align-items: center;
-  margin-top: 0.25rem;
-}
-.eds-feedback-text--info {
-  padding-left: calc(1rem + 0.125rem);
-}
-.eds-feedback-text__text {
-  color: #181c56;
-}
-.eds-contrast .eds-feedback-text__text {
-  color: #ffffff;
-}
-
-.eds-feedback-text__icon {
-  font-size: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  padding-right: 0.5rem;
-  position: relative;
-  top: -0.1rem;
-}
-.eds-feedback-text__icon--success {
-  color: #1a8e60;
-}
-.eds-contrast .eds-feedback-text__icon--success {
-  color: #5ac39a;
-}
-.eds-feedback-text__icon--error {
-  color: #d31b1b;
-}
-.eds-contrast .eds-feedback-text__icon--error {
-  color: #ff9494;
-}
-.eds-feedback-text__icon--info {
-  color: #0082b9;
-}
-.eds-contrast .eds-feedback-text__icon--info {
-  color: #64b3e7;
-}
-.eds-feedback-text__icon--warning {
-  color: #ffca28;
-}
-.eds-feedback-text__icon--warning circle {
-  fill: #181c56;
-}
-.eds-contrast .eds-feedback-text__icon--warning {
-  color: #ffe082;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-checkbox__container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  cursor: pointer;
-  height: 2rem;
-  -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 {
-  position: absolute;
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
-  background-color: #181c56;
-}
-.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
-  visibility: visible;
-}
-.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;
-  -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;
-}
-.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
-  opacity: 0.5;
-}
-.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
-  background: #54568c;
-}
-.eds-checkbox__container:hover input + .eds-checkbox__icon {
-  border-color: #54568c;
-  background: #f3f3f3;
-}
-.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
-  border-color: #656782;
-  background: #292b6a;
-}
-.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
-.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
-  border-color: #54568c;
-  background-color: #54568c;
-}
-.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
-.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
-  background: #8285a8;
-  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;
-}
-.eds-checkbox--disabled {
-  pointer-events: none;
-}
-.eds-checkbox--disabled .eds-checkbox__label {
-  opacity: 0.5;
-}
-.eds-checkbox--disabled .eds-checkbox__icon {
-  opacity: 0.5;
-}
-.eds-checkbox__icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  margin-right: 1rem;
-  height: 1.25rem;
-  width: 1.25rem;
-  border: 0.125rem solid #181c56;
-  border-radius: 0.0625rem;
-  background-color: transparent;
-  color: #ffffff;
-}
-.eds-checkbox__icon--reduced-click-area {
-  margin-right: 0;
-}
-.eds-contrast .eds-checkbox__icon {
-  border-color: #54568c;
-}
-.eds-checkbox__icon .eds-checkbox-icon {
-  height: 1rem;
-  width: 1rem;
-  visibility: hidden;
-}
-.eds-checkbox__icon .eds-checkbox-icon__path {
-  transform-origin: 50% 50%;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  stroke-width: 0.375rem;
-}
-
-@-webkit-keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-form-control-wrapper {
   --border-color: #181c56;
   --border-color-hover: #aeb7e2;
@@ -254,9 +56,6 @@
 .eds-form-control-wrapper ::-moz-placeholder {
   color: #656782;
 }
-.eds-form-control-wrapper :-ms-input-placeholder {
-  color: #656782;
-}
 .eds-form-control-wrapper ::placeholder {
   color: #656782;
 }
@@ -372,9 +171,6 @@
 .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;
 }
@@ -417,11 +213,6 @@
   -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;
@@ -432,9 +223,6 @@
 .eds-form-control:focus::-moz-placeholder {
   opacity: 1;
 }
-.eds-form-control:focus:-ms-input-placeholder {
-  opacity: 1;
-}
 .eds-form-control:focus::placeholder {
   opacity: 1;
 }
@@ -456,10 +244,64 @@
   margin-left: 0;
 }/* 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;
+.eds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.eds-fieldset .eds-legend {
+  margin: 0 0 0.5rem;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-feedback-text {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+}
+.eds-feedback-text--info {
+  padding-left: calc(1rem + 0.125rem);
+}
+.eds-feedback-text__text {
+  color: #181c56;
+}
+.eds-contrast .eds-feedback-text__text {
+  color: #ffffff;
+}
+
+.eds-feedback-text__icon {
+  font-size: 1.5rem;
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+  padding-right: 0.5rem;
+  position: relative;
+  top: -0.1rem;
+}
+.eds-feedback-text__icon--success {
+  color: #1a8e60;
+}
+.eds-contrast .eds-feedback-text__icon--success {
+  color: #5ac39a;
+}
+.eds-feedback-text__icon--error {
+  color: #d31b1b;
+}
+.eds-contrast .eds-feedback-text__icon--error {
+  color: #ff9494;
+}
+.eds-feedback-text__icon--info {
+  color: #0082b9;
+}
+.eds-contrast .eds-feedback-text__icon--info {
+  color: #64b3e7;
+}
+.eds-feedback-text__icon--warning {
+  color: #ffca28;
+}
+.eds-feedback-text__icon--warning circle {
+  fill: #181c56;
+}
+.eds-contrast .eds-feedback-text__icon--warning {
+  color: #ffe082;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-form-component--radio__container {
@@ -469,12 +311,10 @@ textarea.eds-form-control.eds-textarea {
   position: relative;
   cursor: pointer;
   height: 2rem;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   -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 {
@@ -551,116 +391,132 @@ textarea.eds-form-control.eds-textarea {
   background-color: #aeb7e2;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-switch {
+.eds-checkbox__container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   cursor: pointer;
+  height: 2rem;
   -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-checkbox__container--reduced-click-area {
+  height: -moz-fit-content;
+  height: fit-content;
 }
-.eds-switch--right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.eds-checkbox__container input {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
 }
-.eds-switch--bottom {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
+  background-color: #181c56;
 }
-.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-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
+  visibility: visible;
 }
-.eds-switch__switch--large .eds-switch__circle {
-  height: 1.75rem;
-  width: 1.75rem;
+.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;
 }
-.eds-switch .eds-switch__switch svg g,
-.eds-switch .eds-switch__switch path {
-  fill: #949494;
-  transition: fill ease-in-out 0.1s;
+.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
+  opacity: 0.5;
 }
-.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-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
+  opacity: 0.5;
 }
-.eds-switch--right .eds-switch__switch {
-  margin-right: 0.75rem;
+.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
+  background: #54568c;
 }
-:checked + .eds-switch__switch {
-  background-color: var(--eds-switch-color);
+.eds-checkbox__container:hover input + .eds-checkbox__icon {
+  border-color: #54568c;
+  background: #f3f3f3;
 }
-:checked + .eds-switch__switch .eds-switch__circle {
-  left: 1.625rem;
+.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
+  border-color: #656782;
+  background: #292b6a;
 }
-:checked + .eds-switch__switch .eds-switch__circle svg g,
-:checked + .eds-switch__switch .eds-switch__circle path {
-  fill: var(--eds-switch-color);
+.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
+.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
+  border-color: #54568c;
+  background-color: #54568c;
 }
-.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 .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
+  background: #8285a8;
+  border-color: #8285a8;
 }
-.eds-contrast :checked + .eds-switch__switch {
-  background-color: var(--eds-switch-contrast-color);
+.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;
 }
-:focus + .eds-switch__switch {
+.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 :focus + .eds-switch__switch {
+.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-switch__switch {
-  background-color: #54568c;
+.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-switch__switch--large {
-  width: 3.75rem;
-  height: 2rem;
-  border-radius: 3.75rem;
+.eds-checkbox--disabled {
+  pointer-events: none;
 }
-:checked + .eds-switch__switch--large .eds-switch__circle {
-  left: 1.875rem;
+.eds-checkbox--disabled .eds-checkbox__label {
+  opacity: 0.5;
 }
-.eds-switch__label--large--right {
-  font-size: 1rem;
+.eds-checkbox--disabled .eds-checkbox__icon {
+  opacity: 0.5;
 }
-.eds-switch__label--large--bottom {
-  font-size: 0.875rem;
+.eds-checkbox__icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-right: 1rem;
+  height: 1.25rem;
+  width: 1.25rem;
+  border: 0.125rem solid #181c56;
+  border-radius: 0.0625rem;
+  background-color: transparent;
+  color: #ffffff;
 }
-.eds-switch__label--medium--right {
-  font-size: 0.875rem;
+.eds-checkbox__icon--reduced-click-area {
+  margin-right: 0;
 }
-.eds-switch__label--medium--bottom {
-  font-size: 0.75rem;
+.eds-contrast .eds-checkbox__icon {
+  border-color: #54568c;
+}
+.eds-checkbox__icon .eds-checkbox-icon {
+  height: 1rem;
+  width: 1rem;
+  visibility: hidden;
+}
+.eds-checkbox__icon .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-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
@@ -703,8 +559,7 @@ textarea.eds-form-control.eds-textarea {
 }
 .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;
+  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;
@@ -724,9 +579,7 @@ textarea.eds-form-control.eds-textarea {
   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;
 }
@@ -824,7 +677,6 @@ textarea.eds-form-control.eds-textarea {
   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;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   pointer-events: none;
 }
@@ -931,6 +783,12 @@ textarea.eds-form-control.eds-textarea {
   margin-left: 1rem;
 }/* 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;
@@ -967,6 +825,126 @@ 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;
+          user-select: none;
+  padding: 0.5rem 0;
+  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;
+  background: #d1d4e3;
+  border-radius: 0.5rem;
+}
+.eds-contrast .eds-segmented-control {
+  background: #393d79;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-segmented-choice {
   display: block;
   flex: 1 1 0px;
@@ -975,27 +953,23 @@ textarea.eds-form-control.eds-textarea {
   --background-color: transparent;
   background-color: var(--background-color);
   border-radius: 0.25rem;
-  border: 0.0625rem solid transparent;
-  margin: 0.25rem;
   color: inherit;
   cursor: pointer;
   font-size: 0.875rem;
+  height: 1.5rem;
   line-height: 1.25rem;
+  margin: 0.25rem;
+  outline-color: transparent;
   padding: calc(0.25rem/ 2) 0.75rem;
-  height: 1.5rem;
   text-align: center;
   -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;
-}
 .eds-segmented-choice .eds-base-segmented--large {
   font-size: 1rem;
-  line-height: 1.5rem;
   height: 2.5rem;
+  line-height: 1.5rem;
   padding: 0.5rem 0.75rem;
 }
 .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
@@ -1004,6 +978,12 @@ textarea.eds-form-control.eds-textarea {
 .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
   --background-color: #54568c;
 }
+.eds-segmented-choice:hover input:checked + .eds-base-segmented {
+  --background-color: #ebebf1;
+}
+.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
+  --background-color: #d1d4e3;
+}
 .eds-segmented-choice input {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1018,30 +998,19 @@ textarea.eds-form-control.eds-textarea {
   box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
 }
 .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
+  --background-color: #ffffff;
   box-shadow: 0 0.0625rem 0.1875rem #393d79;
   color: #181c56;
-  --background-color: #ffffff;
-}
-.eds-segmented-choice input:focus + .eds-base-segmented {
-  outline: none;
-  border: 0.0625rem solid #181c56;
 }
-.eds-contrast .eds-segmented-choice input:focus + .eds-base-segmented {
-  border: 0.0625rem solid #aeb7e2;
+.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
+  box-shadow: inset 0 0 0 0.0625rem #d1d4e3, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
 }
-.eds-segmented-choice:hover input:checked + .eds-base-segmented {
-  --background-color: #ebebf1;
+.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
+  box-shadow: inset 0 0 0 0.0625rem #393d79, inset 0 0 0 calc(0.125rem + 0.0625rem) #ffffff;
 }
-.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
-  --background-color: #d1d4e3;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-segmented-control {
-  margin-top: 0.25rem;
-  display: flex;
-  background: #d1d4e3;
-  border-radius: 0.25rem;
+.eds-segmented-choice input:focus:checked + .eds-base-segmented {
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
 }
-.eds-contrast .eds-segmented-control {
-  background: #393d79;
+.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
+  box-shadow: 0 0.0625rem 0.1875rem #393d79, inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
 }