@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -21,7 +21,26 @@ const emit = defineEmits<{
 const openItemId = ref<string | null>(null)
 const itemRefs = ref<Map<string, HTMLElement>>(new Map())
 
-const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+/** The bar shows this many items; the rest fold into a More dropdown. */
+const MAX_VISIBLE_ITEMS = 4
+const MORE_ITEM_ID = '__mint-pill-nav-more'
+
+const allItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+const normalizedItems = computed<PillNavItem[]>(() => {
+  if (allItems.value.length <= MAX_VISIBLE_ITEMS) return allItems.value
+  const folded = allItems.value.slice(MAX_VISIBLE_ITEMS)
+  return [
+    ...allItems.value.slice(0, MAX_VISIBLE_ITEMS),
+    {
+      id: MORE_ITEM_ID,
+      label: 'More',
+      dot: folded.some(item => item.dot),
+      // A folded group contributes its options; a plain item becomes one option.
+      children: folded.flatMap(item => item.children?.length ? item.children : [item]),
+    },
+  ]
+})
 
 function handleClick(item: PillNavItem) {
   if (item.disabled) return
@@ -35,8 +54,20 @@ function handleClick(item: PillNavItem) {
 
 function handleOptionClick(option: PillNavOption, item: PillNavItem) {
   if (option.disabled) return
-  if (!option.href && !option.to) emit('option-select', option, item)
   openItemId.value = null
+  if (option.href || option.to) return
+  if (item.id !== MORE_ITEM_ID) {
+    emit('option-select', option, item)
+    return
+  }
+  // A folded entry reports as it would from its own pill.
+  const folded = allItems.value.find(candidate => candidate.id === option.id && !candidate.children?.length)
+  if (folded) {
+    emit('select', folded)
+    return
+  }
+  const group = allItems.value.find(candidate => candidate.children?.some(child => child.id === option.id))
+  if (group) emit('option-select', option, group)
 }
 
 function normalizePillNavItem(item: PillNavItemInput): PillNavItem {

package/src/components/internal/DatePickerDateInternal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** DatePicker type="date": input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { ref, computed, nextTick, onBeforeUnmount, watch, useTemplateRef } from 'vue'
+import { ref, computed, nextTick, watch, useTemplateRef } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
 
@@ -30,11 +30,13 @@ const emit = defineEmits<{
 }>()
 
 const dropdownRef = ref<HTMLElement | null>(null)
-const dropdownStyle = ref<Record<string, string>>({})
 const { isOpen, triggerRef, open, close, toggle } = useDropdownState({
   rootRef: useTemplateRef<HTMLElement>('container'),
   insideRefs: [dropdownRef],
 })
+// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
+// instead of the panel closing on every scroll or resize.
+const { style: dropdownStyle } = useFloatingPanel(triggerRef, dropdownRef, isOpen)
 // The panel is a non-modal dialog: Tab cycles inside it while it is open, and
 // focus returns to the input when it closes.
 useFocusTrap({ containerRef: dropdownRef, active: isOpen })
@@ -42,7 +44,6 @@ const {
   weekDays,
   monthYear,
   calendarDays,
-  isDateDisabled,
   formatDateValue,
   setCurrentMonthFromDate,
   prevMonth,
@@ -58,14 +59,7 @@ const selectedDate = computed(() => {
   return isNaN(date.getTime()) ? null : date
 })
 
-const displayValue = computed(() => {
-  if (!selectedDate.value) return ''
-  return selectedDate.value.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-})
+const displayValue = computed(() => (selectedDate.value ? formatDateValue(selectedDate.value) : ''))
 
 function selectDate(day: CalendarGridDay) {
   if (day.isDisabled || props.disabled) return
@@ -73,15 +67,6 @@ function selectDate(day: CalendarGridDay) {
   close()
 }
 
-function goToToday() {
-  const today = new Date()
-  setCurrentMonthFromDate(today)
-  if (!isDateDisabled(today)) {
-    emit('update:modelValue', formatDateValue(today))
-    close()
-  }
-}
-
 function clear() {
   emit('update:modelValue', undefined)
   close()
@@ -100,41 +85,6 @@ function handleTriggerKeydown(event: KeyboardEvent) {
   }
 }
 
-// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
-// instead of the panel closing on every scroll or resize.
-let stopAutoUpdate: (() => void) | null = null
-
-async function updateDropdownPosition() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-
-  const { x, y } = await computePosition(trigger, panel, {
-    placement: 'bottom-start',
-    strategy: 'fixed',
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
-  })
-  dropdownStyle.value = {
-    position: 'fixed',
-    top: `${y}px`,
-    left: `${x}px`,
-    zIndex: '9999',
-  }
-}
-
-function stopPositioning() {
-  stopAutoUpdate?.()
-  stopAutoUpdate = null
-}
-
-function startPositioning() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-  stopPositioning()
-  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
-}
-
 /** Moves focus into the calendar grid: selected day, else today, else the first day. */
 function focusCalendar() {
   const panel = dropdownRef.value
@@ -147,26 +97,25 @@ function focusCalendar() {
 }
 
 watch(isOpen, async (opened) => {
-  if (!opened) {
-    stopPositioning()
-    return
-  }
+  if (!opened) return
   if (selectedDate.value) {
     setCurrentMonthFromDate(selectedDate.value)
   }
   await nextTick()
-  startPositioning()
   // A second tick so this focus lands after the focus trap's initial focus.
   await nextTick()
   focusCalendar()
 })
-
-onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
   <div ref="container" class="mint-date-picker">
     <div class="mint-date-picker__input-wrapper">
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
       <input
         ref="triggerRef"
         type="text"
@@ -185,11 +134,17 @@ onBeforeUnmount(stopPositioning)
         @click="toggleCalendar"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-date-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+      <button
+        v-if="clearable && modelValue && !disabled"
+        type="button"
+        class="mint-date-picker__clear-btn"
+        aria-label="Clear date"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
-      </div>
+      </button>
     </div>
 
     <Teleport to="body">
@@ -208,6 +163,7 @@ onBeforeUnmount(stopPositioning)
           :style="dropdownStyle"
           role="dialog"
           aria-label="Date picker"
+          @keydown.escape.prevent="close(true)"
         >
           <CalendarGridPanelInternal
             :week-days="weekDays"
@@ -218,24 +174,6 @@ onBeforeUnmount(stopPositioning)
             @next-month="nextMonth"
             @select="selectDate"
           />
-
-          <div class="mint-date-picker__footer">
-            <button
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
-              @click="goToToday"
-            >
-              Today
-            </button>
-            <button
-              v-if="clearable && modelValue"
-              type="button"
-              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
-              @click="clear"
-            >
-              Clear
-            </button>
-          </div>
         </div>
       </Transition>
     </Teleport>

package/src/components/internal/DatePickerDateTimeInternal.vue

@@ -3,6 +3,7 @@
 import { computed, ref, watch, nextTick, useTemplateRef } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../../utils/time'
 import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
@@ -37,10 +38,13 @@ const emit = defineEmits<{
 }>()
 
 const dropdownRef = ref<HTMLElement | null>(null)
+const rootRef = useTemplateRef<HTMLElement>('root')
 const { isOpen, open, close, toggle } = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('root'),
+  rootRef,
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
 })
+// Fixed below the field, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: dropdownStyle } = useFloatingPanel(rootRef, dropdownRef, isOpen)
 // Non-modal dialog: Tab stays inside the panel, focus returns to the input on close.
 useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
@@ -76,17 +80,12 @@ const selectedTimeStr = computed(() => {
 
 const displayValue = computed(() => {
   if (!selectedDate.value) return ''
-  const dateStr = selectedDate.value.toLocaleDateString(props.locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
   const timeStr = formatTime(
     selectedDate.value.getHours(),
     selectedDate.value.getMinutes(),
     props.timeFormat,
   )
-  return `${dateStr} ${timeStr}`
+  return `${formatDateValue(selectedDate.value)} ${timeStr}`
 })
 
 // Time slots
@@ -198,8 +197,8 @@ watch(isOpen, async (opened) => {
   <div ref="root" class="mint-datetime-picker">
     <div class="mint-datetime-picker__input-wrapper">
       <div class="mint-datetime-picker__icon-calendar">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
         </svg>
       </div>
       <input
@@ -221,11 +220,6 @@ watch(isOpen, async (opened) => {
         @click="toggleDropdown"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-datetime-picker__icon-clock">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
     </div>
 
     <Transition
@@ -240,8 +234,10 @@ watch(isOpen, async (opened) => {
         v-if="isOpen"
         ref="dropdownRef"
         class="mint-popover mint-datetime-picker__dropdown"
+        :style="dropdownStyle"
         role="dialog"
         aria-label="Date and time picker"
+        @keydown.escape.prevent="close(true)"
       >
         <!-- Calendar section -->
         <div class="mint-datetime-picker__calendar-section">

package/src/components/internal/DatePickerTimeInternal.vue

@@ -3,6 +3,7 @@
 import { ref, computed, watch, nextTick, useId, useTemplateRef } from 'vue'
 import type { TimeSlotDisabledFn } from '../../types'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import {
   compareTime,
   findNearestTimeSlotIndex,
@@ -40,12 +41,16 @@ const emit = defineEmits<{
 }>()
 
 const listRef = ref<HTMLUListElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 const highlightedIndex = ref(-1)
 const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
+const rootRef = useTemplateRef<HTMLElement>('root')
 const { isOpen, open, close, toggle } = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('root'),
+  rootRef,
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
 })
+// Fixed below the field and at least as wide, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: dropdownStyle } = useFloatingPanel(rootRef, dropdownRef, isOpen, { matchWidth: true })
 
 /** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
 const activeSlotId = computed(() =>
@@ -210,6 +215,11 @@ watch(isOpen, (open) => {
 <template>
   <div ref="root" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
+      <div class="mint-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
       <input
         ref="trigger"
         type="text"
@@ -241,11 +251,6 @@ watch(isOpen, (open) => {
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
-      <div class="mint-time-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
-        </svg>
-      </div>
     </div>
 
     <Transition
@@ -258,7 +263,9 @@ watch(isOpen, (open) => {
     >
       <div
         v-if="isOpen"
+        ref="dropdownRef"
         class="mint-popover mint-time-picker__dropdown"
+        :style="dropdownStyle"
       >
         <ul
           :id="listboxId"
@@ -284,9 +291,6 @@ watch(isOpen, (open) => {
           >
             <span class="mint-time-picker__slot-time">{{ formatTimeSlot(slot, format) }}</span>
             <span v-if="slotReason(slot)" class="mint-time-picker__slot-reason">{{ slotReason(slot) }}</span>
-            <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M3.5 8.5l3 3 6-7" />
-            </svg>
           </li>
         </ul>
       </div>

package/src/components/internal/NumberUnitInputInternal.vue

@@ -4,9 +4,9 @@
  * previews the value in each unit; units with a `factor` also get a hint in the neighbour unit
  * nearest to 1–1000.
  */
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { UnitOption } from '../../types'
 
@@ -148,27 +148,13 @@ function selectUnit(newUnitValue: string) {
 
 // ---- Unit menu (disclosure + WAI-ARIA keyboard, shared with ActionMenu) ----
 const menuRef = ref<HTMLElement | null>(null)
-// Transparent (not visibility:hidden) until placed, so the open-time focus can land on an option.
-const menuStyle = ref<Record<string, string>>({ opacity: '0' })
 const { isOpen, rootRef, open, close } = useDropdownState({
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
-  closeOnScroll: true,
   insideRefs: [menuRef],
-  onOpen: () => { menuStyle.value = { opacity: '0' } },
 })
 
-/** Teleported + fixed like ActionMenu, so overflow:hidden/auto ancestors never clip the menu. */
-watch(isOpen, async (opened) => {
-  if (!opened) return
-  await nextTick()
-  if (!rootRef.value || !menuRef.value) return
-  const { x, y } = await computePosition(rootRef.value, menuRef.value, {
-    placement: 'bottom-end',
-    strategy: 'fixed',
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
-  })
-  menuStyle.value = { left: `${x}px`, top: `${y}px` }
-})
+/** Teleported + fixed like ActionMenu, so overflow:hidden/auto ancestors never clip the menu; it follows the field on scroll. */
+const { style: menuStyle } = useFloatingPanel(rootRef, menuRef, isOpen, { placement: 'bottom-end' })
 
 function menuItems(): HTMLElement[] {
   return menuRef.value ? Array.from(menuRef.value.querySelectorAll<HTMLElement>('[role="option"]')) : []

package/src/components/internal/OnboardingLayerInternal.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+/**
+ * The tour layer: a scrim with a hole over the anchor, the step card, and the
+ * what's-new dots. AppTopBar renders it when the app provides onboarding.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { X } from 'lucide-vue-next'
+import BaseButton from '../BaseButton.vue'
+import { useEventListener } from '../../composables/useEventListener'
+import type { OnboardingState } from '../../composables/useOnboarding'
+
+const props = defineProps<{ state: OnboardingState }>()
+
+// Space between the anchor and the edge of the hole.
+const HOLE_PAD = 4
+
+const active = computed(() => props.state.active.value)
+const card = ref<HTMLElement | null>(null)
+const hole = ref<DOMRect | null>(null)
+const cardPosition = ref({ x: 0, y: 0 })
+const titleId = useId()
+let stopAutoUpdate: (() => void) | undefined
+
+async function position() {
+  const current = active.value
+  if (!current || !card.value) return
+  hole.value = current.element.getBoundingClientRect()
+  const { x, y } = await computePosition(current.element, card.value, {
+    strategy: 'fixed',
+    placement: current.step.placement ?? 'bottom',
+    middleware: [offset(12), flip(), shift({ padding: 12 })],
+  })
+  // The step may have changed while the position was computed.
+  if (active.value === current) cardPosition.value = { x, y }
+}
+
+// Focus goes back where it was when the run ends.
+let returnFocus: HTMLElement | null = null
+watch(active, async (current, previous) => {
+  stopAutoUpdate?.()
+  stopAutoUpdate = undefined
+  hole.value = null
+  if (current && !previous) returnFocus = document.activeElement as HTMLElement | null
+  if (!current) {
+    if (returnFocus?.isConnected) returnFocus.focus()
+    returnFocus = null
+    return
+  }
+  await nextTick()
+  if (!card.value || active.value !== current) return
+  current.element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  stopAutoUpdate = autoUpdate(current.element, card.value, () => void position())
+  // A click step: the keyboard user presses the control itself.
+  if (current.step.advanceOn === 'click') current.element.focus()
+  // Otherwise the card itself: no focus ring on load, and Tab reaches Back and Next.
+  else card.value.focus()
+}, { immediate: true })
+onBeforeUnmount(() => stopAutoUpdate?.())
+
+// The layer is its own focus trap: Tab cycles over the card's buttons (and the
+// anchor on a click step), never the page behind; from the card itself Tab goes
+// to the first stop and Shift+Tab to the last.
+useEventListener(document, 'keydown', (event) => {
+  const current = active.value
+  if (!current || !card.value) return
+  // Keys belong to the tour only while focus is on its card, its anchor, or nowhere.
+  const focused = document.activeElement
+  if (focused && focused !== document.body && !card.value.contains(focused) && focused !== current.element) return
+  const onCard = focused === card.value
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    props.state.dismiss()
+  } else if (event.key === 'Tab') {
+    const buttons = [...card.value.querySelectorAll<HTMLElement>('button')]
+    const stops = current.step.advanceOn === 'click' ? [current.element, ...buttons] : buttons
+    const at = stops.indexOf(document.activeElement as HTMLElement)
+    const target = at === -1 ? (event.shiftKey ? stops.length - 1 : 0) : (at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length
+    event.preventDefault()
+    stops[target].focus()
+  } else if (event.key === 'Enter' && onCard && current.step.advanceOn !== 'click') {
+    event.preventDefault()
+    props.state.next()
+  }
+}, { capture: true })
+
+const holeStyle = computed(() => hole.value && {
+  left: `${hole.value.left - HOLE_PAD}px`,
+  top: `${hole.value.top - HOLE_PAD}px`,
+  width: `${hole.value.width + 2 * HOLE_PAD}px`,
+  height: `${hole.value.height + 2 * HOLE_PAD}px`,
+})
+// advanceOn 'click': cut the hole out of the click blocker, so the anchor takes the click.
+const blockerStyle = computed(() => {
+  const rect = hole.value
+  if (!rect || active.value?.step.advanceOn !== 'click') return undefined
+  const [x, y, w, h] = [rect.left - HOLE_PAD, rect.top - HOLE_PAD, rect.width + 2 * HOLE_PAD, rect.height + 2 * HOLE_PAD]
+  return { clipPath: `path(evenodd, 'M0 0H${window.innerWidth}V${window.innerHeight}H0Z M${x} ${y}h${w}v${h}h${-w}Z')` }
+})
+const isLast = computed(() => !!active.value && active.value.index === active.value.count - 1)
+const nextLabel = computed(() => active.value?.news ? 'Got it' : isLast.value ? 'Done' : 'Next')
+
+// What's-new dots: one on each element with unseen news, hidden while a card shows.
+const dots = ref<Array<{ id: string; title: string; x: number; y: number }>>([])
+let frame = 0
+function placeDots() {
+  cancelAnimationFrame(frame)
+  frame = requestAnimationFrame(() => {
+    dots.value = active.value ? [] : props.state.news.value.flatMap((item) => {
+      if (!item.unseen) return []
+      const element = document.querySelector(`[data-onboarding="${CSS.escape(item.anchor)}"]`)
+      if (!element) return []
+      const rect = element.getBoundingClientRect()
+      return rect.width ? [{ id: item.id, title: item.title, x: rect.right, y: rect.top }] : []
+    })
+  })
+}
+const observer = new MutationObserver(placeDots)
+watch(() => props.state.unseenNews.value > 0, (watching) => {
+  observer.disconnect()
+  if (watching) observer.observe(document.body, { childList: true, subtree: true })
+  placeDots()
+}, { immediate: true })
+watch(active, placeDots)
+useEventListener(window, 'resize', placeDots)
+useEventListener(window, 'scroll', placeDots, { capture: true, passive: true })
+onBeforeUnmount(() => {
+  observer.disconnect()
+  cancelAnimationFrame(frame)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <button
+      v-for="dot in dots"
+      :key="dot.id"
+      type="button"
+      class="mint-onboarding__dot"
+      :style="{ left: `${dot.x}px`, top: `${dot.y}px` }"
+      :aria-label="`New: ${dot.title}`"
+      @click="state.showNews(dot.id)"
+    />
+    <div v-if="active" class="mint-onboarding">
+      <div class="mint-onboarding__blocker" :style="blockerStyle" />
+      <div v-if="holeStyle" class="mint-onboarding__hole" :style="holeStyle" />
+      <div
+        ref="card"
+        class="mint-onboarding__card"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        tabindex="-1"
+        :style="{ left: `${cardPosition.x}px`, top: `${cardPosition.y}px` }"
+      >
+        <button type="button" class="mint-onboarding__close" :aria-label="active.news ? 'Close' : 'Close tour'" @click="state.dismiss()">
+          <X :size="14" aria-hidden="true" />
+        </button>
+        <span v-if="active.count > 1" class="mint-onboarding__count">
+          <span aria-hidden="true">{{ active.index + 1 }} / {{ active.count }}</span>
+          <span class="mint-onboarding__sr">Step {{ active.index + 1 }} of {{ active.count }}</span>
+        </span>
+        <p :id="titleId" class="mint-onboarding__title">{{ active.step.title }}</p>
+        <p class="mint-onboarding__body">{{ active.step.body }}</p>
+        <div class="mint-onboarding__footer">
+          <span v-if="active.step.advanceOn === 'click'" class="mint-onboarding__hint">Click the highlighted control.</span>
+          <BaseButton v-if="active.index > 0" variant="ghost" size="sm" @click="state.back()">Back</BaseButton>
+          <BaseButton v-if="active.step.advanceOn !== 'click'" size="sm" @click="state.next()">{{ nextLabel }}</BaseButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>