fix wrong values for buttons in form submission

docs/resources/changelog.md

@@ -27,6 +27,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-tree-item>` that caused the expand/collapse icon slot to be out of sync when the node is open initially
 - Fixed the mislabeled `handle-icon` slot in `<sl-image-comparer>` (it now points to the `<slot>`, not the slot's fallback content)
 - Fixed the border radius in `<sl-dropdown>` so it matches with nested `<sl-menu>` elements
+- Fixed a bug that caused all button values to appear in submitted form data even if they weren't the submitter
 - Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
 - Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
 - Improved accessibility of `<sl-progress-ring>` so slotted labels are announced along with visually hidden labels

src/internal/form.ts

@@ -148,7 +148,11 @@ export class FormSubmitController implements ReactiveController {
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
 
-    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {
+    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
+    // injecting the name/value on a temporary button, so we can just skip them here.
+    const isButton = this.host.tagName.toLowerCase() === 'sl-button';
+
+    if (!disabled && !isButton && typeof name === 'string' && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
           event.formData.append(name, (val as string | number | boolean).toString());
@@ -232,8 +236,11 @@ export class FormSubmitController implements ReactiveController {
       button.style.overflow = 'hidden';
       button.style.whiteSpace = 'nowrap';
 
-      // Pass form attributes through to the temporary button
+      // Pass name, value, and form attributes through to the temporary button
       if (invoker) {
+        button.name = invoker.name;
+        button.value = invoker.value;
+
         ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
           if (invoker.hasAttribute(attr)) {
             button.setAttribute(attr, invoker.getAttribute(attr)!);