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

`` displays as a `` 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 ``. It offers the correct set of events, and defaults to native styles. It might look like this:
```js

```
Most of the design questions revolve around the ``. The obvious initial parameters are:
- It features a ``.
- It has a `` 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 `` 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 `` 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 ``, for example. Here is an interesting pseudo-grid as [color wheel for Lab](https://observablehq.com/@shan/oklab-color-wheel).
- 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.](https://caniuse.com/mdn-css_selectors_part) 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: