@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.0

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-/** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
-import { computed, useTemplateRef } from 'vue'
+/** "Plugin / page" switcher: the plugin name, then a trigger that opens the page menu (hints, number keys 1-9). */
+import { computed, nextTick, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
 import { normalizeItemInput } from '../../utils/items'
 import { isPluginIconFormat } from '../../utils/pluginIcon'
@@ -13,27 +14,74 @@ interface Props {
   currentPageId?: string
   placeholder?: string
   minWidth?: string
+  /** Plugin name shown before the trigger and in the menu title. */
+  pluginName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Go to…',
-  minWidth: '11.25rem',
 })
 
 const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, close, toggle } = useDropdownState({
+const triggerEl = useTemplateRef<HTMLElement>('trigger')
+const menuEl = useTemplateRef<HTMLElement>('menu')
+const { isOpen, open, close, toggle } = useDropdownState({
   rootRef: useTemplateRef<HTMLElement>('root'),
-  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+  triggerRef: triggerEl,
 })
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
+const menuTitle = computed(() => (props.pluginName ? `${props.pluginName} pages` : 'Pages'))
 
 const current = computed<PageSelectorItem | undefined>(() =>
   normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0],
 )
 
+const rows = () => Array.from(menuEl.value?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+const isEnabled = (row: HTMLElement) => !row.hasAttribute('disabled') && row.getAttribute('aria-disabled') !== 'true'
+const enabledRows = () => rows().filter(isEnabled)
+
+const { handlePanelKeydown } = useMenuKeyboard({
+  items: enabledRows,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (isOpen.value || !['ArrowDown', 'Enter', ' '].includes(event.key)) return
+  event.preventDefault()
+  open()
+  void nextTick(() => {
+    const items = enabledRows()
+    ;(items.find((row) => row.getAttribute('aria-current') === 'page') ?? items[0])?.focus()
+  })
+}
+
+// A click routes through ActionItemInternal, so links, router links and disabled rows act as on a pointer click.
+function activate(row: HTMLElement) {
+  row.click()
+  if (!isOpen.value) triggerEl.value?.focus()
+}
+
+function handleMenuKeydown(event: KeyboardEvent) {
+  if (/^[1-9]$/.test(event.key)) {
+    event.preventDefault()
+    const row = rows()[Number(event.key) - 1]
+    if (row && isEnabled(row)) activate(row)
+    return
+  }
+  const focused = document.activeElement as HTMLElement | null
+  if ((event.key === 'Enter' || event.key === ' ') && focused && enabledRows().includes(focused)) {
+    event.preventDefault()
+    activate(focused)
+    return
+  }
+  handlePanelKeydown(event)
+}
+
 function handleSelect(page: PageSelectorItem) {
   if (page.disabled) return
   if (page.href || page.to) {
@@ -46,82 +94,102 @@ function handleSelect(page: PageSelectorItem) {
 </script>
 
 <template>
-  <div ref="root" class="mint-page-selector" :style="{ minWidth }">
-    <button
-      ref="trigger"
-      type="button"
-      class="mint-page-selector__trigger"
-      :class="{ 'mint-page-selector__trigger--open': isOpen }"
-      :aria-expanded="isOpen"
-      aria-haspopup="menu"
-      @click.stop="toggle"
-    >
-      <span
-        v-if="current"
-        class="mint-page-selector__icon"
-        :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
-      >
-        <slot name="icon" :page="current">
-          <PluginIcon
-            v-if="isPluginIconFormat(current.icon)"
-            class="mint-page-selector__trigger-metadata-icon"
-            :icon="current.icon"
-            size="sm"
-            variant="solid"
-          />
-          <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
-        </slot>
-      </span>
-      <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
-      <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
-        <svg
-          class="mint-page-selector__chevron"
-          :class="{ 'mint-page-selector__chevron--open': isOpen }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </span>
-    </button>
-
-    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
-      <div class="mint-page-selector__menu-title">Go to</div>
-      <ActionItemInternal
-        v-for="page in normalizedPages"
-        :key="page.id"
-        :href="page.href"
-        :to="page.to"
-        :disabled="page.disabled"
-        :class="[
-          'mint-page-selector__item',
-          { 'mint-page-selector__item--active': page.id === current?.id },
-          { 'mint-page-selector__item--disabled': page.disabled },
-        ]"
-        role="menuitem"
-        @click="handleSelect(page)"
+  <div ref="root" class="mint-page-selector__crumb">
+    <template v-if="pluginName">
+      <span class="mint-page-selector__plugin">{{ pluginName }}</span>
+      <span class="mint-page-selector__slash" aria-hidden="true">/</span>
+    </template>
+    <div class="mint-page-selector" :style="minWidth ? { minWidth } : undefined">
+      <button
+        ref="trigger"
+        type="button"
+        class="mint-page-selector__trigger"
+        :class="{ 'mint-page-selector__trigger--open': isOpen }"
+        :aria-expanded="isOpen"
+        aria-haspopup="menu"
+        @click.stop="toggle"
+        @keydown="handleTriggerKeydown"
       >
         <span
-          class="mint-page-selector__item-icon"
-          :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          v-if="current"
+          class="mint-page-selector__icon"
+          :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
         >
-          <slot name="item-icon" :page="page">
+          <slot name="icon" :page="current">
             <PluginIcon
-              v-if="isPluginIconFormat(page.icon)"
-              class="mint-page-selector__metadata-icon"
-              :icon="page.icon"
+              v-if="isPluginIconFormat(current.icon)"
+              class="mint-page-selector__trigger-metadata-icon"
+              :icon="current.icon"
               size="sm"
               variant="solid"
             />
-            <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
           </slot>
         </span>
-        <span class="mint-page-selector__item-label">{{ page.label }}</span>
-      </ActionItemInternal>
+        <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
+        <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
+          <svg
+            class="mint-page-selector__chevron"
+            :class="{ 'mint-page-selector__chevron--open': isOpen }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+
+      <div
+        v-if="isOpen"
+        ref="menu"
+        class="mint-page-selector__menu"
+        role="menu"
+        :aria-label="menuTitle"
+        @keydown="handleMenuKeydown"
+      >
+        <div class="mint-page-selector__menu-title" aria-hidden="true">{{ menuTitle }}</div>
+        <ActionItemInternal
+          v-for="(page, index) in normalizedPages"
+          :key="page.id"
+          :href="page.href"
+          :to="page.to"
+          :disabled="page.disabled"
+          :class="[
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          :aria-current="page.id === current?.id ? 'page' : undefined"
+          :aria-keyshortcuts="index < 9 ? String(index + 1) : undefined"
+          @click="handleSelect(page)"
+        >
+          <span
+            class="mint-page-selector__item-icon"
+            :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          >
+            <slot name="item-icon" :page="page">
+              <PluginIcon
+                v-if="isPluginIconFormat(page.icon)"
+                class="mint-page-selector__metadata-icon"
+                :icon="page.icon"
+                size="sm"
+                variant="solid"
+              />
+              <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mint-page-selector__item-text">
+            <span class="mint-page-selector__item-label">{{ page.label }}</span>
+            <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
+          </span>
+          <span v-if="index < 9" class="mint-page-selector__item-key" aria-hidden="true">{{ index + 1 }}</span>
+        </ActionItemInternal>
+      </div>
     </div>
   </div>
 </template>

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 })
@@ -83,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
@@ -130,21 +97,15 @@ 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>
@@ -202,6 +163,7 @@ onBeforeUnmount(stopPositioning)
           :style="dropdownStyle"
           role="dialog"
           aria-label="Date picker"
+          @keydown.escape.prevent="close(true)"
         >
           <CalendarGridPanelInternal
             :week-days="weekDays"

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 {
@@ -230,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(() =>
@@ -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"

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>