fix(field): adjust outline-offset instead of padding and margin

src/lib/field/_core.scss

@@ -78,6 +78,7 @@
   outline-style: #{token(outline-style)};
   outline-width: #{token(outline-width)};
   outline-color: #{token(outline-color, custom)};
+  outline-offset: calc(#{token(outline-width)} * -1);
   pointer-events: none;
 }
 

src/lib/field/_core.theme.scss

@@ -107,15 +107,13 @@ $elevations: (
     @include override(padding-inline, 0, value);
     @include override(surface-display, none, value);
   } @else if $variant == outlined {
-    @include with-outline;
     @include hidden-background;
   } @else if $variant == tonal {
     @include no-outline;
     @include unoutlined-variant-inner-border;
     @include visible-background(tonal);
     @include override(multiline-inset-label-background, #{token(multiline-inset-label-tonal-background, custom)}, value);
   } @else if $variant == filled {
-    @include with-outline;
     @include visible-background(filled);
   } @else if $variant == raised {
     @include elevated;
@@ -125,10 +123,6 @@ $elevations: (
   }
 }
 
-@mixin with-outline {
-  padding: #{token(outline-width)};
-}
-
 @mixin no-outline($no-inner: false) {
   @include override(outline-color, transparent, value);
   @include override(outline-color-hover, transparent, value);

src/lib/field/field.scss

@@ -671,7 +671,7 @@ forge-focus-indicator {
   @include focus-indicator.provide-theme(
     (
       color: #{token(focus-indicator-color, custom)},
-      outward-offset: 0px,
+      outward-offset: calc(#{token(outline-width)} * -1),
       shape: #{token(shape)},
       width: #{token(focus-indicator-width)}
     )

src/lib/field/forge-field.scss

@@ -36,12 +36,12 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
 
     box-shadow: #{token(elevation, custom)};
 
-    margin: #{token(outline-width)};
     padding-inline: #{token(padding-inline)};
     border-radius: #{token(shape)};
     outline-style: #{token(outline-style)};
     outline-width: #{token(outline-width)};
     outline-color: #{theme.variable(outline-low)};
+    outline-offset: calc(#{token(outline-width)} * -1);
 
     background: #{token(background)};
 
@@ -328,7 +328,8 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
       &.forge-field:has(#{$_input-selector}:focus) {
         @include focus-indicator.provide-theme(
           (
-            color: #{theme.variable(error)}
+            color: #{theme.variable(error)},
+            outward-offset: calc(#{token(outline-width)} * -1)
           )
         );
       }