diff --git a/src/dev/pages/field/field.html b/src/dev/pages/field/field.html
index 52468c71e..c4451aa57 100644
--- a/src/dev/pages/field/field.html
+++ b/src/dev/pages/field/field.html
@@ -44,9 +44,10 @@
         type: 'select',
         label: 'Theme',
         id: 'opt-theme',
-        defaultValue: 'primary',
+        defaultValue: 'default',
         options: [
-          { label: 'Primary (default)', value: 'primary' },
+          { label: 'Default', value: 'default' },
+          { label: 'Primary', value: 'primary' },
           { label: 'Secondary', value: 'secondary' },
           { label: 'Tertiary', value: 'tertiary' },
           { label: 'Success', value: 'success' },
@@ -75,8 +76,8 @@
         defaultValue: 'off',
         options: [
           { label: 'Off', value: 'off' },
-          { label: 'Expanded', value: 'expanded' },
-          { label: 'Collapsed', value: 'collapsed' }
+          { label: 'Collapsed', value: 'collapsed' },
+          { label: 'Expanded', value: 'expanded' }
         ]
       }
     ]
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
index 01f6b56eb..acef4730d 100644
--- a/src/dev/pages/theme/theme.ts
+++ b/src/dev/pages/theme/theme.ts
@@ -43,44 +43,65 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     header: 'Key colors',
     swatches: [
       { text: 'Primary', background: 'primary', foreground: 'on-primary' },
-      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }
+      { text: 'Primary container (minimum)', background: 'primary-container-minimum', foreground: 'on-primary-container-minimum' },
+      { text: 'Primary container (low)', background: 'primary-container-low', foreground: 'on-primary-container-low' },
+      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' },
+      { text: 'Primary container (high)', background: 'primary-container-high', foreground: 'on-primary-container-high' }
     ]
   },
   {
     swatches: [
       { text: 'Secondary', background: 'secondary', foreground: 'on-secondary' },
-      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }
+      { text: 'Secondary container (minimum)', background: 'secondary-container-minimum', foreground: 'on-secondary-container-minimum' },
+      { text: 'Secondary container (low)', background: 'secondary-container-low', foreground: 'on-secondary-container-low' },
+      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' },
+      { text: 'Secondary container (high)', background: 'secondary-container-high', foreground: 'on-secondary-container-high' }
     ]
   },
   {
     swatches: [
       { text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' },
-      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }
+      { text: 'Tertiary container (minimum)', background: 'tertiary-container-minimum', foreground: 'on-tertiary-container-minimum' },
+      { text: 'Tertiary container (low)', background: 'tertiary-container-low', foreground: 'on-tertiary-container-low' },
+      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' },
+      { text: 'Tertiary container (high)', background: 'tertiary-container-high', foreground: 'on-tertiary-container-high' }
     ]
   },
   {
     header: 'Status',
     swatches: [
       { text: 'Success', background: 'success', foreground: 'on-success' },
-      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' }
+      { text: 'Success container (minimum)', background: 'success-container-minimum', foreground: 'on-success-container-minimum' },
+      { text: 'Success container (low)', background: 'success-container-low', foreground: 'on-success-container-low' },
+      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' },
+      { text: 'Success container (high)', background: 'success-container-high', foreground: 'on-success-container-high' }
     ]
   },
   {
     swatches: [
       { text: 'Error ', background: 'error', foreground: 'on-error' },
-      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' }
+      { text: 'Error container (minimum)', background: 'error-container-minimum', foreground: 'on-error-container-minimum' },
+      { text: 'Error container (low)', background: 'error-container-low', foreground: 'on-error-container-low' },
+      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' },
+      { text: 'Error container (high)', background: 'error-container-high', foreground: 'on-error-container-high' }
     ]
   },
   {
     swatches: [
       { text: 'Warning', background: 'warning', foreground: 'on-warning' },
-      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }
+      { text: 'Warning container (minimum)', background: 'warning-container-minimum', foreground: 'on-warning-container-minimum' },
+      { text: 'Warning container (low)', background: 'warning-container-low', foreground: 'on-warning-container-low' },
+      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' },
+      { text: 'Warning container (high)', background: 'warning-container-high', foreground: 'on-warning-container-high'}
     ]
   },
   {
     swatches: [
       { text: 'Info', background: 'info', foreground: 'on-info' },
-      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' }
+      { text: 'Info container (minimum)', background: 'info-container-minimum', foreground: 'on-info-container-minimum' },
+      { text: 'Info container (low)', background: 'info-container-low', foreground: 'on-info-container-low' },
+      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' },
+      { text: 'Info container (high)', background: 'info-container-high', foreground: 'on-info-container-high' }
     ]
   },
   {
diff --git a/src/lib/core/styles/tokens/theme/_token-utils.scss b/src/lib/core/styles/tokens/theme/_token-utils.scss
index 3b8696f79..f1e4b58f5 100644
--- a/src/lib/core/styles/tokens/theme/_token-utils.scss
+++ b/src/lib/core/styles/tokens/theme/_token-utils.scss
@@ -18,7 +18,10 @@
   $surface-tone: color-utils.tone($surface);
 
   // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low));
   $container: theme-utils.hexify($color, $surface, color-emphasis.value(low));
+  $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower));
+  $container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
@@ -26,7 +29,10 @@
   // The on-container colors are the contrast color for the provided color mixed with the
   // container color at a lower emphasis to let the contrast color bleed through for
   // increased contrast against the lower emphasis container color
+  $on-container-high: theme-utils.contrast($container-high);
   $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
+  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
+  $on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium));
 
   // Compute contrast ratio for foreground colors against their corresponding background
   $minimum-ratio: 4.5;
@@ -36,11 +42,26 @@
   @if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio {
     @warn 'The contrast ratio  between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.';
   }
+  @if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.';
+  }
+  @if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.';
+  }
+  @if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.';
+  }
 
   @return (
     #{$name}: $color,
+    #{$name}-container-minimum: $container-minimum,
+    #{$name}-container-low: $container-low,
     #{$name}-container: $container,
+    #{$name}-container-high: $container-high,
     on-#{$name}: $on-color,
-    on-#{$name}-container: $on-container
+    on-#{$name}-container-minimum: $on-container-minimum,
+    on-#{$name}-container-low: $on-container-low,
+    on-#{$name}-container: $on-container,
+    on-#{$name}-container-high: $on-container-high
   );
 }
diff --git a/src/lib/field-next/_core.scss b/src/lib/field-next/_core.scss
index 4597af2f1..749c0f6e5 100644
--- a/src/lib/field-next/_core.scss
+++ b/src/lib/field-next/_core.scss
@@ -94,11 +94,9 @@ $host-tokens: [display];
   block-size: 100%;
   padding-inline-end: 8px;
 
-
   & > * {
     transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
   }
-  // transform-origin: calc(50% - 4px) 50%;
 }
 
 @mixin slotted-input {