@digdir/designsystemet-css 0.3.1-alpha.0 → 0.3.2

package/react-css-modules.css

@@ -79,7 +79,7 @@
   gap: var(--fds-sizing-1);
   font: var(--fds-typography-paragraph-short-small);
   font-family: inherit;
-  min-height: var(--fds-sizing-10);
+  min-height: var(--fds-sizing-8);
 }
 
 .fds-button-medium-8fa00f0f {
@@ -88,7 +88,7 @@
   gap: var(--fds-sizing-2);
   font: var(--fds-typography-paragraph-short-medium);
   font-family: inherit;
-  min-height: var(--fds-sizing-12);
+  min-height: var(--fds-sizing-10);
 }
 
 .fds-button-large-8fa00f0f {
@@ -97,7 +97,7 @@
   gap: var(--fds-sizing-2);
   font: var(--fds-typography-paragraph-short-large);
   font-family: inherit;
-  min-height: var(--fds-sizing-14);
+  min-height: var(--fds-sizing-12);
 }
 
 .fds-button-fullWidth-8fa00f0f {
@@ -1064,19 +1064,19 @@
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-small-2e95d79c {
   padding: 0 var(--fds-spacing-2);
   padding-right: var(--fds-spacing-8);
-  height: var(--fds-sizing-10);
+  height: var(--fds-sizing-8);
 }
 
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-medium-2e95d79c {
   padding: 0 var(--fds-spacing-3);
   padding-right: var(--fds-spacing-10);
-  height: var(--fds-sizing-12);
+  height: var(--fds-sizing-10);
 }
 
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-large-2e95d79c {
   padding: 0 var(--fds-spacing-4);
   padding-right: var(--fds-spacing-12);
-  height: var(--fds-sizing-14);
+  height: var(--fds-sizing-12);
 }
 
 .fds-nativeselect-formField-2e95d79c {
@@ -1119,46 +1119,6 @@
   align-items: center;
 }
 
-.fds-fieldset-fieldset-2b3c05fc {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-
-.fds-fieldset-withSpacing-2b3c05fc {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fds-spacing-2);
-}
-
-.fds-fieldset-description-2b3c05fc {
-  color: var(--fds-semantic-text-neutral-subtle);
-  font-weight: 400;
-}
-
-.fds-fieldset-legend-2b3c05fc {
-  display: contents;
-}
-
-.fds-fieldset-readonly-2b3c05fc .fds-fieldset-legendContent-2b3c05fc {
-  display: inline-flex;
-}
-
-.fds-fieldset-readonly-2b3c05fc .fds-fieldset-padlock-2b3c05fc {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.fds-fieldset-disabled-2b3c05fc .fds-fieldset-legend-2b3c05fc,
-.fds-fieldset-disabled-2b3c05fc .fds-fieldset-description-2b3c05fc {
-  color: var(--fds-semantic-border-neutral-subtle);
-}
-
-.fds-fieldset-errorWrapper-2b3c05fc {
-  display: contents;
-}
-
 .fds-tag-tag-40d841d9 {
   --fdsc-tag-background: var(--fds-semantic-surface-neutral-subtle);
   --fdsc-tag-text: var(--fds-semantic-text-neutral-default);
@@ -1179,18 +1139,18 @@
 }
 
 .fds-tag-small-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-2);
-  --fdsc-tag-min-height: var(--fds-sizing-7);
+  --fdsc-tag-padding: var(--fds-spacing-1);
+  --fdsc-tag-min-height: var(--fds-sizing-5);
 }
 
 .fds-tag-medium-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-2);
-  --fdsc-tag-min-height: var(--fds-sizing-8);
+  --fdsc-tag-padding: var(--fds-spacing-1);
+  --fdsc-tag-min-height: var(--fds-sizing-6);
 }
 
 .fds-tag-large-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-3);
-  --fdsc-tag-min-height: var(--fds-sizing-9);
+  --fdsc-tag-padding: var(--fds-spacing-2);
+  --fdsc-tag-min-height: var(--fds-sizing-7);
 }
 
 .fds-tag-neutral-40d841d9 {
@@ -1292,7 +1252,7 @@
   background: var(--fdsc-removable-background);
   border: 0;
   padding-right: 0;
-  min-height: var(--fdsc-chip-height);
+  min-height: var(--fdsc-removable-chip-size);
 }
 
 .fds-chip-xMark-4563db0f {
@@ -1302,6 +1262,18 @@
   padding-right: var(--fdsc-removable-chip-xmark-padding_right);
 }
 
