refactor: register and read CSS custom property directly

Author: vursen

packages/form-layout/src/layouts/auto-responsive-layout.js

@@ -172,8 +172,7 @@ export class AutoResponsiveLayout extends AbstractLayout {
 
   /** @private */
   get __minWidthLabelsAside() {
-    const { backgroundPositionY } = getComputedStyle(this.host.$.layout, '::before');
-    return parseFloat(backgroundPositionY);
+    return parseFloat(getComputedStyle(this.host).getPropertyValue('--_min-width-labels-aside'));
   }
 
   /** @private */

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

@@ -7,6 +7,13 @@ import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
+CSS.registerProperty({
+  name: '--_min-width-labels-aside',
+  syntax: '<length>',
+  inherits: false,
+  initialValue: '0px',
+});
+
 addGlobalThemeStyles(
   'vaadin-form-layout-base',
   css`
@@ -132,10 +139,6 @@ export const formLayoutStyles = css`
     width: var(--_max-width);
   }
 
-  :host([auto-responsive]) #layout::before {
-    background-position-y: var(--_min-width-labels-aside);
-  }
-
   :host([auto-responsive]) #layout ::slotted(*) {
     /* Make form items inherit label position from the layout */
     --_form-item-labels-above: inherit;