Fix color picker form submit bug

CHANGELOG.md

@@ -2,10 +2,12 @@
 
 ## Next
 
+- Added `name` prop to `sl-color-picker`
 - Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
 - Fixed a bug where the cursor was incorrect when `sl-select` was disabled
 - Fixed a bug where `slBlur` and `slFocus` were emitted twice in `sl-select`
 - Fixed a bug where clicking on `sl-menu` wouldn't focus it
+- Fixed a bug where `sl-color-picker` wasn't submitted with forms
 - Improved keyboard logic in `sl-dropdown`, `sl-menu`, and `sl-select`
 - Updated `sl-animation` to stable
 - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)

src/components.d.ts

@@ -267,6 +267,10 @@ export namespace Components {
           * Set to true to render the color picker inline rather than inside a dropdown.
          */
         "inline": boolean;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
         /**
           * Whether to show the opacity slider.
          */
@@ -1650,6 +1654,10 @@ declare namespace LocalJSX {
           * Set to true to render the color picker inline rather than inside a dropdown.
          */
         "inline"?: boolean;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
         /**
           * Emitted after the color picker closes and all transitions are complete.
          */

src/components/color-picker/color-picker.tsx

@@ -61,6 +61,9 @@ export class ColorPicker {
   /** When `inline` is true, this determines the size of the color picker's trigger. */
   @Prop() size: 'small' | 'medium' | 'large' = 'medium';
 
+  /** The input's name attribute. */
+  @Prop({ reflect: true }) name = '';
+
   /** Set to true to disable the color picker. */
   @Prop() disabled = false;
 
@@ -690,6 +693,7 @@ export class ColorPicker {
               part="input"
               size="small"
               type="text"
+              name={this.name}
               pattern="[a-fA-F\d]+"
               value={this.textInputValue}
               disabled={this.disabled}

src/components/form/form.tsx

@@ -113,6 +113,11 @@ export class Form {
         serialize: (el: HTMLSlCheckboxElement, formData) =>
           el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null
       },
+      {
+        tag: 'sl-color-picker',
+        serialize: (el: HTMLSlCheckboxElement, formData) =>
+          el.name && !el.disabled ? formData.append(el.name, el.value) : null
+      },
       {
         tag: 'sl-input',
         serialize: (el: HTMLSlInputElement, formData) =>