rei-kit 2.15.0 → 2.16.0

package/dist/styles.css

@@ -1464,6 +1464,98 @@ to {
   color: var(--color-ink-soft);
 }
 
+.rk-color-row[data-v-5ca23aa9] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* The well is what is seen; the input inside it is the whole target. A
+   native colour input cannot be styled past its swatch in every browser, so
+   it is stretched over a box that can be. */
+.rk-color-well[data-v-5ca23aa9] {
+  position: relative;
+  display: block;
+  width: 2.75rem;
+  height: 2.75rem;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-hair);
+  background: var(--rk-color);
+}
+.rk-color-native[data-v-5ca23aa9] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+}
+
+/* The ring goes on the well, since the input it belongs to is invisible. */
+.rk-color-well[data-v-5ca23aa9]:has(.rk-color-native:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-color-native[data-v-5ca23aa9]:disabled {
+  cursor: not-allowed;
+}
+.rk-color-hex[data-v-5ca23aa9] {
+  width: 7.5rem;
+  height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* 16px like every other text control here: iOS zooms the viewport when it
+     focuses a field under 16px and never zooms back. */
+  font-size: 1rem;
+  color: var(--color-ink);
+}
+.rk-color-hex[data-v-5ca23aa9]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+.rk-color-hex[data-v-5ca23aa9]:disabled {
+  opacity: 0.5;
+}
+.rk-color-swatches[data-v-5ca23aa9] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.rk-color-swatch[data-v-5ca23aa9] {
+  display: block;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-hair);
+  background: var(--rk-color);
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+  transform: scale(1.1);
+}
+
+/* A ring around the chosen one rather than a tick: a tick has to be dark or
+   light to be seen, and the swatch beneath it is whatever the app chose. */
+.rk-color-swatch.is-chosen[data-v-5ca23aa9] {
+  box-shadow:
+    0 0 0 2px var(--color-surface),
+    0 0 0 4px var(--color-primary);
+}
+.rk-color-swatch[data-v-5ca23aa9]:disabled {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-color-swatch[data-v-5ca23aa9] {
+    transition: none;
+}
+.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+    transform: none;
+}
+}
+
 .rk-copy[data-v-c481e140] {
   display: inline-flex;
   height: 2.25rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rei-kit",
-  "version": "2.15.0",
-  "description": "One kit, every look. 90 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
+  "version": "2.16.0",
+  "description": "One kit, every look. 91 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
   "keywords": [
     "vue",
     "vue3",