feat: add ColorPicker, PinInput and Rating

.changeset/color-picker-v1.md

@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the ColorPicker primitive with `Root`, `Label`, `Area`, `AreaThumb`, `Slider`, `SliderThumb`, `HexField`, `ChannelField`, `SwatchList`, `Swatch`, `Preview` and `EyeDropper`. The color is held as hue, saturation and brightness. The square keeps its shape at each hue, and a color that goes to black keeps the hue it had. The value is text: a hex color, `rgb()`, `hsl()` and `hsb()` come in, and `format` decides what goes out. `alpha` adds the fourth number and the `alpha` channel. `ColorPicker.AreaThumb` holds one native slider for each axis, each with the name of its channel and with `aria-valuetext`. The arrows move both axes from either of them. `ColorPicker.SwatchList` is a listbox of options. The parts paint nothing: `--color-picker-value`, `--color-picker-hue-color`, `--color-picker-area-x`, `--color-picker-slider-start` and `--color-picker-swatch-color` give your CSS what it needs.

.changeset/pin-input-v1.md

@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the PinInput primitive with `Root`, `Label` and `Cell`. Each cell is a real input with its own name, its `inputmode` and its `autocomplete`. A telephone shows the correct keyboard, and a code from a message fills the cells with one touch. A paste goes across the cells from the cell it starts in, and the characters that `type` or `pattern` refuses are dropped. The value has no holes. The characters fill the cells from the first one, and a press on a cell past the first empty one goes to that one. A character that goes away takes the ones after it one cell to the left. `onComplete` runs when the last cell takes a character, `mask` hides the characters, and `name` sends the whole value in a form.

.changeset/rating-v1.md

@@ -0,0 +1,5 @@
+---
+'@human-kit/ui': minor
+---
+
+Add the Rating primitive with `Root`, `Label`, `Output` and `Item`. With whole items the root is a radio group, and each item is a radio with its own name, because each value is one item. With `precision={0.5}` the root is a slider with `aria-valuenow` and `aria-valuetext`, because a radio group cannot say 3.5. The keyboard is the same in the two shapes. The arrows step by the precision, `Home` and `End` go to the ends, and `Delete` clears the value. The value follows the pointer before a press, in `Rating.Output` and in `--rating-display-value`. Each item carries `--rating-item-fill`, from 0 to 1, thus one shape over the item gives you a half star. `name` sends the value in a form, and a `<form>` reset takes the first value back.