+.fds-chip-removable-4563db0f.fds-chip-small-4563db0f {
+  --fdsc-removable-chip-size: var(--fds-sizing-6);
+}
+
+.fds-chip-removable-4563db0f.fds-chip-medium-4563db0f {
+  --fdsc-removable-chip-size: var(--fds-sizing-7);
+}
+
+.fds-chip-removable-4563db0f.fds-chip-large-4563db0f {
+  --fdsc-removable-chip-size: var(--fds-sizing-8);
+}
+
 .fds-chip-xMark-4563db0f .fds-chip-icon-4563db0f {
   height: var(--fdsc-removable-chip-xmark-size);
   width: var(--fdsc-removable-chip-xmark-size);
@@ -1375,20 +1347,20 @@
 }
 
 .fds-chip-small-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-7);
-  --fdsc-chip-padding: var(--fds-spacing-3);
+  --fdsc-chip-height: var(--fds-sizing-6);
+  --fdsc-chip-padding: var(--fds-spacing-2);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-5);
 }
 
 .fds-chip-medium-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-8);
+  --fdsc-chip-height: var(--fds-sizing-7);
   --fdsc-chip-padding: var(--fds-spacing-3);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
 }
 
 .fds-chip-large-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-9);
-  --fdsc-chip-padding: var(--fds-spacing-4);
+  --fdsc-chip-height: var(--fds-sizing-8);
+  --fdsc-chip-padding: var(--fds-spacing-3);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-7);
 }
 
@@ -1432,17 +1404,17 @@
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-small-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-2);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-10);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-8);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-medium-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-4);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-12);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-10);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-large-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-6);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-14);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-12);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-compact-ddc0278f) {
@@ -1501,75 +1473,93 @@
   --fds-checkbox-focus-border-width: 3px;
   --fds-checkbox-background: var(--fds-semantic-background-default);
   --fds-checkbox-border-color: var(--fds-semantic-border-input-default);
-  --fds-checkbox-border__hover: 0 0 0 6px var(--fds-semantic-surface-info-subtle-hover);
+  --fds-checkbox-border__hover: 0 0 0 calc((2.75rem - var(--fds-checkbox-size)) / 2) var(--fds-semantic-surface-info-subtle-hover);
 
-  position: relative;
+  display: grid;
 }
 
-.fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-10);
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--fds-spacing-1);
-  align-items: center;
-  cursor: pointer;
+.fds-checkbox-container-ad9a8b9c:has(.fds-checkbox-label-ad9a8b9c) {
+  grid-template-columns: var(--fds-checkbox-size) auto;
+  gap: var(--fds-spacing-2);
 }
 
 /* Checkbox */
