docs: update overlay components styling docs for V25 (#4541)

Author: web-padawan

articles/components/avatar/styling.adoc

@@ -88,9 +88,8 @@ Avatar in group:: `vaadin-avatar-group+++<wbr>+++** > vaadin-avatar**`
 
 === Overlay
 
-Overlay element:: `vaadin-avatar-group-overlay`
-Overlay background:: `vaadin-avatar-group-overlay+++<wbr>+++**::part(overlay)**`
-Overlay content wrapper:: `vaadin-avatar-group-overlay+++<wbr>+++**::part(content)**`
+Overlay background:: `vaadin-avatar-group+++<wbr>+++**::part(overlay)**`
+Overlay content wrapper:: `vaadin-avatar-group+++<wbr>+++**::part(content)**`
 Menu inside overlay:: `vaadin-avatar-group-menu`
 Item element:: `vaadin-avatar-group-menu-item`
 Hovered item:: `vaadin-avatar-group-menu-item+++<wbr>+++**:hover**`

articles/components/combo-box/styling.adoc

@@ -32,6 +32,7 @@ Read-only:: `vaadin-combo-box+++<wbr>+++**[readonly]**`
 Disabled:: `vaadin-combo-box+++<wbr>+++**[disabled]**`
 Not empty:: `vaadin-combo-box+++<wbr>+++**[has-value]**`
 With open overlay:: `vaadin-combo-box+++<wbr>+++**[opened]**`
+Loading items:: `vaadin-combo-box+++<wbr>+++**[loading]**`
 Hovered:: `vaadin-combo-box+++<wbr>+++**:hover**`
 
 
@@ -68,11 +69,9 @@ Error message text:: `vaadin-combo-box+++<wbr>+++** > [slot="error-message"]**`
 
 === Overlay
 
-Overlay element:: `vaadin-combo-box-overlay`
-Overlay background:: `vaadin-combo-box-overlay+++<wbr>+++**::part(overlay)**`
-Overlay content wrapper:: `vaadin-combo-box-overlay+++<wbr>+++**::part(content)**`
-Overlay in loading state:: `vaadin-combo-box-overlay+++<wbr>+++**[loading]**`
-Overlay loading indicator:: `vaadin-combo-box-overlay+++<wbr>+++**::part(loader)**`
+Overlay background:: `vaadin-combo-box+++<wbr>+++**::part(overlay)**`
+Overlay content wrapper:: `vaadin-combo-box+++<wbr>+++**::part(content)**`
+Overlay loading indicator:: `vaadin-combo-box+++<wbr>+++**::part(loader)**`
 
 
 === Items

articles/components/confirm-dialog/styling.adoc

@@ -12,23 +12,23 @@ include::../_styling-section-intros.adoc[tag=selectors]
 
 === Overlay
 
-Root element:: `vaadin-confirm-dialog-overlay`
-Modality curtain (backdrop):: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(backdrop)**`
-Dialog surface:: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(overlay)**`
+Root element:: `vaadin-confirm-dialog`
+Modality curtain (backdrop):: `vaadin-confirm-dialog+++<wbr>+++**::part(backdrop)**`
+Dialog surface:: `vaadin-confirm-dialog+++<wbr>+++**::part(overlay)**`
 
 === Header
 
-Header:: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(header)**`
-Default title element:: `vaadin-confirm-dialog-overlay+++<wbr>+++** > [slot="header"]**`
+Header:: `vaadin-confirm-dialog+++<wbr>+++**::part(header)**`
+Default title element:: `vaadin-confirm-dialog+++<wbr>+++** > [slot="header"]**`
 
 === Content Area
 
-Content area:: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(content)**`
-Message:: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(message)**`
+Content area:: `vaadin-confirm-dialog+++<wbr>+++**::part(content)**`
+Message:: `vaadin-confirm-dialog+++<wbr>+++**::part(message)**`
 
 === Footer
 
-Footer:: `vaadin-confirm-dialog-overlay+++<wbr>+++**::part(footer)**`
-Confirm button:: `vaadin-confirm-dialog-overlay+++<wbr>+++** > [slot="confirm-button"]**`
-Reject button:: `vaadin-confirm-dialog-overlay+++<wbr>+++** > [slot="reject-button"]**`
-Cancel button:: `vaadin-confirm-dialog-overlay+++<wbr>+++** > [slot="cancel-button"]**`
+Footer:: `vaadin-confirm-dialog+++<wbr>+++**::part(footer)**`
+Confirm button:: `vaadin-confirm-dialog+++<wbr>+++** > [slot="confirm-button"]**`
+Reject button:: `vaadin-confirm-dialog+++<wbr>+++** > [slot="reject-button"]**`
+Cancel button:: `vaadin-confirm-dialog+++<wbr>+++** > [slot="cancel-button"]**`

articles/components/context-menu/styling.adoc

@@ -10,13 +10,13 @@ order: 50
 include::../_styling-section-intros.adoc[tag=selectors]
 
 
-Root element:: `vaadin-context-menu-overlay`
+Root element:: `vaadin-context-menu`
 
 
 === Parts
 
-Overlay background:: `vaadin-context-menu-overlay+++<wbr>+++**::part(overlay)**`
-Overlay content wrapper:: `vaadin-context-menu-overlay+++<wbr>+++**::part(content)**`
+Overlay background:: `vaadin-context-menu+++<wbr>+++**::part(overlay)**`
+Overlay content wrapper:: `vaadin-context-menu+++<wbr>+++**::part(content)**`
 
 
 === Items
@@ -26,7 +26,7 @@ Item content wrapper:: `vaadin-context-menu-item+++<wbr>+++**::part(content)**`
 Item selection indicator:: `vaadin-context-menu-item+++<wbr>+++**::part(checkmark)**`
 Item selection indicator icon:: `vaadin-context-menu-item+++<wbr>+++**::part(checkmark)::before**`
 Submenu indicator icon:: `vaadin-context-menu-item+++<wbr>+++**::after**`
-Separator:: `vaadin-context-menu-overlay+++<wbr>+++** [role="separator"]**`
+Separator:: `vaadin-context-menu-list-box+++<wbr>+++** [role="separator"]**`
 
 ==== Item States
 

articles/components/crud/styling.adoc

@@ -23,28 +23,30 @@ Toolbar below grid:: `vaadin-crud+++<wbr>+++**::part(toolbar)**`
 
 _See <<../grid/styling#,Grid selectors>> for details on styling the grid_
 
-=== Side/Bottom Edit Panel
+=== Toolbar
+
+Toolbar:: `vaadin-crud+++<wbr>+++**::part(toolbar)**`
+New item button:: `vaadin-crud+++<wbr>+++** > vaadin-button[slot="new-button"]**`
+
+=== Editor
 
-CRUD with editor on the side:: `vaadin-crud+++<wbr>+++**[editor-position="aside"]**`
-CRUD with editor at the bottom:: `vaadin-crud+++<wbr>+++**[editor-position="bottom"]**`
-Editor panel:: `vaadin-crud+++<wbr>+++**::part(editor)**`
-Editor scroller (content above toolbar):: `vaadin-crud+++<wbr>+++**::part(scroller)**`
 Editor header:: `vaadin-crud+++<wbr>+++**::part(header)**`
+Editor footer:: `vaadin-crud+++<wbr>+++**::part(footer)**`
 Editor title:: `vaadin-crud+++<wbr>+++** > [slot="header"]**`
 Editor form:: `vaadin-crud-form`
-Editor toolbar:: `vaadin-crud+++<wbr>+++**::part(toolbar)**`
-New item button:: `vaadin-crud+++<wbr>+++** > vaadin-button[slot="new-button"]**`
 Save button:: `vaadin-crud+++<wbr>+++** > vaadin-button[slot="save-button"]**`
 Cancel button:: `vaadin-crud+++<wbr>+++** > vaadin-button[slot="cancel-button"]**`
 Delete button:: `vaadin-crud+++<wbr>+++** > vaadin-button[slot="delete-button"]**`
 
+=== Side/Bottom Edit Panel
 
-=== Edit Dialog
+CRUD with editor on the side:: `vaadin-crud+++<wbr>+++**[editor-position="aside"]**`
+CRUD with editor at the bottom:: `vaadin-crud+++<wbr>+++**[editor-position="bottom"]**`
+Editor panel:: `vaadin-crud+++<wbr>+++**::part(editor)**`
+Editor scroller (content above toolbar):: `vaadin-crud+++<wbr>+++**::part(scroller)**`
 
-Edit dialog element:: `vaadin-crud-dialog-overlay`
-Buttons:: `vaadin-crud-dialog-overlay+++<wbr>+++** > vaadin-button**`
-Save button:: `vaadin-crud-dialog-overlay+++<wbr>+++** > vaadin-button[slot="save-button"]**`
-Cancel button:: `vaadin-crud-dialog-overlay+++<wbr>+++** > vaadin-button[slot="cancel-button"]**`
-Delete button:: `vaadin-crud-dialog-overlay+++<wbr>+++** > vaadin-button[slot="delete-button"]**`
+=== Edit Dialog
 
-_See <<../dialog/styling#,Dialog selectors>> for details on styling the dialog_
+Modality curtain (backdrop):: `vaadin-crud+++<wbr>+++**::part(backdrop)**`
+Dialog surface:: `vaadin-crud+++<wbr>+++**::part(overlay)**`
+Content area:: `vaadin-crud+++<wbr>+++**::part(content)**`

articles/components/date-picker/styling.adoc

@@ -69,16 +69,16 @@ Error message text:: `vaadin-date-picker+++<wbr>+++** > [slot="error-message"]**
 
 === Overlay
 
-Overlay element:: `vaadin-date-picker-overlay`
-Overlay background:: `vaadin-date-picker-overlay+++<wbr>+++**::part(overlay)**`
+Modality curtain (backdrop):: `vaadin-date-picker+++<wbr>+++**::part(backdrop)**`
+Overlay background:: `vaadin-date-picker+++<wbr>+++**::part(overlay)**`
 Overlay content wrapper:: `vaadin-date-picker-overlay-content`
 Overlay toolbar:: `vaadin-date-picker-overlay-content+++<wbr>+++**::part(toolbar)**`
 Desktop (large viewport) mode:: `vaadin-date-picker-overlay-content+++<wbr>+++**[desktop]**`
 Fullscreen (small viewport) mode:: `vaadin-date-picker-overlay-content+++<wbr>+++**[fullscreen]**`
 Years toggle button:: `vaadin-date-picker-overlay-content+++<wbr>+++**::part(years-toggle-button)**`
 All overlay buttons:: `vaadin-date-picker-overlay-content+++<wbr>+++** > vaadin-button**`
-Today button:: `vaadin-date-picker-overlay+++<wbr>+++** [slot="today-button"]**`
-Cancel button:: `vaadin-date-picker-overlay+++<wbr>+++** [slot="cancel-button"]**`
+Today button:: `vaadin-date-picker-overlay-content+++<wbr>+++** [slot="today-button"]**`
+Cancel button:: `vaadin-date-picker-overlay-content+++<wbr>+++** [slot="cancel-button"]**`
 
 ==== Years
 Years visible:: `vaadin-date-picker-overlay-content+++<wbr>+++**[years-visible]**`

articles/components/dialog/styling.adoc

@@ -12,24 +12,25 @@ order: 50
 include::../_styling-section-intros.adoc[tag=selectors]
 
 
-Root element:: `vaadin-dialog-overlay`
+Root element:: `vaadin-dialog`
 
 
 === States
 
-Non-modal:: `vaadin-dialog-overlay+++<wbr>+++**[modeless]**`
-Dialog with header:: `vaadin-dialog-overlay+++<wbr>+++**[has-header]**`
-Dialog with footer:: `vaadin-dialog-overlay+++<wbr>+++**[has-footer]**`
-Resizable:: `vaadin-dialog-overlay+++<wbr>+++**[resizable]**`
+Non-modal:: `vaadin-dialog+++<wbr>+++**[modeless]**`
+Dialog with header:: `vaadin-dialog+++<wbr>+++**[has-header]**`
+Dialog with footer:: `vaadin-dialog+++<wbr>+++**[has-footer]**`
+Resizable:: `vaadin-dialog+++<wbr>+++**[resizable]**`
+Draggable:: `vaadin-dialog+++<wbr>+++**[draggable]**`
 
 
 === Parts
 
-Modality curtain (backdrop):: `vaadin-dialog-overlay+++<wbr>+++**::part(backdrop)**`
-Dialog surface:: `vaadin-dialog-overlay+++<wbr>+++**::part(overlay)**`
-Header:: `vaadin-dialog-overlay+++<wbr>+++**::part(header)**`
-Title wrapper:: `vaadin-dialog-overlay+++<wbr>+++**::part(title)**`
-Title element:: `vaadin-dialog-overlay+++<wbr>+++** > [slot="title"]**`
-Header custom content wrapper:: `vaadin-dialog-overlay+++<wbr>+++**::part(header-content)**`
-Content area:: `vaadin-dialog-overlay+++<wbr>+++**::part(content)**`
-Footer:: `vaadin-dialog-overlay+++<wbr>+++**::part(footer)**`
+Modality curtain (backdrop):: `vaadin-dialog+++<wbr>+++**::part(backdrop)**`
+Dialog surface:: `vaadin-dialog+++<wbr>+++**::part(overlay)**`
+Header:: `vaadin-dialog+++<wbr>+++**::part(header)**`
+Title wrapper:: `vaadin-dialog+++<wbr>+++**::part(title)**`
+Title element:: `vaadin-dialog+++<wbr>+++** > [slot="title"]**`
+Header custom content wrapper:: `vaadin-dialog+++<wbr>+++**::part(header-content)**`
+Content area:: `vaadin-dialog+++<wbr>+++**::part(content)**`
+Footer:: `vaadin-dialog+++<wbr>+++**::part(footer)**`

articles/components/login/index.adoc

@@ -127,8 +127,7 @@ endif::[]
 
 .Password Managers
 [NOTE]
-Login is incompatible with password managers if placed inside another component's shadow root. footnote:[When added to a web component that uses shadow root, password managers are unable to find the input fields and therefore won't work.] This isn't an issue, though, when using Login's modal overlay.
-
+Login is incompatible with password managers if placed inside another component's shadow root. footnote:[When added to a web component that uses shadow root, password managers are unable to find the input fields and therefore won't work.]
 
 == Modal Overlay
 

