[New WC] Button that pops up <color-picker> in a <dialog>, emulating <input type="color"/>

[sidewayss]

<input type="color"/> displays as a <button> with a sort of swatch as the innerHTML. Here is a codepen that displays one in its default state: https://codepen.io/sidewayss/pen/gOVqNNM

Based on the little I know about this library, it seems like it would have to be a new component. I don't see a way to slot it into any existing components. IMO the displayed element might as well be a <button>. It offers the correct set of events, and defaults to native styles. It might look like this:

<button>
    <color-swatch></color-swatch>
</button>

Most of the design questions revolve around the <dialog>. The obvious initial parameters are:

• It features a <color-picker>.
• It has a <select> or other single-select list of color spaces. (optionally or somehow slotted? who doesn't want to display this? I'd rather have control over - and maybe some presets for - the contents of that list)
• The interior <color-picker> or its attributes/properties must be exposed to the client.

Open questions:

• OK and Cancel buttons? can you make them optional in CSS? You can certainly display:none them.
  • Chrome and Safari do not have them, and in spite of the dialog being modal, changes to the color reflect in the button's swatch immediately. Safari forces you to click elsewhere to close the dialog. Chrome also lets you use the Enter and Esc keys.
  • Firefox uses a native color dialog, and in Windows that means the swatch doesn't change color until/unless you click OK.
  • Android Chrome has Cancel / Set buttons.
  • iOS has the standard X in the upper right corner of the dialog to close it.
  • I don't have any Linux installed at this time...
• Dialog size and shape? any user control over this?
• Dialog position within the browser window? any user control?
• Dialog styling? probably as ::part(dialog), and yes, style includes width, height and position, but none of the native color picker dialogs allow styling AFAICT, so it's worth noting. Default size, shape, and position should be chosen carefully, unless you simply want to default to whatever <dialog> defaults to.
• OK and Cancel button styling? again the part attribute should make that easy
• Any other methods/paradigms for picking, like the tabbed Apple dialogs? (see screenshots below) You could offer a grid using <color-scale>, for example. Here is an interesting pseudo-grid as color wheel for Lab.
• Any other return values or user actions, such as "copy color string to clipboard"?
• Are you all OK with using ::part? Here's the support matrix. It post-dates custom elements by several browser versions. I see now that you use ::part. What level of backward compatibility do you intend to support?

The standard dialog varies widely between browsers in contents, size, and position

Chrome and its progeny Edge and Opera (here on Windows 11) hang the dialog off the bottom left corner of the element, and offer RGB, HSL and #hex input:

Firefox (again on Win11) places the dialog in the upper left corner of the browser window, and displays an OS native color dialog, in this case a Windows RGB picker that looks like it hasn't changed since Windows 95:

Safari (v18 on Sequoia) centers the dialog underneath the element and only offers preset colors in a grid:

Until you click on Show colors... which pops up this more elaborate dialog in the bottom left corner of the window:

Chrome on Android has a nested dialog approach too, this time centered on the screen and with Cancel/Set buttons:

If you click on Custom it displays an HSL picker:

Safari (and everything else) on iOS slides this dialog up from the bottom of the screen, and you click on the X in the upper right corner to close it:

[sidewayss]

I have a working prototype w/o <color-swatch> adapted to my existing app here: https://sidewayss.github.io/rAF/apps/color/

App docs are here: https://sidewayss.github.io/rAF/apps/#color
Source is here: https://github.com/sidewayss/rAF/tree/main/apps/color

Check out the colored rectangles at the far right of the Start: and End: fields, the 2nd and 3rd rows. They are <button>s that wrap a swatchy <div> and open a <dialog> that wraps a <color-picker>, a <select> of color spaces, and OK / Cancel buttons. The buttons are because I went for the lowest common denominator. The app is designed to work on mobiles too. My code adjusts the width, not the height, of the dialog - there's no way around it. It lets the position default.