fix(field): extend box to include outline

src/lib/field/_core.theme.scss

@@ -88,6 +88,7 @@ $elevations: (
     @include override(tonal-background, map.get($tonal-backgrounds, $theme), value);
     @include override(tonal-background-hover, map.get($tonal-backgrounds-hover, $theme), value);
   }
+
   @include override(content-color, map.get($content-colors, $theme), value);
   @include override(inner-border-color, map.get($outline-colors, $theme), value);
   @include override(inner-border-color-hover, map.get($outline-colors-hover, $theme), value);
@@ -106,13 +107,15 @@ $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;
@@ -122,6 +125,10 @@ $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/forge-field.scss

@@ -36,6 +36,7 @@ $_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)};
@@ -72,12 +73,14 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
     &--plain {
       @include core.variant(plain);
 
+      margin: 0;
       outline-width: 0;
     }
 
     &--tonal {
       @include core.variant(tonal);
 
+      margin: 0;
       outline-width: 0;
       background: #{theme.variable(primary-container-low)};
 
@@ -95,6 +98,7 @@ $_input-selector: ':where(input, textarea, select, .forge-field__input)';
     &--raised {
       @include core.variant(raised);
 
+      margin: 0;
       outline-width: 0;
 
       &:hover:not(:has(#{$_input-selector}:disabled)) {