From a9a5166da7e7e9c7976ee6fb23cd039be084dfe1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 31 Dec 2021 10:53:06 -0500
Subject: [PATCH] improve focus when clicking edge

---
 docs/resources/changelog.md          |  1 +
 src/components/input/input.styles.ts | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 05043c9a..7b1f2e9c 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
 - Fixed an a11y bug in `<sl-tooltip>` where `aria-describedby` referenced an id in the shadow root
 - Fixed a bug in `<sl-radio>` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596)
+- Fixed a bug in `<sl-input>` where clicking the left/right edge of the control wouldn't focus it
 - Improved `<sl-spinner>` track color when used on various backgrounds
 - Improved a11y in `<sl-radio>` so VoiceOver announces radios properly in a radio group
 - Improved the API for the experimental `<sl-split-panel>` component by making `position` accept a percentage and adding the `position-in-pixels` attribute
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index e7539527..671cbd27 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -155,20 +155,20 @@ export default css`
 
   .input--small .input__control {
     height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
-    margin: 0 var(--sl-input-spacing-small);
+    padding: 0 var(--sl-input-spacing-small);
   }
 
   .input--small .input__clear,
   .input--small .input__password-toggle {
-    margin-right: var(--sl-input-spacing-small);
+    width: calc(1em + var(--sl-input-spacing-small) * 2);
   }
 
   .input--small .input__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-small);
+    padding-left: var(--sl-input-spacing-small);
   }
 
   .input--small .input__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-small);
+    padding-right: var(--sl-input-spacing-small);
   }
 
   .input--medium {
@@ -179,20 +179,20 @@ export default css`
 
   .input--medium .input__control {
     height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
-    margin: 0 var(--sl-input-spacing-medium);
+    padding: 0 var(--sl-input-spacing-medium);
   }
 
   .input--medium .input__clear,
   .input--medium .input__password-toggle {
-    margin-right: var(--sl-input-spacing-medium);
+    width: calc(1em + var(--sl-input-spacing-medium) * 2);
   }
 
   .input--medium .input__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-medium);
+    padding-left: var(--sl-input-spacing-medium);
   }
 
   .input--medium .input__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-medium);
+    padding-right: var(--sl-input-spacing-medium);
   }
 
   .input--large {
@@ -203,20 +203,20 @@ export default css`
 
   .input--large .input__control {
     height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
-    margin: 0 var(--sl-input-spacing-large);
+    padding: 0 var(--sl-input-spacing-large);
   }
 
   .input--large .input__clear,
   .input--large .input__password-toggle {
-    margin-right: var(--sl-input-spacing-large);
+    width: calc(1em + var(--sl-input-spacing-large) * 2);
   }
 
   .input--large .input__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-large);
+    padding-left: var(--sl-input-spacing-large);
   }
 
   .input--large .input__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-large);
+    padding-right: var(--sl-input-spacing-large);
   }
 
   /*