rei-kit 2.23.0 → 2.24.0

package/dist/styles.css

@@ -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,38 +621,38 @@
 
 /* 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);
 }
@@ -1189,12 +1230,88 @@ to {
   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;
 }
@@ -1956,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;
@@ -1969,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);
 }
 
@@ -2960,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;
@@ -2985,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;
 }
@@ -3547,12 +3665,12 @@ to {
   background: var(--color-primary);
 }
 
-.rk-toolbar[data-v-d49198bf] {
+.rk-toolbar[data-v-ad876ad1] {
   display: flex;
   align-items: center;
   gap: 0.375rem;
 }
-.rk-toolbar.is-vertical[data-v-d49198bf] {
+.rk-toolbar.is-vertical[data-v-ad876ad1] {
   flex-direction: column;
   align-items: stretch;
 }

package/dist/utils/focusable.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What the keyboard can reach, as one selector.
+ *
+ * Three parts of the kit ask this question and each had written its own
+ * answer, which is how three answers came to differ: the dialog trap and
+ * the popover agreed, and `ScrollArea` left out `:not([disabled])`, so a
+ * box holding nothing but disabled buttons counted as reachable and was
+ * denied the focus stop that would have been its only way in.
+ *
+ * `summary` belongs here for the same reason it belonged in `ScrollArea`:
+ * a `<details>` heading takes focus, and a dialog whose trap skipped one
+ * would let Tab out of itself.
+ *
+ * Two things it deliberately does not do. It does not check whether an
+ * element is visible or inside an `inert` subtree — a selector cannot, and
+ * every caller here is already scoped to something on screen. And it is
+ * not what a roving-tabindex container should use to find its own
+ * controls: `[tabindex]:not([tabindex="-1"])` matches exactly the one
+ * control such a container has already put in the tab order, so it would
+ * find one item and then stop. `BaseToolbar` says so where it keeps its
+ * own.
+ */
+export declare const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex=\"-1\"])";
+/** The reachable elements inside `root`, in document order. */
+export declare function focusableWithin(root: Element | null | undefined): HTMLElement[];

package/dist/web/BaseHoverCard.vue.d.ts

@@ -43,6 +43,7 @@ type __VLS_Props = {
     openDelay?: number | undefined;
     /** How long it survives the pointer leaving, so the card can be reached. */
     closeDelay?: number | undefined;
+    /** Which side it prefers. It opens on the other when there is more room there. */
     placement?: 'top' | 'bottom' | undefined;
 };
 type __VLS_Slots = {

package/dist/web.js

@@ -1,5 +1,5 @@
 import { a as BaseCheckbox_default, c as useBoundValue, d as ensureSheetRoot, n as elementDirection, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-DRgd8UnQ.js";
-import { a as useMediaQuery, i as useMenuKeys, n as ScrollArea_default, r as BaseSkeleton_default, t as BaseListbox_default } from "./BaseListbox-BrIZxUmx.js";
+import { a as BaseSkeleton_default, c as useMediaQuery, i as focusableWithin, n as ScrollArea_default, o as useMenuKeys, s as useAnchoredPanel, t as BaseListbox_default } from "./BaseListbox-BQoSwYdJ.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
@@ -310,6 +310,14 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	setup(__props) {
 		const id = useId();
 		const open = ref(false);
+		const root = ref(null);
+		const panel = ref(null);
+		const { placed, shift } = useAnchoredPanel({
+			root,
+			panel,
+			open,
+			side: __props.placement
+		});
 		let timer;
 		function clear() {
 			if (timer !== void 0) clearTimeout(timer);
@@ -349,6 +357,8 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		onBeforeUnmount(clear);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
 				class: "rk-hovercard",
 				onPointerenter: show,
 				onPointerleave: hide,
@@ -358,37 +368,22 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, [renderSlot(_ctx.$slots, "default", { props: triggerProps.value }, void 0, true), open.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: unref(id),
-				class: normalizeClass(["rk-hovercard-panel surface-raised", `is-${__props.placement}`]),
+				ref_key: "panel",
+				ref: panel,
+				class: normalizeClass(["rk-hovercard-panel surface-raised", `is-${unref(placed)}`]),
+				style: normalizeStyle(unref(shift) ? { "--rk-hovercard-shift": `${unref(shift)}px` } : void 0),
 				role: "group",
 				"aria-label": __props.label
-			}, [renderSlot(_ctx.$slots, "card", {}, void 0, true)], 10, _hoisted_1$15)) : createCommentVNode("", true)], 32);
+			}, [renderSlot(_ctx.$slots, "card", {}, void 0, true)], 14, _hoisted_1$15)) : createCommentVNode("", true)], 544);
 		};
 	}
-}), [["__scopeId", "data-v-70c09916"]]);
+}), [["__scopeId", "data-v-d3c3b40f"]]);
 //#endregion
 //#region src/composables/use-dialog-shell.ts
-/**
-* What every modal surface has to do, in one place.
-*
-* A dialog, a drawer and anything else that takes the whole page share a
-* list that is easy to get nearly right: trap Tab, stop Escape, make the
-* rest of the page inert, stop it scrolling underneath, and hand focus back
-* to whatever opened it. Each of those has an order that matters, and the
-* orders are not obvious — releasing `inert` *after* restoring focus drops
-* it on the body, because an inert element cannot take focus. That was
-* written once, correctly, in `BaseModal`; a drawer that copied it would be
-* a second copy to keep correct.
-*
-* The Tab wrap has to be done by hand: the browser's own Tab order is the
-* whole document, and a dialog is only part of it. `inert` is what also
-* stops a screen reader's virtual cursor, which walks straight past a
-* keydown handler.
-*/
-var FOCUSABLE$1 = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 function useDialogShell(open, panel, { dismissible = () => true, onClose }) {
 	let releaseInert = null;
 	let restoreTo = null;
-	const focusable = () => panel.value ? Array.from(panel.value.querySelectorAll(FOCUSABLE$1)) : [];
+	const focusable = () => panel.value ? focusableWithin(panel.value) : [];
 	function onKeydown(event) {
 		if (event.key === "Escape" && dismissible()) {
 			event.stopPropagation();
@@ -1271,7 +1266,7 @@ var BaseToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 42, _hoisted_1$8);
 		};
 	}
-}), [["__scopeId", "data-v-d49198bf"]]);
+}), [["__scopeId", "data-v-ad876ad1"]]);
 //#endregion
 //#region src/web/BaseTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$7 = ["aria-label", "aria-multiselectable"];