[crud] Invalid margin applied to first slotted toolbar element

[sissbruecker]

Description

vaadin-crud is intended to apply a left margin to all elements slotted into the toolbar, that are not the first child: https://github.com/vaadin/web-components/blob/7cc31ea392c44e0a6f904241c15aea601d26940f/packages/crud/theme/lumo/vaadin-crud-styles.js#L74-L76

However, when adding a slotted form the slotted toolbar element might not be the first child anymore, which means the first child slotted into the toolbar also gets the margin applied:

Result:

Expected outcome

The first slotted toolbar element should not have a left margin.

Minimal reproducible example

    <style>
      vaadin-crud::part(toolbar) {
          padding: 0;
          background: green;
      }

      vaadin-crud vaadin-button {
          display: none;
      }
    </style>
    <vaadin-crud>
      <div slot="form"></div>
      <div slot="toolbar" style="background: red; width: 100%"> toolbar</div>
    </vaadin-crud>
    <script type="module">
      import '@vaadin/crud';

      const crud = document.querySelector('vaadin-crud');
      crud.items = [
        {
          firstName: 'John',
          lastName: 'Doe',
        },
        {
          firstName: 'Jane',
          lastName: 'Doe',
        },
      ];
    </script>

Steps to reproduce

1. Add the snippet above to a page
2. Observe that toolbar does not take full width

Environment

Vaadin version(s): 24, 23

Browsers

Issue is not browser related

[sissbruecker]

Also reproducable in v23, so not a regression from the recent theme refactoring.

[web-padawan]

This is essentially the same as #464. We might want to reconsider this as using :first-child is not reliable.