@rokkit/actions 1.0.0-next.153 → 1.0.0-next.155

package/dist/index.d.ts

@@ -15,4 +15,5 @@ export { reveal } from "./reveal.svelte.js";
 export { hoverLift } from "./hover-lift.svelte.js";
 export { magnetic } from "./magnetic.svelte.js";
 export { ripple } from "./ripple.svelte.js";
+export { tooltip } from "./tooltip.svelte.js";
 export { buildKeymap, resolveAction, ACTIONS } from "./keymap.js";

package/dist/navigator.d.ts

@@ -2,12 +2,13 @@ export class Navigator {
     /**
      * @param {HTMLElement} root
      * @param {import('@rokkit/states').Wrapper} wrapper
-     * @param {{ orientation?: string, dir?: string, collapsible?: boolean }} [options]
+     * @param {{ orientation?: string, dir?: string, collapsible?: boolean, containScroll?: boolean }} [options]
      */
     constructor(root: HTMLElement, wrapper: import("@rokkit/states").Wrapper, options?: {
         orientation?: string;
         dir?: string;
         collapsible?: boolean;
+        containScroll?: boolean;
     });
     destroy(): void;
     #private;

package/dist/tooltip.svelte.d.ts

@@ -0,0 +1 @@
+export function tooltip(node: any, options?: {}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.153",
+  "version": "1.0.0-next.155",
   "description": "Contains generic actions that can be used in various components.",
   "repository": {
     "type": "git",

package/src/index.js

@@ -17,3 +17,4 @@ export { reveal } from './reveal.svelte.js'
 export { hoverLift } from './hover-lift.svelte.js'
 export { magnetic } from './magnetic.svelte.js'
 export { ripple } from './ripple.svelte.js'
+export { tooltip } from './tooltip.svelte.js'

package/src/navigator.js

@@ -70,6 +70,7 @@ export class Navigator {
 	#root
 	#wrapper
 	#keymap
+	#containScroll
 
 	// Typeahead state
 	#buffer = ''
@@ -78,17 +79,21 @@ export class Navigator {
 	/**
 	 * @param {HTMLElement} root
 	 * @param {import('@rokkit/states').Wrapper} wrapper
-	 * @param {{ orientation?: string, dir?: string, collapsible?: boolean }} [options]
+	 * @param {{ orientation?: string, dir?: string, collapsible?: boolean, containScroll?: boolean }} [options]
 	 */
 	constructor(root, wrapper, options = {}) {
 		this.#root = root
 		this.#wrapper = wrapper
 		this.#keymap = buildKeymap(options)
+		this.#containScroll = options.containScroll ?? false
 
 		root.addEventListener('keydown', this.#onKeydown)
 		root.addEventListener('click', this.#onClick)
 		root.addEventListener('focusin', this.#onFocusin)
 		root.addEventListener('focusout', this.#onFocusout)
+		if (this.#containScroll) {
+			root.addEventListener('wheel', this.#onWheel, { passive: false })
+		}
 	}
 
 	destroy() {
@@ -96,6 +101,9 @@ export class Navigator {
 		this.#root.removeEventListener('click', this.#onClick)
 		this.#root.removeEventListener('focusin', this.#onFocusin)
 		this.#root.removeEventListener('focusout', this.#onFocusout)
+		if (this.#containScroll) {
+			this.#root.removeEventListener('wheel', this.#onWheel)
+		}
 		this.#clearTypeahead()
 	}
 
@@ -161,6 +169,14 @@ export class Navigator {
 		}
 	}
 
+	// ─── Wheel ──────────────────────────────────────────────────────────────
+
+	#onWheel = (/** @type {WheelEvent} */ event) => {
+		// Prevent the wheel event from bubbling to parent scroll containers.
+		// Native scroll chaining is handled via CSS overscroll-behavior: contain.
+		event.stopPropagation()
+	}
+
 	// ─── Focusout ───────────────────────────────────────────────────────────
 
 	#onFocusout = (/** @type {FocusEvent} */ event) => {

package/src/tooltip.svelte.js

@@ -0,0 +1,149 @@
+/**
+ * Tooltip action — attaches an accessible tooltip to any element.
+ *
+ * Triggers on mouseenter (with configurable delay) and focusin.
+ * Hides on mouseleave, focusout, and Escape.
+ * Auto-flips position when the preferred side overflows the viewport.
+ *
+ * @param {HTMLElement} node
+ * @param {object} [options]
+ * @param {string} [options.content=''] Tooltip text
+ * @param {'top'|'bottom'|'left'|'right'} [options.position='top'] Preferred position
+ * @param {number} [options.delay=300] Show delay in ms
+ */
+
+const GAP = 6
+
+function uid() {
+	return `tt-${Math.random().toString(36).slice(2, 9)}`
+}
+
+function getPositionedAncestor(el) {
+	let parent = el.parentElement
+	while (parent && parent !== document.body) {
+		const pos = getComputedStyle(parent).position
+		if (['relative', 'absolute', 'fixed', 'sticky'].includes(pos)) return parent
+		parent = parent.parentElement
+	}
+	return document.body
+}
+
+function resolveFlip(triggerRect, tooltipRect, preferred) {
+	const vw = window.innerWidth
+	const vh = window.innerHeight
+	const fits = {
+		top: triggerRect.top >= tooltipRect.height + GAP,
+		bottom: triggerRect.bottom + tooltipRect.height + GAP <= vh,
+		left: triggerRect.left >= tooltipRect.width + GAP,
+		right: triggerRect.right + tooltipRect.width + GAP <= vw
+	}
+	if (fits[preferred]) return preferred
+	const flip = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
+	if (fits[flip[preferred]]) return flip[preferred]
+	return Object.keys(fits).find((p) => fits[p]) ?? preferred
+}
+
+function positionTooltip(trigger, tooltipEl, preferred) {
+	const triggerRect = trigger.getBoundingClientRect()
+	const container = tooltipEl.parentElement
+	const containerRect = container.getBoundingClientRect()
+
+	// Measure tooltip without layout thrash
+	tooltipEl.style.visibility = 'hidden'
+	tooltipEl.style.position = 'absolute'
+	const tooltipRect = tooltipEl.getBoundingClientRect()
+	tooltipEl.style.visibility = ''
+
+	const pos = resolveFlip(triggerRect, tooltipRect, preferred)
+	tooltipEl.setAttribute('data-tooltip-position', pos)
+
+	let top, left
+	switch (pos) {
+		case 'top':
+			top = triggerRect.top - containerRect.top - tooltipRect.height - GAP
+			left = triggerRect.left - containerRect.left + (triggerRect.width - tooltipRect.width) / 2
+			break
+		case 'bottom':
+			top = triggerRect.bottom - containerRect.top + GAP
+			left = triggerRect.left - containerRect.left + (triggerRect.width - tooltipRect.width) / 2
+			break
+		case 'left':
+			top = triggerRect.top - containerRect.top + (triggerRect.height - tooltipRect.height) / 2
+			left = triggerRect.left - containerRect.left - tooltipRect.width - GAP
+			break
+		case 'right':
+			top = triggerRect.top - containerRect.top + (triggerRect.height - tooltipRect.height) / 2
+			left = triggerRect.right - containerRect.left + GAP
+			break
+		default:
+			top = 0
+			left = 0
+	}
+
+	tooltipEl.style.top = `${top}px`
+	tooltipEl.style.left = `${left}px`
+}
+
+export function tooltip(node, options = {}) {
+	$effect(() => {
+		const opts = { content: '', position: 'top', delay: 300, ...options }
+		const id = uid()
+
+		const el = document.createElement('div')
+		el.setAttribute('data-tooltip-content', '')
+		el.setAttribute('data-tooltip-position', opts.position)
+		el.setAttribute('data-tooltip-visible', 'false')
+		el.id = id
+		el.setAttribute('role', 'tooltip')
+		el.textContent = opts.content
+
+		node.setAttribute('data-tooltip-trigger', '')
+		node.setAttribute('aria-describedby', id)
+
+		const container = getPositionedAncestor(node)
+		container.appendChild(el)
+
+		let timer = null
+
+		function show() {
+			positionTooltip(node, el, opts.position)
+			el.setAttribute('data-tooltip-visible', 'true')
+		}
+
+		function hide() {
+			clearTimeout(timer)
+			el.setAttribute('data-tooltip-visible', 'false')
+		}
+
+		function onMouseEnter() {
+			timer = setTimeout(show, opts.delay)
+		}
+
+		function onMouseLeave() {
+			clearTimeout(timer)
+			hide()
+		}
+
+		function onKeydown(e) {
+			if (e.key === 'Escape') hide()
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter)
+		node.addEventListener('mouseleave', onMouseLeave)
+		node.addEventListener('focusin', show)
+		node.addEventListener('focusout', hide)
+		node.addEventListener('keydown', onKeydown)
+
+		return () => {
+			clearTimeout(timer)
+			node.removeAttribute('data-tooltip-trigger')
+			node.removeAttribute('aria-describedby')
+			node.removeEventListener('mouseenter', onMouseEnter)
+			node.removeEventListener('mouseleave', onMouseLeave)
+			node.removeEventListener('focusin', show)
+			node.removeEventListener('focusout', hide)
+			node.removeEventListener('keydown', onKeydown)
+			el.remove()
+		}
+	})
+}