rei-kit 2.14.0 → 2.15.0

package/dist/styles.css

@@ -632,6 +632,79 @@
   color: var(--color-ink-soft);
 }
 
+/* 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;
+}
+
+/* The slider takes the room; the field is as wide as its digits need and no
+   wider, so the pair does not read as two fields of equal weight. */
+.rk-slider-field[data-v-6ec3163a] {
+  display: flex;
+  flex-wrap: wrap;
+  /* Centred rather than bottom-aligned: the slider's block grows when its
+     hint wraps to a second line, and aligning to the bottom edge sank the
+     field down with it. */
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* It wraps rather than squeezing: a slider shorter than this is one nobody
+   can aim with, and then the field belongs under it instead of beside it.
+   Wrapping does that by itself, so it needs no container query -- which
+   would have been a rule that silently never matched unless the app had
+   declared a container above it. */
+.rk-slider-field[data-v-6ec3163a] > :first-child {
+  min-width: 12rem;
+  flex: 1 1 12rem;
+}
+.rk-slider-field-number[data-v-6ec3163a] {
+  width: 7.5rem;
+  flex: 0 1 7.5rem;
+}
+
 .rk-spin-wrap[data-v-842da62c] {
   display: inline-flex;
   align-items: center;
@@ -1827,53 +1900,6 @@ to {
   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;
@@ -3068,11 +3094,11 @@ to {
   outline-offset: 2px;
 }
 
-.rk-tip[data-v-3a572640] {
+.rk-tip[data-v-c31426f8] {
   position: relative;
   display: inline-flex;
 }
-.rk-tip-bubble[data-v-3a572640] {
+.rk-tip-bubble[data-v-c31426f8] {
   position: absolute;
   left: 50%;
   z-index: 60;
@@ -3091,18 +3117,30 @@ to {
   pointer-events: none;
   transition: opacity var(--duration-fast) ease;
 }
-.rk-tip-bubble.is-top[data-v-3a572640] {
+.rk-tip-bubble.is-top[data-v-c31426f8] {
   bottom: calc(100% + 0.375rem);
 }
-.rk-tip-bubble.is-bottom[data-v-3a572640] {
+.rk-tip-bubble.is-bottom[data-v-c31426f8] {
   top: calc(100% + 0.375rem);
 }
-.rk-tip:hover .rk-tip-bubble[data-v-3a572640],
-.rk-tip:focus-within .rk-tip-bubble[data-v-3a572640] {
+
+/* Following: placed from the pointer rather than from the trigger's edges,
+   so `top` and `bottom` both have to give way to the inline style. */
+.rk-tip-bubble.is-following[data-v-c31426f8] {
+  bottom: auto;
+  /* No transition on the position, or the bubble lags the pointer it is
+     supposed to be under. */
+  transition: opacity var(--duration-fast) ease;
+}
+.rk-tip-bubble.is-following.is-top[data-v-c31426f8] {
+  transform: translate(-50%, -100%);
+}
+.rk-tip:hover .rk-tip-bubble[data-v-c31426f8],
+.rk-tip:focus-within .rk-tip-bubble[data-v-c31426f8] {
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-tip-bubble[data-v-3a572640] {
+.rk-tip-bubble[data-v-c31426f8] {
     transition: none;
 }
 }

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

@@ -18,6 +18,19 @@
  * description of the control rather than as loose text nearby. That is why the
  * trigger goes in a slot: the component has to own the id on both ends.
  *
+ * ## `follow`, and what it costs
+ *
+ * With `follow` the bubble tracks the pointer across the trigger, which is
+ * what a large target wants — a chart, a map, a calendar cell — where a
+ * bubble pinned to the middle can be nowhere near what is under the cursor.
+ *
+ * It is opt-in because it is the one thing here that needs JavaScript: a
+ * `follow` tooltip does nothing until the bundle arrives, while the default
+ * works in a prerendered page with scripting switched off. It also stops
+ * following for a reader who asked their system for less motion, and for a
+ * keyboard, which has no cursor to follow — both fall back to the anchored
+ * position, so the tooltip is never lost, only still.
+ *
  * ## When not to use it
  *
  * For anything the reader must have. A tooltip is unreachable on a touch screen
@@ -27,6 +40,10 @@ type __VLS_Props = {
     /** The description. Already translated. */
     label: string;
     placement?: 'top' | 'bottom' | undefined;
+    /** Track the pointer across the trigger instead of pinning to its middle. */
+    follow?: boolean | undefined;
+    /** How far the bubble sits from the pointer, in pixels. */
+    offset?: number | undefined;
 };
 type __VLS_Slots = {
     /** The control being described. */

package/dist/web.js

@@ -7,7 +7,7 @@ import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpD
 import { RouterLink } from "vue-router";
 //#region src/web/BaseAccordion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$15 = { class: "rk-accordion" };
-var _hoisted_2$13 = [
+var _hoisted_2$12 = [
 	"aria-expanded",
 	"aria-controls",
 	"onClick"
@@ -54,7 +54,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					}, [createElementVNode("span", _hoisted_3$11, [renderSlot(_ctx.$slots, "title", {
 						item,
 						open: isOpen(item.key)
-					}, () => [createTextVNode(toDisplayString(item.title), 1)], true)]), createElementVNode("span", _hoisted_4$9, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$13)]),
+					}, () => [createTextVNode(toDisplayString(item.title), 1)], true)]), createElementVNode("span", _hoisted_4$9, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$12)]),
 					_: 2
 				}, 1024)), createElementVNode("div", {
 					id: `${unref(uid)}-${item.key}`,
@@ -70,7 +70,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 //#endregion
 //#region src/web/BaseBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$14 = ["aria-label"];
-var _hoisted_2$12 = { class: "rk-crumbs" };
+var _hoisted_2$11 = { class: "rk-crumbs" };
 var _hoisted_3$10 = {
 	key: 1,
 	class: "rk-crumb-current",
@@ -91,7 +91,7 @@ var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$12, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.label,
 					class: "rk-crumb"
@@ -110,7 +110,7 @@ var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 //#endregion
 //#region src/web/BaseDisclosure.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$13 = { class: "rk-disclosure" };
-var _hoisted_2$11 = ["aria-expanded", "aria-controls"];
+var _hoisted_2$10 = ["aria-expanded", "aria-controls"];
 var _hoisted_3$9 = { class: "rk-disclosure-title" };
 var _hoisted_4$7 = {
 	class: "rk-disclosure-mark",
@@ -144,7 +144,7 @@ var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					"aria-expanded": open.value,
 					"aria-controls": unref(id),
 					onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
-				}, [createElementVNode("span", _hoisted_3$9, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]), createElementVNode("span", _hoisted_4$7, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$11)]),
+				}, [createElementVNode("span", _hoisted_3$9, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]), createElementVNode("span", _hoisted_4$7, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$10)]),
 				_: 3
 			})), createElementVNode("div", {
 				id: unref(id),
@@ -156,7 +156,7 @@ var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 //#endregion
 //#region src/web/BaseModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$12 = ["role", "aria-label"];
-var _hoisted_2$10 = { class: "rk-modal-head" };
+var _hoisted_2$9 = { class: "rk-modal-head" };
 var _hoisted_3$8 = { class: "rk-modal-title" };
 var _hoisted_4$6 = ["aria-label"];
 var _hoisted_5$5 = { class: "rk-modal-body" };
@@ -279,7 +279,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-label": __props.title,
 					tabindex: "-1"
 				}, [
-					createElementVNode("div", _hoisted_2$10, [createElementVNode("h2", _hoisted_3$8, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
+					createElementVNode("div", _hoisted_2$9, [createElementVNode("h2", _hoisted_3$8, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
 						class: "rk-modal-close",
@@ -305,7 +305,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 //#endregion
 //#region src/web/BasePagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$11 = ["aria-label"];
-var _hoisted_2$9 = ["disabled", "aria-label"];
+var _hoisted_2$8 = ["disabled", "aria-label"];
 var _hoisted_3$7 = {
 	key: 0,
 	class: "rk-pager-gap",
@@ -375,7 +375,7 @@ var BasePagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					disabled: __props.page <= 1,
 					"aria-label": __props.previousLabel,
 					onClick: _cache[0] || (_cache[0] = ($event) => go(__props.page - 1))
-				}, " ‹ ", 8, _hoisted_2$9),
+				}, " ‹ ", 8, _hoisted_2$8),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, index) => {
 					return openBlock(), createElementBlock(Fragment, { key: `${slot}-${index}` }, [slot === "gap" ? (openBlock(), createElementBlock("span", _hoisted_3$7, "…")) : (openBlock(), createElementBlock("button", {
 						key: 1,
@@ -399,7 +399,7 @@ var BasePagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 //#endregion
 //#region src/web/CommandMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$10 = ["aria-label"];
-var _hoisted_2$8 = { class: "rk-command-field" };
+var _hoisted_2$7 = { class: "rk-command-field" };
 var _hoisted_3$6 = [
 	"placeholder",
 	"aria-label",
@@ -540,7 +540,7 @@ var CommandMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					role: "dialog",
 					"aria-modal": "true",
 					"aria-label": __props.label
-				}, [createElementVNode("div", _hoisted_2$8, [createVNode(unref(Search), {
+				}, [createElementVNode("div", _hoisted_2$7, [createVNode(unref(Search), {
 					class: "text-ink-soft size-4 shrink-0",
 					"aria-hidden": "true"
 				}), withDirectives(createElementVNode("input", {
@@ -590,7 +590,7 @@ var CommandMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 //#endregion
 //#region src/web/DataTable.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$9 = ["aria-label"];
-var _hoisted_2$7 = {
+var _hoisted_2$6 = {
 	key: 0,
 	scope: "col",
 	class: "rk-data-pick"
@@ -714,7 +714,7 @@ var DataTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"aria-label": __props.caption
 			}, [createElementVNode("table", { class: normalizeClass(["rk-data", { "is-sticky": __props.stickyHeader }]) }, [
 				createElementVNode("caption", { class: normalizeClass(__props.captionHidden ? "rk-data-caption-hidden" : "rk-data-caption") }, toDisplayString(__props.caption), 3),
-				createElementVNode("thead", null, [createElementVNode("tr", null, [selectable.value ? (openBlock(), createElementBlock("th", _hoisted_2$7, [createElementVNode("input", {
+				createElementVNode("thead", null, [createElementVNode("tr", null, [selectable.value ? (openBlock(), createElementBlock("th", _hoisted_2$6, [createElementVNode("input", {
 					type: "checkbox",
 					class: "rk-data-box focus-ring",
 					checked: allChosen.value,
@@ -784,7 +784,7 @@ var DataTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 //#endregion
 //#region src/web/BaseSplitter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$8 = { class: "rk-split-pane is-start" };
-var _hoisted_2$6 = [
+var _hoisted_2$5 = [
 	"aria-label",
 	"aria-orientation",
 	"aria-valuenow",
@@ -874,7 +874,7 @@ var BaseSplitter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
 					class: "rk-split-grip",
 					"aria-hidden": "true"
-				}, null, -1)])], 40, _hoisted_2$6),
+				}, null, -1)])], 40, _hoisted_2$5),
 				createElementVNode("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "end", {}, void 0, true)])
 			], 6);
 		};
@@ -969,7 +969,7 @@ var BaseToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 //#endregion
 //#region src/web/BaseTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = ["aria-label", "aria-multiselectable"];
-var _hoisted_2$5 = [
+var _hoisted_2$4 = [
 	"aria-level",
 	"aria-setsize",
 	"aria-posinset",
@@ -1129,7 +1129,7 @@ var BaseTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 						"aria-hidden": "true"
 					})) : createCommentVNode("", true),
 					createElementVNode("span", _hoisted_4$2, toDisplayString(row.node.label), 1)
-				], 14, _hoisted_2$5);
+				], 14, _hoisted_2$4);
 			}), 128))], 40, _hoisted_1$6);
 		};
 	}
@@ -1137,7 +1137,7 @@ var BaseTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 //#endregion
 //#region src/web/TransferList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = { class: "rk-transfer" };
-var _hoisted_2$4 = { class: "rk-transfer-side" };
+var _hoisted_2$3 = { class: "rk-transfer-side" };
 var _hoisted_3$2 = { class: "rk-transfer-title" };
 var _hoisted_4$1 = { class: "rk-transfer-middle" };
 var _hoisted_5$1 = { class: "rk-transfer-side" };
@@ -1175,7 +1175,7 @@ var TransferList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$5, [
-				createElementVNode("div", _hoisted_2$4, [createElementVNode("p", _hoisted_3$2, toDisplayString(__props.availableLabel), 1), createVNode(BaseListbox_default, {
+				createElementVNode("div", _hoisted_2$3, [createElementVNode("p", _hoisted_3$2, toDisplayString(__props.availableLabel), 1), createVNode(BaseListbox_default, {
 					modelValue: markedAvailable.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => markedAvailable.value = $event),
 					mode: "multiple",
@@ -1301,7 +1301,7 @@ var ResponsiveDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 //#endregion
 //#region src/web/BaseTabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = ["aria-label"];
-var _hoisted_2$3 = [
+var _hoisted_2$2 = [
 	"id",
 	"aria-selected",
 	"aria-controls",
@@ -1367,7 +1367,7 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					"aria-controls": panelId(item.key),
 					tabindex: item.key === active.value ? 0 : -1,
 					onClick: ($event) => select(item.key)
-				}, toDisplayString(item.label), 11, _hoisted_2$3);
+				}, toDisplayString(item.label), 11, _hoisted_2$2);
 			}), 128))], 40, _hoisted_1$3), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return withDirectives((openBlock(), createElementBlock("div", {
 					id: panelId(item.key),
@@ -1386,27 +1386,70 @@ var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 }), [["__scopeId", "data-v-8135ecab"]]);
 //#endregion
 //#region src/web/BaseTooltip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "rk-tip" };
-var _hoisted_2$2 = ["id"];
+var _hoisted_1$2 = ["id"];
 //#endregion
 //#region src/web/BaseTooltip.vue
 var BaseTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "BaseTooltip",
 	props: {
 		label: {},
-		placement: { default: "top" }
+		placement: { default: "top" },
+		follow: {
+			type: Boolean,
+			default: false
+		},
+		offset: { default: 14 }
 	},
 	setup(__props) {
 		const id = useId();
+		/** Where the pointer is inside the trigger, or null when it is not. */
+		const at = ref(null);
+		let frame = 0;
+		/**
+		* A box chasing the pointer is motion, so a reader who asked for less of it
+		* gets the anchored bubble. Read per move rather than cached: the preference
+		* can change while the page is open.
+		*/
+		const wantsStill = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+		function onPointerMove(event) {
+			if (!__props.follow || wantsStill()) return;
+			if (frame) return;
+			const { clientX, clientY, currentTarget } = event;
+			const box = currentTarget.getBoundingClientRect();
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				at.value = {
+					x: clientX - box.left,
+					y: clientY - box.top
+				};
+			});
+		}
+		function onPointerLeave() {
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
+			at.value = null;
+		}
+		onBeforeUnmount(() => {
+			if (frame) cancelAnimationFrame(frame);
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", _hoisted_1$2, [renderSlot(_ctx.$slots, "default", { describedBy: unref(id) }, void 0, true), createElementVNode("span", {
+			return openBlock(), createElementBlock("span", {
+				class: "rk-tip",
+				onPointermove: onPointerMove,
+				onPointerleave: onPointerLeave,
+				onFocusout: onPointerLeave
+			}, [renderSlot(_ctx.$slots, "default", { describedBy: unref(id) }, void 0, true), createElementVNode("span", {
 				id: unref(id),
 				role: "tooltip",
-				class: normalizeClass(["rk-tip-bubble", `is-${__props.placement}`])
-			}, toDisplayString(__props.label), 11, _hoisted_2$2)]);
+				class: normalizeClass(["rk-tip-bubble", [`is-${__props.placement}`, { "is-following": at.value }]]),
+				style: normalizeStyle(at.value ? {
+					left: `${at.value.x}px`,
+					top: __props.placement === "top" ? `${at.value.y - __props.offset}px` : `${at.value.y + __props.offset}px`
+				} : void 0)
+			}, toDisplayString(__props.label), 15, _hoisted_1$2)], 32);
 		};
 	}
-}), [["__scopeId", "data-v-3a572640"]]);
+}), [["__scopeId", "data-v-c31426f8"]]);
 //#endregion
 //#region src/web/MegaMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = ["aria-label"];