fix(combo/select): toggle button states

package.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^15.0.0",
+    "igniteui-theming": "^15.1.1",
     "keep-a-changelog": "^2.6.1",
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",

src/components/combo/themes/shared/combo.common.scss

@@ -59,6 +59,13 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
+:host(:not([disabled])[invalid]),
+:host(:not(:disabled)[invalid]) {
+    ::part(helper-text) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     ::slotted([slot='prefix']),

src/components/combo/themes/shared/combo.fluent.scss

@@ -62,7 +62,7 @@ $dropdown-theme: dropdown-theme.$fluent;
 
 :host(:focus-within) {
     [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-focus--border');
+        background: var-get($theme, 'toggle-button-background-focus');
         color: var-get($theme, 'toggle-button-foreground-focus');
 
         igc-icon {

src/components/combo/themes/shared/combo.indigo.scss

@@ -92,6 +92,13 @@ $dropdown-theme: dropdown-theme.$indigo;
     }
 }
 
+:host(:not([disabled])[invalid]),
+:host(:not(:disabled)[invalid]) {
+    ::part(helper-text) {
+        color: var-get($input-theme, 'helper-text-color');
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     ::slotted([slot='prefix']),

src/components/combo/themes/shared/combo.material.scss

@@ -75,16 +75,24 @@ $dropdown-theme: dropdown-theme.$material;
     color: var-get($theme, 'toggle-button-foreground-filled');
 }
 
-:host(:focus-within) {
+:host(:not([outlined]):focus-within) {
+    igc-input::part(container) {
+        --_toggle-focus-background: #{var-get($theme, 'toggle-button-background')};
+        --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground')};
+
+        &:focus-within {
+            --_toggle-focus-background: #{var-get($theme, 'toggle-button-background-focus')};
+            --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-filled')};
+        }
+    }
+
     [part~='toggle-icon'] {
-        color: var-get($theme, 'toggle-button-foreground-filled');
-        background: var-get($theme, 'toggle-button-background-focus');
+        color: var(--_toggle-focus-foreground);
+        background: var(--_toggle-focus-background);
     }
-}
 
-:host(:not([outlined]):focus-within) {
-    > igc-input::part(container) {
-        background: var-get($input-theme, 'box-background-focus');
+    [part='toggle-icon filled'] {
+        color: var-get($theme, 'toggle-button-foreground-filled');
     }
 }
 

src/components/date-picker/themes/shared/date-picker.common.scss

@@ -73,10 +73,21 @@ igc-icon,
     --component-size: var(--input-size);
 }
 
+:host(:not([disabled])[invalid]),
+:host(:not(:disabled)[invalid]) {
+    ::part(helper-text) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     [part='label'],
     igc-validator {
         color: var-get($input-theme, 'disabled-text-color');
     }
+
+    ::part(helper-text) {
+        color: var-get($input-theme, 'disabled-text-color');
+    }
 }

src/components/date-picker/themes/shared/date-picker.indigo.scss

@@ -40,3 +40,10 @@ $input-theme: input-theme.$indigo;
         color: var-get($input-theme, 'focused-secondary-color');
     }
 }
+
+:host(:not([disabled])[invalid]),
+:host(:not(:disabled)[invalid]) {
+    ::part(helper-text) {
+        color: var-get($input-theme, 'helper-text-color');
+    }
+}

src/components/input/themes/shared/input.material.scss

@@ -380,7 +380,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-
 :host(:not([type='search'])[readonly][outlined]:focus-within) {
     :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] [part='label'] {
@@ -397,6 +396,20 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
+:host(:not([type='search'])[outlined]:hover) {
+    [part='notch'],
+    [part='start'],
+    [part='end'],
+    [part='filler'] {
+        border-color: var-get($theme, 'hover-border-color');
+    }
+
+    input:placeholder-shown + [part='notch'],
+    [part~='filled'] + [part='notch'] {
+        @extend %floated-styles;
+    }
+}
+
 :host(:not([type='search'])[outlined]:focus-within) {
     [part='label'] {
         margin-block-start: calc(#{$active-border-width} / 2);

src/components/select/themes/shared/select.common.scss

@@ -32,7 +32,6 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
-:host(:hover),
 :host(:focus-within) {
     [part~='toggle-icon'] {
         background: var-get($theme, 'toggle-button-background-focus--border');

src/components/select/themes/shared/select.fluent.scss

@@ -36,6 +36,10 @@ $focused-border-width: rem(2px);
 }
 
 :host(:focus-within) {
+    [part~='toggle-icon'] {
+        background: var-get($theme, 'toggle-button-background-focus');
+    }
+
     igc-input[readonly]:not([disabled])::part(container) {
         border-width: #{$focused-border-width};
     }

src/components/select/themes/shared/select.indigo.scss

@@ -33,6 +33,12 @@ $input-theme: input-theme.$indigo;
     padding: rem(3px);
 }
 
+:host(:hover) {
+    [part~='toggle-icon'] {
+        color: var-get($theme, 'toggle-button-foreground-focus');
+    }
+}
+
 :host(:focus-within) {
     igc-input::part(label) {
         color: var-get($input-theme, 'focused-secondary-color');

src/components/textarea/themes/shared/textarea.material.scss

@@ -330,6 +330,22 @@ textarea {
     }
 }
 
+:host([outlined]:hover) {
+    [part='notch'],
+    [part='start'],
+    [part='end'],
+    [part='filler'] {
+        border-color: var-get($theme, 'hover-border-color');
+    }
+
+    [part~='container'][part~='filled'],
+    [part~='container'][part~='placeholder'] {
+        [part='notch'] {
+            border-block-start-color: transparent;
+        }
+    }
+}
+
 :host([outlined]:focus-within) {
     [part='filler'],
     [part='notch'] {