fix: add missing focused state attribute (#34)

src/vaadin-custom-field-mixin.html

@@ -92,6 +92,15 @@
         }
       });
 
+      this.addEventListener('focusin', () => this.setAttribute('focused', ''));
+
+      this.addEventListener('focusout', e => {
+        const activeElement = this.getRootNode().activeElement;
+        if (!this.inputs.some(el => activeElement === el || el.shadowRoot && el.shadowRoot.contains(activeElement))) {
+          this.removeAttribute('focused');
+        }
+      });
+
       var uniqueId = Vaadin.CustomFieldMixin._uniqueId = 1 + Vaadin.CustomFieldMixin._uniqueId || 1;
       this.__errorId = `${this.constructor.is}-error-${uniqueId}`;
       this.__labelId = `${this.constructor.is}-label-${uniqueId}`;

src/vaadin-custom-field.html

@@ -85,6 +85,7 @@
        * -------------|-------------|------------
        * `has-label`  | Set when the field has a label | :host
        * `invalid`    | Set when the field is invalid | :host
+       * `focused`    | Set when the field contains focus | :host
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *

test/custom-field-basic-test.html

@@ -110,6 +110,18 @@
 
       });
 
+      describe('focused', function() {
+        it('should set focused attribute on input focusin', () => {
+          customField.inputs[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+          expect(customField.hasAttribute('focused')).to.be.true;
+        });
+
+        it('should remove focused attribute on input focusout', () => {
+          customField.inputs[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+          customField.inputs[0].dispatchEvent(new CustomEvent('focusout', {composed: true, bubbles: true}));
+          expect(customField.hasAttribute('focused')).to.be.false;
+        });
+      });
     });
   </script>
 </body>

test/visual/test.js

@@ -22,7 +22,12 @@ gemini.suite('vaadin-custom-field', function(rootSuite) {
       suite
         .setUrl(`default.html?theme=${theme}`)
         .setCaptureElements('#default-tests')
-        .capture('default');
+        .capture('default')
+        .capture('focused', function(actions) {
+          actions.executeJS(function(window) {
+            window.document.querySelector('vaadin-custom-field').setAttribute('focused', '');
+          });
+        });
     });
 
     gemini.suite(`alignment-tests-${theme}`, function(suite) {

theme/lumo/vaadin-custom-field-styles.html

@@ -48,6 +48,21 @@
       :host([invalid]) [part="error-message"]:not(:empty)::after {
         height: calc(0.4em + var(--lumo-space-xs));
       }
+
+      :host([focused]:not([disabled])) [part="label"] {
+        color: var(--lumo-primary-text-color);
+      }
+
+      :host(:hover:not([disabled]):not([focused])) [part="label"] {
+        color: var(--lumo-body-text-color);
+      }
+
+      /* Touch device adjustment */
+      @media (pointer: coarse) {
+        :host(:hover:not([disabled]):not([focused])) [part="label"] {
+          color: var(--lumo-secondary-text-color);
+        }
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-custom-field-styles.html

@@ -55,6 +55,10 @@
       :host([has-label]) ::slotted(vaadin-time-picker) {
         margin-top: -8px;
       }
+
+      :host([focused]:not([invalid])) [part="label"] {
+        color: var(--material-primary-text-color);
+      }
     </style>
   </template>
 </dom-module>