Skip to content

docs: update overlay components styling docs for V25 #4541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 27, 2025
Merged

docs: update overlay components styling docs for V25 #4541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aad4510
docs: update overlay components styling docs for V25
web-padawan Aug 26, 2025
99200b2
docs: remove more mentions of overlay from styling docs
web-padawan Aug 27, 2025
7be216e
docs: remove mention of overlay in sub-components
web-padawan Aug 27, 2025
f3a8516
docs: fix popover states
web-padawan Aug 27, 2025
3ddf086
fix: add missing backtick
web-padawan Aug 27, 2025
51cf106
fix: remove duplicate years toggle button
web-padawan Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions articles/components/avatar/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**`
Expand Down
9 changes: 4 additions & 5 deletions articles/components/combo-box/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**`


Expand Down Expand Up @@ -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
Expand Down
22 changes: 11 additions & 11 deletions articles/components/confirm-dialog/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]**`
8 changes: 4 additions & 4 deletions articles/components/context-menu/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
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
Expand All @@ -26,7 +26,7 @@
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"]**`

Check warning on line 29 in articles/components/context-menu/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'divider' over 'separator'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'divider' over 'separator'.", "location": {"path": "articles/components/context-menu/styling.adoc", "range": {"start": {"line": 29, "column": 63}}}, "severity": "WARNING"}

Check warning on line 29 in articles/components/context-menu/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'divider' over 'Separator'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'divider' over 'Separator'.", "location": {"path": "articles/components/context-menu/styling.adoc", "range": {"start": {"line": 29, "column": 1}}}, "severity": "WARNING"}

==== Item States

Expand Down
30 changes: 16 additions & 14 deletions articles/components/crud/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,30 @@

_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"]**`

Check failure on line 29 in articles/components/crud/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.

Raw Output:
{"message": "[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.", "location": {"path": "articles/components/crud/styling.adoc", "range": {"start": {"line": 29, "column": 47}}}, "severity": "ERROR"}

=== 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)**`
8 changes: 4 additions & 4 deletions articles/components/date-picker/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]**`
Expand Down
27 changes: 14 additions & 13 deletions articles/components/dialog/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)**`
3 changes: 1 addition & 2 deletions articles/components/login/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
63 changes: 37 additions & 26 deletions articles/components/login/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,47 @@
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**`

Check failure on line 25 in articles/components/login/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.

Raw Output:
{"message": "[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.", "location": {"path": "articles/components/login/styling.adoc", "range": {"start": {"line": 25, "column": 50}}}, "severity": "ERROR"}
Password field:: `vaadin-login-form+++<wbr>+++** vaadin-password-field**`

Check failure on line 26 in articles/components/login/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.

Raw Output:
{"message": "[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.", "location": {"path": "articles/components/login/styling.adoc", "range": {"start": {"line": 26, "column": 50}}}, "severity": "ERROR"}
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**`

Check failure on line 53 in articles/components/login/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.

Raw Output:
{"message": "[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.", "location": {"path": "articles/components/login/styling.adoc", "range": {"start": {"line": 53, "column": 53}}}, "severity": "ERROR"}
Password field:: `vaadin-login-overlay+++<wbr>+++** vaadin-password-field**`

Check failure on line 54 in articles/components/login/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.

Raw Output:
{"message": "[Vale.Terms] Use '(?-i)Vaadin' instead of 'vaadin'.", "location": {"path": "articles/components/login/styling.adoc", "range": {"start": {"line": 54, "column": 53}}}, "severity": "ERROR"}
Log In button:: `vaadin-login-overlay+++<wbr>+++** [slot="submit"]**`
Forgot Password button:: `vaadin-login-overlay+++<wbr>+++** [slot="forgot-password"]**`
12 changes: 6 additions & 6 deletions articles/components/menu-bar/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@
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
Expand All @@ -49,7 +49,7 @@
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"]**`

Check warning on line 52 in articles/components/menu-bar/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'divider' over 'separator'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'divider' over 'separator'.", "location": {"path": "articles/components/menu-bar/styling.adoc", "range": {"start": {"line": 52, "column": 66}}}, "severity": "WARNING"}

Check warning on line 52 in articles/components/menu-bar/styling.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Terms] Prefer 'divider' over 'Separator'.

Raw Output:
{"message": "[Vaadin.Terms] Prefer 'divider' over 'Separator'.", "location": {"path": "articles/components/menu-bar/styling.adoc", "range": {"start": {"line": 52, "column": 1}}}, "severity": "WARNING"}

