Добавил состояния ошибок элементов форм

package.json

@@ -26,13 +26,23 @@
       "alert": [],
       "btn": [],
       "to-top": [],
-      "field-text": [],
-      "field-checkbox": [],
-      "field-radio": [],
+      "field-text": [
+        "--error"
+      ],
+      "field-checkbox": [
+        "__input-wrap--error"
+      ],
+      "field-radio": [
+        "__input-wrap--error"
+      ],
       "field-toggler": [],
-      "field-file": [],
+      "field-file": [
+        "--error"
+      ],
       "field-range": [],
-      "field-select": [],
+      "field-select": [
+        "--error"
+      ],
       "field-actions": [],
       "form": [],
       "dropdown": [],

src/blocks-demo.html

@@ -752,6 +752,16 @@
         </span>
       </label>
 
+      <label class="field-text  field-text--error">
+        <span class="field-text__name">Текстовое поле в ошибочном состоянии — модификатор <code>field-text--error</code></span>
+        <span class="field-text__input-wrap">
+          <input class="field-text__input" type="text" placeholder="input[type=text]">
+          <span class="field-text__help-text">Описание ошибки.</span>
+        </span>
+      </label>
+
+      <p class="alert  alert--warning">Стилизация ошибочного состояния вынесена в отдельный файл.</p>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
@@ -837,11 +847,14 @@
             <div class="field-checkbox__help-text">Пояснение не обязательно.</div>
           </div>
         </div>
-        <div class="field-checkbox__input-wrap">
+        <div class="field-checkbox__input-wrap  field-checkbox__input-wrap--error">
           <label class="field-checkbox__name">
             <input class="field-checkbox__input" type="checkbox">
-            <span class="field-checkbox__name-text">Текст у флажка</span>
+            <span class="field-checkbox__name-text">Ошибочный флажок</span>
           </label>
+          <div class="field-checkbox__help-text-wrap">
+            <div class="field-checkbox__help-text">У обертки дополнительно дописан <code>field-checkbox__input-wrap--error</code></div>
+          </div>
         </div>
         <div class="field-checkbox__input-wrap">
           <label class="field-checkbox__name">
@@ -851,6 +864,8 @@
         </div>
       </div>
 
+      <p class="alert  alert--warning">Стилизация ошибочного состояния вынесена в отдельный файл.</p>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
@@ -873,10 +888,10 @@
             <code>      &lt;div class="field-checkbox__help-text">Пояснение не обязательно.&lt;/div></code>
             <code>    &lt;/div></code>
             <code>  &lt;/div></code>
-            <code>  &lt;div class="field-checkbox__input-wrap"></code>
+            <code>  &lt;div class="field-checkbox__input-wrap  field-checkbox__input-wrap--error"></code>
             <code>    &lt;label class="field-checkbox__name"></code>
             <code>      &lt;input class="field-checkbox__input" type="checkbox"></code>
-            <code>      &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
+            <code>      &lt;span class="field-checkbox__name-text">Ошибочный флажок&lt;/span></code>
             <code>    &lt;/label></code>
             <code>  &lt;/div></code>
             <code>  &lt;div class="field-checkbox__input-wrap"></code>
@@ -916,11 +931,14 @@
             <div class="field-radio__help-text">Пояснение не обязательно.</div>
           </div>
         </div>
-        <div class="field-radio__input-wrap">
+        <div class="field-radio__input-wrap  field-radio__input-wrap--error">
           <label class="field-radio__name">
             <input class="field-radio__input" type="radio" name="demo-radio">
-            <span class="field-radio__name-text">Текст у радиокнопки</span>
+            <span class="field-radio__name-text">Ошибочная радиокнопка</span>
           </label>
+          <div class="field-radio__help-text-wrap">
+            <div class="field-checkbox__help-text">У обертки дополнительно дописан <code>field-radio__input-wrap--error</code></div>
+          </div>
         </div>
         <div class="field-radio__input-wrap">
           <label class="field-radio__name">
@@ -930,6 +948,8 @@
         </div>
       </div>
 
+      <p class="alert  alert--warning">Стилизация ошибочного состояния вынесена в отдельный файл.</p>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
@@ -1019,6 +1039,17 @@
         </label>
       </div>
 
+      <div class="field-file  field-file--error">
+        <div class="field-file__name">Выбор файлов</div>
+        <label class="field-file__input-wrap">
+          <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+          <span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span>
+          <span class="field-file__help-text">Дописан модификатор <code>field-file--error</code>.</span>
+        </label>
+      </div>
+
+      <p class="alert  alert--warning">Стилизация ошибочного состояния вынесена в отдельный файл.</p>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
@@ -1085,6 +1116,16 @@
         </span>
       </label>
 
+      <label class="field-select  field-select--error">
+        <span class="field-select__name">Селект с ошибкой — модификатор <code>field-select--error</code></span>
+        <span class="field-select__select-wrap">
+          <select class="field-select__select">
+            <option>Значение 1</option>
+          </select>
+          <span class="field-select__help-text">Описание ошибки.</span>
+        </span>
+      </label>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">

src/blocks/field-checkbox/field-checkbox__input-wrap--error.scss

+// В этом файле должны быть стили только для БЭМ-блока field-checkbox, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$color-danger:                hsl(2, 64%, 58%) !default;
+
+.field-checkbox {
+
+  &__input-wrap--error {
+
+    .field-checkbox__name-text,
+    .field-checkbox__help-text {
+      color: $color-danger;
+    }
+  }
+}

src/blocks/field-file/field-file--error.scss

+// В этом файле должны быть стили только для БЭМ-блока field-file, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$color-danger:                hsl(2, 64%, 58%) !default;
+
+.field-file {
+
+  &--error {
+
+    .field-file__name,
+    .field-file__name-text,
+    .field-file__input,
+    .field-file__help-text {
+      color: $color-danger;
+    }
+
+    .field-file__name-text {
+      border-color: $color-danger;
+      background-color: lighten($color-danger, 35%);
+    }
+  }
+}

src/blocks/field-radio/field-radio__input-wrap--error.scss

+// В этом файле должны быть стили только для БЭМ-блока field-radio, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$color-danger:                hsl(2, 64%, 58%) !default;
+
+.field-radio {
+
+  &__input-wrap--error {
+
+    .field-radio__name-text,
+    .field-radio__help-text {
+      color: $color-danger;
+    }
+  }
+}

src/blocks/field-select/field-select--error.scss

+// В этом файле должны быть стили только для БЭМ-блока field-select, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$color-danger:                hsl(2, 64%, 58%) !default;
+
+.field-select {
+
+  &--error {
+
+    .field-select__name,
+    .field-select__select,
+    .field-select__help-text {
+      color: $color-danger;
+    }
+
+    .field-select__select {
+      border-color: $color-danger;
+      background-color: lighten($color-danger, 35%);
+    }
+  }
+}

src/blocks/field-text/field-text--error.scss

+// В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$color-danger:                hsl(2, 64%, 58%) !default;
+
+.field-text {
+
+  &--error {
+
+    .field-text__name,
+    .field-text__input,
+    .field-text__help-text {
+      color: $color-danger;
+    }
+
+    .field-text__input {
+      border-color: $color-danger;
+      background-color: lighten($color-danger, 35%);
+    }
+  }
+}