use margin instead of padding

docs/resources/changelog.md

@@ -17,6 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the ability to cancel `sl-show` and `sl-hide` events in `<sl-details>` [#993](https://github.com/shoelace-style/shoelace/issues/993)
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
 - Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
+- Fixed a bug that caused prefix/suffix animations in `<sl-input>` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
 - Updated Lit to 2.4.1
 - Updated TypeScript to 4.8.4

src/components/input/input.styles.ts

@@ -173,11 +173,11 @@ export default css`
   }
 
   .input--small .input__prefix ::slotted(*) {
-    padding-inline-start: var(--sl-input-spacing-small);
+    margin-inline-start: var(--sl-input-spacing-small);
   }
 
   .input--small .input__suffix ::slotted(*) {
-    padding-inline-end: var(--sl-input-spacing-small);
+    margin-inline-end: var(--sl-input-spacing-small);
   }
 
   .input--medium {
@@ -197,11 +197,11 @@ export default css`
   }
 
   .input--medium .input__prefix ::slotted(*) {
-    padding-inline-start: var(--sl-input-spacing-medium);
+    margin-inline-start: var(--sl-input-spacing-medium);
   }
 
   .input--medium .input__suffix ::slotted(*) {
-    padding-inline-end: var(--sl-input-spacing-medium);
+    margin-inline-end: var(--sl-input-spacing-medium);
   }
 
   .input--large {
@@ -221,11 +221,11 @@ export default css`
   }
 
   .input--large .input__prefix ::slotted(*) {
-    padding-inline-start: var(--sl-input-spacing-large);
+    margin-inline-start: var(--sl-input-spacing-large);
   }
 
   .input--large .input__suffix ::slotted(*) {
-    padding-inline-end: var(--sl-input-spacing-large);
+    margin-inline-end: var(--sl-input-spacing-large);
   }
 
   /*