web-components Attributes / part names indicating Dialogs that are draggable

Describe your motivation

Similarly to https://github.com/vaadin/web-components/issues/5094, it would be useful to be able to indicate that a dialog is either draggable or resizable.

Describe the solution you'd like

A state attribute on dialogs that are draggable (e.g. draggable-dialog) that can be used in a CSS selector. Similarly, a CSS part name could work.
Same for resizable dialogs

Describe alternatives you've considered

No response

Additional context

No response

Jun 04 '25 07:06 OlliTietavainenVaadin

Technically both draggable and resizable are reflected to attributes on the dialog but not on the vaadin-dialog-overlay. We could probably consider adding them for 24.x but in v25 (using native popover) the dialog itself will be stylable.

Jun 04 '25 08:06 web-padawan

vaadin-dialog-overlay already has the resizable attribute, so you can style the overlay with

vaadin-dialog-overlay[resizable]::part(overlay) {

}

Jun 04 '25 09:06 jouni

Right, I missed that. Renamed the issue to be only about draggable state.

Jun 04 '25 09:06 web-padawan