-.fds-checkbox-label-ad9a8b9c::before {
-  content: '';
+.fds-checkbox-input-ad9a8b9c {
+  position: relative;
   width: var(--fds-checkbox-size);
   height: var(--fds-checkbox-size);
+  z-index: 1;
+  appearance: none;
+  margin: 0;
+  align-self: center;
+  outline: none;
+  cursor: pointer;
   box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
   background: var(--fds-checkbox-background);
-  flex-shrink: 0;
-  margin-inline: 6px;
-  margin-block: 6px;
   border-radius: var(--fds-border_radius-medium);
 }
 
-.fds-checkbox-description-ad9a8b9c {
-  padding-left: calc(var(--fds-checkbox-size) + 12px + var(--fds-spacing-1));
-  margin-top: calc(var(--fds-spacing-2) * -1);
-  color: var(--fds-semantic-text-neutral-subtle);
-}
-
-.fds-checkbox-input-ad9a8b9c {
+.fds-checkbox-input-ad9a8b9c::before {
   position: absolute;
+  content: '';
+  display: block;
   width: 2.75rem;
   height: 2.75rem;
-  z-index: 1;
-  opacity: 0;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  cursor: pointer;
+  border-radius: var(--fds-border_radius-medium);
+}
+
+.fds-checkbox-label-ad9a8b9c {
+  min-height: var(--fds-sizing-10);
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-1);
+  align-items: center;
   cursor: pointer;
-  margin: 0;
+}
+
+.fds-checkbox-description-ad9a8b9c {
+  margin-top: calc(var(--fds-spacing-3) * -1);
+  color: var(--fds-semantic-text-neutral-subtle);
+  grid-column: 2;
 }
 
 .fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
 .fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
-.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c::before {
   cursor: not-allowed;
 }
 
 .fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
-.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-label-ad9a8b9c::before,
+.fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
 .fds-checkbox-disabled-ad9a8b9c > .fds-checkbox-description-ad9a8b9c {
   opacity: var(--fds-opacity-disabled);
 }
 
-.fds-checkbox-input-ad9a8b9c:focus-visible + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-label-ad9a8b9c,
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c::before {
+  cursor: default;
+}
+
+.fds-checkbox-input-ad9a8b9c:focus-visible {
+  outline-offset: 0;
   outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
   box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
 }
 
-.fds-checkbox-input-ad9a8b9c:checked + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-input-ad9a8b9c:checked {
   --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
   background: var(--fds-checkbox-border-color);
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
 }
 
-.fds-checkbox-input-ad9a8b9c:indeterminate + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-input-ad9a8b9c:indeterminate {
   --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
   background-color: var(--fds-checkbox-border-color);
@@ -1577,32 +1567,27 @@
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
 }
 
-.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c {
   --fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
   --fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
 }
 
-.fds-checkbox-input-ad9a8b9c:checked:not(:focus-visible) + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-input-ad9a8b9c:checked:not(:focus-visible) {
   box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
 }
 
-.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c,
-.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-label-ad9a8b9c {
-  cursor: default;
-}
-
-.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:checked + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:checked {
   background: var(--fds-checkbox-background);
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='%2368707c'/%3E%3C/svg%3E%0A");
 }
 
-.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:indeterminate + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-readonly-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:indeterminate {
   background: var(--fds-checkbox-background);
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='%2368707c' /%3E%3C/svg%3E%0A");
 }
 
-.fds-checkbox-error-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:not(:disabled, :focus-visible) + .fds-checkbox-label-ad9a8b9c::before {
+.fds-checkbox-error-ad9a8b9c > .fds-checkbox-input-ad9a8b9c:not(:disabled, :focus-visible) {
   --fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
 }
 
@@ -1614,71 +1599,81 @@
     color: var(--fds-semantic-text-action-hover);
   }
 
-  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:not(:checked) + .fds-checkbox-label-ad9a8b9c::before {
+  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:not(:checked) {
     --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
     box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 2px var(--fds-checkbox-border-color);
   }
 
-  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked + .fds-checkbox-label-ad9a8b9c::before {
+  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked {
     --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
     box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 2px var(--fds-checkbox-border-color);
   }
 
-  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked:focus-visible + .fds-checkbox-label-ad9a8b9c::before {
+  .fds-checkbox-container-ad9a8b9c:not(.fds-checkbox-readonly-ad9a8b9c, .fds-checkbox-disabled-ad9a8b9c) > .fds-checkbox-input-ad9a8b9c:hover:checked:focus-visible {
     box-shadow: var(--fds-checkbox-border__hover), inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
   }
 }
 
 /** Sizing */
 
-.fds-checkbox-small-ad9a8b9c,
-.fds-checkbox-small-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-5);
-}
+.fds-checkbox-small-ad9a8b9c {
+  --fds-checkbox-size: 1.5rem;
 
-.fds-checkbox-medium-ad9a8b9c,
-.fds-checkbox-medium-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-6);
+  min-height: var(--fds-sizing-8);
 }
 
-.fds-checkbox-large-ad9a8b9c,
-.fds-checkbox-large-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-7);
+.fds-checkbox-medium-ad9a8b9c {
+  --fds-checkbox-size: 1.75rem;
+
+  min-height: var(--fds-sizing-10);
 }
 
