From 7b4decb70c98e30eae2026fad808c971c12fba90 Mon Sep 17 00:00:00 2001
From: ynotdraw <8069555+ynotdraw@users.noreply.github.com>
Date: Mon, 8 Sep 2025 13:21:38 -0400
Subject: [PATCH] Dropdown, Input, and Textarea focus state updates

---
 .changeset/loose-chairs-kick.md |  5 +++++
 src/dropdown.styles.ts          | 11 ++++-------
 src/input.styles.ts             | 11 ++++-------
 src/textarea.styles.ts          | 11 ++++-------
 4 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/loose-chairs-kick.md

diff --git a/.changeset/loose-chairs-kick.md b/.changeset/loose-chairs-kick.md
new file mode 100644
index 000000000..258fb5f2f
--- /dev/null
+++ b/.changeset/loose-chairs-kick.md
@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+Dropdown, Input, and Textarea focus states were updated so their shadows aren't clipped when in a container without padding.
diff --git a/src/dropdown.styles.ts b/src/dropdown.styles.ts
index c9468909a..f07a1d31b 100644
--- a/src/dropdown.styles.ts
+++ b/src/dropdown.styles.ts
@@ -125,16 +125,13 @@ export default [
         ) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
     }
diff --git a/src/input.styles.ts b/src/input.styles.ts
index 139447adb..734c5d007 100644
--- a/src/input.styles.ts
+++ b/src/input.styles.ts
@@ -69,16 +69,13 @@ export default [
       &.focused:not(.readonly) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
 
diff --git a/src/textarea.styles.ts b/src/textarea.styles.ts
index db75312c6..b77ce0fb1 100644
--- a/src/textarea.styles.ts
+++ b/src/textarea.styles.ts
@@ -90,16 +90,13 @@ export default [
       &:focus-visible:not([readonly]) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }