refactor: add stories

src/components/input/bl-input.stories.mdx

@@ -79,7 +79,10 @@ import { extraPadding } from '../../utilities/chromatic-decorators';
     },
     helpText: {
       control: 'text'
-    }
+    },
+    error: {
+      control: 'text',
+    },
   }}
 />
 
@@ -106,6 +109,7 @@ export const SingleInputTemplate = (args) => html`<bl-input
     step='${ifDefined(args.step)}'
     icon='${ifDefined(args.icon)}'
     size='${ifDefined(args.size)}'
+    error='${ifDefined(args.error)}'
   >${args.slot?.()}</bl-input>`
 
 export const SizeVariantsTemplate = args => html`
@@ -249,20 +253,39 @@ Input validation will run after user enters a value and go out from the input. I
   </Story>
 </Canvas>
 
-Validation error messages are used from default browser error messages by default. If you want you can override error message by setting `invalid-text` attribute.
+### Custom Error Text
+
+Validation error messages are used from default browser error messages by default. If you want to override, you can do it in a native-like structure as below.
+
+```html
+<bl-input id="input" required />
+
+<script>
+  const blInput = document.getElementById("input");
+  blInput.addEventListener("bl-input", (e) => {
+    if(e.target.validity.valueMissing){
+      e.target.setCustomValidity("Custom Error Text");
+    }else{
+      e.target.setCustomValidity("");
+    }
+  });
+</script>
+```
+
+### Custom Validation
+
+If you want to use a different validation than all validations, you can do this with the `error` attribute. *Native validators will always be superior to custom errors.*
+
+<bl-alert icon variant="warning">When you use this attribute, the `dirty` prop will instantly become true.</bl-alert>
 
 <Canvas>
-  <Story name="Custom Error Message"
-         args={{ type: 'text', label: 'User Name', required: true, customInvalidText: 'This field is mandatory' }}
+  <Story name="Custom Validation"
+         args={{ type: 'text', label: 'User Name', error: 'I am custom validation' }}
   >
     {SingleInputTemplate.bind({})}
   </Story>
 </Canvas>
 
-You can also set input validation as invalid by calling `forceCustomError()` method of the input. In this case input will be in invalid state and will report
-its validity. Error message can be set with `invalid-text`. To clear this error state you would call `clearCustomError()` method. With the help of these 2 methods
-you can run your custom validation logic outside of the basic validation rules we provide with validation attributes.
-
 ## Input Sizes
 
 Inputs have 3 size options: `large`, `medium` and `small`. `medium` size is default and if you want to show a large or small input you can set `size` attribute.

src/components/input/bl-input.ts

@@ -335,7 +335,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
       this.requestUpdate();
     }
 
-    if (changedProperties.has("error")) {
+    if (changedProperties.has("error") && this.error && !this.dirty) {
       this.reportValidity();
     }
   }

src/components/textarea/bl-textarea.stories.mdx

@@ -50,6 +50,9 @@ import { extraPadding } from '../../utilities/chromatic-decorators';
     },
     customInvalidText: {
       control: 'text'
+    },
+    error: {
+      control: 'text'
     }
   }}
 />
@@ -70,6 +73,7 @@ export const TextareaTemplate = (args) => html`
   max-rows='${ifDefined(args.maxRows)}'
   expand='${ifDefined(args.expand)}'
   size='${ifDefined(args.size)}'
+  error='${ifDefined(args.error)}'
   character-counter='${ifDefined(args.characterCounter)}'></bl-textarea>`
 
 # Textarea
@@ -227,6 +231,39 @@ Containing form submit also triggers validation. By default it uses browsers nat
   </Story>
 </Canvas>
 
+### Custom Error Text
+
+Validation error messages are used from default browser error messages by default. If you want to override, you can do it in a native-like structure as below.
+
+```html
+<bl-textarea id="textarea" required />
+
+<script>
+  const blTextarea = document.getElementById("textarea");
+  blTextarea.addEventListener("bl-input", (e) => {
+    if(e.target.validity.valueMissing){
+      e.target.setCustomValidity("Custom Error Text");
+    }else{
+      e.target.setCustomValidity("");
+    }
+  });
+</script>
+```
+
+### Custom Validation
+
+If you want to use a different validation than all validations, you can do this with the `error` attribute. *Native validators will always be superior to custom errors.*
+
+<bl-alert icon variant="warning">When you use this attribute, the `dirty` prop will instantly become true.</bl-alert>
+
+<Canvas>
+  <Story name="Custom Validation"
+         args={{ type: 'text', label: 'User Name', error: 'I am custom validation' }}
+  >
+    {TextareaTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## Using within a form
 
 Textarea component uses [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) to associate with it's parent form automatically.

src/components/textarea/bl-textarea.ts

@@ -209,7 +209,7 @@ export default class BlTextarea extends FormControlMixin(LitElement) {
       this.requestUpdate();
     }
 
-    if (changedProperties.has("error")) {
+    if (changedProperties.has("error") && this.error && !this.dirty) {
       this.reportValidity();
     }
   }

src/utilities/form-control.ts

@@ -10,7 +10,6 @@ const validityStates: Array<keyof ValidityState> = [
   "stepMismatch",
   "badInput",
   "patternMismatch",
-  "customError",
 ];
 
 export const innerInputValidators: SyncValidator[] = validityStates.map(key => ({