-.fds-checkbox-small-ad9a8b9c {
-  --fds-checkbox-size: var(--fds-sizing-5);
+.fds-checkbox-large-ad9a8b9c {
+  --fds-checkbox-size: 2rem;
 
-  min-width: var(--fds-sizing-5);
+  min-height: var(--fds-sizing-12);
 }
 
-.fds-checkbox-small-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
-  left: -0.25rem;
-  top: -0.25rem;
+.fds-fieldset-fieldset-2b3c05fc {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
 }
 
-.fds-checkbox-medium-ad9a8b9c {
-  --fds-checkbox-size: var(--fds-sizing-6);
+.fds-fieldset-withSpacing-2b3c05fc {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-2);
+}
 
-  min-width: var(--fds-sizing-6);
+.fds-fieldset-description-2b3c05fc {
+  color: var(--fds-semantic-text-neutral-subtle);
+  font-weight: 400;
 }
 
-.fds-checkbox-medium-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
-  left: 0;
-  top: 0;
+.fds-fieldset-legend-2b3c05fc {
+  display: contents;
 }
 
-.fds-checkbox-large-ad9a8b9c {
-  --fds-checkbox-size: var(--fds-sizing-7);
+.fds-fieldset-readonly-2b3c05fc .fds-fieldset-legendContent-2b3c05fc {
+  display: inline-flex;
+}
 
-  min-width: var(--fds-sizing-7);
+.fds-fieldset-readonly-2b3c05fc .fds-fieldset-padlock-2b3c05fc {
+  height: 1.2em;
+  width: 1.2em;
 }
 
-.fds-checkbox-large-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
-  left: 0;
-  top: 0.25rem;
+.fds-fieldset-disabled-2b3c05fc .fds-fieldset-legend-2b3c05fc,
+.fds-fieldset-disabled-2b3c05fc .fds-fieldset-description-2b3c05fc {
+  color: var(--fds-semantic-border-neutral-subtle);
+}
+
+.fds-fieldset-errorWrapper-2b3c05fc {
+  display: contents;
 }
 
 .fds-radio-container-7a9bd584 {
@@ -1686,92 +1681,105 @@
   --fds-radio-focus-border-width: 3px;
   --fds-radio-background: var(--fds-semantic-background-default);
   --fds-radio-border-color: var(--fds-semantic-border-input-default);
-  --fds-radio-border__hover: 0 0 0 6px var(--fds-semantic-surface-info-subtle-hover);
+  --fds-radio-border__hover: 0 0 0 calc((2.75rem - var(--fds-radio-size)) / 2) var(--fds-semantic-surface-info-subtle-hover);
 
-  position: relative;
+  display: grid;
 }
 
-.fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-10);
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--fds-spacing-1);
-  align-items: center;
-  cursor: pointer;
+.fds-radio-container-7a9bd584:has(.fds-radio-label-7a9bd584) {
+  grid-template-columns: var(--fds-radio-size) auto;
+  gap: var(--fds-spacing-2);
 }
 
 /* Radio */