articles/components/login/styling.adoc

@@ -10,36 +10,47 @@ order: 50
 include::../_styling-section-intros.adoc[tag=selectors]
 
 
-Login form root component:: `vaadin-login-form`
-Login form:: `vaadin-login-form-wrapper`
+=== Login Form
 
+Root component:: `vaadin-login-form`
+Inner form wrapper:: `vaadin-login-form+++<wbr>+++**::part(form)**`
+Form title:: `vaadin-login-form+++<wbr>+++**::part(form-title)**`
+Error message section:: `vaadin-login-form+++<wbr>+++**::part(error-message)**`
+Error message heading:: `vaadin-login-form+++<wbr>+++**::part(error-message-title)**`
+Error message description:: `vaadin-login-form+++<wbr>+++**::part(error-message-description)**`
+Footer:: `vaadin-login-form+++<wbr>+++**::part(footer)**`
 
-=== Parts
+=== Login Form Fields and Buttons
 
-Inner form wrapper:: `vaadin-login-form-wrapper+++<wbr>+++**::part(form)**`
-Form title:: `vaadin-login-form-wrapper+++<wbr>+++**::part(form-title)**`
-Error message section:: `vaadin-login-form-wrapper+++<wbr>+++**::part(error-message)**`
-Error message heading:: `vaadin-login-form-wrapper+++<wbr>+++**::part(error-message-title)**`
-Error message description:: `vaadin-login-form-wrapper+++<wbr>+++**::part(error-message-description)**`
-Footer:: `vaadin-login-form-wrapper+++<wbr>+++**::part(footer)**`
+Username field:: `vaadin-login-form+++<wbr>+++** vaadin-text-field**`
+Password field:: `vaadin-login-form+++<wbr>+++** vaadin-password-field**`
+Log In button:: `vaadin-login-form+++<wbr>+++** [slot="submit"]**`
+Forgot Password button:: `vaadin-login-form+++<wbr>+++** [slot="forgot-password"]**`
 
 
 === Login Overlay
 
