@norges-domstoler/dds-components 21.20.0 → 22.1.0

package/dist/index.css

@@ -1,5 +1,7 @@
-@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core.css";
-@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core-light.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core-dark.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public-light.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public-dark.css";
 
 /* src/styles/dds-tokens.css */
 
@@ -159,6 +161,28 @@
   --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
   --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
 }
+.typographyStyles_tertiary-medium {
+  --dds-color-text-body: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-body-subtle: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-link: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-te--dds-color-text-on-tertiary-medium );
+  --dds-color-text-label: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-helper: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-placeholder: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-link: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-default-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-subtle-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-medium-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-text-action-resting-inversable: var( --dds-color-text-on-tertiary-medium );
+  --dds-color-text-action-hover-inversable: var( --dds-color-text-on-tertiary-medium );
+  --dds-color-text-requiredfield-inversable: var( --dds-color-text-on-tertiary-medium );
+  color: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-default-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-subtle-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-medium-inversable: var(--dds-color-text-on-tertiary-medium);
+  --dds-color-icon-action-resting-inversable: var( --dds-color-icon-on-te--dds-color-text-on-tertiary-medium );
+  --dds-color-icon-action-hover-inversable: var( --dds-color-icon-on-te--dds-color-text-on-tertiary-medium );
+}
 :where(.typographyStyles_a),
 :where(.typographyStyles_a--nested__parent .typographyStyles_a--nested__child) {
   font: inherit;
@@ -182,9 +206,9 @@
 :where(.typographyStyles_a--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-medium-paragraph-spacing);
 }
