rei-kit 2.4.1 → 2.6.0

package/dist/styles.css

@@ -620,30 +620,30 @@ to {
 
 /* Movement is small and downward from the top, upward from the bottom — the
    direction it came from either way. */
-.toast-enter-active[data-v-b336935c],
-.toast-leave-active[data-v-b336935c] {
+.toast-enter-active[data-v-737eb240],
+.toast-leave-active[data-v-737eb240] {
   transition:
     opacity var(--duration-base) ease-out,
     transform var(--duration-base) ease-out;
 }
-.toast-enter-from[data-v-b336935c],
-.toast-leave-to[data-v-b336935c] {
+.toast-enter-from[data-v-737eb240],
+.toast-leave-to[data-v-737eb240] {
   opacity: 0;
   transform: translateY(-0.5rem);
 }
 
 /* Leaving is taken out of flow so the ones below close the gap smoothly
    instead of jumping when it unmounts. */
-.toast-leave-active[data-v-b336935c] {
+.toast-leave-active[data-v-737eb240] {
   position: absolute;
 }
 @media (prefers-reduced-motion: reduce) {
-.toast-enter-active[data-v-b336935c],
-  .toast-leave-active[data-v-b336935c] {
+.toast-enter-active[data-v-737eb240],
+  .toast-leave-active[data-v-737eb240] {
     transition-duration: 1ms;
 }
-.toast-enter-from[data-v-b336935c],
-  .toast-leave-to[data-v-b336935c] {
+.toast-enter-from[data-v-737eb240],
+  .toast-leave-to[data-v-737eb240] {
     transform: none;
 }
 }
@@ -832,6 +832,588 @@ to {
   inherits: false
 }
 
+.rk-cal[data-v-6d0b0811] {
+  display: flex;
+  width: 100%;
+  max-width: 19rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.rk-cal-head[data-v-6d0b0811] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+.rk-cal-arrow[data-v-6d0b0811] {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border-radius: 9999px;
+  color: var(--color-ink);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-cal-arrow[data-v-6d0b0811]:hover {
+  background: var(--color-muted);
+}
+.rk-cal-title[data-v-6d0b0811] {
+  border-radius: var(--radius-cell);
+  padding: 0.25rem 0.625rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+.rk-cal-title[data-v-6d0b0811]:hover {
+  background: var(--color-muted);
+}
+.rk-cal-weekdays[data-v-6d0b0811],
+.rk-cal-week[data-v-6d0b0811] {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.rk-cal-weekdays[data-v-6d0b0811] {
+  gap: 2px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-align: center;
+  color: var(--color-ink-soft);
+}
+.rk-cal-grid[data-v-6d0b0811] {
+  display: grid;
+  gap: 2px;
+}
+.rk-cal-cell[data-v-6d0b0811] {
+  display: grid;
+  place-items: center;
+}
+.rk-cal-day[data-v-6d0b0811] {
+  display: grid;
+  width: 100%;
+  height: 2.25rem;
+  place-items: center;
+  border-radius: var(--radius-cell);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+.rk-cal-day[data-v-6d0b0811]:hover:not(:disabled) {
+  background: var(--color-muted);
+}
+.rk-cal-day[data-v-6d0b0811]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+/* A day from the month either side: still reachable, visibly not this month. */
+.rk-cal-day.is-outside[data-v-6d0b0811] {
+  color: var(--color-ink-soft);
+  opacity: 0.55;
+}
+.rk-cal-day.is-inside[data-v-6d0b0811] {
+  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
+  border-radius: 0;
+}
+.rk-cal-day.is-selected[data-v-6d0b0811] {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  font-weight: 600;
+  opacity: 1;
+}
+.rk-cal-day[aria-current='date'][data-v-6d0b0811]:not(.is-selected) {
+  box-shadow: inset 0 0 0 1px var(--color-primary);
+}
+.rk-cal-day[data-v-6d0b0811]:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+.rk-cal-blocks[data-v-6d0b0811] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.375rem;
+}
+.rk-cal-block[data-v-6d0b0811] {
+  height: 2.5rem;
+  border-radius: var(--radius-cell);
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-cal-block[data-v-6d0b0811]:hover {
+  background: var(--color-muted);
+}
+
+.rk-popover[data-v-1e2d16d3] {
+  position: relative;
+  display: inline-flex;
+}
+.rk-popover-panel[data-v-1e2d16d3] {
+  position: absolute;
+  z-index: 50;
+  min-width: 14rem;
+  max-width: min(24rem, calc(100vw - 1rem));
+  border-radius: var(--radius-card);
+  padding: 0.75rem;
+  translate: var(--rk-popover-shift, 0) 0;
+}
+.rk-popover-panel[data-v-1e2d16d3]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-popover-panel.is-bottom[data-v-1e2d16d3] {
+  top: calc(100% + 0.5rem);
+}
+.rk-popover-panel.is-top[data-v-1e2d16d3] {
+  bottom: calc(100% + 0.5rem);
+}
+.rk-popover-panel.is-start[data-v-1e2d16d3] {
+  left: 0;
+}
+.rk-popover-panel.is-end[data-v-1e2d16d3] {
+  right: 0;
+}
+.rk-popover-panel.is-center[data-v-1e2d16d3] {
+  left: 50%;
+  translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;
+}
+.rk-popover-enter-active[data-v-1e2d16d3],
+.rk-popover-leave-active[data-v-1e2d16d3] {
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.rk-popover-enter-from[data-v-1e2d16d3],
+.rk-popover-leave-to[data-v-1e2d16d3] {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+.rk-popover-panel.is-top.rk-popover-enter-from[data-v-1e2d16d3],
+.rk-popover-panel.is-top.rk-popover-leave-to[data-v-1e2d16d3] {
+  transform: translateY(4px) scale(0.98);
+}
+
+.rk-date[data-v-154e27fb] {
+  display: block;
+}
+
+/* Wider than a popover's default: a calendar and a column of presets side by
+   side do not fit in 24rem, and the month title wraps in two. */
+.rk-date[data-v-154e27fb] .rk-popover-panel {
+  max-width: min(34rem, calc(100vw - 1rem));
+}
+.rk-date-wrap[data-v-154e27fb] {
+  display: flex;
+  width: 100%;
+  height: 2.75rem;
+  align-items: center;
+  border-radius: var(--radius-card);
+  padding-right: 0.375rem;
+}
+.rk-date-field[data-v-154e27fb] {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  height: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.75rem;
+  text-align: left;
+  font-size: 1rem;
+  color: var(--color-ink);
+}
+.rk-date-field.is-empty[data-v-154e27fb] {
+  color: var(--color-ink-soft);
+}
+.rk-date-wrap.is-invalid[data-v-154e27fb] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-date-field[data-v-154e27fb]:disabled {
+  opacity: 0.5;
+}
+.rk-date-clear[data-v-154e27fb] {
+  display: grid;
+  width: 1.375rem;
+  height: 1.375rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: 9999px;
+  color: var(--color-ink-soft);
+}
+.rk-date-clear[data-v-154e27fb]:hover {
+  background: var(--color-muted);
+  color: var(--color-ink);
+}
+.rk-date-clear[data-v-154e27fb]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+
+/* As wide as its contents rather than as narrow as they will go: in a flex
+   panel the calendar shrinks, and a squeezed month title wraps in two. */
+.rk-date-panel[data-v-154e27fb] {
+  display: flex;
+  width: max-content;
+  max-width: 100%;
+  gap: 0.75rem;
+}
+.rk-date-panel[data-v-154e27fb] .rk-cal {
+  width: 17rem;
+}
+.rk-date-presets[data-v-154e27fb] {
+  display: flex;
+  min-width: 8rem;
+  flex-direction: column;
+  gap: 2px;
+  border-right: 1px solid var(--surface-border-color);
+  padding-right: 0.75rem;
+}
+.rk-date-preset[data-v-154e27fb] {
+  width: 100%;
+  border-radius: var(--radius-cell);
+  padding: 0.375rem 0.5rem;
+  text-align: left;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-date-preset[data-v-154e27fb]:hover {
+  background: var(--color-muted);
+}
+@media (max-width: 30rem) {
+.rk-date-panel[data-v-154e27fb] {
+    flex-direction: column;
+}
+.rk-date-presets[data-v-154e27fb] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-right: 0;
+    border-bottom: 1px solid var(--surface-border-color);
+    padding-right: 0;
+    padding-bottom: 0.5rem;
+}
+.rk-date-preset[data-v-154e27fb] {
+    width: auto;
+}
+}
+
+.rk-toggles[data-v-9076e36f] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  border-radius: var(--radius-card);
+  padding: 3px;
+}
+.rk-toggle[data-v-9076e36f] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  border-radius: calc(var(--radius-card) - 3px);
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink-soft);
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+.is-sm .rk-toggle[data-v-9076e36f] {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.625rem;
+  font-size: 0.8125rem;
+}
+.rk-toggle[data-v-9076e36f]:hover:not(:disabled) {
+  background: var(--color-muted);
+  color: var(--color-ink);
+}
+.rk-toggle[aria-pressed='true'][data-v-9076e36f] {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.rk-toggle[data-v-9076e36f]:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.rk-toggle-icon[data-v-9076e36f] {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* The buttons are out of the Tab order: the keyboard already has the arrows,
+   and three stops for one number is two too many. They stay reachable by
+   pointer and by touch, which is who they are for. */
+.rk-number[data-v-082bd3d7] {
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.25rem;
+}
+.rk-number[data-v-082bd3d7]:focus-within {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+.rk-number.is-invalid[data-v-082bd3d7] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-number.is-disabled[data-v-082bd3d7] {
+  opacity: 0.5;
+}
+.rk-number-field[data-v-082bd3d7] {
+  min-width: 0;
+  flex: 1;
+  background: transparent;
+  text-align: center;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+  outline: none;
+}
+.rk-number-step[data-v-082bd3d7] {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: calc(var(--radius-card) - 4px);
+  color: var(--color-ink);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-number-step[data-v-082bd3d7]:hover:not(:disabled) {
+  background: var(--color-muted);
+}
+.rk-number-step[data-v-082bd3d7]:disabled {
+  opacity: 0.35;
+}
+
+.rk-pin-cells[data-v-ba322d9c] {
+  display: flex;
+  gap: 0.5rem;
+}
+.rk-pin-cell[data-v-ba322d9c] {
+  width: 2.75rem;
+  height: 3.25rem;
+  border-radius: var(--radius-card);
+  text-align: center;
+  font-size: 1.375rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+  caret-color: var(--color-primary);
+}
+.rk-pin-cell.is-invalid[data-v-ba322d9c] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-pin-cell[data-v-ba322d9c]:disabled {
+  opacity: 0.5;
+}
+.rk-pin-error[data-v-ba322d9c] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-negative);
+}
+
+.rk-ring[data-v-6b1d11db] {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: var(--rk-ring-size);
+  height: var(--rk-ring-size);
+  --rk-ring-size: 3rem;
+  --rk-ring-colour: var(--color-primary);
+}
+.rk-ring.is-sm[data-v-6b1d11db] {
+  --rk-ring-size: 1.75rem;
+}
+.rk-ring.is-lg[data-v-6b1d11db] {
+  --rk-ring-size: 5rem;
+}
+.rk-ring.is-accent[data-v-6b1d11db] {
+  --rk-ring-colour: var(--color-accent);
+}
+.rk-ring.is-positive[data-v-6b1d11db] {
+  --rk-ring-colour: var(--color-positive);
+}
+.rk-ring.is-warning[data-v-6b1d11db] {
+  --rk-ring-colour: var(--color-warning);
+}
+.rk-ring.is-negative[data-v-6b1d11db] {
+  --rk-ring-colour: var(--color-negative);
+}
+.rk-ring svg[data-v-6b1d11db] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  /* The ring starts at twelve o'clock, like a clock face, not at three. */
+  rotate: -90deg;
+}
+.rk-ring-track[data-v-6b1d11db],
+.rk-ring-bar[data-v-6b1d11db] {
+  fill: none;
+  stroke-width: 4;
+}
+.rk-ring-track[data-v-6b1d11db] {
+  stroke: var(--color-muted);
+}
+.rk-ring-bar[data-v-6b1d11db] {
+  stroke: var(--rk-ring-colour);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);
+}
+.rk-ring.is-indeterminate svg[data-v-6b1d11db] {
+  animation: rk-ring-spin-6b1d11db 0.9s linear infinite;
+}
+.rk-ring-inside[data-v-6b1d11db] {
+  position: relative;
+  font-size: calc(var(--rk-ring-size) * 0.26);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+}
+@keyframes rk-ring-spin-6b1d11db {
+from {
+    rotate: -90deg;
+}
+to {
+    rotate: 270deg;
+}
+}
+@keyframes rk-ring-breathe-6b1d11db {
+50% {
+    opacity: 0.4;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-ring.is-indeterminate svg[data-v-6b1d11db] {
+    animation: rk-ring-breathe-6b1d11db 1.6s ease-in-out infinite;
+}
+}
+
+.rk-steps[data-v-6aa3221b] {
+  display: flex;
+  gap: 0.5rem;
+}
+.rk-steps.is-horizontal[data-v-6aa3221b] {
+  align-items: flex-start;
+}
+.rk-steps.is-vertical[data-v-6aa3221b] {
+  flex-direction: column;
+  gap: 0;
+}
+.rk-step[data-v-6aa3221b] {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+/* The connecting line, drawn from each step to the next. */
+.rk-step[data-v-6aa3221b]:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  background: var(--color-hair);
+  transition: background-color var(--duration-base) var(--ease-standard);
+}
+.is-horizontal .rk-step[data-v-6aa3221b]:not(:last-child)::after {
+  top: 0.875rem;
+  left: calc(1.75rem + 0.5rem);
+  right: 0.5rem;
+  height: 2px;
+}
+.is-vertical .rk-step[data-v-6aa3221b]:not(:last-child)::after {
+  top: 2.125rem;
+  bottom: 0.25rem;
+  left: 0.8125rem;
+  width: 2px;
+}
+.rk-step.is-complete[data-v-6aa3221b]::after {
+  background: var(--color-primary);
+}
+.rk-step-body[data-v-6aa3221b] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  width: 100%;
+  border-radius: var(--radius-cell);
+  text-align: left;
+}
+.is-horizontal .rk-step-body[data-v-6aa3221b] {
+  flex-direction: column;
+}
+.is-vertical .rk-step-body[data-v-6aa3221b] {
+  padding-bottom: 1.5rem;
+}
+.rk-step-body.is-clickable[data-v-6aa3221b] {
+  cursor: pointer;
+}
+.rk-step-mark[data-v-6aa3221b] {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: 1.75rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: 9999px;
+  border: 2px solid var(--color-hair);
+  background: var(--color-surface);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-ink-soft);
+  transition:
+    background-color var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard),
+    color var(--duration-base) var(--ease-standard);
+}
+.is-current .rk-step-mark[data-v-6aa3221b] {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.is-complete .rk-step-mark[data-v-6aa3221b] {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.is-error .rk-step-mark[data-v-6aa3221b] {
+  border-color: var(--color-negative);
+  background: var(--color-negative);
+  color: var(--color-on-negative);
+}
+.is-clickable:hover .rk-step-mark[data-v-6aa3221b] {
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);
+}
+.rk-step-text[data-v-6aa3221b] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding-top: 0.25rem;
+}
+.rk-step-label[data-v-6aa3221b] {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-ink-soft);
+}
+.is-current .rk-step-label[data-v-6aa3221b],
+.is-complete .rk-step-label[data-v-6aa3221b] {
+  color: var(--color-ink);
+}
+.is-error .rk-step-label[data-v-6aa3221b] {
+  color: var(--color-negative);
+}
+.rk-step-description[data-v-6aa3221b] {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-ink-soft);
+}
+
 /* A line height of its own, so a column is exactly one digit tall without
    depending on `lh` units or on whatever line height the parent set. */
 .rk-ticker[data-v-e2db153c] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rei-kit",
-  "version": "2.4.1",
-  "description": "One kit, every look. 59 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
+  "version": "2.6.0",
+  "description": "One kit, every look. 67 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",