-Overlay element:: `vaadin-login-overlay-wrapper`
-Overlay backdrop / modality curtain:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(backdrop)**`
-Outer content wrapper:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(overlay)**`
-Inner content wrapper:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(content)**`
-Overlay card:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(card)**`
-Card header:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(brand)**`
-Title:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(title)**`
-Description / sub-title:: `vaadin-login-overlay-wrapper+++<wbr>+++**::part(description)**`
-Login form component in overlay:: `vaadin-login-overlay-wrapper+++<wbr>+++** > vaadin-login-form**`
-
-
-=== Fields and Buttons
-
-Username field:: `vaadin-login-form-wrapper+++<wbr>+++** vaadin-text-field**`
-Password field:: `vaadin-login-form-wrapper+++<wbr>+++** vaadin-password-field**`
-Log In button:: `vaadin-login-form+++<wbr>+++** vaadin-button[theme~="submit"]**`
-Forgot Password button:: `vaadin-login-form+++<wbr>+++** [slot="forgot-password"]**`
+Root component:: `vaadin-login-overlay`
+Overlay backdrop / modality curtain:: `vaadin-login-overlay+++<wbr>+++**::part(backdrop)**`
+Outer content wrapper:: `vaadin-login-overlay+++<wbr>+++**::part(overlay)**`
+Inner content wrapper:: `vaadin-login-overlay+++<wbr>+++**::part(content)**`
+Overlay card:: `vaadin-login-overlay+++<wbr>+++**::part(card)**`
+Card header:: `vaadin-login-overlay+++<wbr>+++**::part(brand)**`
+Title:: `vaadin-login-overlay+++<wbr>+++** [slot="title"]**`
+Description / sub-title:: `vaadin-login-overlay+++<wbr>+++**::part(description)**`
+Title:: `vaadin-login-overlay+++<wbr>+++** [slot="title"]**`
+Form wrapper:: `vaadin-login-overlay+++<wbr>+++**::part(form-wrapper)**`
+Inner form wrapper:: `vaadin-login-overlay+++<wbr>+++**::part(form)**`
+Form title:: `vaadin-login-overlay+++<wbr>+++**::part(form-title)**`
+Error message section:: `vaadin-login-overlay+++<wbr>+++**::part(error-message)**`
+Error message heading:: `vaadin-login-overlay+++<wbr>+++**::part(error-message-title)**`
+Error message description:: `vaadin-login-overlay+++<wbr>+++**::part(error-message-description)**`
+Footer:: `vaadin-login-overlay+++<wbr>+++**::part(footer)**`
+
+
+=== Login Overlay Fields and Buttons
+
+Username field:: `vaadin-login-overlay+++<wbr>+++** vaadin-text-field**`
+Password field:: `vaadin-login-overlay+++<wbr>+++** vaadin-password-field**`
+Log In button:: `vaadin-login-overlay+++<wbr>+++** [slot="submit"]**`
+Forgot Password button:: `vaadin-login-overlay+++<wbr>+++** [slot="forgot-password"]**`

