rei-kit 2.22.0 → 2.24.0

package/dist/styles.css

@@ -209,12 +209,12 @@
    cannot reach slot content, which belongs to the caller's scope, so
    `.tour-forward-*` and `.tour-backward-*` ship unscoped in
    `rei-kit/shell/mobile.css` where the caller's slide can actually see them. */
-.tour-enter-active[data-v-88982fee],
-.tour-leave-active[data-v-88982fee] {
+.tour-enter-active[data-v-8c293eec],
+.tour-leave-active[data-v-8c293eec] {
   transition: opacity var(--duration-base) ease;
 }
-.tour-enter-from[data-v-88982fee],
-.tour-leave-to[data-v-88982fee] {
+.tour-enter-from[data-v-8c293eec],
+.tour-leave-to[data-v-8c293eec] {
   opacity: 0;
 }
 
@@ -246,72 +246,99 @@
 }
 }
 
-.rk-scroll[data-v-4c21cdc9] {
+/*
+ * A flex column, so a height written on this box reaches the box that
+ * scrolls.
+ *
+ * The caller's class lands here, on the wrapper, because that is the
+ * element the component renders outermost — so `class="max-h-56"` is the
+ * obvious and only thing to write. It used to do nothing. The viewport
+ * carried `max-height: 100%`, and a percentage height resolves against the
+ * parent's *height*, which is `auto` here; a parent with only a
+ * `max-height` gives it nothing to resolve against, so the rule was inert
+ * and the viewport grew to the full height of its contents.
+ *
+ * Visually that spills. For `VirtualList` it is worse than spilling: the
+ * window is sized from `clientHeight`, so an unconstrained viewport reports
+ * the height of the whole list, every row is "near the viewport", and five
+ * thousand of them render at once. That is the component's whole purpose,
+ * inverted, by the one line every caller writes.
+ *
+ * `flex: 1 1 auto` with `min-height: 0` is what lets the item shrink below
+ * its content, which is the part that is easy to leave out: a flex item's
+ * default `min-height: auto` refuses to go below its content and the box
+ * spills exactly as before.
+ */
+.rk-scroll[data-v-383954d8] {
   position: relative;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   min-height: 0;
 }
-.rk-scroll-viewport[data-v-4c21cdc9] {
+.rk-scroll-viewport[data-v-383954d8] {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
   max-width: 100%;
-  max-height: 100%;
 }
-.rk-scroll-viewport.is-x[data-v-4c21cdc9] {
+.rk-scroll-viewport.is-x[data-v-383954d8] {
   overflow-x: auto;
   overflow-y: hidden;
 }
-.rk-scroll-viewport.is-y[data-v-4c21cdc9] {
+.rk-scroll-viewport.is-y[data-v-383954d8] {
   overflow-x: hidden;
   overflow-y: auto;
 }
-.rk-scroll-viewport.is-both[data-v-4c21cdc9] {
+.rk-scroll-viewport.is-both[data-v-383954d8] {
   overflow: auto;
 }
-.rk-scroll-viewport[data-v-4c21cdc9]:focus-visible {
+.rk-scroll-viewport[data-v-383954d8]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
 
 /* The fade paints over whatever the box sits on, so the colour is a hook:
    a scroll area on a card sets it to the card's ground. */
-.rk-scroll-fade[data-v-4c21cdc9] {
+.rk-scroll-fade[data-v-383954d8] {
   position: absolute;
   z-index: 1;
   pointer-events: none;
   --rk-scroll-fade: var(--scroll-fade-color, var(--color-canvas));
 }
-.rk-scroll-fade.is-start-x[data-v-4c21cdc9],
-.rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+.rk-scroll-fade.is-start-x[data-v-383954d8],
+.rk-scroll-fade.is-end-x[data-v-383954d8] {
   inset-block: 0;
   width: 1.5rem;
 }
-.rk-scroll-fade.is-start-y[data-v-4c21cdc9],
-.rk-scroll-fade.is-end-y[data-v-4c21cdc9] {
+.rk-scroll-fade.is-start-y[data-v-383954d8],
+.rk-scroll-fade.is-end-y[data-v-383954d8] {
   inset-inline: 0;
   height: 1.5rem;
 }
-.rk-scroll-fade.is-start-x[data-v-4c21cdc9] {
+.rk-scroll-fade.is-start-x[data-v-383954d8] {
   inset-inline-start: 0;
   background: linear-gradient(to right, var(--rk-scroll-fade), transparent);
 }
-.rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+.rk-scroll-fade.is-end-x[data-v-383954d8] {
   inset-inline-end: 0;
   background: linear-gradient(to left, var(--rk-scroll-fade), transparent);
 }
-.rk-scroll-fade.is-start-y[data-v-4c21cdc9] {
+.rk-scroll-fade.is-start-y[data-v-383954d8] {
   inset-block-start: 0;
   background: linear-gradient(to bottom, var(--rk-scroll-fade), transparent);
 }
-.rk-scroll-fade.is-end-y[data-v-4c21cdc9] {
+.rk-scroll-fade.is-end-y[data-v-383954d8] {
   inset-block-end: 0;
   background: linear-gradient(to top, var(--rk-scroll-fade), transparent);
 }
 
 /* The insets are logical, so they land on the correct side on their own.
    A gradient has no logical direction, so these two flip by hand. */
-[dir='rtl'] .rk-scroll-fade.is-start-x[data-v-4c21cdc9] {
+[dir='rtl'] .rk-scroll-fade.is-start-x[data-v-383954d8] {
   background: linear-gradient(to left, var(--rk-scroll-fade), transparent);
 }
-[dir='rtl'] .rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+[dir='rtl'] .rk-scroll-fade.is-end-x[data-v-383954d8] {
   background: linear-gradient(to right, var(--rk-scroll-fade), transparent);
 }
 
@@ -414,37 +441,45 @@
   height: 65%;
 }
 
-.rk-menu[data-v-eaeecb75] {
+.rk-menu[data-v-657b2528] {
   position: relative;
   display: inline-flex;
 }
-.rk-menu-trigger[data-v-eaeecb75] {
+.rk-menu-trigger[data-v-657b2528] {
   display: inline-flex;
   border-radius: var(--radius-cell);
 }
-.rk-menu-trigger[data-v-eaeecb75]:focus-visible {
+.rk-menu-trigger[data-v-657b2528]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-menu-panel[data-v-eaeecb75] {
+.rk-menu-panel[data-v-657b2528] {
   position: absolute;
-  top: calc(100% + 0.5rem);
   z-index: 50;
+  /* The slide is a translate rather than an inset, so it composes with the
+     `is-start`/`is-end` edge the caller asked for instead of replacing it. */
+  transform: translateX(var(--rk-menu-shift, 0px));
   min-width: 12rem;
   overflow: hidden;
   border-radius: var(--radius-card);
   padding: 0.375rem;
 }
-.rk-menu-panel.is-end[data-v-eaeecb75] {
+.rk-menu-panel.is-bottom[data-v-657b2528] {
+  top: calc(100% + 0.5rem);
+}
+.rk-menu-panel.is-top[data-v-657b2528] {
+  bottom: calc(100% + 0.5rem);
+}
+.rk-menu-panel.is-end[data-v-657b2528] {
   inset-inline-end: 0;
 }
-.rk-menu-panel.is-start[data-v-eaeecb75] {
+.rk-menu-panel.is-start[data-v-657b2528] {
   inset-inline-start: 0;
 }
 
 /* The items belong to the caller, so this styles them by role rather than by
    class: whatever they render, it lines up. */
-.rk-menu-panel[data-v-eaeecb75] [role='menuitem'] {
+.rk-menu-panel[data-v-657b2528] [role='menuitem'] {
   display: block;
   width: 100%;
   border-radius: var(--radius-cell);
@@ -454,32 +489,32 @@
   color: var(--color-ink);
   transition: background-color var(--duration-fast);
 }
-.rk-menu-panel[data-v-eaeecb75] [role='menuitem']:hover {
+.rk-menu-panel[data-v-657b2528] [role='menuitem']:hover {
   background: var(--color-muted);
 }
-.rk-menu-panel[data-v-eaeecb75] [role='menuitem']:focus-visible {
+.rk-menu-panel[data-v-657b2528] [role='menuitem']:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
 }
-.rk-menu-panel[data-v-eaeecb75] hr {
+.rk-menu-panel[data-v-657b2528] hr {
   margin: 0.375rem 0;
   height: 1px;
   border: 0;
   background: color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
 
-.rk-combo[data-v-0ae3b425] {
+.rk-combo[data-v-f02a0924] {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }
-.rk-combo-label[data-v-0ae3b425] {
+.rk-combo-label[data-v-f02a0924] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-combo-field[data-v-0ae3b425] {
+.rk-combo-field[data-v-f02a0924] {
   position: relative;
   display: flex;
   align-items: center;
@@ -487,14 +522,14 @@
 
 /* With chips the field is a box that wraps, and the input is one item in it
    that grows into whatever is left. */
-.rk-combo-field.is-multiple[data-v-0ae3b425] {
+.rk-combo-field.is-multiple[data-v-f02a0924] {
   flex-wrap: wrap;
   gap: 0.25rem;
   min-height: 2.75rem;
   border-radius: var(--radius-card);
   padding: 0.3125rem 2rem 0.3125rem 0.375rem;
 }
-.rk-combo-chip[data-v-0ae3b425] {
+.rk-combo-chip[data-v-f02a0924] {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -504,7 +539,7 @@
   font-size: 0.8125rem;
   color: var(--color-ink);
 }
-.rk-combo-chip-x[data-v-0ae3b425] {
+.rk-combo-chip-x[data-v-f02a0924] {
   display: grid;
   width: 1.125rem;
   height: 1.125rem;
@@ -513,13 +548,13 @@
   color: var(--color-ink-soft);
   line-height: 1;
 }
-.rk-combo-chip-x[data-v-0ae3b425]:hover {
+.rk-combo-chip-x[data-v-f02a0924]:hover {
   color: var(--color-ink);
 }
 
 /* 16px, like every other text control here: iOS zooms the viewport when it
    focuses a field under 16px and never zooms back. */
-.rk-combo-input[data-v-0ae3b425] {
+.rk-combo-input[data-v-f02a0924] {
   width: 100%;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -527,7 +562,7 @@
   font-size: 1rem;
   color: var(--color-ink);
 }
-.is-multiple .rk-combo-input[data-v-0ae3b425] {
+.is-multiple .rk-combo-input[data-v-f02a0924] {
   width: auto;
   height: 1.75rem;
   min-width: 6rem;
@@ -538,39 +573,45 @@
   background: transparent;
   box-shadow: none;
 }
-.rk-combo-input[data-v-0ae3b425]:focus-visible {
+.rk-combo-input[data-v-f02a0924]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.is-multiple .rk-combo-input[data-v-0ae3b425]:focus-visible {
+.is-multiple .rk-combo-input[data-v-f02a0924]:focus-visible {
   outline: none;
 }
 
 /* The ring belongs to the whole box once the box is the control. */
-.rk-combo-field.is-multiple[data-v-0ae3b425]:focus-within {
+.rk-combo-field.is-multiple[data-v-f02a0924]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-combo-input[data-v-0ae3b425]:disabled {
+.rk-combo-input[data-v-f02a0924]:disabled {
   opacity: 0.5;
 }
-.rk-combo-toggle[data-v-0ae3b425] {
+.rk-combo-toggle[data-v-f02a0924] {
   position: absolute;
   inset-inline-end: 0.5rem;
   color: var(--color-ink-soft);
   font-size: 0.75rem;
 }
-.rk-combo-list[data-v-0ae3b425] {
+.rk-combo-list[data-v-f02a0924] {
   position: absolute;
-  top: calc(100% - 1.25rem);
   z-index: 50;
+  transform: translateX(var(--rk-combo-shift, 0px));
   max-height: 14rem;
   width: 100%;
   overflow-y: auto;
   border-radius: var(--radius-card);
   padding: 0.25rem;
 }
-.rk-combo-option[data-v-0ae3b425] {
+.rk-combo-list.is-bottom[data-v-f02a0924] {
+  top: calc(100% - 1.25rem);
+}
+.rk-combo-list.is-top[data-v-f02a0924] {
+  bottom: calc(100% - 1.25rem);
+}
+.rk-combo-option[data-v-f02a0924] {
   cursor: pointer;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.625rem;
@@ -580,78 +621,78 @@
 
 /* A virtual row's height is the arithmetic the spacers are built on, so it
    cannot be left to the text inside it. */
-.rk-combo-option[style][data-v-0ae3b425] {
+.rk-combo-option[style][data-v-f02a0924] {
   display: flex;
   align-items: center;
   padding-block: 0;
 }
-.rk-combo-option.is-highlighted[data-v-0ae3b425] {
+.rk-combo-option.is-highlighted[data-v-f02a0924] {
   background: var(--color-muted);
 }
-.rk-combo-option.is-selected[data-v-0ae3b425] {
+.rk-combo-option.is-selected[data-v-f02a0924] {
   font-weight: 600;
 }
-.rk-combo-empty[data-v-0ae3b425],
-.rk-combo-status[data-v-0ae3b425] {
+.rk-combo-empty[data-v-f02a0924],
+.rk-combo-status[data-v-f02a0924] {
   padding: 0.75rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
 }
-.rk-combo-status[data-v-0ae3b425] {
+.rk-combo-status[data-v-f02a0924] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-combo-status-rows[data-v-0ae3b425] {
+.rk-combo-status-rows[data-v-f02a0924] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-combo-error[data-v-0ae3b425] {
+.rk-combo-error[data-v-f02a0924] {
   font-size: 0.75rem;
   color: var(--color-negative);
 }
-.rk-combo-hint[data-v-0ae3b425] {
+.rk-combo-hint[data-v-f02a0924] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
 
-.rk-slider[data-v-7fa2769b] {
+.rk-slider[data-v-8f8ae87b] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-slider-head[data-v-7fa2769b] {
+.rk-slider-head[data-v-8f8ae87b] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
 }
-.rk-slider-label[data-v-7fa2769b] {
+.rk-slider-label[data-v-8f8ae87b] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-slider-value[data-v-7fa2769b] {
+.rk-slider-value[data-v-8f8ae87b] {
   font-size: 0.875rem;
   color: var(--color-ink-soft);
   font-variant-numeric: tabular-nums;
 }
-.rk-slider-input[data-v-7fa2769b] {
+.rk-slider-input[data-v-8f8ae87b] {
   width: 100%;
   height: 1.25rem;
   appearance: none;
   background: transparent;
   cursor: pointer;
 }
-.rk-slider-input[data-v-7fa2769b]:disabled {
+.rk-slider-input[data-v-8f8ae87b]:disabled {
   opacity: 0.5;
   cursor: default;
 }
 
 /* The two engines will not accept these in one rule: an unknown pseudo-element
    invalidates the whole selector, so WebKit and Firefox are written twice. */
-.rk-slider-input[data-v-7fa2769b]::-webkit-slider-runnable-track {
+.rk-slider-input[data-v-8f8ae87b]::-webkit-slider-runnable-track {
   height: 0.375rem;
   border-radius: 9999px;
   background: linear-gradient(
@@ -660,17 +701,30 @@
     var(--color-hair) var(--rk-slider-filled, 0%)
   );
 }
-.rk-slider-input[data-v-7fa2769b]::-moz-range-track {
+
+/* A gradient has no logical direction, so the one hand-painted track in the
+   kit is written twice. Firefox needs no counterpart: `::-moz-range-progress`
+   is positioned by the engine, which already knows which way the input runs.
+   Only WebKit's track is painted here, and it would have filled from the
+   left while the thumb started on the right. */
+[dir='rtl'] .rk-slider-input[data-v-8f8ae87b]::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to left,
+    var(--color-primary) var(--rk-slider-filled, 0%),
+    var(--color-hair) var(--rk-slider-filled, 0%)
+  );
+}
+.rk-slider-input[data-v-8f8ae87b]::-moz-range-track {
   height: 0.375rem;
   border-radius: 9999px;
   background: var(--color-hair);
 }
-.rk-slider-input[data-v-7fa2769b]::-moz-range-progress {
+.rk-slider-input[data-v-8f8ae87b]::-moz-range-progress {
   height: 0.375rem;
   border-radius: 9999px;
   background: var(--color-primary);
 }
-.rk-slider-input[data-v-7fa2769b]::-webkit-slider-thumb {
+.rk-slider-input[data-v-8f8ae87b]::-webkit-slider-thumb {
   appearance: none;
   margin-top: -0.4375rem;
   width: 1.25rem;
@@ -680,7 +734,7 @@
   border: 2px solid var(--color-primary);
   box-shadow: var(--shadow-control);
 }
-.rk-slider-input[data-v-7fa2769b]::-moz-range-thumb {
+.rk-slider-input[data-v-8f8ae87b]::-moz-range-thumb {
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid var(--color-primary);
@@ -688,15 +742,15 @@
   background: var(--color-surface);
   box-shadow: var(--shadow-control);
 }
-.rk-slider-input[data-v-7fa2769b]:focus-visible::-webkit-slider-thumb {
+.rk-slider-input[data-v-8f8ae87b]:focus-visible::-webkit-slider-thumb {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-slider-input[data-v-7fa2769b]:focus-visible::-moz-range-thumb {
+.rk-slider-input[data-v-8f8ae87b]:focus-visible::-moz-range-thumb {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-slider-hint[data-v-7fa2769b] {
+.rk-slider-hint[data-v-8f8ae87b] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
@@ -1142,49 +1196,122 @@ to {
   inherits: false
 }
 
-.rk-activity[data-v-9f622328] {
-  overflow-x: auto;
-}
-.rk-activity-table[data-v-9f622328] {
+.rk-activity-table[data-v-766e5244] {
   border-collapse: separate;
   border-spacing: 2px;
 }
-.rk-activity-corner[data-v-9f622328],
-.rk-activity-weekday[data-v-9f622328] {
+.rk-activity-corner[data-v-766e5244],
+.rk-activity-weekday[data-v-766e5244] {
   width: 0;
   padding: 0;
 }
-.rk-activity-table th[data-v-9f622328] {
+.rk-activity-table th[data-v-766e5244] {
   color: var(--color-ink-soft);
   font-size: 0.5625rem;
   font-weight: 500;
   line-height: 1;
   text-align: start;
 }
-.rk-activity-cell[data-v-9f622328] {
+.rk-activity-cell[data-v-766e5244] {
   width: 0.625rem;
   height: 0.625rem;
   padding: 0;
   border-radius: var(--radius-cell);
   background: var(--color-muted);
 }
-.rk-activity-cell.is-blank[data-v-9f622328] {
+.rk-activity-cell.is-blank[data-v-766e5244] {
   background: transparent;
 }
-.rk-activity-cell.is-pickable[data-v-9f622328] {
+.rk-activity-cell.is-pickable[data-v-766e5244] {
   cursor: pointer;
 }
-.rk-activity-cell[data-v-9f622328]:focus-visible {
+.rk-activity-cell[data-v-766e5244]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
 
-.rk-vlist-rows[data-v-936ed40c] {
+.rk-bars[data-v-12682ed6] {
+  width: 100%;
+  border-collapse: collapse;
+}
+.rk-bars-label[data-v-12682ed6] {
+  padding-block: 0.3125rem;
+  padding-inline-end: 0.75rem;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: start;
+  white-space: nowrap;
+}
+.rk-bars-track[data-v-12682ed6] {
+  width: 100%;
+  padding-block: 0.3125rem;
+}
+.rk-bars-fill[data-v-12682ed6] {
+  display: block;
+  height: 0.625rem;
+  border-radius: 9999px;
+  transition: width var(--duration-slower) var(--ease-standard);
+}
+.rk-bars-value[data-v-12682ed6] {
+  padding-block: 0.3125rem;
+  padding-inline-start: 0.75rem;
+  color: var(--color-ink-soft);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.rk-donut[data-v-4ee6aaa6] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.25rem;
+}
+.rk-donut-ring[data-v-4ee6aaa6] {
+  width: 8.5rem;
+  height: 8.5rem;
+  flex: none;
+}
+.rk-donut-legend[data-v-4ee6aaa6] {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  flex: 1 1 12rem;
+  list-style: none;
+}
+.rk-donut-item[data-v-4ee6aaa6] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.1875rem;
+  font-size: 0.8125rem;
+}
+.rk-donut-swatch[data-v-4ee6aaa6] {
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: none;
+  border-radius: 9999px;
+  background: currentColor;
+}
+.rk-donut-name[data-v-4ee6aaa6] {
+  min-width: 0;
+  flex: 1 1 auto;
+  color: var(--color-ink);
+}
+.rk-donut-value[data-v-4ee6aaa6] {
+  color: var(--color-ink-soft);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.rk-vlist-rows[data-v-5fea77fd] {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.rk-vlist-row[data-v-936ed40c] {
+.rk-vlist-row[data-v-5fea77fd] {
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -1279,20 +1406,20 @@ to {
   font-size: 0.8125rem;
 }
 
-.rk-cal[data-v-30197a85] {
+.rk-cal[data-v-d682f18a] {
   display: flex;
   width: 100%;
   max-width: 19rem;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-cal-head[data-v-30197a85] {
+.rk-cal-head[data-v-d682f18a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.25rem;
 }
-.rk-cal-arrow[data-v-30197a85] {
+.rk-cal-arrow[data-v-d682f18a] {
   display: grid;
   width: 2rem;
   height: 2rem;
@@ -1301,40 +1428,40 @@ to {
   color: var(--color-ink);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-cal-arrow[data-v-30197a85]:hover {
+.rk-cal-arrow[data-v-d682f18a]:hover {
   background: var(--color-muted);
 }
-.rk-cal-title[data-v-30197a85] {
+.rk-cal-title[data-v-d682f18a] {
   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-30197a85]:hover {
+.rk-cal-title[data-v-d682f18a]:hover {
   background: var(--color-muted);
 }
-.rk-cal-weekdays[data-v-30197a85],
-.rk-cal-week[data-v-30197a85] {
+.rk-cal-weekdays[data-v-d682f18a],
+.rk-cal-week[data-v-d682f18a] {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-.rk-cal-weekdays[data-v-30197a85] {
+.rk-cal-weekdays[data-v-d682f18a] {
   gap: 2px;
   font-size: 0.6875rem;
   font-weight: 600;
   text-align: center;
   color: var(--color-ink-soft);
 }
-.rk-cal-grid[data-v-30197a85] {
+.rk-cal-grid[data-v-d682f18a] {
   display: grid;
   gap: 2px;
 }
-.rk-cal-cell[data-v-30197a85] {
+.rk-cal-cell[data-v-d682f18a] {
   display: grid;
   place-items: center;
 }
-.rk-cal-day[data-v-30197a85] {
+.rk-cal-day[data-v-d682f18a] {
   display: grid;
   width: 100%;
   height: 2.25rem;
@@ -1347,49 +1474,49 @@ to {
     background-color var(--duration-fast) var(--ease-standard),
     color var(--duration-fast) var(--ease-standard);
 }
-.rk-cal-day[data-v-30197a85]:hover:not(:disabled) {
+.rk-cal-day[data-v-d682f18a]:hover:not(:disabled) {
   background: var(--color-muted);
 }
-.rk-cal-day[data-v-30197a85]:focus-visible {
+.rk-cal-day[data-v-d682f18a]: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-30197a85] {
+.rk-cal-day.is-outside[data-v-d682f18a] {
   color: var(--color-ink-soft);
   opacity: 0.55;
 }
-.rk-cal-day.is-inside[data-v-30197a85] {
+.rk-cal-day.is-inside[data-v-d682f18a] {
   background: color-mix(in oklab, var(--color-primary) 14%, transparent);
   border-radius: 0;
 }
-.rk-cal-day.is-selected[data-v-30197a85] {
+.rk-cal-day.is-selected[data-v-d682f18a] {
   background: var(--color-primary);
   color: var(--color-on-primary);
   font-weight: 600;
   opacity: 1;
 }
-.rk-cal-day[aria-current='date'][data-v-30197a85]:not(.is-selected) {
+.rk-cal-day[aria-current='date'][data-v-d682f18a]:not(.is-selected) {
   box-shadow: inset 0 0 0 1px var(--color-primary);
 }
-.rk-cal-day[data-v-30197a85]:disabled {
+.rk-cal-day[data-v-d682f18a]:disabled {
   cursor: not-allowed;
   opacity: 0.3;
 }
-.rk-cal-blocks[data-v-30197a85] {
+.rk-cal-blocks[data-v-d682f18a] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.375rem;
 }
-.rk-cal-block[data-v-30197a85] {
+.rk-cal-block[data-v-d682f18a] {
   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-30197a85]:hover {
+.rk-cal-block[data-v-d682f18a]:hover {
   background: var(--color-muted);
 }
 
@@ -1524,17 +1651,17 @@ to {
   vertical-align: -0.1em;
 }
 
-.rk-rating[data-v-3118ad6b] {
+.rk-rating[data-v-b7334b78] {
   display: inline-flex;
   align-items: center;
   gap: 0.125rem;
   border-radius: var(--radius-cell);
 }
-.rk-rating[data-v-3118ad6b]:focus-visible {
+.rk-rating[data-v-b7334b78]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-rating-star[data-v-3118ad6b] {
+.rk-rating-star[data-v-b7334b78] {
   display: grid;
   place-items: center;
   padding: 0.125rem;
@@ -1543,34 +1670,34 @@ to {
     color var(--duration-fast) var(--ease-standard),
     transform var(--duration-fast) var(--ease-standard);
 }
-.rk-rating:not(.is-readonly) .rk-rating-star[data-v-3118ad6b] {
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-b7334b78] {
   cursor: pointer;
 }
-.rk-rating-star.is-on[data-v-3118ad6b] {
+.rk-rating-star.is-on[data-v-b7334b78] {
   color: var(--color-warning);
 }
-.rk-rating:not(.is-readonly) .rk-rating-star[data-v-3118ad6b]:hover {
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-b7334b78]:hover {
   transform: scale(1.12);
 }
-.rk-rating-icon[data-v-3118ad6b] {
+.rk-rating-icon[data-v-b7334b78] {
   width: 1.25rem;
   height: 1.25rem;
   fill: currentColor;
   stroke-width: 1.25;
 }
-.is-sm .rk-rating-icon[data-v-3118ad6b] {
+.is-sm .rk-rating-icon[data-v-b7334b78] {
   width: 1rem;
   height: 1rem;
 }
-.is-lg .rk-rating-icon[data-v-3118ad6b] {
+.is-lg .rk-rating-icon[data-v-b7334b78] {
   width: 1.75rem;
   height: 1.75rem;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-rating-star[data-v-3118ad6b] {
+.rk-rating-star[data-v-b7334b78] {
     transition: none;
 }
-.rk-rating:not(.is-readonly) .rk-rating-star[data-v-3118ad6b]:hover {
+.rk-rating:not(.is-readonly) .rk-rating-star[data-v-b7334b78]:hover {
     transform: none;
 }
 }
@@ -1946,11 +2073,11 @@ to {
   outline: none;
 }
 
-.rk-popover[data-v-22d8f397] {
+.rk-popover[data-v-86915db6] {
   position: relative;
   display: inline-flex;
 }
-.rk-popover-panel[data-v-22d8f397] {
+.rk-popover-panel[data-v-86915db6] {
   position: absolute;
   z-index: 50;
   min-width: 14rem;
@@ -1959,39 +2086,39 @@ to {
   padding: 0.75rem;
   translate: var(--rk-popover-shift, 0) 0;
 }
-.rk-popover-panel[data-v-22d8f397]:focus-visible {
+.rk-popover-panel[data-v-86915db6]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-popover-panel.is-bottom[data-v-22d8f397] {
+.rk-popover-panel.is-bottom[data-v-86915db6] {
   top: calc(100% + 0.5rem);
 }
-.rk-popover-panel.is-top[data-v-22d8f397] {
+.rk-popover-panel.is-top[data-v-86915db6] {
   bottom: calc(100% + 0.5rem);
 }
-.rk-popover-panel.is-start[data-v-22d8f397] {
+.rk-popover-panel.is-start[data-v-86915db6] {
   inset-inline-start: 0;
 }
-.rk-popover-panel.is-end[data-v-22d8f397] {
+.rk-popover-panel.is-end[data-v-86915db6] {
   inset-inline-end: 0;
 }
-.rk-popover-panel.is-center[data-v-22d8f397] {
+.rk-popover-panel.is-center[data-v-86915db6] {
   left: 50%;
   translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;
 }
-.rk-popover-enter-active[data-v-22d8f397],
-.rk-popover-leave-active[data-v-22d8f397] {
+.rk-popover-enter-active[data-v-86915db6],
+.rk-popover-leave-active[data-v-86915db6] {
   transition:
     opacity var(--duration-fast) var(--ease-standard),
     transform var(--duration-fast) var(--ease-standard);
 }
-.rk-popover-enter-from[data-v-22d8f397],
-.rk-popover-leave-to[data-v-22d8f397] {
+.rk-popover-enter-from[data-v-86915db6],
+.rk-popover-leave-to[data-v-86915db6] {
   opacity: 0;
   transform: translateY(-4px) scale(0.98);
 }
-.rk-popover-panel.is-top.rk-popover-enter-from[data-v-22d8f397],
-.rk-popover-panel.is-top.rk-popover-leave-to[data-v-22d8f397] {
+.rk-popover-panel.is-top.rk-popover-enter-from[data-v-86915db6],
+.rk-popover-panel.is-top.rk-popover-leave-to[data-v-86915db6] {
   transform: translateY(4px) scale(0.98);
 }
 
@@ -2217,14 +2344,14 @@ to {
   gap: 0.5rem;
 }
 
-.rk-toggles[data-v-9076e36f] {
+.rk-toggles[data-v-e40e4271] {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 2px;
   border-radius: var(--radius-card);
   padding: 3px;
 }
-.rk-toggle[data-v-9076e36f] {
+.rk-toggle[data-v-e40e4271] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2240,34 +2367,34 @@ to {
     background-color var(--duration-fast) var(--ease-standard),
     color var(--duration-fast) var(--ease-standard);
 }
-.is-sm .rk-toggle[data-v-9076e36f] {
+.is-sm .rk-toggle[data-v-e40e4271] {
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.625rem;
   font-size: 0.8125rem;
 }
-.rk-toggle[data-v-9076e36f]:hover:not(:disabled) {
+.rk-toggle[data-v-e40e4271]:hover:not(:disabled) {
   background: var(--color-muted);
   color: var(--color-ink);
 }
-.rk-toggle[aria-pressed='true'][data-v-9076e36f] {
+.rk-toggle[aria-pressed='true'][data-v-e40e4271] {
   background: var(--color-primary);
   color: var(--color-on-primary);
 }
-.rk-toggle[data-v-9076e36f]:disabled {
+.rk-toggle[data-v-e40e4271]:disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }
-.rk-toggle-icon[data-v-9076e36f] {
+.rk-toggle-icon[data-v-e40e4271] {
   width: 1rem;
   height: 1rem;
 }
 
-.rk-pin-cells[data-v-ba322d9c] {
+.rk-pin-cells[data-v-1777eac8] {
   display: flex;
   gap: 0.5rem;
 }
-.rk-pin-cell[data-v-ba322d9c] {
+.rk-pin-cell[data-v-1777eac8] {
   width: 2.75rem;
   height: 3.25rem;
   border-radius: var(--radius-card);
@@ -2278,13 +2405,13 @@ to {
   color: var(--color-ink);
   caret-color: var(--color-primary);
 }
-.rk-pin-cell.is-invalid[data-v-ba322d9c] {
+.rk-pin-cell.is-invalid[data-v-1777eac8] {
   --surface-border-color: var(--color-negative);
 }
-.rk-pin-cell[data-v-ba322d9c]:disabled {
+.rk-pin-cell[data-v-1777eac8]:disabled {
   opacity: 0.5;
 }
-.rk-pin-error[data-v-ba322d9c] {
+.rk-pin-error[data-v-1777eac8] {
   margin-top: 0.5rem;
   font-size: 0.8125rem;
   color: var(--color-negative);
@@ -2950,12 +3077,13 @@ to {
 }
 }
 
-.rk-hovercard[data-v-70c09916] {
+.rk-hovercard[data-v-d3c3b40f] {
   position: relative;
   display: inline-flex;
 }
-.rk-hovercard-panel[data-v-70c09916] {
+.rk-hovercard-panel[data-v-d3c3b40f] {
   position: absolute;
+  transform: translateX(var(--rk-hovercard-shift, 0px));
   z-index: 40;
   inset-inline-start: 0;
   width: max-content;
@@ -2975,23 +3103,23 @@ to {
  * because the failure it prevents -- a card whose contents cannot be
  * reached -- is total rather than cosmetic.
  */
-.rk-hovercard-panel[data-v-70c09916]::before {
+.rk-hovercard-panel[data-v-d3c3b40f]::before {
   content: '';
   position: absolute;
   inset-inline: 0;
   height: 0.5rem;
 }
-.rk-hovercard-panel.is-bottom[data-v-70c09916]::before {
+.rk-hovercard-panel.is-bottom[data-v-d3c3b40f]::before {
   top: -0.5rem;
 }
-.rk-hovercard-panel.is-top[data-v-70c09916]::before {
+.rk-hovercard-panel.is-top[data-v-d3c3b40f]::before {
   bottom: -0.5rem;
 }
-.rk-hovercard-panel.is-bottom[data-v-70c09916] {
+.rk-hovercard-panel.is-bottom[data-v-d3c3b40f] {
   top: 100%;
   margin-block-start: 0.5rem;
 }
-.rk-hovercard-panel.is-top[data-v-70c09916] {
+.rk-hovercard-panel.is-top[data-v-d3c3b40f] {
   bottom: 100%;
   margin-block-end: 0.5rem;
 }
@@ -3474,90 +3602,90 @@ to {
   color: var(--color-ink-soft);
 }
 
-.rk-split[data-v-159a4f08] {
+.rk-split[data-v-977911a2] {
   display: flex;
   width: 100%;
   min-height: 0;
 }
-.rk-split.is-vertical[data-v-159a4f08] {
+.rk-split.is-vertical[data-v-977911a2] {
   flex-direction: column;
 }
-.rk-split.is-dragging[data-v-159a4f08] {
+.rk-split.is-dragging[data-v-977911a2] {
   user-select: none;
 }
-.rk-split-pane[data-v-159a4f08] {
+.rk-split-pane[data-v-977911a2] {
   min-width: 0;
   min-height: 0;
   overflow: auto;
 }
-.is-horizontal .rk-split-pane.is-start[data-v-159a4f08] {
+.is-horizontal .rk-split-pane.is-start[data-v-977911a2] {
   width: var(--rk-split);
 }
-.is-vertical .rk-split-pane.is-start[data-v-159a4f08] {
+.is-vertical .rk-split-pane.is-start[data-v-977911a2] {
   height: var(--rk-split);
 }
-.rk-split-pane.is-end[data-v-159a4f08] {
+.rk-split-pane.is-end[data-v-977911a2] {
   flex: 1;
 }
 
 /* The handle is wider than the line it draws: a 1px target is a target
    nobody hits. */
-.rk-split-handle[data-v-159a4f08] {
+.rk-split-handle[data-v-977911a2] {
   display: grid;
   flex-shrink: 0;
   place-items: center;
   background: transparent;
   touch-action: none;
 }
-.is-horizontal .rk-split-handle[data-v-159a4f08] {
+.is-horizontal .rk-split-handle[data-v-977911a2] {
   width: 0.75rem;
   cursor: col-resize;
 }
-.is-vertical .rk-split-handle[data-v-159a4f08] {
+.is-vertical .rk-split-handle[data-v-977911a2] {
   height: 0.75rem;
   cursor: row-resize;
 }
-.rk-split-grip[data-v-159a4f08] {
+.rk-split-grip[data-v-977911a2] {
   display: block;
   border-radius: 9999px;
   background: var(--color-hair);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.is-horizontal .rk-split-grip[data-v-159a4f08] {
+.is-horizontal .rk-split-grip[data-v-977911a2] {
   width: 2px;
   height: 100%;
 }
-.is-vertical .rk-split-grip[data-v-159a4f08] {
+.is-vertical .rk-split-grip[data-v-977911a2] {
   width: 100%;
   height: 2px;
 }
-.rk-split-handle:hover .rk-split-grip[data-v-159a4f08],
-.rk-split-handle:focus-visible .rk-split-grip[data-v-159a4f08],
-.is-dragging .rk-split-grip[data-v-159a4f08] {
+.rk-split-handle:hover .rk-split-grip[data-v-977911a2],
+.rk-split-handle:focus-visible .rk-split-grip[data-v-977911a2],
+.is-dragging .rk-split-grip[data-v-977911a2] {
   background: var(--color-primary);
 }
 
-.rk-toolbar[data-v-a65164b7] {
+.rk-toolbar[data-v-ad876ad1] {
   display: flex;
   align-items: center;
   gap: 0.375rem;
 }
-.rk-toolbar.is-vertical[data-v-a65164b7] {
+.rk-toolbar.is-vertical[data-v-ad876ad1] {
   flex-direction: column;
   align-items: stretch;
 }
 
-.rk-tree[data-v-f91deddf] {
+.rk-tree[data-v-297d9dad] {
   display: flex;
   flex-direction: column;
   gap: 1px;
   border-radius: var(--radius-card);
 }
-.rk-tree[data-v-f91deddf]:focus-visible {
+.rk-tree[data-v-297d9dad]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-tree-row[data-v-f91deddf] {
+.rk-tree-row[data-v-297d9dad] {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -3568,31 +3696,31 @@ to {
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-tree-row.is-active[data-v-f91deddf] {
+.rk-tree-row.is-active[data-v-297d9dad] {
   background: var(--color-muted);
 }
-.rk-tree-row.is-chosen[data-v-f91deddf] {
+.rk-tree-row.is-chosen[data-v-297d9dad] {
   color: var(--color-primary);
   font-weight: 500;
 }
-.rk-tree-row.is-chosen.is-active[data-v-f91deddf] {
+.rk-tree-row.is-chosen.is-active[data-v-297d9dad] {
   background: color-mix(in oklab, var(--color-primary) 12%, transparent);
 }
-.rk-tree-row.is-disabled[data-v-f91deddf] {
+.rk-tree-row.is-disabled[data-v-297d9dad] {
   cursor: not-allowed;
   opacity: 0.45;
 }
-.rk-tree-twist[data-v-f91deddf],
-.rk-tree-twist-space[data-v-f91deddf] {
+.rk-tree-twist[data-v-297d9dad],
+.rk-tree-twist-space[data-v-297d9dad] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.rk-tree-twist[data-v-f91deddf] {
+.rk-tree-twist[data-v-297d9dad] {
   color: var(--color-ink-soft);
   transition: rotate var(--duration-fast) var(--ease-standard);
 }
-.rk-tree-twist.is-open[data-v-f91deddf] {
+.rk-tree-twist.is-open[data-v-297d9dad] {
   rotate: 90deg;
 }
 
@@ -3638,32 +3766,32 @@ to {
   padding-top: 1rem;
 }
 
-.rk-tabs[data-v-8135ecab] {
+.rk-tabs[data-v-dc56244f] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
-.rk-tab[data-v-8135ecab] {
+.rk-tab[data-v-dc56244f] {
   position: relative;
   padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
   transition: color var(--duration-fast);
 }
-.rk-tab[data-v-8135ecab]:hover {
+.rk-tab[data-v-dc56244f]:hover {
   color: var(--color-ink);
 }
-.rk-tab[data-v-8135ecab]:focus-visible {
+.rk-tab[data-v-dc56244f]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
   border-radius: var(--radius-cell);
 }
-.rk-tab.is-active[data-v-8135ecab] {
+.rk-tab.is-active[data-v-dc56244f] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-tab.is-active[data-v-8135ecab]::after {
+.rk-tab.is-active[data-v-dc56244f]::after {
   content: '';
   position: absolute;
   inset-inline: 0.5rem;
@@ -3672,10 +3800,10 @@ to {
   border-radius: 9999px;
   background: var(--color-primary);
 }
-.rk-tabpanel[data-v-8135ecab] {
+.rk-tabpanel[data-v-dc56244f] {
   padding-top: 1rem;
 }
-.rk-tabpanel[data-v-8135ecab]:focus-visible {
+.rk-tabpanel[data-v-dc56244f]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }