iss-ctrl 0.0.20 → 0.0.22

package/upgrade.scss

@@ -74,35 +74,47 @@ mat-form-field.mat-mdc-form-field.mat-focused
   --placeholder-fc: var(--dark-gray) !important;
 }
 
-
-// Outline states. Focus is not a state: while the user is in a field the outline keeps the
-// colour it had before the caret arrived, so the only thing the outline reports is validity.
+// Outline states.
 //
-// --input-border-idle snapshots the field's resting border on the mat-form-field element, which
-// is also where per-instance overrides such as .filter-input redefine it — so a field with a
-// custom resting border keeps that one while focused instead of falling back to the default.
+// Two audiences share this stylesheet: the iss-ctrl controls, whose outline reports validity,
+// and every other mat-form-field in the consuming app, which keeps the basic-ui behaviour it
+// had before. Only the .iss-ctrl block below may be unscoped-looking — everything outside it
+// lands on app markup too, so it stays as it was.
+
+// Global. Focus is not a state: a focused field keeps the outline it had before the caret
+// arrived rather than turning Material's purple.
 mat-form-field {
   --input-border-idle: var(--input-border-active, 1px solid var(--black));
+  --input-border-valid: 1px solid var(--black);
 }
 
 mat-form-field.mat-mdc-form-field .mdc-text-field--focused {
   --input-border-active: var(--input-border-idle);
 }
 
-// An empty field rests on the plain border, and stays there while the caret is in it. The base
-// stylesheet keys that off Material's mat-form-field-hide-placeholder, which Material drops as
-// soon as the field is focused — so the emptiness comes from the control itself instead, through
-// the iss-ctrl-empty host class that ControlBase.isEmpty() reflects.
-.iss-ctrl-empty > mat-form-field.mat-mdc-form-field .mdc-text-field {
+// The child combinator keeps an invalid *form* ancestor from painting every field inside it red.
+.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
+  --input-border-active: var(--input-border-invalid);
+}
+
+// iss-ctrl controls only, via the class ControlBase puts on every control host. Here the outline
+// reports validity and nothing else: light while the value is not yet good, dark once it is,
+// red once the user has left an invalid field behind.
+.iss-ctrl > mat-form-field.mat-mdc-form-field .mdc-text-field,
+.iss-ctrl > mat-form-field.mat-mdc-form-field .mdc-text-field--focused {
   --input-border-active: var(--input-border);
 }
 
-// Red belongs to a field the user has actually left in a bad state. Angular puts ng-touched and
-// ng-invalid on the control host (iss-ctrl-*) — the same condition <iss-validation-message-viewer>
-// uses — and that is the only reliable signal here: the mat control is bound to the control's
-// internal FormControl, which carries no validators, so Material's own --invalid state stays off
-// for everything but the errors it raises itself (a datepicker parse/min/max failure, say).
-// The child combinator keeps an invalid *form* ancestor from painting every field inside it red.
-.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
+// :not(.iss-ctrl-empty) is what keeps an untouched optional field out of the dark state: empty
+// and optional is ng-valid too, and should still read as resting rather than as complete.
+.iss-ctrl.ng-valid:not(.iss-ctrl-empty) > mat-form-field.mat-mdc-form-field .mdc-text-field {
+  --input-border-active: var(--input-border-valid);
+}
+
+// Angular puts ng-touched and ng-invalid on the control host — the same condition
+// <iss-validation-message-viewer> uses. It stays necessary alongside Material's own --invalid
+// state: ControlBase.errorStateMatcher reports the host control to the mat control, but a
+// control used without a host NgControl still has only these classes to go on.
+.iss-ctrl.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
   --input-border-active: var(--input-border-invalid);
 }