-.fds-radio-label-7a9bd584::before {
-  content: '';
+.fds-radio-input-7a9bd584 {
+  position: relative;
   width: var(--fds-radio-size);
   height: var(--fds-radio-size);
+  z-index: 1;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  align-self: center;
   box-shadow: inset 0 0 0 2px var(--fds-radio-border-color);
   background: var(--fds-radio-background);
   border-radius: 50%;
-  flex-shrink: 0;
-  margin-inline: 6px;
-  margin-block: 6px;
 }
 
-.fds-radio-description-7a9bd584 {
-  padding-left: calc(var(--fds-radio-size) + 12px + var(--fds-spacing-1));
-  margin-top: calc(var(--fds-spacing-2) * -1);
-  color: var(--fds-semantic-text-neutral-subtle);
-}
-
-.fds-radio-input-7a9bd584 {
+.fds-radio-input-7a9bd584::before {
   position: absolute;
+  content: '';
+  display: block;
   width: 2.75rem;
   height: 2.75rem;
-  z-index: 1;
-  opacity: 0;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
   cursor: pointer;
-  margin: 0;
+  border-radius: var(--fds-border_radius-medium);
+}
+
+.fds-radio-label-7a9bd584 {
+  min-height: var(--fds-sizing-10);
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-1);
+  align-items: center;
+  cursor: pointer;
+}
+
+.fds-radio-description-7a9bd584 {
+  margin-top: calc(var(--fds-spacing-3) * -1);
+  color: var(--fds-semantic-text-neutral-subtle);
+  grid-column: 2;
 }
 
 .fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584,
 .fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584,
-.fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584::before {
+.fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584::before {
   cursor: not-allowed;
 }
 
 .fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584,
-.fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584::before,
+.fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584,
 .fds-radio-disabled-7a9bd584 > .fds-radio-description-7a9bd584 {
   opacity: var(--fds-opacity-disabled);
 }
 
-.fds-radio-input-7a9bd584:focus-visible + .fds-radio-label-7a9bd584::before {
+.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584,
+.fds-radio-readonly-7a9bd584 > .fds-radio-label-7a9bd584,
+.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584::before {
+  cursor: default;
+}
+
+.fds-radio-input-7a9bd584:focus-visible {
+  outline-offset: 0;
   outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);
   box-shadow: inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), inset 0 0 0 6px var(--fds-radio-background);
 }
 
-.fds-radio-input-7a9bd584:checked + .fds-radio-label-7a9bd584::before {
+.fds-radio-input-7a9bd584:checked {
   --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
   background: var(--fds-radio-border-color);
 }
 
-.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584 + .fds-radio-label-7a9bd584::before {
+.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584 {
   --fds-radio-border-color: var(--fds-semantic-border-neutral-subtle);
   --fds-radio-background: var(--fds-semantic-surface-neutral-subtle);
 }
 
-.fds-radio-input-7a9bd584:checked:not(:focus-visible) + .fds-radio-label-7a9bd584::before {
+.fds-radio-input-7a9bd584:checked:not(:focus-visible) {
   box-shadow: inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
 }
 
-.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584,
-.fds-radio-readonly-7a9bd584 > .fds-radio-label-7a9bd584 {
-  cursor: default;
-}
-
-.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584:checked + .fds-radio-label-7a9bd584::before {
+.fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584:checked {
   background: var(--fds-semantic-border-neutral-default);
 }
 
-.fds-radio-error-7a9bd584 > .fds-radio-input-7a9bd584:not(:disabled, :focus-visible) + .fds-radio-label-7a9bd584::before {
+.fds-radio-error-7a9bd584 > .fds-radio-input-7a9bd584:not(:disabled, :focus-visible) {
   --fds-radio-border-color: var(--fds-semantic-border-danger-default);
 }
 
@@ -1783,19 +1791,19 @@
     color: var(--fds-semantic-text-action-hover);
   }
 
-  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:not(:checked) + .fds-radio-label-7a9bd584::before {
+  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:not(:checked) {
     --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
     box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color);
   }
 
-  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked + .fds-radio-label-7a9bd584::before {
+  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked {
     --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
     box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
   }
 
-  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked:focus-visible + .fds-radio-label-7a9bd584::before {
+  .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked:focus-visible {
     box-shadow: var(--fds-radio-border__hover), inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
       inset 0 0 0 6px var(--fds-radio-background);
   }
@@ -1803,52 +1811,22 @@
 
 /** Sizing */
 
-.fds-radio-small-7a9bd584,
-.fds-radio-small-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-5);
-}
-
-.fds-radio-medium-7a9bd584,
-.fds-radio-medium-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-6);
-}
-
-.fds-radio-large-7a9bd584,
-.fds-radio-large-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-7);
-}
-
 .fds-radio-small-7a9bd584 {
-  --fds-radio-size: var(--fds-sizing-5);
-
-  min-width: var(--fds-sizing-5);
-}
+  --fds-radio-size: 1.5rem;
 
-.fds-radio-small-7a9bd584 .fds-radio-input-7a9bd584 {
-  left: -0.25rem;
-  top: -0.25rem;
+  min-height: var(--fds-sizing-8);
 }
 
 .fds-radio-medium-7a9bd584 {
-  --fds-radio-size: var(--fds-sizing-6);
-
-  min-width: var(--fds-sizing-6);
-}
+  --fds-radio-size: 1.75rem;
 
-.fds-radio-medium-7a9bd584 .fds-radio-input-7a9bd584 {
-  left: 0;
-  top: 0;
+  min-height: var(--fds-sizing-10);
 }
 
 .fds-radio-large-7a9bd584 {
-  --fds-radio-size: var(--fds-sizing-7);
+  --fds-radio-size: 2rem;
 
-  min-width: var(--fds-sizing-7);
-}
-
-.fds-radio-large-7a9bd584 .fds-radio-input-7a9bd584 {
-  left: 0;
-  top: 0.25rem;
+  min-height: var(--fds-sizing-12);
 }
 
 .fds-group-inline-f6df9230 {
@@ -1961,22 +1939,22 @@
 
 .fds-switch-small-9a6b03bc,
 .fds-switch-small-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-6);
+  min-height: var(--fds-sizing-8);
 }
 
 .fds-switch-medium-9a6b03bc,
 .fds-switch-medium-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-7);
+  min-height: var(--fds-sizing-10);
 }
 
 .fds-switch-large-9a6b03bc,
 .fds-switch-large-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-8);
