diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
index 66f1adf79..4af76f0ba 100644
--- a/src/components/date-picker/themes/shared/date-picker.common.scss
+++ b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -97,8 +97,8 @@ $input-theme: input-theme.$material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not(:disabled, [readonly])[invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss
index d4ac96e82..0467dcaf6 100644
--- a/src/components/date-picker/themes/shared/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss
@@ -33,7 +33,7 @@ $input-theme: input-theme.$indigo;
     }
 }
 
-:host(:not([invalid])[readonly]) {
+:host([readonly]) {
     igc-date-time-input::part(container) {
         border-color: var-get($theme, 'disabled-text-color');
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
index 65c0d1d0a..e5c637b52 100644
--- a/src/components/date-picker/themes/shared/date-picker.material.scss
+++ b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-:host(:not([invalid])[outlined][readonly]:hover) {
+:host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),
     igc-date-time-input::part(filler) {
@@ -15,7 +15,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]) {
+:host([outlined][readonly]) {
     igc-date-time-input:focus-within {
         &::part(start),
         &::part(end),
@@ -35,7 +35,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]) {
+:host(:not([outlined])[readonly]) {
     igc-date-time-input:hover {
         &::part(container) {
             border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -56,16 +56,3 @@ $theme: $material;
         }
     }
 }
-
-:host(:not([outlined])[readonly][invalid]) {
-    igc-date-time-input:hover,
-    igc-date-time-input:focus-within {
-        &::part(container) {
-            border-color: var-get($theme, 'error-secondary-color');
-
-            &::after {
-                border-color: var-get($theme, 'error-secondary-color');
-            }
-        }
-    }
-}
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
index 2cab24fb7..21e0bf65e 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
@@ -33,6 +33,18 @@ $theme: $bootstrap;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(input) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+}
+
+:host(:not([disabled], [readonly])[invalid]:focus-within) {
+    igc-input::part(input) {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+    }
+}
+
 [part='separator'] {
     @include type-style('body-1');
 }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
index 4c4a6b865..9d63c47c8 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -91,8 +91,8 @@ $theme: $material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not(:disabled, [readonly])[invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
index 69b3077e2..b7cf45f25 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
@@ -44,6 +44,22 @@ $theme: $fluent;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(container) {
+        &::before {
+            box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
+:host(:not([disabled], [readonly])[invalid]:focus-within) {
+    igc-input::part(container) {
+        &::before {
+            box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     ::part(label)::after {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
index 9544e9898..82821993e 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -30,7 +30,7 @@ $theme: $indigo;
     padding: rem(8px) rem(16px);
 }
 
-:host(:not([invalid])[readonly]) {
+:host([readonly]) {
     igc-input::part(container),
     igc-date-time-input::part(container) {
         border-color: var-get($theme, 'disabled-text-color');
@@ -53,6 +53,17 @@ $theme: $indigo;
     }
 }
 
+:host(:not([disabled], [readonly])[invalid]) {
+    igc-input::part(container) {
+        caret-color: initial;
+        border-color: var-get($theme, 'error-secondary-color');
+
+        &::after {
+            background: var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
 :host(:not([disabled])[invalid]),
 :host(:not(:disabled)[invalid]) {
     ::part(helper-text) {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
index 766927bb1..27aa8ddd6 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-:host(:not([invalid])[outlined][readonly]:hover) {
+:host([outlined][readonly]:hover) {
     igc-input::part(start),
     igc-input::part(end),
     igc-input::part(filler),
@@ -19,7 +19,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]:focus-within) {
+:host([outlined][readonly]:focus-within) {
     igc-input::part(start),
     igc-input::part(end),
     igc-input::part(filler) {
@@ -31,7 +31,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]) {
+:host([outlined][readonly]) {
     igc-date-time-input:focus-within {
         &::part(start),
         &::part(end),
@@ -45,6 +45,18 @@ $theme: $material;
     }
 }
 
+:host(:not([disabled],[readonly])[outlined][invalid]) {
+    igc-input::part(start),
+    igc-input::part(end),
+    igc-input::part(filler) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+
+    &::part(notch) {
+        border-bottom-color: var-get($theme, 'error-secondary-color');
+    }
+}
+
 :host(:not([outlined],[disabled])[readonly]) {
     igc-input::part(container),
     igc-date-time-input::part(container) {
@@ -52,7 +64,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]:hover) {
+:host(:not([outlined])[readonly]:hover) {
     igc-input::part(container) {
         border-bottom-color: var-get($theme, 'idle-bottom-line-color');
 
@@ -62,7 +74,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]:focus-within) {
+:host(:not([outlined])[readonly]:focus-within) {
     igc-input::part(container) {
         border-bottom-color: var-get($theme, 'focused-bottom-line-color');
 
@@ -72,7 +84,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]) {
+:host(:not([outlined])[readonly]) {
     igc-date-time-input:hover {
         &::part(container) {
             border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -94,26 +106,18 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined])[invalid][readonly]:hover),
-:host(:not([outlined])[invalid][readonly]:focus-within) {
+:host(:not([disabled],[readonly])[invalid]) {
+    igc-input::part(label) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+}
+
+:host(:not([disabled],[readonly],[outlined])[invalid]) {
     igc-input::part(container) {
         border-color: var-get($theme, 'error-secondary-color');
 
         &::after {
-            border-color: var-get($theme, 'error-secondary-color');
+            background: var-get($theme, 'error-secondary-color');
         }
     }
 }
-
-:host(:not([outlined])[readonly][invalid]) {
-    igc-date-time-input:hover,
-    igc-date-time-input:focus-within {
-        &::part(container) {
-            border-color: var-get($theme, 'error-secondary-color');
-
-            &::after {
-                border-color: var-get($theme, 'error-secondary-color');
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss
index fb756762a..ba32b749f 100644
--- a/src/components/input/themes/shared/input.bootstrap.scss
+++ b/src/components/input/themes/shared/input.bootstrap.scss
@@ -170,13 +170,17 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part~='input'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
 }
 
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]:focus-within),
+:host(:not([disabled])[role='combobox'][invalid]:focus-within),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {
     [part~='input'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss
index df6bfbc0e..5e65f6ca9 100644
--- a/src/components/input/themes/shared/input.common.scss
+++ b/src/components/input/themes/shared/input.common.scss
@@ -64,7 +64,7 @@ $theme: $base;
     }
 }
 
-:host([invalid]) {
+:host([invalid]:not([disabled], [readonly])) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss
index 7c1fc255e..1ebddd452 100644
--- a/src/components/input/themes/shared/input.fluent.scss
+++ b/src/components/input/themes/shared/input.fluent.scss
@@ -189,10 +189,10 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([readonly][invalid]:hover),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled], [readonly])[invalid]:hover),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
@@ -204,8 +204,9 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]:focus-within),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled], [readonly])[invalid]:focus-within),
+:host(:not([disabled])[role='combobox'][invalid]:focus-within),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]:focus-within) {
     [part~='container'] {
         &::before {
             box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss
index fd99e9169..05fe5ef84 100644
--- a/src/components/input/themes/shared/input.indigo.scss
+++ b/src/components/input/themes/shared/input.indigo.scss
@@ -173,9 +173,10 @@ $transition-duration: .25s;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([invalid][readonly]) {
+:host(:not([disabled], [readonly])[invalid]),
+:host(:not([disabled], [readonly])[invalid]:hover),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part^='container'] {
         caret-color: initial;
         border-color: var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss
index cee014d5d..bcf0f128b 100644
--- a/src/components/input/themes/shared/input.material.scss
+++ b/src/components/input/themes/shared/input.material.scss
@@ -262,9 +262,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([outlined])[invalid]),
-:host(:not([outlined])[invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[invalid][readonly]:hover) {
+:host(:not([outlined], [readonly])[invalid]),
+:host(:not([outlined], [readonly])[invalid]:focus-within),
+:host(:not([disabled], [outlined])[role='combobox'][invalid]),
+:host(:not([disabled], [outlined])[role='combobox'][invalid]:focus-within) {
     [part~='container'] {
         border-color: var-get($theme, 'error-secondary-color');
 
@@ -457,11 +458,9 @@ input:placeholder-shown + [part='notch'] [part='label'],
             align-self: center;
         }
 
-        input:has(:not(:placeholder-shown)) + [part='notch'] {
-            border: {
-                width: $active-border-width;
-                color: var-get($theme, 'focused-border-color');
-            }
+        input:not(:placeholder-shown) + [part='notch'] {
+            border-width: $active-border-width;
+            border-color: var-get($theme, 'focused-border-color');
         }
     }
 }
@@ -541,9 +540,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]),
-:host(:not([type='search'])[outlined][invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly][invalid]:hover) {
+:host(:not([type='search'], [readonly])[outlined][invalid]),
+:host(:not([type='search'], [readonly])[outlined][invalid]:focus-within),
+:host(:not([type='search'], [disabled])[role='combobox'][outlined][invalid]),
+:host(:not([disabled])[role='combobox'][readonly][outlined][invalid]:focus-within),
+:host(:not([type='search'], [readonly], [disabled])[aria-haspopup='dialog'][outlined][invalid]) {
     [part='start'],
     [part='notch'],
     [part='filler'],
@@ -557,28 +558,17 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]:focus-within) {
+:host(:not([type='search'], [readonly])[outlined][invalid]:focus-within),
+:host(:not([type='search'])[role='combobox'][outlined][invalid]:focus-within),
+:host(:not([type='search'], [readonly])[aria-haspopup='dialog'][outlined][invalid]:focus-within) {
     [part='notch'] {
         border-top: $idle-border-width solid transparent;
     }
 }
 
-:host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
-    input:has(:not(:placeholder-shown)) + [part='notch'] {
-        border: {
-            width: $active-border-width;
-            color: var-get($theme, 'error-secondary-color');
-            top: $active-border-width solid
-                var-get($theme, 'error-secondary-color');
-        }
-    }
-
-    [part~='filled'] + [part='notch'] {
-        border-top: $idle-border-width solid transparent !important;
-    }
-}
-
-:host([invalid]) {
+:host(:not([readonly], [disabled])[invalid]),
+:host(:not([disabled])[role='combobox'][invalid]),
+:host(:not([disabled], [readonly])[aria-haspopup='dialog'][invalid]) {
     [part='label'] {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss
index 55e5a3d6b..56acec231 100644
--- a/src/components/select/themes/shared/select.material.scss
+++ b/src/components/select/themes/shared/select.material.scss
@@ -116,6 +116,20 @@ $active-border-width: rem(2px) !default;
     igc-input[readonly]:not([disabled])::part(label) {
         color: $error-color;
     }
+
+    igc-input::part(filler) {
+        border: {
+            width: $active-border-width;
+            color: $error-color;
+        }
+    }
+
+    igc-input::part(notch) {
+        border-bottom: {
+            width: $active-border-width;
+            color: $error-color;
+        }
+    }
 }
 
 :host(:not([outlined]):focus-within) {
diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss
index 8fd04066c..bb33e9ba2 100644
--- a/src/components/textarea/themes/shared/textarea.bootstrap.scss
+++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss
@@ -130,8 +130,8 @@ textarea {
     }
 }
 
-:host([invalid]:not(:disabled)),
-:host([invalid]:not([disabled])) {
+:host([invalid]:not(:disabled, [readonly])),
+:host([invalid]:not([disabled], [readonly])) {
     textarea {
         border: rem(1px) solid var-get($theme, 'error-secondary-color');
     }
@@ -141,8 +141,8 @@ textarea {
     }
 }
 
-:host([invalid]:not(:disabled):focus-within),
-:host([invalid]:not([disabled])):focus-within {
+:host([invalid]:not(:disabled, [readonly]):focus-within),
+:host([invalid]:not([disabled], [readonly])):focus-within {
     textarea {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss
index dff1e7ee7..c3a2cbf28 100644
--- a/src/components/textarea/themes/shared/textarea.fluent.scss
+++ b/src/components/textarea/themes/shared/textarea.fluent.scss
@@ -78,7 +78,8 @@ $border-size: rem(1px);
     }
 }
 
-:host([invalid]) {
+:host([invalid]:not(:disabled)),
+:host([invalid]:not([disabled])) {
     [part~='label'] {
         color: var-get($theme, 'idle-text-color');
     }
@@ -99,8 +100,8 @@ textarea {
     }
 }
 
-:host([invalid]:not(:disabled)),
-:host([invalid]:not([disabled])) {
+:host([invalid]:not(:disabled, [readonly])),
+:host([invalid]:not([disabled], [readonly])) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
@@ -112,8 +113,8 @@ textarea {
     }
 }
 
-:host(:not(:disabled)[invalid]:focus-within),
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not(:disabled, [readonly])[invalid]:focus-within),
+:host(:not([disabled], [readonly])[invalid]:focus-within) {
     [part^='container'] {
         &::before {
             box-shadow: inset 0 0 0 calc(var(--textarea-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss
index 3962144f3..365c2d627 100644
--- a/src/components/textarea/themes/shared/textarea.indigo.scss
+++ b/src/components/textarea/themes/shared/textarea.indigo.scss
@@ -142,8 +142,8 @@ textarea {
     }
 }
 
-:host([invalid]:not(:disabled)),
-:host([invalid]:not([disabled])) {
+:host([invalid]:not(:disabled, [readonly])),
+:host([invalid]:not([disabled], [readonly])) {
     ::part(validation-icon) {
         color: #{var-get($theme, 'error-secondary-color')};
     }
diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss
index b1d83f8fc..0b2d615e2 100644
--- a/src/components/textarea/themes/shared/textarea.material.scss
+++ b/src/components/textarea/themes/shared/textarea.material.scss
@@ -121,8 +121,8 @@ textarea {
     }
 }
 
-:host([invalid]:not(:disabled)),
-:host([invalid]:not([disabled])) {
+:host([invalid]:not(:disabled, [readonly])),
+:host([invalid]:not([disabled], [readonly])) {
     [part~='container'] {
         &::after {
             border-block-end-color: var-get($theme, 'error-secondary-color');
@@ -184,7 +184,7 @@ textarea {
     }
 }
 
-:host([invalid]:not([outlined]):focus-within) {
+:host([invalid]:not([outlined], [readonly]):focus-within) {
     [part~='container'] {
         &::after {
             border-block-end-color: var-get($theme, 'error-secondary-color');
@@ -396,20 +396,6 @@ textarea {
     }
 }
 
-:host(:not(:disabled)[readonly][outlined][invalid]:focus-within),
-:host(:not([disabled])[readonly][outlined][invalid]:focus-within) {
-    [part='notch'] {
-        border-block-start-color: var-get($theme, 'error-secondary-color');
-    }
-
-    [part~='container'][part~='filled'],
-    [part~='container'][part~='placeholder'] {
-        [part='notch'] {
-            border-block-start-color: transparent;
-        }
-    }
-}
-
 :host([outlined]:focus-within) {
     [part='filler'],
     [part='notch'] {
@@ -461,10 +447,10 @@ textarea {
     }
 }
 
-:host([invalid][outlined]:not(:disabled)),
-:host([invalid][outlined]:not(:disabled):focus-within),
-:host([invalid][outlined]:not([disabled])),
-:host([invalid][outlined]:not([disabled]):focus-within) {
+:host([invalid][outlined]:not(:disabled, [readonly])),
+:host([invalid][outlined]:not(:disabled, [readonly]):focus-within),
+:host([invalid][outlined]:not([disabled], [readonly])),
+:host([invalid][outlined]:not([disabled], [readonly]):focus-within) {
     [part='start'],
     [part='filler'],
     [part='end'],
@@ -473,8 +459,8 @@ textarea {
     }
 }
 
-:host([invalid][outlined]:not([disabled]):focus-within),
-:host([invalid][outlined]:not([disabled])) [part~='placeholder'] {
+:host([invalid][outlined]:not([disabled], [readonly]):focus-within),
+:host([invalid][outlined]:not([disabled], [readonly])) [part~='placeholder'] {
     [part='notch'] {
         border-block-start-color: transparent;
     }