Dashboard widget theme issues

[jouni]

Unsupported selectors

The Lumo theme is using unsupported selectors, such as #content, #drag-handle, #remove-button, #resize-handle (and other resize-related IDs), and #move-backward (and other move-related IDs).

Those elements need to be parts if they should be stylable by themes.

Blur filter bleeding outside the widget

When a widget is in move or resize mode, the widget content is blurred (and the opacity is reduced). If the content area defines a solid background color, and if the padding of the content are is small enough, the blurred content can become visible outside the widget boundaries. This can look odd and unwanted. Notice the purple glow outside the edges of the content area (focus outline removed to make it more obvious):

A more robust solution, instead of applying the filter property on the content element, would be to apply the backdrop-filter property on an element that is on top of the content area. That said, we’d need a semi-transparent base color in Lumo to get it working, as you can't combine opacity and backdrop-filter on the same element.

[jouni]

Another implementation option is to apply the filter and opacity to the slotted contents, instead of the #content wrapper element. Then the #content wrapper will clip any overflowing blurred elements.