fix(lib): fix .was-validated for .control-item

Author: louismaximepiton

scss/forms/_control-item.scss

@@ -13,13 +13,24 @@
   }
 
   // stylelint-disable selector-no-qualifying-type
-  &.was-validated:has(input:invalid) .control-item-error-message,
   &:has(input.is-invalid) .control-item-error-message {
     display: block;
   }
   // stylelint-enable selector-no-qualifying-type
 }
 
+.was-validated {
+  .control-items-list,
+  .switch-item-container,
+  .checkbox-item-container {
+    // stylelint-disable selector-no-qualifying-type
+    &:has(input:invalid) .control-item-error-message {
+      display: block;
+    }
+    // stylelint-enable selector-no-qualifying-type
+  }
+}
+
 .control-item-error-message {
   padding: $ouds-control-item-space-padding-block-top-error-text $ouds-control-item-space-padding-inline 0;
   color: var(--#{$prefix}color-content-status-negative);
@@ -150,6 +161,22 @@
   &:has(input:invalid:active) {
     --#{$prefix}control-item-label-color: #{$ouds-color-action-negative-pressed};
   }
+
+  .control-item-indicator:invalid {
+    --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-enabled};
+
+    &:hover {
+      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-hover};
+    }
+
+    &:focus-visible {
+      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-focus};
+    }
+
+    &:active {
+      --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-pressed};
+    }
+  }
 }
 
 //
@@ -417,27 +444,27 @@
 .control-item-divider {
   padding-bottom: calc($ouds-control-item-space-padding-block-default - $ouds-divider-border-width);
   border-bottom: $ouds-divider-border-width solid $ouds-color-border-default;
+}
 
-  &:has(.is-invalid),
-  .was-validated &:has(input:invalid) {
-    border-color: var(--#{$prefix}control-item-label-color);
-  }
+.control-item-divider:has(.is-invalid),
+.was-validated .control-item-divider:has(input:invalid) {
+  border-color: var(--#{$prefix}control-item-label-color);
 }
 
 .control-item-reverse {
   flex-direction: row-reverse;
+}
 
-  // stylelint-disable selector-no-qualifying-type
-  &:has(input.is-invalid),
-  .was-validated &:has(input:invalid) {
-    --#{$prefix}control-item-error-icon-offset-right: unset;
-    --#{$prefix}control-item-error-icon-offset-left: var(--#{$prefix}control-item-error-icon-offset);
+// stylelint-disable selector-no-qualifying-type
+.control-item-reverse:has(input.is-invalid),
+.was-validated .control-item-reverse:has(input:invalid) {
+  --#{$prefix}control-item-error-icon-offset-right: unset;
+  --#{$prefix}control-item-error-icon-offset-left: var(--#{$prefix}control-item-error-icon-offset);
 
-    padding-right: $ouds-control-item-space-padding-inline;
-    padding-left: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
-  }
-  // stylelint-enable selector-no-qualifying-type
+  padding-right: $ouds-control-item-space-padding-inline;
+  padding-left: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
 }
+// stylelint-enable selector-no-qualifying-type
 
 
 //
@@ -663,6 +690,12 @@
 
 .was-validated .radio-button-item-outlined:has(input:invalid) {
   border-color: var(--#{$prefix}control-item-label-color);
+
+  &:hover,
+  &:active,
+  &:has(input:checked) {
+    --#{$prefix}control-item-error-icon-offset: #{$ouds-control-item-space-padding-inline + $ouds-control-item-space-padding-inline-error-icon - $ouds-divider-border-width};
+  }
 }
 
 
@@ -700,6 +733,31 @@
   }
 }
 
+.was-validated {
+  .switch-item,
+  .form-switch {
+    // stylelint-disable selector-no-qualifying-type
+    &:has(input:invalid) {
+      --#{$prefix}control-item-error-icon-offset-right: unset;
+      --#{$prefix}control-item-error-icon-offset-left: var(--#{$prefix}control-item-error-icon-offset);
+
+      padding-right: $ouds-control-item-space-padding-inline;
+      padding-left: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
+    }
+    // stylelint-enable selector-no-qualifying-type
+
+    // stylelint-disable selector-no-qualifying-type
+    &.control-item-reverse:has(input:invalid) {
+      --#{$prefix}control-item-error-icon-offset-right: var(--#{$prefix}control-item-error-icon-offset);
+      --#{$prefix}control-item-error-icon-offset-left: unset;
+
+      padding-right: calc($ouds-control-item-space-padding-inline + $ouds-control-item-size-icon + $ouds-control-item-space-column-gap);
+      padding-left: $ouds-control-item-space-padding-inline;
+    }
+    // stylelint-enable selector-no-qualifying-type
+  }
+}
+
 .switch-standalone {
   @extend %control-item-standalone;
   padding: 0;

scss/mixins/_forms.scss

@@ -139,30 +139,6 @@
       }
     }
 
-    .control-item-indicator {
-      @include form-validation-state-selector($state) {
-        --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-enabled}; // OUDS mod
-        // OUDS mod: no `border-color`
-
-        // OUDS mod: no `:checked`
-        // OUDS mod: no `:focus`
-
-        // OUDS mod
-        &:hover {
-          --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-hover};
-        }
-
-        &:focus-visible {
-          --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-focus};
-        }
-
-        &:active {
-          --#{$prefix}control-item-indicator-color: #{$ouds-color-action-negative-pressed};
-        }
-        // // End mod
-      }
-    }
-
     // OUDS mod no form-check-inline
   }
   // End mod