@vaadin/vaadin-lumo-styles 25.0.0-alpha8 → 25.0.0-beta1

package/components/grid-sorter.css

@@ -13,7 +13,8 @@
   font-style: normal;
 }
 
-:is(:root, :host)::before {
-  --vaadin-grid-sorter-lumo-inject: 1;
-  --vaadin-grid-sorter-lumo-inject-modules: lumo_components_grid-sorter;
+:root::before,
+:host::before {
+  --_lumo-vaadin-grid-sorter-inject: 1;
+  --_lumo-vaadin-grid-sorter-inject-modules: lumo_components_grid-sorter;
 }

package/components/grid-tree-toggle.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/grid-tree-toggle.css';
 
-:is(:root, :host)::before {
-  --vaadin-grid-tree-toggle-lumo-inject: 1;
-  --vaadin-grid-tree-toggle-lumo-inject-modules: lumo_components_grid-tree-toggle;
+:root::before,
+:host::before {
+  --_lumo-vaadin-grid-tree-toggle-inject: 1;
+  --_lumo-vaadin-grid-tree-toggle-inject-modules: lumo_components_grid-tree-toggle;
 }

package/components/grid.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/grid.css';
 
-:is(:root, :host)::before {
-  --vaadin-grid-lumo-inject: 1;
-  --vaadin-grid-lumo-inject-modules: lumo_components_grid;
+:root::before,
+:host::before {
+  --_lumo-vaadin-grid-inject: 1;
+  --_lumo-vaadin-grid-inject-modules: lumo_components_grid;
 }

package/components/horizontal-layout.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/horizontal-layout.css';
 
-:is(:root, :host)::before {
-  --vaadin-horizontal-layout-lumo-inject: 1;
-  --vaadin-horizontal-layout-lumo-inject-modules: lumo_components_horizontal-layout;
+:root::before,
+:host::before {
+  --_lumo-vaadin-horizontal-layout-inject: 1;
+  --_lumo-vaadin-horizontal-layout-inject-modules: lumo_components_horizontal-layout;
 }

package/components/icon.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/icon.css';
 
-:is(:root, :host)::before {
-  --vaadin-icon-lumo-inject: 1;
-  --vaadin-icon-lumo-inject-modules: lumo_components_icon;
+:root::before,
+:host::before {
+  --_lumo-vaadin-icon-inject: 1;
+  --_lumo-vaadin-icon-inject-modules: lumo_components_icon;
 }

package/components/index.css

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './accordion.css';
+@import './app-layout.css';
+@import './avatar-group.css';
+@import './avatar.css';
+@import './button.css';
+@import './card.css';
+@import './charts.css';
+@import './checkbox-group.css';
+@import './checkbox.css';
+@import './combo-box.css';
+@import './confirm-dialog.css';
+@import './context-menu.css';
+@import './crud.css';
+@import './custom-field.css';
+@import './dashboard.css';
+@import './date-picker.css';
+@import './date-time-picker.css';
+@import './details-summary.css';
+@import './details.css';
+@import './dialog.css';
+@import './drawer-toggle.css';
+@import './email-field.css';
+@import './field-highlighter.css';
+@import './form-item.css';
+@import './form-layout.css';
+@import './grid-filter-column.css';
+@import './grid-pro-edit-column.css';
+@import './grid-pro.css';
+@import './grid-selection-column.css';
+@import './grid-sort-column.css';
+@import './grid-tree-column.css';
+@import './grid.css';
+@import './horizontal-layout.css';
+@import './icon.css';
+@import './input-container.css';
+@import './integer-field.css';
+@import './item.css';
+@import './list-box.css';
+@import './login.css';
+@import './map.css';
+@import './master-detail-layout.css';
+@import './menu-bar.css';
+@import './message-input.css';
+@import './message-list.css';
+@import './multi-select-combo-box.css';
+@import './notification.css';
+@import './number-field.css';
+@import './overlay.css';
+@import './password-field.css';
+@import './popover.css';
+@import './progress-bar.css';
+@import './radio-button.css';
+@import './radio-group.css';
+@import './rich-text-editor.css';
+@import './scroller.css';
+@import './select.css';
+@import './side-nav.css';
+@import './split-layout.css';
+@import './tabs.css';
+@import './tabsheet.css';
+@import './text-area.css';
+@import './text-field.css';
+@import './time-picker.css';
+@import './tooltip.css';
+@import './upload.css';
+@import './vertical-layout.css';

package/components/input-container.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/input-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-input-container-lumo-inject: 1;
-  --vaadin-input-container-lumo-inject-modules: lumo_components_input-container;
+:root::before,
+:host::before {
+  --_lumo-vaadin-input-container-inject: 1;
+  --_lumo-vaadin-input-container-inject-modules: lumo_components_input-container;
 }

package/components/integer-field.css

@@ -12,9 +12,10 @@
 @import '../src/components/number-field.css';
 @import './input-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-integer-field-lumo-inject: 1;
-  --vaadin-integer-field-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-integer-field-inject: 1;
+  --_lumo-vaadin-integer-field-inject-modules:
     lumo_mixins_field-label,
     lumo_mixins_field-required,
     lumo_mixins_field-error-message,

package/components/item.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/item.css';
 
-:is(:root, :host)::before {
-  --vaadin-item-lumo-inject: 1;
-  --vaadin-item-lumo-inject-modules: lumo_components_item;
+:root::before,
+:host::before {
+  --_lumo-vaadin-item-inject: 1;
+  --_lumo-vaadin-item-inject-modules: lumo_components_item;
 }

package/components/list-box.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/list-box.css';
 
-:is(:root, :host)::before {
-  --vaadin-list-box-lumo-inject: 1;
-  --vaadin-list-box-lumo-inject-modules: lumo_components_list-box;
+:root::before,
+:host::before {
+  --_lumo-vaadin-list-box-inject: 1;
+  --_lumo-vaadin-list-box-inject-modules: lumo_components_list-box;
 }

package/components/login-form.css

@@ -8,7 +8,8 @@
 @import './password-field.css';
 @import './text-field.css';
 
-:is(:root, :host)::before {
-  --vaadin-login-form-wrapper-lumo-inject: 1;
-  --vaadin-login-form-wrapper-lumo-inject-modules: lumo_components_login-form-wrapper;
+:root::before,
+:host::before {
+  --_lumo-vaadin-login-form-wrapper-inject: 1;
+  --_lumo-vaadin-login-form-wrapper-inject-modules: lumo_components_login-form-wrapper;
 }

package/components/login.css

@@ -7,9 +7,10 @@
 @import '../src/components/login-overlay-wrapper.css';
 @import './login-form.css';
 
-:is(:root, :host)::before {
-  --vaadin-login-overlay-wrapper-lumo-inject: 1;
-  --vaadin-login-overlay-wrapper-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-login-overlay-wrapper-inject: 1;
+  --_lumo-vaadin-login-overlay-wrapper-inject-modules:
     lumo_mixins_overlay,
     lumo_components_login-overlay-wrapper;
 }

package/components/map.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/map.css';
 
-:is(:root, :host)::before {
-  --vaadin-map-lumo-inject: 1;
-  --vaadin-map-lumo-inject-modules: lumo_components_map;
+:root::before,
+:host::before {
+  --_lumo-vaadin-map-inject: 1;
+  --_lumo-vaadin-map-inject-modules: lumo_components_map;
 }

package/components/master-detail-layout.css

@@ -3,9 +3,18 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import '../src/components/master-detail-layout.css';
-
-:is(:root, :host)::before {
-  --vaadin-master-detail-layout-lumo-inject: 1;
-  --vaadin-master-detail-layout-lumo-inject-modules: lumo_components_master-detail-layout;
+:where(:root),
+:where(:host) {
+  --vaadin-master-detail-layout-backdrop: var(
+    --lumo-shade-20pct
+  );
+  --vaadin-master-detail-layout-detail-background: var(
+    --lumo-base-color
+  );
+  --vaadin-master-detail-layout-detail-shadow:
+    0 0 0 1px var(--lumo-shade-5pct),
+    var(--lumo-box-shadow-m);
+  --vaadin-master-detail-layout-border-color: var(
+    --lumo-contrast-10pct
+  );
 }

package/components/menu-bar.css

@@ -17,31 +17,32 @@
 @import '../src/components/menu-bar-overlay.css';
 @import '../src/components/menu-bar.css';
 
-:is(:root, :host)::before {
-  --vaadin-menu-bar-lumo-inject: 1;
-  --vaadin-menu-bar-lumo-inject-modules: lumo_components_menu-bar;
+:root::before,
+:host::before {
+  --_lumo-vaadin-menu-bar-inject: 1;
+  --_lumo-vaadin-menu-bar-inject-modules: lumo_components_menu-bar;
 
-  --vaadin-menu-bar-overlay-lumo-inject: 1;
-  --vaadin-menu-bar-overlay-lumo-inject-modules:
+  --_lumo-vaadin-menu-bar-overlay-inject: 1;
+  --_lumo-vaadin-menu-bar-overlay-inject-modules:
     lumo_mixins_overlay,
     lumo_mixins_menu-overlay-core,
     lumo_mixins_menu-overlay-ext,
     lumo_components_context-menu-overlay,
     lumo_components_menu-bar-overlay;
 
-  --vaadin-menu-bar-list-box-lumo-inject: 1;
-  --vaadin-menu-bar-list-box-lumo-inject-modules:
+  --_lumo-vaadin-menu-bar-list-box-inject: 1;
+  --_lumo-vaadin-menu-bar-list-box-inject-modules:
     lumo_components_list-box,
     lumo_components_context-menu-list-box;
 
-  --vaadin-menu-bar-item-lumo-inject: 1;
-  --vaadin-menu-bar-item-lumo-inject-modules:
+  --_lumo-vaadin-menu-bar-item-inject: 1;
+  --_lumo-vaadin-menu-bar-item-inject-modules:
     lumo_components_item,
     lumo_components_context-menu-item,
     lumo_components_menu-bar-item;
 
-  --vaadin-menu-bar-button-lumo-inject: 1;
-  --vaadin-menu-bar-button-lumo-inject-modules:
+  --_lumo-vaadin-menu-bar-button-inject: 1;
+  --_lumo-vaadin-menu-bar-button-inject-modules:
     lumo_components_button,
     lumo_components_menu-bar-button;
 }

package/components/message-input-button.css

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './button.css';
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-message-input-button-inject: 1;
+  --_lumo-vaadin-message-input-button-inject-modules: lumo_components_button;
+}

package/components/message-input.css

@@ -4,10 +4,11 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import '../src/components/message-input.css';
-@import './button.css';
+@import './message-input-button.css';
 @import './text-area.css';
 
-:is(:root, :host)::before {
-  --vaadin-message-input-lumo-inject: 1;
-  --vaadin-message-input-lumo-inject-modules: lumo_components_message-input;
+:root::before,
+:host::before {
+  --_lumo-vaadin-message-input-inject: 1;
+  --_lumo-vaadin-message-input-inject-modules: lumo_components_message-input;
 }

package/components/message.css

@@ -6,7 +6,8 @@
 @import '../src/components/message.css';
 @import './avatar.css';
 
-:is(:root, :host)::before {
-  --vaadin-message-lumo-inject: 1;
-  --vaadin-message-lumo-inject-modules: lumo_components_message;
+:root::before,
+:host::before {
+  --_lumo-vaadin-message-inject: 1;
+  --_lumo-vaadin-message-inject-modules: lumo_components_message;
 }

package/components/multi-select-combo-box.css

@@ -23,14 +23,15 @@
 @import '../src/components/multi-select-combo-box-overlay.css';
 @import '../src/components/multi-select-combo-box.css';
 
-:is(:root, :host)::before {
-  --vaadin-multi-select-combo-box-container-lumo-inject: 1;
-  --vaadin-multi-select-combo-box-container-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-multi-select-combo-box-container-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-container-inject-modules:
     lumo_components_input-container,
     lumo_components_multi-select-combo-box-container;
 
-  --vaadin-multi-select-combo-box-overlay-lumo-inject: 1;
-  --vaadin-multi-select-combo-box-overlay-lumo-inject-modules:
+  --_lumo-vaadin-multi-select-combo-box-overlay-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-overlay-inject-modules:
     lumo_mixins_loader,
     lumo_mixins_combo-box-loader,
     lumo_mixins_overlay,
@@ -38,19 +39,19 @@
     lumo_mixins_combo-box-overlay,
     lumo_components_multi-select-combo-box-overlay;
 
-  --vaadin-multi-select-combo-box-chip-lumo-inject: 1;
-  --vaadin-multi-select-combo-box-chip-lumo-inject-modules:
+  --_lumo-vaadin-multi-select-combo-box-chip-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-chip-inject-modules:
     lumo_mixins_field-button,
     lumo_components_multi-select-combo-box-chip;
 
-  --vaadin-multi-select-combo-box-item-lumo-inject: 1;
-  --vaadin-multi-select-combo-box-item-lumo-inject-modules:
+  --_lumo-vaadin-multi-select-combo-box-item-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-item-inject-modules:
     lumo_components_item,
     lumo_components_combo-box-item,
     lumo_components_multi-select-combo-box-item;
 
-  --vaadin-multi-select-combo-box-lumo-inject: 1;
-  --vaadin-multi-select-combo-box-lumo-inject-modules:
+  --_lumo-vaadin-multi-select-combo-box-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-inject-modules:
     lumo_mixins_field-label,
     lumo_mixins_field-required,
     lumo_mixins_field-error-message,

package/components/notification.css

@@ -6,10 +6,11 @@
 @import '../src/components/notification-card.css';
 @import '../src/components/notification-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-notification-container-lumo-inject: 1;
-  --vaadin-notification-container-lumo-inject-modules: lumo_components_notification-container;
+:root::before,
+:host::before {
+  --_lumo-vaadin-notification-container-inject: 1;
+  --_lumo-vaadin-notification-container-inject-modules: lumo_components_notification-container;
 
-  --vaadin-notification-card-lumo-inject: 1;
-  --vaadin-notification-card-lumo-inject-modules: lumo_components_notification-card;
+  --_lumo-vaadin-notification-card-inject: 1;
+  --_lumo-vaadin-notification-card-inject-modules: lumo_components_notification-card;
 }

package/components/number-field.css

@@ -12,9 +12,10 @@
 @import '../src/components/number-field.css';
 @import './input-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-number-field-lumo-inject: 1;
-  --vaadin-number-field-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-number-field-inject: 1;
+  --_lumo-vaadin-number-field-inject-modules:
     lumo_mixins_field-label,
     lumo_mixins_field-required,
     lumo_mixins_field-error-message,

package/components/overlay.css

@@ -5,7 +5,8 @@
  */
 @import '../src/mixins/overlay.css';
 
-:is(:root, :host)::before {
-  --vaadin-overlay-lumo-inject: 1;
-  --vaadin-overlay-lumo-inject-modules: lumo_mixins_overlay;
+:root::before,
+:host::before {
+  --_lumo-vaadin-overlay-inject: 1;
+  --_lumo-vaadin-overlay-inject-modules: lumo_mixins_overlay;
 }

package/components/password-field.css

@@ -14,9 +14,10 @@
 @import '../src/components/password-field.css';
 @import './input-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-password-field-lumo-inject: 1;
-  --vaadin-password-field-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-password-field-inject: 1;
+  --_lumo-vaadin-password-field-inject-modules:
     lumo_mixins_field-label,
     lumo_mixins_field-required,
     lumo_mixins_field-error-message,
@@ -25,8 +26,8 @@
     lumo_mixins_field-base,
     lumo_components_password-field;
 
-  --vaadin-password-field-button-lumo-inject: 1;
-  --vaadin-password-field-button-lumo-inject-modules:
+  --_lumo-vaadin-password-field-button-inject: 1;
+  --_lumo-vaadin-password-field-button-inject-modules:
     lumo_components_button,
     lumo_components_password-field-button;
 }

package/components/popover.css

@@ -6,9 +6,10 @@
 @import '../src/mixins/overlay.css';
 @import '../src/components/popover-overlay.css';
 
-:is(:root, :host)::before {
-  --vaadin-popover-overlay-lumo-inject: 1;
-  --vaadin-popover-overlay-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-popover-overlay-inject: 1;
+  --_lumo-vaadin-popover-overlay-inject-modules:
     lumo_mixins_overlay,
     lumo_components_popover-overlay;
 }

package/components/progress-bar.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/progress-bar.css';
 
-:is(:root, :host)::before {
-  --vaadin-progress-bar-lumo-inject: 1;
-  --vaadin-progress-bar-lumo-inject-modules: lumo_components_progress-bar;
+:root::before,
+:host::before {
+  --_lumo-vaadin-progress-bar-inject: 1;
+  --_lumo-vaadin-progress-bar-inject-modules: lumo_components_progress-bar;
 }

package/components/radio-button.css

@@ -6,9 +6,10 @@
 @import '../src/mixins/checkable-field.css';
 @import '../src/components/radio-button.css';
 
-:is(:root, :host)::before {
-  --vaadin-radio-button-lumo-inject: 1;
-  --vaadin-radio-button-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-radio-button-inject: 1;
+  --_lumo-vaadin-radio-button-inject-modules:
     lumo_mixins_checkable-field,
     lumo_components_radio-button;
 }

package/components/radio-group.css

@@ -11,9 +11,10 @@
 @import '../src/components/radio-group.css';
 @import './radio-button.css';
 
-:is(:root, :host)::before {
-  --vaadin-radio-group-lumo-inject: 1;
-  --vaadin-radio-group-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-radio-group-inject: 1;
+  --_lumo-vaadin-radio-group-inject-modules:
     lumo_mixins_group-field,
     lumo_mixins_field-label,
     lumo_mixins_field-required,

package/components/rich-text-editor.css

@@ -13,14 +13,15 @@
 @import './text-field.css';
 @import './tooltip.css';
 
-:is(:root, :host)::before {
-  --vaadin-rich-text-editor-lumo-inject: 1;
-  --vaadin-rich-text-editor-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-rich-text-editor-inject: 1;
+  --_lumo-vaadin-rich-text-editor-inject-modules:
     lumo_global_typography,
     lumo_components_rich-text-editor;
 
-  --vaadin-rich-text-editor-popup-overlay-lumo-inject: 1;
-  --vaadin-rich-text-editor-popup-overlay-lumo-inject-modules:
+  --_lumo-vaadin-rich-text-editor-popup-overlay-inject: 1;
+  --_lumo-vaadin-rich-text-editor-popup-overlay-inject-modules:
     lumo_mixins_overlay,
     lumo_components_rich-text-editor-popup-overlay;
 }

package/components/scroller.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/scroller.css';
 
-:is(:root, :host)::before {
-  --vaadin-scroller-lumo-inject: 1;
-  --vaadin-scroller-lumo-inject-modules: lumo_components_scroller;
+:root::before,
+:host::before {
+  --_lumo-vaadin-scroller-inject: 1;
+  --_lumo-vaadin-scroller-inject-modules: lumo_components_scroller;
 }

package/components/select.css

@@ -19,9 +19,10 @@
 @import '../src/components/select.css';
 @import './input-container.css';
 
-:is(:root, :host)::before {
-  --vaadin-select-lumo-inject: 1;
-  --vaadin-select-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-select-inject: 1;
+  --_lumo-vaadin-select-inject-modules:
     lumo_mixins_field-label,
     lumo_mixins_field-required,
     lumo_mixins_field-error-message,
@@ -30,19 +31,19 @@
     lumo_mixins_field-base,
     lumo_components_select;
 
-  --vaadin-select-item-lumo-inject: 1;
-  --vaadin-select-item-lumo-inject-modules: lumo_components_item;
+  --_lumo-vaadin-select-item-inject: 1;
+  --_lumo-vaadin-select-item-inject-modules: lumo_components_item;
 
-  --vaadin-select-overlay-lumo-inject: 1;
-  --vaadin-select-overlay-lumo-inject-modules:
+  --_lumo-vaadin-select-overlay-inject: 1;
+  --_lumo-vaadin-select-overlay-inject-modules:
     lumo_mixins_overlay,
     lumo_mixins_menu-overlay-core,
     lumo_mixins_menu-overlay-ext,
     lumo_components_select-overlay;
 
-  --vaadin-select-list-box-lumo-inject: 1;
-  --vaadin-select-list-box-lumo-inject-modules: lumo_components_list-box;
+  --_lumo-vaadin-select-list-box-inject: 1;
+  --_lumo-vaadin-select-list-box-inject-modules: lumo_components_list-box;
 
-  --vaadin-select-value-button-lumo-inject: 1;
-  --vaadin-select-value-button-lumo-inject-modules: lumo_components_select-value-button;
+  --_lumo-vaadin-select-value-button-inject: 1;
+  --_lumo-vaadin-select-value-button-inject-modules: lumo_components_select-value-button;
 }

package/components/side-nav-item.css

@@ -6,9 +6,10 @@
 @import '../src/mixins/field-button.css';
 @import '../src/components/side-nav-item.css';
 
-:is(:root, :host)::before {
-  --vaadin-side-nav-item-lumo-inject: 1;
-  --vaadin-side-nav-item-lumo-inject-modules:
+:root::before,
+:host::before {
+  --_lumo-vaadin-side-nav-item-inject: 1;
+  --_lumo-vaadin-side-nav-item-inject-modules:
     lumo_mixins_field-button,
     lumo_components_side-nav-item;
 }

package/components/side-nav.css

@@ -6,7 +6,8 @@
 @import '../src/components/side-nav.css';
 @import './side-nav-item.css';
 
-:is(:root, :host)::before {
-  --vaadin-side-nav-lumo-inject: 1;
-  --vaadin-side-nav-lumo-inject-modules: lumo_components_side-nav;
+:root::before,
+:host::before {
+  --_lumo-vaadin-side-nav-inject: 1;
+  --_lumo-vaadin-side-nav-inject-modules: lumo_components_side-nav;
 }

package/components/split-layout.css

@@ -5,7 +5,8 @@
  */
 @import '../src/components/split-layout.css';
 
-:is(:root, :host)::before {
-  --vaadin-split-layout-lumo-inject: 1;
-  --vaadin-split-layout-lumo-inject-modules: lumo_components_split-layout;
+:root::before,
+:host::before {
+  --_lumo-vaadin-split-layout-inject: 1;
+  --_lumo-vaadin-split-layout-inject-modules: lumo_components_split-layout;
 }