Cannot cancel a dialog with a required field in an illegal state

What is affected?

Component

Description

Expect to be able to set up a form as so:

<md-dialog open>
        <form
            slot="content"
            id="email-dialog-form"
            method="dialog">
          <md-filled-text-field
              id="email-dialog-input"
              label="Email address"
              type="email"
              required>
          </md-filled-text-field>
        </form>
        <div slot="actions">
          <md-text-button
              value="cancel"
              form="email-dialog-form">
            Cancel
          </md-text-button>
          <md-text-button
              value="ok"
              form="email-dialog-form">
            OK
          </md-text-button>
        </div>
</md-dialog>

And that the user can cancel it without filling in the required field.

From the documentation and demos it's unclear how this could be arranged or whether it's possible.

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6InNjcmlwdC5qcyIsImNvbnRlbnQiOiJpbXBvcnQgJ0BtYXRlcmlhbC93ZWIvZGlhbG9nL2RpYWxvZy5qcyc7XG5pbXBvcnQgJ0BtYXRlcmlhbC93ZWIvYnV0dG9uL3RleHQtYnV0dG9uLmpzJztcbmltcG9ydCAnQG1hdGVyaWFsL3dlYi90ZXh0ZmllbGQvZmlsbGVkLXRleHQtZmllbGQuanMnOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NjcmlwdC5qc1wiPjwvc2NyaXB0PlxuXG48bWQtZGlhbG9nIG9wZW4-XG4gICAgICAgICAgPHNwYW4gc2xvdD1cImhlYWRsaW5lXCI-RW50ZXIgeW91ciBlbWFpbDwvc3Bhbj5cbiAgICAgICAgPGZvcm1cbiAgICAgICAgICAgIHNsb3Q9XCJjb250ZW50XCJcbiAgICAgICAgICAgIGlkPVwiZW1haWwtZGlhbG9nLWZvcm1cIlxuICAgICAgICAgICAgbWV0aG9kPVwiZGlhbG9nXCI-XG4gICAgICAgICAgPG1kLWZpbGxlZC10ZXh0LWZpZWxkXG4gICAgICAgICAgICAgIGlkPVwiZW1haWwtZGlhbG9nLWlucHV0XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJFbWFpbCBhZGRyZXNzXCJcbiAgICAgICAgICAgICAgdHlwZT1cImVtYWlsXCJcbiAgICAgICAgICAgICAgcmVxdWlyZWQ-XG4gICAgICAgICAgPC9tZC1maWxsZWQtdGV4dC1maWVsZD5cbiAgICAgICAgPC9mb3JtPlxuICAgICAgICA8ZGl2IHNsb3Q9XCJhY3Rpb25zXCI-XG4gICAgICAgICAgPG1kLXRleHQtYnV0dG9uXG4gICAgICAgICAgICAgIHZhbHVlPVwiY2FuY2VsXCJcbiAgICAgICAgICAgICAgZm9ybT1cImVtYWlsLWRpYWxvZy1mb3JtXCI-XG4gICAgICAgICAgICBDYW5jZWxcbiAgICAgICAgICA8L21kLXRleHQtYnV0dG9uPlxuICAgICAgICAgIDxtZC10ZXh0LWJ1dHRvblxuICAgICAgICAgICAgICB2YWx1ZT1cIm9rXCJcbiAgICAgICAgICAgICAgZm9ybT1cImVtYWlsLWRpYWxvZy1mb3JtXCI-XG4gICAgICAgICAgICBPS1xuICAgICAgICAgIDwvbWQtdGV4dC1idXR0b24-XG4gICAgICAgIDwvZGl2PlxuPC9tZC1kaWFsb2c-In0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

Workaround

Need to manually invoke validation and prevent form closure on a submit action. Maybe there are other alternatives.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.1

Browser/OS/Node environment

Tested on Chrome 119.0.6045.159.

Start with the linked Lit playground reproduction and the dialog component behavior around the form's method="dialog" and required email field. Verify how the Cancel and OK buttons submit the form; done means Cancel can close the dialog without satisfying the required field while OK still validates it.