+  min-height: var(--fds-sizing-12);
 }
 
 .fds-switch-small-9a6b03bc {
-  --fds-switch-height: var(--fds-sizing-6);
-  --fds-switch-width: var(--fds-sizing-11);
+  --fds-switch-height: 1.5rem;
+  --fds-switch-width: 2.5rem;
 }
 
 .fds-switch-small-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -1985,8 +1963,8 @@
 }
 
 .fds-switch-medium-9a6b03bc {
-  --fds-switch-height: var(--fds-sizing-7);
-  --fds-switch-width: var(--fds-sizing-13);
+  --fds-switch-height: 1.75rem;
+  --fds-switch-width: 3rem;
 }
 
 .fds-switch-medium-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -1995,8 +1973,8 @@
 }
 
 .fds-switch-large-9a6b03bc {
-  --fds-switch-height: var(--fds-sizing-8);
-  --fds-switch-width: var(--fds-sizing-15);
+  --fds-switch-height: 2rem;
+  --fds-switch-width: 3.5rem;
 }
 
 .fds-switch-large-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -2126,27 +2104,27 @@
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-small-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: var(--fds-sizing-2) var(--fds-spacing-3);
+  padding: 6.5px var(--fds-spacing-3);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-medium-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: 0.65rem var(--fds-spacing-4);
+  padding: 9px var(--fds-spacing-4);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-large-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: 0.85rem var(--fds-spacing-5);
+  padding: 11px var(--fds-spacing-5);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-small-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-10);
+  height: var(--fds-sizing-8);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-medium-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-12);
+  height: var(--fds-sizing-10);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-large-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-14);
+  height: var(--fds-sizing-12);
 }
 
 .fds-textfield-label-d98267a0 {
@@ -2634,7 +2612,7 @@
   position: absolute;
   height: 100%;
   z-index: 2;
-  left: var(--fds-spacing-4);
+  left: var(--fds-spacing-3);
   transform: scale(1.5);
   pointer-events: none;
 }
@@ -2705,42 +2683,30 @@
   z-index: 2;
 }
 
-.fds-search-small-a6b5fe3c .fds-search-input-a6b5fe3c {
+.fds-search-input-a6b5fe3c.fds-search-small-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-4);
 
-  height: var(--fds-sizing-10);
-  padding: 0 var(--fds-spacing-3);
+  height: var(--fds-sizing-8);
+  padding: 0 var(--fds-spacing-2);
   padding-right: 2.5em;
 }
 
-.fds-search-small-a6b5fe3c .fds-search-icon-a6b5fe3c {
-  left: var(--fds-spacing-3);
-}
-
-.fds-search-medium-a6b5fe3c .fds-search-input-a6b5fe3c {
+.fds-search-input-a6b5fe3c.fds-search-medium-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-6);
 
-  height: var(--fds-sizing-12);
-  padding: 0 var(--fds-spacing-4);
+  height: var(--fds-sizing-10);
+  padding: 0 var(--fds-spacing-3);
   padding-right: 2.2em;
 }
 
-.fds-search-medium-a6b5fe3c .fds-search-icon-a6b5fe3c {
-  left: var(--fds-spacing-4);
-}
-
-.fds-search-large-a6b5fe3c .fds-search-input-a6b5fe3c {
+.fds-search-input-a6b5fe3c.fds-search-large-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-12);
 
-  height: var(--fds-sizing-14);
-  padding: 0 var(--fds-spacing-5);
+  height: var(--fds-sizing-12);
+  padding: 0 var(--fds-spacing-4);
   padding-right: 2em;
 }
 
-.fds-search-large-a6b5fe3c .fds-search-icon-a6b5fe3c {
-  left: var(--fds-spacing-5);
-}
-
 .fds-search-input-a6b5fe3c.fds-search-simple-a6b5fe3c {
   padding-left: 2.4em;
 }
@@ -3236,7 +3202,6 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-small-249a725c {
-  min-height: var(--fds-sizing-10);
   font: var(--fds-typography-paragraph-small);
   font-family: inherit;
   padding: 5px var(--fds-spacing-2);
@@ -3248,7 +3213,6 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-medium-249a725c {
-  min-height: var(--fds-sizing-12);
   font: var(--fds-typography-paragraph-medium);
   font-family: inherit;
   padding: 7px var(--fds-spacing-3);
@@ -3260,7 +3224,6 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-large-249a725c {
-  min-height: var(--fds-sizing-14);
   font: var(--fds-typography-paragraph-large);
   font-family: inherit;
   padding: 7px var(--fds-spacing-4);