-:where(.typographyStyles_a--external) > svg,
+:where(.typographyStyles_a--external) > .typographyStyles_svg,
 .typographyStyles_a__icon {
   display: inline;
   margin: 0.1em 0.1em -0.1em;
@@ -194,49 +218,93 @@
 .typographyStyles_a--visited:visited {
   color: var(--dds-color-text-link-visited);
 }
-:where(.typographyStyles_body-xsmall) {
+:where(.typographyStyles_body-short-xsmall) {
+  margin: 0;
+  font: var(--dds-font-body-short-xsmall);
+  letter-spacing: var(--dds-font-body-short-xsmall-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-short-xsmall--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-short-xsmall-paragraph-spacing);
+}
+:where(.typographyStyles_body-short-small) {
+  margin: 0;
+  font: var(--dds-font-body-short-small);
+  letter-spacing: var(--dds-font-body-short-small-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-short-small--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-short-small-paragraph-spacing);
+}
+:where(.typographyStyles_body-short-medium) {
+  margin: 0;
+  font: var(--dds-font-body-short-medium);
+  letter-spacing: var(--dds-font-body-short-medium-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-short-medium--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-short-medium-paragraph-spacing);
+}
+:where(.typographyStyles_body-short-large) {
+  margin: 0;
+  font: var(--dds-font-body-short-large);
+  letter-spacing: var(--dds-font-body-short-large-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-short-large--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-short-large-paragraph-spacing);
+}
+:where(.typographyStyles_body-long-xsmall) {
   margin: 0;
-  font: var(--dds-font-body-xsmall);
-  letter-spacing: var(--dds-font-body-xsmall-letter-spacing);
+  font: var(--dds-font-body-long-xsmall);
+  letter-spacing: var(--dds-font-body-long-xsmall-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-xsmall--margins) {
+:where(.typographyStyles_body-long-xsmall--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-xsmall-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-xsmall-paragraph-spacing);
 }
-:where(.typographyStyles_body-small) {
+:where(.typographyStyles_body-long-small) {
   margin: 0;
-  font: var(--dds-font-body-small);
-  letter-spacing: var(--dds-font-body-small-letter-spacing);
+  font: var(--dds-font-body-long-small);
+  letter-spacing: var(--dds-font-body-long-small-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-small--margins) {
+:where(.typographyStyles_body-long-small--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-small-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-small-paragraph-spacing);
 }
-:where(.typographyStyles_body-medium) {
+:where(.typographyStyles_body-long-medium) {
   margin: 0;
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  font: var(--dds-font-body-long-medium);
+  letter-spacing: var(--dds-font-body-long-medium-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-medium--margins) {
+:where(.typographyStyles_body-long-medium--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-medium-paragraph-spacing);
 }
-:where(.typographyStyles_body-large) {
+:where(.typographyStyles_body-long-large) {
   margin: 0;
-  font: var(--dds-font-body-large);
-  letter-spacing: var(--dds-font-body-large-letter-spacing);
+  font: var(--dds-font-body-long-large);
+  letter-spacing: var(--dds-font-body-long-large-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-large--margins) {
+:where(.typographyStyles_body-long-large--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-large-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-large-paragraph-spacing);
 }
 :where(.typographyStyles_lead-medium) {
   margin: 0;
@@ -361,6 +429,9 @@
 :where(.typographyStyles_underline) {
   text-decoration: underline;
 }
+.typographyStyles_text-color--inherit {
+  color: inherit;
+}
 .typographyStyles_text-color--default {
   color: var(--dds-color-text-default-inversable);
 }
@@ -394,6 +465,48 @@
 .typographyStyles_text-color--on-notification {
   color: var(--dds-color-text-on-notification);
 }
+.typographyStyles_text-color--on-primary-default {
+  color: var(--dds-color-text-on-primary-default);
+}
+.typographyStyles_text-color--on-primary-medium {
+  color: var(--dds-color-text-on-primary-medium);
+}
+.typographyStyles_text-color--on-primary-subtle {
+  color: var(--dds-color-text-on-primary-subtle);
+}
+.typographyStyles_text-color--on-primary-strong {
+  color: var(--dds-color-text-on-primary-strong);
+}
+.typographyStyles_text-color--on-secondary-default {
+  color: var(--dds-color-text-on-secondary-default);
+}
+.typographyStyles_text-color--on-secondary-medium {
+  color: var(--dds-color-text-on-secondary-medium);
+}
+.typographyStyles_text-color--on-secondary-subtle {
+  color: var(--dds-color-text-on-secondary-subtle);
+}
+.typographyStyles_text-color--on-secondary-strong {
+  color: var(--dds-color-text-on-secondary-strong);
+}
+.typographyStyles_text-color--on-tertiary-default {
+  color: var(--dds-color-text-on-tertiary-default);
+}
+.typographyStyles_text-color--on-tertiary-medium {
+  color: var(--dds-color-text-on-tertiary-medium);
+}
+.typographyStyles_text-color--on-tertiary-subtle {
+  color: var(--dds-color-text-on-tertiary-subtle);
+}
+.typographyStyles_text-color--on-tertiary-strong {
+  color: var(--dds-color-text-on-tertiary-strong);
+}
+.typographyStyles_text-color--on-data-default {
+  color: var(--dds-color-text-on-data-default);
+}
+.typographyStyles_text-color--on-data-subtle {
+  color: var(--dds-color-text-on-data-subtle);
+}
 .typographyStyles_text-color--on-inverse {
   color: var(--dds-color-text-on-inverse);
 }
@@ -575,43 +688,38 @@
   color: var(--dds-color-text-requiredfield);
 }
 
-/* src/components/helpers/Chevron/Chevron.module.css */
-.Chevron_svg {
-  display: inline-block;
-  flex-shrink: 0;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  --dds-chevron-transition: transform 0.2s linear;
-}
-.Chevron_group {
-  transition: var(--dds-chevron-transition);
-}
-.Chevron_group--up {
-  transform: translateY(3px);
-}
-.Chevron_group--down {
-  transform: translateY(0);
-}
-.Chevron_left {
-  transition: var(--dds-chevron-transition);
-  transform-origin: 1px 1px;
-}
-.Chevron_left--up {
-  transform: rotate(-90deg) translateY(0);
-}
-.Chevron_left--down {
-  transform: rotate(0) translateY(0);
-}
-.Chevron_right {
-  transition: var(--dds-chevron-transition);
-  transform-origin: 7px 1px;
+/* src/components/helpers/Dropdown/DropdownItem.module.css */
+.DropdownItem_item {
+  box-sizing: border-box;
+  background-color: inherit;
+  text-decoration: none;
+  &.DropdownItem_default {
+    color: var(--dds-color-text-default);
+  }
+  &.DropdownItem_danger {
+    color: var(--dds-color-text-danger);
+  }
 }
-.Chevron_right--up {
-  transform: rotate(90deg) translateY(0);
+.DropdownItem_item--interactive {
+  text-align: left;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  border: none;
+  cursor: pointer;
+  outline: inherit;
+  width: 100%;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 0.2s;
+  }
+  &:hover,
+  &:active {
+    background-color: var(--dds-color-surface-hover-default);
+  }
 }
-.Chevron_right--down {
-  transform: rotate(0) translateY(0);
+.DropdownItem_item--loading {
+  cursor: not-allowed;
+  position: relative;
 }
 
 /* src/components/layout/common/layout.module.css */
@@ -1440,17 +1548,14 @@
   border-radius: var(--dds-border-radius-surface);
   margin: 0;
 }
-:where(.Paper_shadow--1) {
-  box-shadow: var(--dds-shadow-1);
+:where(.Paper_shadow--small) {
+  box-shadow: var(--dds-shadow-small);
 }
-:where(.Paper_shadow--2) {
-  box-shadow: var(--dds-shadow-2);
+:where(.Paper_shadow--medium) {
+  box-shadow: var(--dds-shadow-medium);
 }
-:where(.Paper_shadow--3) {
-  box-shadow: var(--dds-shadow-3);
-}
-:where(.Paper_shadow--4) {
-  box-shadow: var(--dds-shadow-4);
+:where(.Paper_shadow--large) {
+  box-shadow: var(--dds-shadow-large);
 }
 :where(.Paper_border-radius--button) {
   border-radius: var(--dds-border-radius-button);
@@ -1471,6 +1576,115 @@
   border-radius: 0;
 }
 
+/* src/components/Spinner/Spinner.module.css */
+.Spinner_svg {
+  display: block;
+}
+.Spinner_jordskifterett,
+.Spinner_lagmannsrett,
+.Spinner_tingrett {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation-duration: 3.4s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+.Spinner_jordskifterett {
+  animation-name: Spinner_jordskifterett;
+}
+.Spinner_tingrett {
+  animation-name: Spinner_tingrett;
+}
+.Spinner_lagmannsrett {
+  animation-name: Spinner_lagmannsrett;
+}
+@keyframes Spinner_jordskifterett {
+  0% {
+    transform: scale(0.01);
+  }
+  16.66% {
+    transform: scale(1);
+  }
+  33.33% {
+    transform: scale(0.1);
+  }
+  50% {
+    transform: scale(0.01);
+  }
+  66.66% {
+    transform: scale(0.01);
+  }
+  83.33% {
+    transform: scale(0.01);
+  }
+  100% {
+    transform: scale(0.01);
+  }
+}
+@keyframes Spinner_tingrett {
+  0% {
+    transform: scale(0.01);
+  }
+  16.66% {
+    transform: scale(0.01);
+  }
+  33.33% {
+    transform: scale(0.01);
+  }
+  50% {
+    transform: scale(1);
+  }
+  66.66% {
+    transform: scale(0.1);
+  }
+  83.33% {
+    transform: scale(0.01);
+  }
+  100% {
+    transform: scale(0.01);
+  }
+}
+@keyframes Spinner_lagmannsrett {
+  0% {
+    transform: scale(0.01);
+  }
+  16.66% {
+    transform: scale(0.01);
+  }
+  33.33% {
+    transform: scale(0.01);
+  }
+  50% {
+    transform: scale(0.01);
+  }
+  66.66% {
+    transform: scale(0.01);
+  }
+  83.33% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.1);
+  }
+}
+
+/* src/components/helpers/styling/focus.module.css */
+.focus_focused,
+.focus_focusable:focus-visible,
+.focus_focusable-focus:focus,
+.focus_focusable-within:focus-within,
+.focus_has-focusable-input:has(input:focus-visible),
+.focus_focusable-sibling:focus-visible + .focus_focus-styled-sibling {
+  outline: var(--dds-focus-outline);
+  outline-offset: var(--dds-focus-outline-offset);
+  box-shadow: var(--dds-focus-box-shadow);
+}
+.focus_focusable--inset:focus-visible {
+  outline: var(--dds-focus-outline);
+  outline-offset: var(--dds-focus-outline-inset);
+  box-shadow: var(--dds-focus-box-shadow);
+}
+
 /* src/components/Icon/Icon.module.css */
 .Icon_svg {
   display: inline-block;
@@ -1478,6 +1692,40 @@
   flex-shrink: 0;
 }
 
+/* src/components/Icon/icons/animated/AnimatedChevronUpDown/AnimatedChevronUpDown.module.css */
+.AnimatedChevronUpDown_svg {
+  @media (prefers-reduced-motion: no-preference) {
+    --dds-chevron-transition: transform 0.2s linear;
+  }
+}
+.AnimatedChevronUpDown_group {
+  transition: var(--dds-chevron-transition);
+}
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_group {
+  transform: translateY(-3px);
+}
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_group {
+  transform: translateY(3px);
+}
+.AnimatedChevronUpDown_left,
+.AnimatedChevronUpDown_right {
+  transition: var(--dds-chevron-transition);
+  stroke-linecap: round;
+  transform-origin: center;
+}
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_left {
+  transform: rotate(-45deg);
+}
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_left {
+  transform: rotate(45deg);
+}
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_right {
+  transform: rotate(45deg);
+}
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_right {
+  transform: rotate(-45deg);
+}
+
 /* src/components/ThemeProvider/ThemeProvider.module.css */
 .ThemeProvider_global-variables {
   --dds-color-text-body: var(--dds-color-text-default);
@@ -1506,7 +1754,6 @@
   --dds-focus-transition: outline-offset 0.2s;
   --dds-input-default-width: 320px;
   --dds-input-default-width-xsmall: 210px;
-  --dds-selection-control-height: 18px;
   --dds-spacing-xs-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-sm-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-md-icon-text-gap: var(--dds-spacing-x0-5);
@@ -1514,8 +1761,8 @@
   --dds-transition-duration-surface-move: 0.5s;
 }
 .ThemeProvider_global-styles {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  font: var(--dds-font-body-long-medium);
+  letter-spacing: var(--dds-font-body-long-medium-letter-spacing);
   color: var(--dds-color-text-default);
 }
 
@@ -1530,14 +1777,20 @@
   @media (prefers-reduced-motion: no-preference) {
     transition: background-color 0.2s, var(--dds-focus-transition);
   }
+  color: inherit;
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-text-action-hover);
+    .Accordion_chevron {
+      color: var(--dds-color-text-action-hover);
+    }
   }
 }
 .Accordion_body {
   height: var(--dds-card-accordion-body-height);
 }
+.Accordion_chevron {
+  margin-inline-end: var(--dds-spacing-x0-5);
+}
 
 /* src/components/helpers/AccordionBase/AccordionBase.module.css */
 :where(.AccordionBase_header-button) {
@@ -1550,19 +1803,10 @@
   width: 100%;
   border-radius: inherit;
 }
-.AccordionBase_header-container {
-  display: flex;
-  align-items: center;
-}
 .AccordionBase_header__content {
   text-align: left;
-}
-.AccordionBase_header__chevron {
   display: flex;
   align-items: center;
-  justify-content: center;
-  height: var(--dds-icon-size-medium);
-  width: var(--dds-icon-size-medium);
 }
 .AccordionBase_body {
   overflow: hidden;
@@ -1576,23 +1820,6 @@
   display: none;
 }
 
-/* src/components/helpers/styling/focus.module.css */
-.focus_focused,
-.focus_focusable:focus-visible,
-.focus_focusable-focus:focus,
-.focus_focusable-within:focus-within,
-.focus_has-focusable-input:has(input:focus-visible),
-.focus_focusable-sibling:focus-visible + .focus_focus-styled-sibling {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focusable--inset:focus-visible {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-inset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-
 /* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
 .TextOverflowEllipsis_wrapper {
   max-width: 100%;
@@ -1688,9 +1915,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-25);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--small {
   &.Button_just-text {
@@ -1709,9 +1933,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-5);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--medium {
   &.Button_just-text {
@@ -1730,9 +1951,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-75);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--large {
   &.Button_just-text {
@@ -1751,9 +1969,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x1);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_spinner-wrapper--absolute {
   position: absolute;
@@ -1804,147 +2019,179 @@
   }
 }
 
-/* src/components/Spinner/Spinner.module.css */
-.Spinner_svg {
-  display: block;
+/* src/components/OverflowMenu/OverflowMenu.module.css */
+.OverflowMenu_container {
+  box-sizing: border-box;
+  z-index: var(--dds-zindex-overflowmenu);
 }
-.Spinner_jordskifterett,
-.Spinner_lagmannsrett,
-.Spinner_tingrett {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation-duration: 3.4s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-in-out;
+.OverflowMenu_list {
+  display: flex;
+  flex-direction: column;
 }
-.Spinner_jordskifterett {
-  animation-name: Spinner_jordskifterett;
-}
-.Spinner_tingrett {
-  animation-name: Spinner_tingrett;
+
+/* src/components/Toggle/Toggle.module.css */
+:where(.Toggle_label) {
+  display: flex;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: var(--dds-spacing-x0-25);
+  --dds-toggle-medium-thumb-spacing-inline: var(--dds-spacing-x0-125);
+  --dds-toggle-large-thumb-spacing-inline: var(--dds-spacing-x0-25);
 }
-.Spinner_lagmannsrett {
-  animation-name: Spinner_lagmannsrett;
+.Toggle_track {
+  position: relative;
+  background-color: var(--dds-color-surface-medium);
+  border-radius: var(--dds-border-radius-rounded);
+  border: 1px solid var(--dds-color-border-default);
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      border 0.2s,
+      var(--dds-focus-transition);
+  }
 }
-@keyframes Spinner_jordskifterett {
-  0% {
-    transform: scale(0.01);
+.Toggle_thumb {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dds-spacing-x0-125);
+  border-radius: var(--dds-border-radius-rounded);
+  background-color: var(--dds-color-surface-field-default);
+  border: 1px solid var(--dds-color-border-default);
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      transform 0.2s,
+      left 0.2s,
+      border 0.2s,
+      width 0.2s;
   }
-  16.66% {
-    transform: scale(1);
+}
+.Toggle_thumb .Toggle_checkmark {
+  opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.2s;
   }
-  33.33% {
-    transform: scale(0.1);
+}
+.Toggle_labeltext--readonly {
+  display: flex;
+  .Toggle_icon--read-only {
+    align-self: center;
+    flex-shrink: 0;
+    margin-inline-end: var(--dds-spacing-x0-125);
   }
-  50% {
-    transform: scale(0.01);
+}
+.Toggle_medium {
+  .Toggle_track {
+    height: var(--dds-spacing-x1-5);
+    width: 2.8125rem;
   }
-  66.66% {
-    transform: scale(0.01);
+  .Toggle_thumb {
+    left: var(--dds-toggle-medium-thumb-spacing-inline);
+    top: 1px;
+    height: 1.25rem;
+    width: 1.25rem;
   }
-  83.33% {
-    transform: scale(0.01);
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    left: calc(100% - var(--dds-toggle-medium-thumb-spacing-inline));
+    transform: translateX(-100%);
   }
-  100% {
-    transform: scale(0.01);
+  input:enabled:active:enabled:not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
+    width: 1.5rem;
   }
 }
-@keyframes Spinner_tingrett {
-  0% {
-    transform: scale(0.01);
-  }
-  16.66% {
-    transform: scale(0.01);
-  }
-  33.33% {
-    transform: scale(0.01);
-  }
-  50% {
-    transform: scale(1);
+.Toggle_large {
+  .Toggle_track {
+    height: 2.125rem;
+    width: 3.25rem;
   }
-  66.66% {
-    transform: scale(0.1);
+  .Toggle_thumb {
+    left: var(--dds-toggle-large-thumb-spacing-inline);
+    top: var(--dds-spacing-x0-125);
+    height: 1.75rem;
+    width: 1.75rem;
   }
-  83.33% {
-    transform: scale(0.01);
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    left: calc(100% - var(--dds-toggle-large-thumb-spacing-inline));
+    transform: translateX(-100%);
   }
-  100% {
-    transform: scale(0.01);
+  input:enabled:active:not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
+    width: var(--dds-spacing-x2);
   }
 }
-@keyframes Spinner_lagmannsrett {
-  0% {
-    transform: scale(0.01);
-  }
-  16.66% {
-    transform: scale(0.01);
+.Toggle_label,
+.Toggle_label--is-loading {
+  input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-selected);
+    border-color: var(--dds-color-border-action-default);
+    & > .Toggle_thumb {
+      border-color: var(--dds-color-border-action-default);
+      .Toggle_checkmark {
+        color: var(--dds-color-icon-action-resting);
+        opacity: 1;
+      }
+    }
   }
-  33.33% {
-    transform: scale(0.01);
+}
+.Toggle_label {
+  cursor: pointer;
+  &:hover input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-hover);
+    border-color: var(--dds-color-border-action-hover);
+    .Toggle_thumb {
+      border-color: var(--dds-color-border-action-hover);
+    }
   }
-  50% {
-    transform: scale(0.01);
+  &:hover input:enabled:not([aria-readonly=true]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-hover-default);
+    border-color: var(--dds-color-border-action-hover);
+    .Toggle_thumb {
+      border-color: var(--dds-color-border-action-hover);
+      .Toggle_checkmark {
+        color: var(--dds-color-icon-action-hover);
+      }
+    }
   }
-  66.66% {
-    transform: scale(0.01);
+}
+.Toggle_label--disabled {
+  cursor: not-allowed;
+  color: var(--dds-color-text-subtle);
+  input:disabled ~ .Toggle_track {
+    background-color: var(--dds-color-surface-field-disabled);
   }
-  83.33% {
-    transform: scale(1);
+  input:checked:disabled ~ .Toggle_track {
+    background-color: var(--dds-color-surface-action-selected-disabled);
+    border-color: var(--dds-color-surface-action-selected-disabled);
   }
-  100% {
-    transform: scale(0.1);
+  input:checked:disabled ~ .Toggle_track > .Toggle_thumb {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    .Toggle_checkmark {
+      color: var(--dds-color-icon-subtle);
+      opacity: 1;
+    }
   }
 }
-
-/* src/components/OverflowMenu/OverflowMenu.module.css */
-.OverflowMenu_container {
-  box-sizing: border-box;
-  z-index: var(--dds-zindex-overflowmenu);
-}
-.OverflowMenu_list {
-  display: flex;
-  flex-direction: column;
-}
-.OverflowMenu_list__item {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  background-color: var(--dds-color-surface-default);
-  text-decoration: none;
-  padding: var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-x0-25);
-  &.OverflowMenu_default {
-    color: var(--dds-color-text-default);
-  }
-  &.OverflowMenu_danger {
-    color: var(--dds-color-text-danger);
+.Toggle_label--read-only {
+  cursor: default;
+  color: var(--dds-color-text-medium);
+  input ~ .Toggle_track {
+    background-color: var(--dds-color-surface-default);
   }
-}
-.OverflowMenu_list__item--link {
-  text-align: left;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  border: none;
-  cursor: pointer;
-  outline: inherit;
-  width: 100%;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.2s;
+  input:checked ~ .Toggle_track {
+    background-color: var(--dds-color-surface-inverse-default);
+    border-color: var(--dds-color-surface-inverse-default);
   }
-  &:hover,
-  &:active {
-    background-color: var(--dds-color-surface-hover-default);
+  input:checked ~ .Toggle_track > .Toggle_thumb {
+    border-color: var(--dds-color-surface-inverse-default);
+    .Toggle_checkmark {
+      color: var(--dds-color-icon-medium);
+      opacity: 1;
+    }
   }
 }
-.OverflowMenu_icon {
-  display: flex;
-  align-items: center;
-  font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-}
-.OverflowMenu_button-loading {
+.Toggle_label--is-loading {
   cursor: not-allowed;
-  position: relative;
 }
 
 /* src/components/Divider/Divider.module.css */
@@ -2018,6 +2265,7 @@
 .Card_container--filled {
   background-color: var(--dds-color-brand-primary-subtle);
   border-color: var(--dds-color-brand-primary-subtle);
+  color: var(--dds-color-text-on-primary-subtle);
 }
 .Card_container--border {
   background-color: var(--dds-color-surface-default);
@@ -2052,6 +2300,9 @@
     border-color: var(--dds-color-border-danger);
     box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
   }
+  &:has(input:disabled) {
+    color: var(--dds-color-text-subtle);
+  }
   &:has(input:disabled),
   &:has(input[aria-readonly=true]) {
     box-shadow: none;
@@ -2086,20 +2337,18 @@
 }
 .CardExpandable_header-container {
   padding: var(--dds-card-accordion-header-container-padding);
-  justify-content: space-between;
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s;
   }
 }
+.CardExpandable_header__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .CardExpandable_header-container__chevron {
   margin-left: var(--dds-spacing-x0-5);
 }
-.CardExpandable_body {
-  height: var(--dds-card-accordion-body-height);
-}
-.CardExpandable_body__content {
-  padding: var(--dds-card-accordion-body-content-padding);
-}
 
 /* src/components/SelectionControl/SelectionControl.module.css */
 .SelectionControl_container {
@@ -2116,7 +2365,7 @@
 }
 .SelectionControl_group--column {
   flex-direction: column;
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-x0-75);
 }
 .SelectionControl_label {
   cursor: pointer;
@@ -2167,10 +2416,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   .SelectionControl_selection-control:after {
     border: solid var(--dds-color-icon-on-action);
     border-width: 0 1px 1px 0;
-    left: 6px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
+    left: 35%;
+    top: 10%;
+    width: 30%;
+    height: 60%;
     transform: rotate(45deg);
   }
   input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
@@ -2186,8 +2435,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   .SelectionControl_selection-control:after {
     border-radius: var(--dds-border-radius-rounded);
     background-color: var(--dds-color-icon-on-action);
-    height: 8px;
-    width: 8px;
+    height: 45%;
+    width: 45%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -2228,8 +2477,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-field-default);
   border-radius: var(--dds-border-radius-input);
-  height: var(--dds-selection-control-height);
-  width: var(--dds-selection-control-height);
+  height: var(--dds-size-icon-component);
+  width: var(--dds-size-icon-component);
   &:after {
     content: "";
     position: absolute;
@@ -2249,26 +2498,36 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-radius: var(--dds-border-radius-rounded);
 }
 
-/* src/components/InputMessage/InputMessage.module.css */
-.InputMessage_container {
-  word-break: break-word;
-}
-.InputMessage_icon {
-  margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
-}
-
 /* src/components/Chip/Chip.module.css */
 .Chip_container {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  gap: var(--dds-spacing-x0-25);
-  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
   border: 1px solid var(--dds-color-border-subtle);
   border-radius: var(--dds-border-radius-chip);
   background-color: var(--dds-color-surface-subtle);
 }
 
+/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
+.InlineIconButton_button {
+  display: inline-flex;
+  border-radius: var(--dds-border-radius-button);
+  color: var(--dds-color-icon-default);
+  &:hover:not(:disabled) {
+    background-color: var(--dds-color-surface-hover-default);
+    color: var(--dds-color-icon-action-hover);
+  }
+  &:not(:focus-visible) {
+    outline: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      var(--dds-focus-transition);
+  }
+}
+
 /* src/components/Contrast/Contrast.module.css */
 :where(.Contrast_container) {
   background-color: var(--dds-color-surface-inverse-default);
@@ -2276,11 +2535,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/CookieBanner/CookieBanner.module.css */
 .CookieBanner_checkbox-label {
-  padding: 0 0 0 calc(var(--dds-selection-control-height) + var(--dds-spacing-x0-5));
+  padding: 0 0 0 calc(var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
   align-items: flex-start;
-  & > span {
-    top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
-  }
 }
 
 /* src/components/date-inputs/common/DateInput.module.css */
@@ -2302,6 +2558,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .DateInput_date-segment-container {
   display: flex;
   flex-direction: row;
+  font-family: var(--dds-font-family-monospace);
 }
 .DateInput_segment {
   padding: 0 0.05rem;
@@ -2321,7 +2578,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  font-family: var(--dds-font-family-monospace);
   .DateInput_segment:focus & {
     color: var(--dds-color-text-on-action);
   }
@@ -2346,8 +2602,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   color: var(--dds-color-icon-medium);
 }
 .DateInput_popover-button {
-  padding: 1px;
-  margin-inline-start: -2px;
+  padding: 3px;
+  margin-left: -3px;
 }
 .DateInput_popover {
   z-index: var(--dds-zindex-popover);
@@ -2374,6 +2630,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: 40px;
   height: 40px;
 }
+.DateInput_calendar__th {
+  font-weight: normal;
+}
 .DateInput_calendar__week-number {
   display: flex;
   align-items: center;
@@ -2419,29 +2678,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-decoration: underline line-through;
 }
 
-/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
-.InlineIconButton_button {
-  display: inline-flex;
-  border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-icon-default);
-  &:hover:not(:disabled) {
-    background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-icon-action-hover);
-  }
-  &:not(:focus-visible) {
-    outline: none;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color 0.2s,
-      color 0.2s,
-      var(--dds-focus-transition);
-  }
-}
-
 /* src/components/helpers/Input/Input.module.css */
 .Input_container {
   position: relative;
@@ -2547,34 +2783,46 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding: var(--dds-spacing-x0-75);
 }
 :where(.Input_input--small) {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5);
 }
 :where(.Input_input--xsmall) {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+  padding: var(--dds-spacing-x0-25);
 }
 .Input_input-with-icon--large {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-lg-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-icon--medium {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-icon--small {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-icon--xsmall {
-  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
 .Input_input-with-el-right--large {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--medium {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--small {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--xsmall {
-  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+}
+.Input_el-right--large {
+  right: var(--dds-spacing-x0-75);
+}
+.Input_el-right--medium {
+  right: var(--dds-spacing-x0-75);
+}
+.Input_el-right--small {
+  right: var(--dds-spacing-x0-5);
+}
+.Input_el-right--xsmall {
+  right: var(--dds-spacing-x0-25);
 }
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
@@ -2593,10 +2841,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   left: var(--dds-spacing-x0-75);
 }
 :where(.Input_input-group__absolute-el--small) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-spacing-x0-5);
 }
 :where(.Input_input-group__absolute-el--xsmall) {
-  left: var(--dds-spacing-x0-5);
+  left: var(--dds-spacing-x0-25);
 }
 
 /* src/components/DescriptionList/DescriptionList.module.css */
@@ -2678,24 +2926,18 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .DetailList_list--small {
-  font: var(--dds-font-body-small);
-  letter-spacing: var(--dds-font-body-small-letter-spacing);
   dt,
   dd {
     padding: var(--dds-spacing-x0-5);
   }
 }
 .DetailList_list--medium {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   dt,
   dd {
     padding: var(--dds-spacing-x0-75);
   }
 }
 .DetailList_list--large {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   dt,
   dd {
     padding-block: var(--dds-spacing-x1-5);
@@ -2758,7 +3000,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Drawer_drawer-header {
   padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-drawer-content-container-padding));
-  background-color: var(--dds-color-surface-default);
   z-index: 1;
 }
 .Drawer_button--close {
@@ -2798,12 +3039,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .FavStar_container--medium {
-  width: var(--dds-icon-size-medium);
-  height: var(--dds-icon-size-medium);
+  width: var(--dds-size-icon-medium);
+  height: var(--dds-size-icon-medium);
 }
 .FavStar_container--large {
-  width: var(--dds-icon-size-large);
-  height: var(--dds-icon-size-large);
+  width: var(--dds-size-icon-large);
+  height: var(--dds-size-icon-large);
 }
 .FavStar_icon {
   color: currentColor;
@@ -2854,12 +3095,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Feedback_button--horizontal {
-  width: var(--dds-icon-size-medium);
-  height: var(--dds-icon-size-medium);
+  width: var(--dds-size-icon-medium);
+  height: var(--dds-size-icon-medium);
 }
 .Feedback_button--vertical {
-  width: var(--dds-icon-size-large);
-  height: var(--dds-icon-size-large);
+  width: var(--dds-size-icon-large);
+  height: var(--dds-size-icon-large);
 }
 
 /* src/components/TextArea/TextArea.module.css */
@@ -2874,25 +3115,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 :where(.CharCounter_container) {
   margin-left: auto;
 }
-
-/* src/components/Tooltip/Tooltip.module.css */
-.Tooltip_container {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.Tooltip_svg-arrow__border {
-  fill: var(--dds-color-border-subtle);
-}
-.Tooltip_svg-arrow__background {
-  fill: var(--dds-color-surface-default);
-}
+
+/* src/components/Tooltip/Tooltip.module.css */
 .Tooltip_paper {
-  width: -moz-fit-content;
-  width: fit-content;
-  position: absolute;
   z-index: var(--dds-zindex-tooltip);
-  text-align: center;
-  padding: var(--dds-spacing-x0-75);
 }
 
 /* src/components/Fieldset/Fieldset.module.css */
@@ -3099,14 +3325,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .InlineEdit_edit-icon-textarea {
   position: absolute;
-  top: calc(((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2) + var(--dds-spacing-x0-25));
+  top: var(--dds-spacing-x0-25);
 }
 .InlineEdit_chevron {
   right: var(--dds-spacing-x0-25);
   pointer-events: none;
 }
 .InlineEdit_clear-button {
-  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small));
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-small));
 }
 
 /* src/components/InternalHeader/InternalHeader.module.css */
@@ -3306,7 +3532,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   overflow: auto;
 }
 .Modal_header-container {
-  background-color: var(--dds-color-surface-default);
   padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-modal-content-padding));
   z-index: 1;
 }
@@ -3337,10 +3562,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   visibility: hidden;
 }
 .Pagination_indicators {
-  display: grid;
   grid-auto-flow: column;
-  align-items: center;
-  gap: var(--dds-spacing-x0-75);
 }
 .Pagination_truncation-icon {
   color: var(--dds-color-icon-medium);
@@ -3361,15 +3583,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-sizing: border-box;
   max-width: 100%;
 }
-.Select_icon--medium {
-  left: var(--dds-spacing-x0-75);
-}
-.Select_icon--small {
-  left: var(--dds-spacing-x0-75);
-}
-.Select_icon--xsmall {
-  left: var(--dds-spacing-x0-5);
-}
 .Select_control {
   &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
   &:focus-within .Select_dropdown-indicator {
@@ -3389,6 +3602,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   -moz-appearance: none;
   appearance: none;
   text-overflow: ellipsis;
+  font: inherit;
   width: 100%;
   &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
     border-color: var(--dds-color-border-action-hover);
@@ -3430,14 +3644,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     color: var(--dds-color-icon-subtle);
   }
 }
-.NativeSelect_select--medium {
-  padding-right: var(--dds-spacing-x2);
+.NativeSelect_select--xsmall {
+  padding-right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
 }
 .NativeSelect_select--small {
-  padding-right: var(--dds-spacing-x2);
+  padding-right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
 }
-.NativeSelect_select--xsmall {
-  padding-right: var(--dds-spacing-x1-5);
+.NativeSelect_select--medium {
+  padding-right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
 }
 .NativeSelect_select--multiple {
   padding-right: 0;
@@ -3445,22 +3659,27 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     background-color: var(--dds-color-surface-field-disabled);
   }
 }
+.NativeSelect_select--with-clear-button-medium {
+  padding-right: calc(var(--dds-spacing-x0-75) + 2 * var(--dds-size-icon-component));
+}
 .NativeSelect_select--with-clear-button-small {
-  padding-right: var(--dds-spacing-x3);
+  padding-right: calc(var(--dds-spacing-x0-5) + 2 * var(--dds-size-icon-component));
 }
-.NativeSelect_select--with-clear-button-medium {
-  padding-right: var(--dds-spacing-x4);
+.NativeSelect_select--with-clear-button-xsmall {
+  padding-right: calc(var(--dds-spacing-x0-25) + 2 * var(--dds-size-icon-component));
 }
 .NativeSelect_icon {
-  right: var(--dds-spacing-x0-5);
   align-self: center;
   pointer-events: none;
 }
+.NativeSelect_clear-button--xsmall {
+  right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
+}
 .NativeSelect_clear-button--small {
-  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small));
+  right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
 }
 .NativeSelect_clear-button--medium {
-  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium));
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
 }
 
 /* src/components/PhoneInput/PhoneInput.module.css */
@@ -3702,6 +3921,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   &[type=search]::-webkit-search-results-decoration {
     -webkit-appearance: none;
   }
+  font: inherit;
 }
 .Search_clear-button {
   right: var(--dds-spacing-x1);
@@ -3726,14 +3946,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/SkipToContent/SkipToContent.module.css */
 .SkipToContent_wrapper {
-  padding: var(--dds-spacing-x0-25);
   box-sizing: border-box;
-  position: absolute;
-  text-align: center;
-  overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  width: 1px;
   white-space: nowrap;
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
@@ -3803,8 +4017,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Table_table--small {
-  font: var(--dds-font-body-small);
-  letter-spacing: var(--dds-font-body-small-letter-spacing);
   td,
   th {
     padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
@@ -3824,8 +4036,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Table_table--medium {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   th {
     font: var(--dds-font-heading-small);
   }
@@ -3835,8 +4045,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Table_table--large {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   th {
     font: var(--dds-font-heading-small);
   }
@@ -3878,6 +4086,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Table_cell--head {
   background-color: var(--dds-color-brand-primary-subtle);
+  color: var(--dds-color-text-on-primary-subtle);
 }
 .Table_cell--left {
   text-align: left;
@@ -3900,19 +4109,19 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   user-select: text;
   display: flex;
   align-items: center;
+  color: inherit;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
   }
 }
 .Table_collapse-button {
-  height: var(--dds-icon-size-medium);
-  width: var(--dds-icon-size-medium);
   border-radius: var(--dds-border-radius-button);
   margin-left: auto;
   margin-right: auto;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: inherit;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
   }
@@ -3970,19 +4179,19 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Tabs_tab--medium--row {
-  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-5);
+  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
   gap: var(--dds-spacing-md-icon-text-gap);
 }
 .Tabs_tab--small--row {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-sm-icon-text-gap);
 }
 .Tabs_tab--medium--column {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
+  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
   gap: var(--dds-spacing-x0-25);
 }
 .Tabs_tab--small--column {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
 }
 .Tabs_tab--row {
   flex-direction: row;
@@ -4020,6 +4229,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--success--default {
   background-color: var(--dds-color-surface-success-default);
   border-color: var(--dds-color-border-success);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-success-default);
   }
@@ -4027,6 +4237,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--success--strong {
   background-color: var(--dds-color-surface-success-strong);
   border-color: var(--dds-color-surface-success-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-success-strong);
   }
@@ -4034,6 +4245,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--danger--default {
   background-color: var(--dds-color-surface-danger-default);
   border-color: var(--dds-color-border-danger);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-danger-default);
   }
@@ -4041,6 +4253,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--danger--strong {
   background-color: var(--dds-color-surface-danger-strong);
   border-color: var(--dds-color-surface-danger-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-danger-strong);
   }
@@ -4048,6 +4261,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--warning--default {
   background-color: var(--dds-color-surface-warning-default);
   border-color: var(--dds-color-border-warning);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-warning-default);
   }
@@ -4055,6 +4269,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--warning--strong {
   background-color: var(--dds-color-surface-warning-strong);
   border-color: var(--dds-color-surface-warning-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-warning-strong);
   }
@@ -4062,6 +4277,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--info--default {
   background-color: var(--dds-color-surface-info-default);
   border-color: var(--dds-color-border-info);
+  color: var(--dds-color-text-on-status-default);
   svg {
     color: var(--dds-color-icon-on-info-default);
   }
@@ -4069,6 +4285,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .Tag_container--info--strong {
   background-color: var(--dds-color-surface-info-strong);
   border-color: var(--dds-color-surface-info-strong);
+  color: var(--dds-color-text-on-status-strong);
   svg {
     color: var(--dds-color-icon-on-info-strong);
   }
@@ -4087,24 +4304,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .TextInput_input--extended {
   width: 100%;
 }
-.TextInput_icon--medium {
-  left: var(--dds-spacing-x0-75);
-}
-.TextInput_icon--small {
-  left: var(--dds-spacing-x0-75);
-}
-.TextInput_icon--xsmall {
-  left: var(--dds-spacing-x0-5);
-}
 .TextInput_affix {
-  position: absolute;
   height: 100%;
-  top: 50%;
-  transform: translateY(-50%);
   display: flex;
   align-items: center;
   pointer-events: none;
-  z-index: var(--dds-zindex-absolute-element);
 }
 .TextInput_prefix {
   left: 0;
@@ -4122,171 +4326,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-color: var(--dds-color-border-subtle);
 }
 
-/* src/components/Toggle/Toggle.module.css */
-.Toggle_label {
-  display: flex;
-  align-items: center;
-  width: -moz-fit-content;
-  width: fit-content;
-  gap: var(--dds-spacing-x0-75);
-  --dds-toggle-medium-thumb-spacing-inline: var(--dds-spacing-x0-125);
-  --dds-toggle-large-thumb-spacing-inline: var(--dds-spacing-x0-25);
-}
-.Toggle_track {
-  position: relative;
-  background-color: var(--dds-color-surface-medium);
-  border-radius: var(--dds-border-radius-rounded);
-  border: 1px solid var(--dds-color-border-default);
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color 0.2s,
-      border 0.2s,
-      var(--dds-focus-transition);
-  }
-}
-.Toggle_thumb {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dds-spacing-x0-125);
-  border-radius: var(--dds-border-radius-rounded);
-  background-color: var(--dds-color-surface-field-default);
-  border: 1px solid var(--dds-color-border-default);
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      transform 0.2s,
-      left 0.2s,
-      border 0.2s,
-      width 0.2s;
-  }
-}
-.Toggle_thumb .Toggle_checkmark {
-  opacity: 0;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s;
-  }
-}
-.Toggle_labeltext--readonly {
-  display: flex;
-  .Toggle_icon--read-only {
-    align-self: center;
-    flex-shrink: 0;
-    margin-inline-end: var(--dds-spacing-x0-125);
-  }
-}
-.Toggle_medium {
-  .Toggle_track {
-    height: var(--dds-spacing-x1-5);
-    width: 2.8125rem;
-  }
-  .Toggle_thumb {
-    left: var(--dds-toggle-medium-thumb-spacing-inline);
-    top: 1px;
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-  input:checked ~ .Toggle_track > .Toggle_thumb {
-    left: calc(100% - var(--dds-toggle-medium-thumb-spacing-inline));
-    transform: translateX(-100%);
-  }
-  input:enabled:active:enabled:not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
-    width: 1.5rem;
-  }
-}
-.Toggle_large {
-  .Toggle_track {
-    height: 2.125rem;
-    width: 3.25rem;
-  }
-  .Toggle_thumb {
-    left: var(--dds-toggle-large-thumb-spacing-inline);
-    top: var(--dds-spacing-x0-125);
-    height: 1.75rem;
-    width: 1.75rem;
-  }
-  input:checked ~ .Toggle_track > .Toggle_thumb {
-    left: calc(100% - var(--dds-toggle-large-thumb-spacing-inline));
-    transform: translateX(-100%);
-  }
-  input:enabled:active:not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
-    width: var(--dds-spacing-x2);
-  }
-}
-.Toggle_label,
-.Toggle_label--is-loading {
-  input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
-    background-color: var(--dds-color-surface-action-selected);
-    border-color: var(--dds-color-border-action-default);
-    & > .Toggle_thumb {
-      border-color: var(--dds-color-border-action-default);
-      .Toggle_checkmark {
-        color: var(--dds-color-icon-action-resting);
-        opacity: 1;
-      }
-    }
-  }
-}
-.Toggle_label {
-  cursor: pointer;
-  &:hover input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
-    background-color: var(--dds-color-surface-action-hover);
-    border-color: var(--dds-color-border-action-hover);
-    .Toggle_thumb {
-      border-color: var(--dds-color-border-action-hover);
-    }
-  }
-  &:hover input:enabled:not([aria-readonly=true]) ~ .Toggle_track {
-    background-color: var(--dds-color-surface-hover-default);
-    border-color: var(--dds-color-border-action-hover);
-    .Toggle_thumb {
-      border-color: var(--dds-color-border-action-hover);
-      .Toggle_checkmark {
-        color: var(--dds-color-icon-action-hover);
-      }
-    }
-  }
-}
-.Toggle_label--disabled {
-  cursor: not-allowed;
-  color: var(--dds-color-text-subtle);
-  input:disabled ~ .Toggle_track {
-    background-color: var(--dds-color-surface-field-disabled);
-  }
-  input:checked:disabled ~ .Toggle_track {
-    background-color: var(--dds-color-surface-action-selected-disabled);
-    border-color: var(--dds-color-surface-action-selected-disabled);
-  }
-  input:checked:disabled ~ .Toggle_track > .Toggle_thumb {
-    border-color: var(--dds-color-surface-action-selected-disabled);
-    .Toggle_checkmark {
-      color: var(--dds-color-icon-subtle);
-      opacity: 1;
-    }
-  }
-}
-.Toggle_label--read-only {
-  cursor: default;
-  color: var(--dds-color-text-medium);
-  input ~ .Toggle_track {
-    background-color: var(--dds-color-surface-default);
-  }
-  input:checked ~ .Toggle_track {
-    background-color: var(--dds-color-surface-inverse-default);
-    border-color: var(--dds-color-surface-inverse-default);
-  }
-  input:checked ~ .Toggle_track > .Toggle_thumb {
-    border-color: var(--dds-color-surface-inverse-default);
-    .Toggle_checkmark {
-      color: var(--dds-color-icon-medium);
-      opacity: 1;
-    }
-  }
-}
-.Toggle_label--is-loading {
-  cursor: not-allowed;
-}
-
 /* src/components/ToggleBar/ToggleBar.module.css */
 .ToggleBar_bar {
   display: grid;
@@ -4302,10 +4341,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-sizing: border-box;
   cursor: pointer;
   background-color: var(--dds-color-surface-default);
-  border-right: 1px solid var(--dds-color-border-default);
-  border-top: 1px solid var(--dds-color-border-default);
-  border-bottom: 1px solid var(--dds-color-border-default);
-  border-color: var(--dds-color-border-default);
+  border: 1px solid var(--dds-color-border-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       border-color 0.2s,
@@ -4315,52 +4351,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       var(--dds-focus-transition);
   }
 }
-.ToggleBar_content--large--just-icon {
-  padding: var(--dds-spacing-x1);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--large--with-text {
-  padding: var(--dds-spacing-x1) var(--dds-spacing-x2);
-  gap: var(--dds-spacing-lg-icon-text-gap);
-}
-.ToggleBar_content--medium--just-icon {
-  padding: var(--dds-spacing-x0-75);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--medium--with-text {
-  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5);
-  gap: var(--dds-spacing-md-icon-text-gap);
-}
-.ToggleBar_content--small--just-icon {
-  padding: var(--dds-spacing-x0-5);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--small--with-text {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
-  gap: var(--dds-spacing-sm-icon-text-gap);
-}
-.ToggleBar_content--xsmall--just-icon {
-  padding: var(--dds-spacing-x0-25);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--xsmall--with-text {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-xs-icon-text-gap);
-}
 .ToggleBar_label {
   &:hover .ToggleBar_content {
     background-color: var(--dds-color-surface-hover-default);
   }
   &:first-child .ToggleBar_content {
-    border-left: 1px solid var(--dds-color-border-default);
+    margin-inline-end: -1px;
     border-top-left-radius: var(--dds-border-radius-button);
     border-bottom-left-radius: var(--dds-border-radius-button);
   }
@@ -4368,6 +4364,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     border-top-right-radius: var(--dds-border-radius-button);
     border-bottom-right-radius: var(--dds-border-radius-button);
   }
+  &:not(:first-child):not(:last-child) .ToggleBar_content {
+    margin-inline-end: -1px;
+  }
   input:checked + .ToggleBar_content {
     color: var(--dds-color-text-on-action);
     border-color: var(--dds-color-surface-action-selected);