articles/components/menu-bar/styling.adoc

@@ -34,12 +34,12 @@ Button rich content wrapper:: `vaadin-menu-bar-button+++<wbr>+++** > vaadin-menu
 Button icon:: `vaadin-menu-bar-button+++<wbr>+++** > vaadin-menu-bar-item > vaadin-icon**`
 
 
-=== Overlay
+=== Sub-Menu
 
-Overlay element:: `vaadin-menu-bar-overlay`
-Overlay background:: `vaadin-menu-bar-overlay+++<wbr>+++**::part(overlay)**`
-Overlay content wrapper:: `vaadin-menu-bar-overlay+++<wbr>+++**::part(content)**`
-Nested sub-menu overlay:: `vaadin-menu-bar-overlay+++<wbr>+++**[modeless]**`
+Sub-menu element:: `vaadin-menu-bar-submenu`
+Sub-menu background:: `vaadin-menu-bar-submenu+++<wbr>+++**::part(overlay)**`
+Sub-menu content wrapper:: `vaadin-menu-submenu+++<wbr>+++**::part(content)**`
+Nested sub-menu:: `vaadin-menu-bar-submenu+++<wbr>+++**[modeless]**`
 
 
 === Items
@@ -49,7 +49,7 @@ Item content wrapper:: `vaadin-menu-bar-item+++<wbr>+++**::part(content)**`
 Checked item indicator:: `vaadin-menu-bar-item+++<wbr>+++**[menu-item-checked]::part(checkmark)**`
 Checked item indicator icon:: `vaadin-menu-bar-item+++<wbr>+++**[menu-item-checked]::part(checkmark)::before**`
 Submenu indicator icon:: `vaadin-menu-bar-item+++<wbr>+++**::after**`
-Separator element:: `vaadin-menu-bar-overlay+++<wbr>+++** [role="separator"]**`
+Separator element:: `vaadin-menu-bar-submenu+++<wbr>+++** [role="separator"]**`
 
 ==== Item States