rei-kit 2.6.0 → 2.8.0

package/dist/styles.css

@@ -218,6 +218,34 @@
   opacity: 0;
 }
 
+.rk-skeleton[data-v-37327de6] {
+  display: block;
+  flex-shrink: 0;
+  background: var(--color-muted);
+  animation: rk-skeleton-pulse-37327de6 1.6s ease-in-out infinite;
+}
+.rk-skeleton.is-block[data-v-37327de6] {
+  border-radius: var(--radius-cell);
+}
+
+/* A line of text, rounded like one and a little short of its box. */
+.rk-skeleton.is-text[data-v-37327de6] {
+  border-radius: 9999px;
+}
+.rk-skeleton.is-circle[data-v-37327de6] {
+  border-radius: 9999px;
+}
+@keyframes rk-skeleton-pulse-37327de6 {
+50% {
+    opacity: 0.55;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-skeleton[data-v-37327de6] {
+    animation: none;
+}
+}
+
 .rk-avatar[data-v-47586bec] {
   display: grid;
   place-items: center;
@@ -832,6 +860,49 @@ to {
   inherits: false
 }
 
+.rk-stack[data-v-db629481] {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Overlapped by a third, with a ring in the page's own colour so each face
+   keeps an edge against the one under it — on any material. */
+.rk-stack-item + .rk-stack-item[data-v-db629481] {
+  margin-left: -0.5rem;
+}
+.rk-stack.is-sm .rk-stack-item + .rk-stack-item[data-v-db629481] {
+  margin-left: -0.5rem;
+}
+.rk-stack.is-lg .rk-stack-item + .rk-stack-item[data-v-db629481] {
+  margin-left: -0.875rem;
+}
+.rk-stack-item[data-v-db629481] {
+  display: inline-flex;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 2px var(--color-surface);
+}
+.rk-stack-rest[data-v-db629481] {
+  display: inline-grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-items: center;
+  background: var(--color-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.rk-stack.is-sm .rk-stack-rest[data-v-db629481] {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.6875rem;
+}
+.rk-stack.is-lg .rk-stack-rest[data-v-db629481] {
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.8125rem;
+}
+
 .rk-cal[data-v-6d0b0811] {
   display: flex;
   width: 100%;
@@ -946,6 +1017,438 @@ to {
   background: var(--color-muted);
 }
 
+.rk-chip[data-v-e9026659] {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  background: var(--color-muted);
+  color: var(--color-ink);
+}
+.rk-chip.is-button[data-v-e9026659] {
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+.rk-chip.is-button[data-v-e9026659]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-chip.is-selected[data-v-e9026659] {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.rk-chip[data-v-e9026659]:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* The tones tint rather than fill: a row of chips in five solid colours is a
+   row where nothing stands out. The selected one fills, and that is the point
+   of it. */
+.rk-chip.tone-primary[data-v-e9026659] {
+  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+  border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+}
+.rk-chip.tone-success[data-v-e9026659] {
+  background: color-mix(in oklab, var(--color-positive) 14%, transparent);
+  border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);
+  color: color-mix(in oklab, var(--color-positive) 80%, var(--color-ink));
+}
+.rk-chip.tone-warning[data-v-e9026659] {
+  background: color-mix(in oklab, var(--color-warning) 16%, transparent);
+  border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
+  color: color-mix(in oklab, var(--color-warning) 75%, var(--color-ink));
+}
+.rk-chip.tone-danger[data-v-e9026659] {
+  background: color-mix(in oklab, var(--color-negative) 12%, transparent);
+  border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);
+  color: var(--color-negative);
+}
+.rk-chip-remove[data-v-e9026659] {
+  display: grid;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: 9999px;
+  color: currentColor;
+  opacity: 0.7;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.rk-chip-remove[data-v-e9026659]:hover {
+  opacity: 1;
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+
+.rk-kbd[data-v-e4b97bbe] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.rk-kbd-key[data-v-e4b97bbe] {
+  display: inline-grid;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  place-items: center;
+  border-radius: var(--radius-cell);
+  padding: 0 0.375rem;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--color-ink-soft);
+}
+.is-sm .rk-kbd-key[data-v-e4b97bbe] {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  font-size: 0.6875rem;
+}
+.rk-kbd-joiner[data-v-e4b97bbe] {
+  font-size: 0.6875rem;
+  color: var(--color-ink-soft);
+}
+
+.rk-listbox[data-v-95e230a5] {
+  overflow-y: auto;
+  border-radius: var(--radius-card);
+  padding: 0.25rem;
+}
+.rk-listbox[data-v-95e230a5]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+.rk-listbox-option[data-v-95e230a5] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: var(--radius-cell);
+  padding: 0.5rem 0.625rem;
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+.rk-listbox-option.is-active[data-v-95e230a5] {
+  background: var(--color-muted);
+}
+.rk-listbox-option.is-chosen[data-v-95e230a5] {
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* Both at once: the current option and the chosen one are different things,
+   and a list that shows only one of them loses the reader's place. */
+.rk-listbox-option.is-chosen.is-active[data-v-95e230a5] {
+  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+}
+.rk-listbox-option.is-disabled[data-v-95e230a5] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.rk-listbox-label[data-v-95e230a5] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rk-listbox-description[data-v-95e230a5] {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-ink-soft);
+}
+.rk-listbox-empty[data-v-95e230a5] {
+  padding: 1rem;
+}
+
+.rk-link[data-v-88581007] {
+  display: inline;
+  border-radius: var(--radius-cell);
+  font-weight: 500;
+  text-underline-offset: 0.2em;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.rk-link.tone-primary[data-v-88581007] {
+  color: var(--color-primary);
+}
+.rk-link.tone-ink[data-v-88581007] {
+  color: var(--color-ink);
+}
+.rk-link.underline-always[data-v-88581007] {
+  text-decoration: underline;
+}
+.rk-link.underline-hover[data-v-88581007]:hover,
+.rk-link.underline-none[data-v-88581007]:hover {
+  text-decoration: underline;
+}
+.rk-link.underline-none[data-v-88581007]:hover {
+  text-decoration: none;
+}
+.rk-link-mark[data-v-88581007] {
+  display: inline-block;
+  width: 0.875em;
+  height: 0.875em;
+  vertical-align: -0.1em;
+}
+
+.rk-rating[data-v-38007368] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  border-radius: var(--radius-cell);
+}
+.rk-rating[data-v-38007368]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-rating-star[data-v-38007368] {
+  display: grid;
+  place-items: center;
+  padding: 0.125rem;
+  color: var(--color-hair);
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-38007368] {
+  cursor: pointer;
+}
+.rk-rating-star.is-on[data-v-38007368] {
+  color: var(--color-warning);
+}
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-38007368]:hover {
+  transform: scale(1.12);
+}
+.rk-rating-icon[data-v-38007368] {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: currentColor;
+  stroke-width: 1.25;
+}
+.is-sm .rk-rating-icon[data-v-38007368] {
+  width: 1rem;
+  height: 1rem;
+}
+.is-lg .rk-rating-icon[data-v-38007368] {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-rating-star[data-v-38007368] {
+    transition: none;
+}
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-38007368]:hover {
+    transform: none;
+}
+}
+
+.rk-sep[data-v-9f8cc9aa],
+.rk-sep-labelled[data-v-9f8cc9aa] {
+  --rk-sep-space: 1rem;
+}
+.space-sm[data-v-9f8cc9aa] {
+  --rk-sep-space: 0.5rem;
+}
+.space-none[data-v-9f8cc9aa] {
+  --rk-sep-space: 0px;
+}
+.rk-sep.is-horizontal[data-v-9f8cc9aa] {
+  height: 1px;
+  width: 100%;
+  margin-block: var(--rk-sep-space);
+  background: var(--color-hair);
+}
+.rk-sep.is-vertical[data-v-9f8cc9aa] {
+  width: 1px;
+  align-self: stretch;
+  min-height: 1rem;
+  margin-inline: var(--rk-sep-space);
+  background: var(--color-hair);
+}
+.rk-sep-labelled[data-v-9f8cc9aa] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-block: var(--rk-sep-space);
+}
+.rk-sep-labelled.is-vertical[data-v-9f8cc9aa] {
+  flex-direction: column;
+  align-self: stretch;
+  margin-block: 0;
+  margin-inline: var(--rk-sep-space);
+}
+.rk-sep-line[data-v-9f8cc9aa] {
+  flex: 1;
+  background: var(--color-hair);
+}
+.is-horizontal .rk-sep-line[data-v-9f8cc9aa] {
+  height: 1px;
+}
+.is-vertical .rk-sep-line[data-v-9f8cc9aa] {
+  width: 1px;
+}
+.rk-sep-label[data-v-9f8cc9aa] {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-ink-soft);
+}
+
+.rk-copy[data-v-c481e140] {
+  display: inline-flex;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-copy[data-v-c481e140]:hover {
+  background: var(--color-muted);
+}
+.rk-copy.is-copied[data-v-c481e140] {
+  color: var(--color-positive);
+}
+.rk-copy[data-v-c481e140]:not(.with-text) {
+  width: 2.25rem;
+  padding: 0;
+}
+
+.rk-drop-box[data-v-a42eab69] {
+  display: flex;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: var(--radius-card);
+  border-style: dashed;
+  border-width: 2px;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+/* The box is a label, so the ring belongs to the input it names. */
+.rk-drop-box[data-v-a42eab69]:has(input:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-drop-box.is-over[data-v-a42eab69] {
+  border-color: var(--color-primary);
+  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
+}
+.rk-drop-box.is-disabled[data-v-a42eab69] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rk-drop-label[data-v-a42eab69] {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink);
+}
+.rk-drop-hint[data-v-a42eab69] {
+  font-size: 0.75rem;
+  color: var(--color-ink-soft);
+}
+.rk-drop-browse[data-v-a42eab69] {
+  margin-top: 0.25rem;
+  border-radius: 9999px;
+  background: var(--color-muted);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-ink);
+}
+.rk-drop-error[data-v-a42eab69] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-negative);
+}
+.rk-drop-files[data-v-a42eab69] {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.rk-drop-file[data-v-a42eab69] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-card);
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+}
+.rk-drop-size[data-v-a42eab69] {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink-soft);
+}
+.rk-drop-remove[data-v-a42eab69] {
+  display: grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: 9999px;
+  color: var(--color-ink-soft);
+}
+.rk-drop-remove[data-v-a42eab69]:hover {
+  background: var(--color-muted);
+  color: var(--color-ink);
+}
+
+.rk-tags[data-v-b372ae7b] {
+  display: flex;
+  min-height: 2.75rem;
+  cursor: text;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: var(--radius-card);
+  padding: 0.375rem 0.5rem;
+}
+
+/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs
+   to the field, not to the chips' remove buttons, which carry their own. */
+.rk-tags[data-v-b372ae7b]:has(.rk-tags-field:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+.rk-tags.is-invalid[data-v-b372ae7b] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-tags.is-disabled[data-v-b372ae7b] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rk-tags-field[data-v-b372ae7b] {
+  min-width: 6rem;
+  flex: 1;
+  background: transparent;
+  /* 16px, like every other field: below it iOS zooms the page in on focus
+     and never zooms back. */
+  font-size: 1rem;
+  color: var(--color-ink);
+  outline: none;
+}
+
 .rk-popover[data-v-1e2d16d3] {
   position: relative;
   display: inline-flex;
@@ -1973,6 +2476,200 @@ to {
   color: var(--color-ink-soft);
 }
 
+.rk-command[data-v-cce1dd03] {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  /* Near the top, not centred: the eye is already up there, and the list
+     grows downwards into space rather than pushing itself off both edges. */
+  padding-top: min(12vh, 6rem);
+}
+.rk-command-scrim[data-v-cce1dd03] {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
+  backdrop-filter: blur(2px);
+}
+.rk-command-panel[data-v-cce1dd03] {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 34rem;
+  max-height: min(28rem, 70vh);
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+}
+.rk-command-field[data-v-cce1dd03] {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  border-bottom: 1px solid var(--surface-border-color);
+  padding: 0.875rem 1rem;
+}
+.rk-command-input[data-v-cce1dd03] {
+  min-width: 0;
+  flex: 1;
+  background: transparent;
+  font-size: 1rem;
+  color: var(--color-ink);
+  outline: none;
+}
+
+/* The field takes focus the moment this opens, so a full ring around it
+   would be on the whole time. The rule under it turns instead: enough to
+   say where the keyboard is, quiet enough to live with. */
+.rk-command-field[data-v-cce1dd03]:has(.rk-command-input:focus-visible) {
+  border-bottom-color: var(--color-primary);
+  box-shadow: inset 0 -1px 0 var(--color-primary);
+}
+.rk-command-list[data-v-cce1dd03] {
+  overflow-y: auto;
+  padding: 0.375rem;
+}
+.rk-command-group[data-v-cce1dd03] {
+  padding: 0.5rem 0.625rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+.rk-command-item[data-v-cce1dd03] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: var(--radius-cell);
+  padding: 0.5rem 0.625rem;
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+.rk-command-item.is-active[data-v-cce1dd03] {
+  background: var(--color-muted);
+}
+.rk-command-hint[data-v-cce1dd03] {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--color-ink-soft);
+}
+.rk-command-empty[data-v-cce1dd03] {
+  padding: 1.5rem 0.625rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+}
+.rk-command-enter-active[data-v-cce1dd03],
+.rk-command-leave-active[data-v-cce1dd03] {
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.rk-command-enter-active .rk-command-panel[data-v-cce1dd03],
+.rk-command-leave-active .rk-command-panel[data-v-cce1dd03] {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.rk-command-enter-from[data-v-cce1dd03],
+.rk-command-leave-to[data-v-cce1dd03] {
+  opacity: 0;
+}
+.rk-command-enter-from .rk-command-panel[data-v-cce1dd03],
+.rk-command-leave-to .rk-command-panel[data-v-cce1dd03] {
+  transform: translateY(-0.5rem) scale(0.98);
+}
+
+/* The scroller is focusable: a region only a drag can reach is a region a
+   keyboard cannot read at all. */
+.rk-data-scroll[data-v-5920cac0] {
+  overflow-x: auto;
+  border-radius: var(--radius-card);
+}
+.rk-data-scroll[data-v-5920cac0]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-data[data-v-5920cac0] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.rk-data-caption[data-v-5920cac0] {
+  padding-bottom: 0.5rem;
+  text-align: left;
+  font-size: 0.8125rem;
+  color: var(--color-ink-soft);
+}
+.rk-data-caption-hidden[data-v-5920cac0] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.rk-data th[data-v-5920cac0] {
+  border-bottom: 1px solid var(--color-hair);
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-ink-soft);
+  white-space: nowrap;
+}
+.rk-data.is-sticky thead th[data-v-5920cac0] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--color-surface);
+}
+.rk-data td[data-v-5920cac0] {
+  border-bottom: 1px solid color-mix(in oklab, var(--color-hair) 60%, transparent);
+  padding: 0.625rem 0.75rem;
+  color: var(--color-ink);
+  vertical-align: middle;
+}
+.rk-data tbody tr:last-child td[data-v-5920cac0] {
+  border-bottom: 0;
+}
+.rk-data tbody tr.is-chosen td[data-v-5920cac0] {
+  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
+}
+.is-end[data-v-5920cac0] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.is-nowrap[data-v-5920cac0] {
+  white-space: nowrap;
+}
+.rk-data-sort[data-v-5920cac0] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--radius-cell);
+  color: inherit;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.rk-data-sort[data-v-5920cac0]:hover {
+  color: var(--color-ink);
+}
+.rk-data-pick[data-v-5920cac0] {
+  width: 2.75rem;
+  padding-right: 0;
+}
+.rk-data-box[data-v-5920cac0] {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--color-primary);
+}
+.rk-data-empty[data-v-5920cac0] {
+  padding: 2rem 0.75rem;
+  text-align: center;
+  color: var(--color-ink-soft);
+}
+
 .rk-tabs[data-v-8135ecab] {
   display: flex;
   align-items: center;