==== Item States

Expand Down
9 changes: 4 additions & 5 deletions articles/components/multi-select-combo-box/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ Read-only:: `vaadin-multi-select-combo-box+++<wbr>+++**[readonly]**`
Disabled:: `vaadin-multi-select-combo-box+++<wbr>+++**[disabled]**`
Not empty:: `vaadin-multi-select-combo-box+++<wbr>+++**[has-value]**`
With open overlay:: `vaadin-multi-select-combo-box+++<wbr>+++**[opened]**`
Loading items:: `vaadin-multi-select-combo-box+++<wbr>+++**[loading]**`
Hovered:: `vaadin-multi-select-combo-box+++<wbr>+++**:hover**`


Expand Down Expand Up @@ -116,11 +117,9 @@ Chip container inside field:: `vaadin-multi-select-combo-box+++<wbr>+++**::part(

=== Overlay

Overlay element:: `vaadin-multi-select-combo-box-overlay`
Overlay background:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(overlay)**`
Overlay content wrapper:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(content)**`
Overlay in loading state:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**[loading]**`
Overlay loading indicator:: `vaadin-multi-select-combo-box-overlay+++<wbr>+++**::part(loader)**`
Overlay background:: `vaadin-multi-select-combo-box+++<wbr>+++**::part(overlay)**`
Overlay content wrapper:: `vaadin-multi-select-combo-box+++<wbr>+++**::part(content)**`
Overlay loading indicator:: `vaadin-multi-select-combo-box+++<wbr>+++**::part(loader)**`


=== Items
Expand Down
2 changes: 1 addition & 1 deletion articles/components/popover/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ By default, the Popover’s size is determined by its contents, but an explicit

Contents that exceed the width of the popover will scroll.

The maximum width of popovers is limited to the width of the viewport, minus a small margin that can be customized with CSS by overriding the `inset` property of the `vaadin-popover-overlay` element.
The maximum width of popovers is limited to the width of the viewport, minus a small margin that can be customized by the theme.
Copy link
Member Author

@web-padawan web-padawan Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might add custom CSS property for this and then list it when adding base styles properties docs.


== Modality

Expand Down
13 changes: 7 additions & 6 deletions articles/components/popover/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,21 @@ include::../_styling-section-theming-props.adoc[tag=style-properties]
include::../_styling-section-intros.adoc[tag=selectors]


Root element:: `vaadin-popover-overlay`
Root element:: `vaadin-popover`


=== States

Non-modal:: `vaadin-popover-overlay+++<wbr>+++**[modeless]**`
Modal:: `vaadin-popover+++<wbr>+++**[modal]**`
With backdrop:: `vaadin-popover+++<wbr>+++**[with-backdrop]**`


=== Parts

Modality curtain (backdrop):: `vaadin-popover-overlay+++<wbr>+++**::part(backdrop)**`
Popover surface:: `vaadin-popover-overlay+++<wbr>+++**::part(overlay)**`
Content wrapper:: `vaadin-popover-overlay+++<wbr>+++**::part(content)**`
Arrow element:: `vaadin-popover-overlay+++<wbr>+++**::part(arrow)**`
Modality curtain (backdrop):: `vaadin-popover+++<wbr>+++**::part(backdrop)**`
Popover surface:: `vaadin-popover+++<wbr>+++**::part(overlay)**`
Content wrapper:: `vaadin-popover+++<wbr>+++**::part(content)**`
Arrow element:: `vaadin-popover+++<wbr>+++**::part(arrow)**`

=== Style Variants

Expand Down
9 changes: 2 additions & 7 deletions articles/components/select/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,8 @@ Invalid field:: `vaadin-select+++<wbr>+++**[invalid]**`
Field with error message:: `vaadin-select+++<wbr>+++**[has-error-message]**`
Error message:: `vaadin-select+++<wbr>+++**::part(error-message)**`
Error message text:: `vaadin-select+++<wbr>+++** > [slot="error-message"]**`


=== Overlay

Overlay element:: `vaadin-select-overlay`
Overlay background:: `vaadin-select-overlay+++<wbr>+++**::part(overlay)**`
Overlay list box wrapper:: `vaadin-select-overlay+++<wbr>+++**::part(content)**`
Overlay background:: `vaadin-select+++<wbr>+++**::part(overlay)**`
Overlay list box wrapper:: `vaadin-select+++<wbr>+++**::part(content)**`


=== Items
Expand Down
Loading