fix!: style form-item required indicator in base styles

packages/form-layout/src/styles/vaadin-form-item-base-styles.js

@@ -33,8 +33,30 @@ export const formItemStyles = css`
     font-size: var(--vaadin-form-item-label-font-size, inherit);
     font-weight: var(--vaadin-form-item-label-font-weight, 500);
     line-height: var(--vaadin-form-item-label-line-height, inherit);
+    position: relative;
     width: var(--_form-item-labels-aside, var(--_label-width, 8em));
     word-break: break-word;
+    box-sizing: border-box;
+  }
+
+  :host([required]) [part='label'] {
+    padding-inline-end: 1em;
+  }
+
+  [part='required-indicator'] {
+    display: inline-block;
+    position: absolute;
+    width: 1em;
+    text-align: center;
+    color: var(--vaadin-input-field-required-indicator-color, var(--vaadin-text-color-secondary));
+  }
+
+  [part='required-indicator']::after {
+    content: var(--vaadin-input-field-required-indicator, '*');
+  }
+
+  :host(:not([required])) [part='required-indicator'] {
+    display: none;
   }
 
   #spacing {

packages/form-layout/test/visual/aura/form-layout.test.js

@@ -1,3 +1,4 @@
+import { nextFrame } from '@vaadin/testing-helpers';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/aura/aura.css';
@@ -50,4 +51,44 @@ describe('form-layout', () => {
       await visualDiff(element, 'basic');
     });
   });
+
+  describe('required indicator', () => {
+    beforeEach(async () => {
+      element = fixtureSync(`
+        <vaadin-form-layout>
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <input required value="Jane" />
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Last Name</label>
+            <input required />
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Email</label>
+            <input required value="jane.doe@example.com" />
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      `);
+
+      await nextFrame();
+
+      // Make the second input validate so that it becomes invalid
+      element.querySelectorAll('input')[1].dispatchEvent(new CustomEvent('change'));
+    });
+
+    it('required indicator - labels aside', async () => {
+      await visualDiff(element, 'required-indicator-labels-aside');
+    });
+
+    it('required-indicator - labels on top', async () => {
+      element.responsiveSteps = element.responsiveSteps.map((step) => {
+        step.labelsPosition = 'top';
+        return step;
+      });
+      await visualDiff(element, 'required-indicator-labels-on-top');
+    });
+  });
 });

packages/vaadin-lumo-styles/src/components/form-item.css

@@ -14,23 +14,15 @@
     margin-left: calc(var(--lumo-border-radius-m) / 4);
     margin-bottom: var(--lumo-space-xs);
     line-height: 1.333;
+    min-height: 1lh;
   }
 
   [part='required-indicator']::after {
     content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
-    transition: opacity 0.2s;
-    opacity: 0;
     color: var(
       --vaadin-input-field-required-indicator-color,
       var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
     );
-    position: relative;
-    width: 1em;
-    text-align: center;
-  }
-
-  :host([required]) [part='required-indicator']::after {
-    opacity: 1;
   }
 
   :host([invalid]) [part='required-indicator']::after {