fix(validate): add attributes for validation states

packages/validate/src/ValidateMixin.js

@@ -119,9 +119,13 @@ export const ValidateMixin = dedupeMixin(
           },
           errorState: {
             type: Boolean,
+            attribute: 'error-state',
+            reflect: true,
           },
           errorShow: {
             type: Boolean,
+            attribute: 'error-show',
+            reflect: true,
           },
           warningValidators: {
             type: Object,
@@ -131,9 +135,13 @@ export const ValidateMixin = dedupeMixin(
           },
           warningState: {
             type: Boolean,
+            attribute: 'warning-state',
+            reflect: true,
           },
           warningShow: {
             type: Boolean,
+            attribute: 'warning-show',
+            reflect: true,
           },
           infoValidators: {
             type: Object,
@@ -143,9 +151,13 @@ export const ValidateMixin = dedupeMixin(
           },
           infoState: {
             type: Boolean,
+            attribute: 'info-state',
+            reflect: true,
           },
           infoShow: {
             type: Boolean,
+            attribute: 'info-show',
+            reflect: true,
           },
           successValidators: {
             type: Object,
@@ -155,12 +167,17 @@ export const ValidateMixin = dedupeMixin(
           },
           successState: {
             type: Boolean,
+            attribute: 'success-state',
+            reflect: true,
           },
           successShow: {
             type: Boolean,
+            attribute: 'success-show',
+            reflect: true,
           },
           invalid: {
             type: Boolean,
+            reflect: true,
           },
           message: {
             type: Boolean,

packages/validate/test/ValidateMixin.test.js

@@ -195,6 +195,48 @@ describe('ValidateMixin', () => {
     );
   });
 
+  it('sets attribute "(error|warning|info|success|invalid)-state"', async () => {
+    const el = await fixture(html`<${tag}></${tag}>`);
+    el.errorState = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('error-state'), 'has error-state attribute').to.be.true;
+
+    el.warningState = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('warning-state'), 'has warning-state attribute').to.be.true;
+
+    el.infoState = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('info-state'), 'has info-state attribute').to.be.true;
+
+    el.successState = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('success-state'), 'has error-state attribute').to.be.true;
+
+    el.invalid = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('invalid'), 'has invalid attribute').to.be.true;
+  });
+
+  it('sets attribute "(error|warning|info|success)-show"', async () => {
+    const el = await fixture(html`<${tag}></${tag}>`);
+    el.errorShow = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('error-show'), 'has error-show attribute').to.be.true;
+
+    el.warningShow = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('warning-show'), 'has warning-show attribute').to.be.true;
+
+    el.infoShow = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('info-show'), 'has info-show attribute').to.be.true;
+
+    el.successShow = true;
+    await el.updateComplete;
+    expect(el.hasAttribute('success-show'), 'has success-show attribute').to.be.true;
+  });
+
   describe(`Validators ${suffixName}`, () => {
     function isCat(modelValue, opts) {
       const validateString = opts && opts.number ? `cat${opts.number}` : 'cat';