@rokkit/actions 1.0.0-next.125 → 1.0.0-next.127

package/dist/hover-lift.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Hover lift action — adds translateY + elevated shadow on hover.
+ * Sets transition on mount, applies transform + box-shadow on mouseenter, resets on mouseleave.
+ *
+ * @param {HTMLElement} node
+ * @param {HoverLiftOptions} [options]
+ *
+ * @typedef {Object} HoverLiftOptions
+ * @property {string} [distance='-0.25rem'] Translate distance on hover (negative = up)
+ * @property {string} [shadow='0 10px 25px -5px rgba(0,0,0,0.1)'] Box shadow on hover
+ * @property {number} [duration=200] Transition duration (ms)
+ */
+export function hoverLift(node: HTMLElement, options?: HoverLiftOptions): void;
+/**
+ * Hover lift action — adds translateY + elevated shadow on hover.
+ * Sets transition on mount, applies transform + box-shadow on mouseenter, resets on mouseleave.
+ */
+export type HoverLiftOptions = {
+    /**
+     * Translate distance on hover (negative = up)
+     */
+    distance?: string | undefined;
+    /**
+     * Box shadow on hover
+     */
+    shadow?: string | undefined;
+    /**
+     * Transition duration (ms)
+     */
+    duration?: number | undefined;
+};

package/dist/index.d.ts

@@ -9,3 +9,7 @@ export { dismissable } from "./dismissable.svelte.js";
 export { navigable } from "./navigable.svelte.js";
 export { fillable } from "./fillable.svelte.js";
 export { delegateKeyboardEvents } from "./delegate.svelte.js";
+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";

package/dist/kbd.d.ts

@@ -29,6 +29,12 @@ export function createKeyboardActionMap(options: {
 export function createModifierKeyboardActionMap(options: {
     orientation: string;
 }): Object;
+/**
+ * Creates a keyboard action mapping for shift key combinations
+ *
+ * @returns {Object} Mapping of keys to actions
+ */
+export function createShiftKeyboardActionMap(): Object;
 /**
  * Gets the keyboard action for a key event
  * @param {KeyboardEvent} event - The keyboard event
@@ -41,4 +47,5 @@ export namespace defaultNavigationOptions {
     let dir: string;
     let nested: boolean;
     let enabled: boolean;
+    let typeahead: boolean;
 }

package/dist/magnetic.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Magnetic action — element shifts subtly toward the cursor on hover.
+ * Calculates cursor offset from element center and translates proportionally.
+ *
+ * @param {HTMLElement} node
+ * @param {MagneticOptions} [options]
+ *
+ * @typedef {Object} MagneticOptions
+ * @property {number} [strength=0.3] Maximum displacement as fraction of element size (0–1)
+ * @property {number} [duration=300] Transition duration for return to center (ms)
+ */
+export function magnetic(node: HTMLElement, options?: MagneticOptions): void;
+/**
+ * Magnetic action — element shifts subtly toward the cursor on hover.
+ * Calculates cursor offset from element center and translates proportionally.
+ */
+export type MagneticOptions = {
+    /**
+     * Maximum displacement as fraction of element size (0–1)
+     */
+    strength?: number | undefined;
+    /**
+     * Transition duration for return to center (ms)
+     */
+    duration?: number | undefined;
+};

package/dist/reveal.svelte.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Scroll-triggered reveal action using IntersectionObserver.
+ * Applies CSS transitions (opacity + translate) when element enters viewport.
+ *
+ * @param {HTMLElement} node
+ * @param {RevealOptions} [options]
+ *
+ * @typedef {Object} RevealOptions
+ * @property {'up' | 'down' | 'left' | 'right' | 'none'} [direction='up'] Slide direction
+ * @property {string} [distance='1.5rem'] Slide distance (CSS unit)
+ * @property {number} [duration=600] Animation duration (ms)
+ * @property {number} [delay=0] Delay before animation starts (ms)
+ * @property {boolean} [once=true] Only animate once
+ * @property {number} [threshold=0.1] IntersectionObserver threshold (0–1)
+ * @property {string} [easing='cubic-bezier(0.4, 0, 0.2, 1)'] CSS easing function
+ */
+export function reveal(node: HTMLElement, options?: RevealOptions): void;
+/**
+ * Scroll-triggered reveal action using IntersectionObserver.
+ * Applies CSS transitions (opacity + translate) when element enters viewport.
+ */
+export type RevealOptions = {
+    /**
+     * Slide direction
+     */
+    direction?: "up" | "down" | "left" | "right" | "none" | undefined;
+    /**
+     * Slide distance (CSS unit)
+     */
+    distance?: string | undefined;
+    /**
+     * Animation duration (ms)
+     */
+    duration?: number | undefined;
+    /**
+     * Delay before animation starts (ms)
+     */
+    delay?: number | undefined;
+    /**
+     * Only animate once
+     */
+    once?: boolean | undefined;
+    /**
+     * IntersectionObserver threshold (0–1)
+     */
+    threshold?: number | undefined;
+    /**
+     * CSS easing function
+     */
+    easing?: string | undefined;
+};

package/dist/ripple.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Ripple action — material-design inspired click ripple effect.
+ * Appends a circular expanding span at click coordinates that scales and fades out.
+ *
+ * @param {HTMLElement} node
+ * @param {RippleOptions} [options]
+ *
+ * @typedef {Object} RippleOptions
+ * @property {string} [color='currentColor'] Ripple color
+ * @property {number} [opacity=0.15] Ripple opacity
+ * @property {number} [duration=500] Ripple animation duration (ms)
+ */
+export function ripple(node: HTMLElement, options?: RippleOptions): void;
+/**
+ * Ripple action — material-design inspired click ripple effect.
+ * Appends a circular expanding span at click coordinates that scales and fades out.
+ */
+export type RippleOptions = {
+    /**
+     * Ripple color
+     */
+    color?: string | undefined;
+    /**
+     * Ripple opacity
+     */
+    opacity?: number | undefined;
+    /**
+     * Ripple animation duration (ms)
+     */
+    duration?: number | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.125",
+  "version": "1.0.0-next.127",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -29,7 +29,7 @@
     }
   },
   "dependencies": {
-    "ramda": "^0.31.3",
+    "ramda": "^0.32.0",
     "@rokkit/core": "latest"
   },
   "devDependencies": {

package/src/hover-lift.svelte.js

@@ -0,0 +1,56 @@
+/**
+ * Hover lift action — adds translateY + elevated shadow on hover.
+ * Sets transition on mount, applies transform + box-shadow on mouseenter, resets on mouseleave.
+ *
+ * @param {HTMLElement} node
+ * @param {HoverLiftOptions} [options]
+ *
+ * @typedef {Object} HoverLiftOptions
+ * @property {string} [distance='-0.25rem'] Translate distance on hover (negative = up)
+ * @property {string} [shadow='0 10px 25px -5px rgba(0,0,0,0.1)'] Box shadow on hover
+ * @property {number} [duration=200] Transition duration (ms)
+ */
+export function hoverLift(node, options = {}) {
+	$effect(() => {
+		const opts = {
+			distance: '-0.25rem',
+			shadow: '0 10px 25px -5px rgba(0,0,0,0.1)',
+			duration: 200,
+			...options
+		}
+
+		const reducedMotion =
+			typeof window !== 'undefined' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+		if (reducedMotion) return
+
+		// Store original values
+		const originalTransform = node.style.transform
+		const originalBoxShadow = node.style.boxShadow
+		const originalTransition = node.style.transition
+
+		node.style.transition = `transform ${opts.duration}ms ease, box-shadow ${opts.duration}ms ease`
+
+		function onEnter() {
+			node.style.transform = `translateY(${opts.distance})`
+			node.style.boxShadow = opts.shadow
+		}
+
+		function onLeave() {
+			node.style.transform = originalTransform
+			node.style.boxShadow = originalBoxShadow
+		}
+
+		node.addEventListener('mouseenter', onEnter)
+		node.addEventListener('mouseleave', onLeave)
+
+		return () => {
+			node.removeEventListener('mouseenter', onEnter)
+			node.removeEventListener('mouseleave', onLeave)
+			node.style.transform = originalTransform
+			node.style.boxShadow = originalBoxShadow
+			node.style.transition = originalTransition
+		}
+	})
+}

package/src/index.js

@@ -10,3 +10,7 @@ export { dismissable } from './dismissable.svelte.js'
 export { navigable } from './navigable.svelte.js'
 export { fillable } from './fillable.svelte.js'
 export { delegateKeyboardEvents } from './delegate.svelte.js'
+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'

package/src/kbd.js

@@ -57,7 +57,8 @@ export const defaultNavigationOptions = {
 	orientation: 'vertical',
 	dir: 'ltr',
 	nested: false,
-	enabled: true
+	enabled: true,
+	typeahead: false
 }
 
 /**
@@ -161,6 +162,15 @@ export function createModifierKeyboardActionMap(options) {
 	return { ...common, ...directional }
 }
 
+/**
+ * Creates a keyboard action mapping for shift key combinations
+ *
+ * @returns {Object} Mapping of keys to actions
+ */
+export function createShiftKeyboardActionMap() {
+	return { ' ': 'range' }
+}
+
 /**
  * Gets the keyboard action for a key event
  * @param {KeyboardEvent} event - The keyboard event
@@ -168,12 +178,18 @@ export function createModifierKeyboardActionMap(options) {
  * @returns {string|null} The action to perform, or null if no action is defined
  */
 export function getKeyboardAction(event, options = {}) {
-	const { key, ctrlKey, metaKey } = event
+	const { key, ctrlKey, metaKey, shiftKey } = event
 
 	// Use updated options with defaults
 	const mergedOptions = { ...defaultNavigationOptions, ...options }
 
-	// Check for modifier keys first (highest priority)
+	// Check for shift key (range selection)
+	if (shiftKey && !ctrlKey && !metaKey) {
+		const shiftMap = createShiftKeyboardActionMap()
+		return shiftMap[key] || null
+	}
+
+	// Check for modifier keys (ctrl/cmd)
 	if (ctrlKey || metaKey) {
 		const modifierMap = createModifierKeyboardActionMap(mergedOptions)
 		return modifierMap[key] || null

package/src/magnetic.svelte.js

@@ -0,0 +1,58 @@
+/**
+ * Magnetic action — element shifts subtly toward the cursor on hover.
+ * Calculates cursor offset from element center and translates proportionally.
+ *
+ * @param {HTMLElement} node
+ * @param {MagneticOptions} [options]
+ *
+ * @typedef {Object} MagneticOptions
+ * @property {number} [strength=0.3] Maximum displacement as fraction of element size (0–1)
+ * @property {number} [duration=300] Transition duration for return to center (ms)
+ */
+export function magnetic(node, options = {}) {
+	$effect(() => {
+		const opts = {
+			strength: 0.3,
+			duration: 300,
+			...options
+		}
+
+		const reducedMotion =
+			typeof window !== 'undefined' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+		if (reducedMotion) return
+
+		const originalTransform = node.style.transform
+		const originalTransition = node.style.transition
+
+		node.style.transition = `transform ${opts.duration}ms ease`
+
+		function onMove(e) {
+			const rect = node.getBoundingClientRect()
+			const centerX = rect.left + rect.width / 2
+			const centerY = rect.top + rect.height / 2
+
+			const offsetX = (e.clientX - centerX) * opts.strength
+			const offsetY = (e.clientY - centerY) * opts.strength
+
+			node.style.transition = 'none'
+			node.style.transform = `translate(${offsetX}px, ${offsetY}px)`
+		}
+
+		function onLeave() {
+			node.style.transition = `transform ${opts.duration}ms ease`
+			node.style.transform = originalTransform
+		}
+
+		node.addEventListener('mousemove', onMove)
+		node.addEventListener('mouseleave', onLeave)
+
+		return () => {
+			node.removeEventListener('mousemove', onMove)
+			node.removeEventListener('mouseleave', onLeave)
+			node.style.transform = originalTransform
+			node.style.transition = originalTransition
+		}
+	})
+}

package/src/navigator.svelte.js

@@ -15,16 +15,16 @@ function scrollFocusedIntoView(container, wrapper) {
 	if (wrapper.focusedKey) {
 		focusedElement = container.querySelector(`[data-path="${wrapper.focusedKey}"]`)
 	}
-	
+
 	// Fallback: find by aria-current
 	if (!focusedElement) {
 		focusedElement = container.querySelector('[aria-current="true"]')
 	}
-	
-	// Scroll into view if element found
-	if (focusedElement) {
-		focusedElement.scrollIntoView({ 
-			behavior: 'smooth', 
+
+	// Scroll into view if element found and method exists (may not exist in test env)
+	if (focusedElement?.scrollIntoView) {
+		focusedElement.scrollIntoView({
+			behavior: 'smooth',
 			block: 'nearest',
 			inline: 'nearest'
 		})
@@ -38,6 +38,7 @@ const EVENT_MAP = {
 	next: ['move'],
 	select: ['move', 'select'],
 	extend: ['move', 'select'],
+	range: ['move', 'select'],
 	collapse: ['toggle'],
 	expand: ['toggle'],
 	toggle: ['toggle']
@@ -94,6 +95,7 @@ function getHandlers(wrapper) {
 		expand: () => wrapper.expand(),
 		select: (path) => wrapper.select(path),
 		extend: (path) => wrapper.extendSelection(path),
+		range: (path) => wrapper.selectRange(path),
 		toggle: (path) => wrapper.toggleExpansion(path)
 	}
 }
@@ -109,31 +111,103 @@ export function navigator(node, options) {
 	const config = { ...defaultNavigationOptions, ...omit(['wrapper'], options) }
 	const handlers = getHandlers(wrapper)
 
+	// Type-ahead state
+	let typeaheadBuffer = ''
+	let typeaheadTimer = null
+
+	function resetTypeahead() {
+		typeaheadBuffer = ''
+		if (typeaheadTimer) {
+			clearTimeout(typeaheadTimer)
+			typeaheadTimer = null
+		}
+	}
+
+	function handleTypeahead(event) {
+		const { key, ctrlKey, metaKey, altKey } = event
+		if (ctrlKey || metaKey || altKey) return false
+		if (key.length !== 1 || key === ' ') return false
+
+		// Single-char repeat: start after current to cycle through matches
+		const startAfter = typeaheadBuffer.length === 0 ? wrapper.focusedKey : null
+
+		typeaheadBuffer += key
+		if (typeaheadTimer) clearTimeout(typeaheadTimer)
+		typeaheadTimer = setTimeout(resetTypeahead, 500)
+
+		const matchKey = wrapper.findByText(typeaheadBuffer, startAfter)
+		if (matchKey !== null && wrapper.moveTo(matchKey)) {
+			event.preventDefault()
+			event.stopPropagation()
+			emitAction(node, wrapper, 'first', true) // emit 'move'
+			setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
+			return true
+		}
+		return false
+	}
+
 	const handleKeydown = (event) => {
 		const action = getKeyboardAction(event, config)
+		const prevKey = wrapper.focusedKey
+
+		// For activation keys (Enter/Space) on anchor elements, let the browser
+		// navigate natively. The click handler will update controller state when
+		// the browser fires the synthetic click.
+		if (action === 'select' && event.target.closest('a[href]')) {
+			return
+		}
+
 		const handled = handleAction(event, handlers[action])
 		if (handled) {
-			emitAction(node, options.wrapper, action, true)
-			// Scroll focused element into view for navigation actions
-			if (['first', 'last', 'previous', 'next'].includes(action)) {
-				// Use a small delay to ensure DOM updates are processed
-				setTimeout(() => scrollFocusedIntoView(node, options.wrapper), 0)
+			resetTypeahead()
+			emitAction(node, wrapper, action, true)
+			// If expand/collapse moved focus, also emit move so components update DOM focus
+			const focusMoved =
+				['expand', 'collapse'].includes(action) && wrapper.focusedKey !== prevKey
+			if (focusMoved) {
+				node.dispatchEvent(
+					new CustomEvent('action', {
+						detail: {
+							name: 'move',
+							data: { value: wrapper.focused, selected: wrapper.selected }
+						}
+					})
+				)
+			}
+			// Scroll focused element into view for navigation and focus-moving expand/collapse
+			if (focusMoved || ['first', 'last', 'previous', 'next'].includes(action)) {
+				setTimeout(() => scrollFocusedIntoView(node, wrapper), 0)
 			}
+			return
+		}
+
+		// Type-ahead: when no navigation action matched and typeahead is enabled
+		if (config.typeahead && wrapper.findByText) {
+			handleTypeahead(event)
 		}
 	}
 
 	const handleClick = (event) => {
 		const action = getClickAction(event)
 		const path = getPathFromEvent(event)
-		const handled = handleAction(event, handlers[action], path)
 
+		// Anchor elements with href handle navigation natively — don't preventDefault.
+		// Still call the handler so focus/selection state stays in sync.
+		if (event.target.closest('a[href]')) {
+			const handler = handlers[action]
+			if (handler?.(path)) emitAction(node, options.wrapper, action)
+			return
+		}
+
+		const handled = handleAction(event, handlers[action], path)
 		if (handled) emitAction(node, options.wrapper, action)
 	}
 
 	$effect(() => {
-		const cleanup = [on(node, 'keyup', handleKeydown), on(node, 'click', handleClick)]
+		const cleanup = [on(node, 'keydown', handleKeydown), on(node, 'click', handleClick)]
 
 		return () => {
+			resetTypeahead()
 			cleanup.forEach((fn) => fn())
 		}
 	})

package/src/reveal.svelte.js

@@ -0,0 +1,86 @@
+/**
+ * Scroll-triggered reveal action using IntersectionObserver.
+ * Applies CSS transitions (opacity + translate) when element enters viewport.
+ *
+ * @param {HTMLElement} node
+ * @param {RevealOptions} [options]
+ *
+ * @typedef {Object} RevealOptions
+ * @property {'up' | 'down' | 'left' | 'right' | 'none'} [direction='up'] Slide direction
+ * @property {string} [distance='1.5rem'] Slide distance (CSS unit)
+ * @property {number} [duration=600] Animation duration (ms)
+ * @property {number} [delay=0] Delay before animation starts (ms)
+ * @property {boolean} [once=true] Only animate once
+ * @property {number} [threshold=0.1] IntersectionObserver threshold (0–1)
+ * @property {string} [easing='cubic-bezier(0.4, 0, 0.2, 1)'] CSS easing function
+ */
+export function reveal(node, options = {}) {
+	$effect(() => {
+		const opts = {
+			direction: 'up',
+			distance: '1.5rem',
+			duration: 600,
+			delay: 0,
+			once: true,
+			threshold: 0.1,
+			easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+			...options
+		}
+
+		const reducedMotion =
+			typeof window !== 'undefined' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+		// Set CSS custom properties for the transition
+		node.style.setProperty('--reveal-duration', `${opts.duration}ms`)
+		node.style.setProperty('--reveal-distance', opts.distance)
+		node.style.setProperty('--reveal-easing', opts.easing)
+
+		// Apply direction attribute (CSS uses this for initial translate)
+		node.setAttribute('data-reveal', opts.direction)
+
+		if (opts.delay > 0) {
+			node.style.transitionDelay = `${opts.delay}ms`
+		}
+
+		if (reducedMotion) {
+			node.setAttribute('data-reveal-visible', '')
+			node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
+			return () => {
+				node.removeAttribute('data-reveal')
+				node.removeAttribute('data-reveal-visible')
+				node.style.removeProperty('--reveal-duration')
+				node.style.removeProperty('--reveal-distance')
+				node.style.removeProperty('--reveal-easing')
+			}
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						node.setAttribute('data-reveal-visible', '')
+						node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: true } }))
+						if (opts.once) observer.unobserve(node)
+					} else if (!opts.once) {
+						node.removeAttribute('data-reveal-visible')
+						node.dispatchEvent(new CustomEvent('reveal', { detail: { visible: false } }))
+					}
+				}
+			},
+			{ threshold: opts.threshold }
+		)
+
+		observer.observe(node)
+
+		return () => {
+			observer.disconnect()
+			node.removeAttribute('data-reveal')
+			node.removeAttribute('data-reveal-visible')
+			node.style.removeProperty('--reveal-duration')
+			node.style.removeProperty('--reveal-distance')
+			node.style.removeProperty('--reveal-easing')
+			if (opts.delay > 0) node.style.removeProperty('transition-delay')
+		}
+	})
+}

package/src/ripple.svelte.js

@@ -0,0 +1,88 @@
+/**
+ * Ripple action — material-design inspired click ripple effect.
+ * Appends a circular expanding span at click coordinates that scales and fades out.
+ *
+ * @param {HTMLElement} node
+ * @param {RippleOptions} [options]
+ *
+ * @typedef {Object} RippleOptions
+ * @property {string} [color='currentColor'] Ripple color
+ * @property {number} [opacity=0.15] Ripple opacity
+ * @property {number} [duration=500] Ripple animation duration (ms)
+ */
+export function ripple(node, options = {}) {
+	$effect(() => {
+		const opts = {
+			color: 'currentColor',
+			opacity: 0.15,
+			duration: 500,
+			...options
+		}
+
+		const reducedMotion =
+			typeof window !== 'undefined' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+		if (reducedMotion) return
+
+		// Ensure host can contain the ripple
+		const originalOverflow = node.style.overflow
+		const originalPosition = node.style.position
+		const computed = getComputedStyle(node).position
+		if (!computed || computed === 'static') {
+			node.style.position = 'relative'
+		}
+		node.style.overflow = 'hidden'
+
+		function onClick(e) {
+			const rect = node.getBoundingClientRect()
+			const size = Math.max(rect.width, rect.height) * 2
+			const x = e.clientX - rect.left - size / 2
+			const y = e.clientY - rect.top - size / 2
+
+			const span = document.createElement('span')
+			span.style.position = 'absolute'
+			span.style.left = `${x}px`
+			span.style.top = `${y}px`
+			span.style.width = `${size}px`
+			span.style.height = `${size}px`
+			span.style.borderRadius = '50%'
+			span.style.background = opts.color
+			span.style.opacity = String(opts.opacity)
+			span.style.transform = 'scale(0)'
+			span.style.pointerEvents = 'none'
+			span.style.animation = `rokkit-ripple ${opts.duration}ms ease-out forwards`
+
+			node.appendChild(span)
+			span.addEventListener('animationend', () => span.remove(), { once: true })
+
+			// Fallback removal in case animationend doesn't fire (JSDOM)
+			setTimeout(() => {
+				if (span.parentNode) span.remove()
+			}, opts.duration + 100)
+		}
+
+		// Inject keyframes if not already present
+		if (!document.querySelector('#rokkit-ripple-keyframes')) {
+			const style = document.createElement('style')
+			style.id = 'rokkit-ripple-keyframes'
+			style.textContent = `
+				@keyframes rokkit-ripple {
+					to {
+						transform: scale(1);
+						opacity: 0;
+					}
+				}
+			`
+			document.head.appendChild(style)
+		}
+
+		node.addEventListener('click', onClick)
+
+		return () => {
+			node.removeEventListener('click', onClick)
+			node.style.overflow = originalOverflow
+			node.style.position = originalPosition
+		}
+	})
+}

package/src/utils.js

@@ -26,8 +26,8 @@ export function getClosestAncestorWithAttribute(element, attribute) {
  * @returns {string|null} - The event name or null if no match is found.
  */
 export const getEventForKey = (keyMapping, key) => {
-	// eslint-disable-next-line no-unused-vars
-	const matchEvent = ([eventName, keys]) =>
+	 
+	const matchEvent = ([_eventName, keys]) =>
 		(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
 
 	const event = find(matchEvent, toPairs(keyMapping))
@@ -92,7 +92,7 @@ export function getPathFromEvent(event) {
 /**
  * Identifies if an element is a collapsible icon
  * @param {HTMLElement} target
- * @returns
+ * @returns {boolean}
  */
 function isNodeToggle(target) {
 	return (
@@ -101,6 +101,29 @@ function isNodeToggle(target) {
 		['closed', 'opened'].includes(target.getAttribute('data-state'))
 	)
 }
+
+/**
+ * Finds the closest ancestor (or self) that has the given attribute
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+function findClosestWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.hasAttribute && element.hasAttribute(attribute)) return element
+	return findClosestWithAttribute(element.parentElement, attribute)
+}
+
+/**
+ * Identifies if an element or its ancestors is an accordion/tree trigger
+ * @param {HTMLElement} target
+ * @returns {boolean}
+ */
+function isAccordionTrigger(target) {
+	if (!target) return false
+	const trigger = findClosestWithAttribute(target, 'data-accordion-trigger')
+	return trigger !== null
+}
 // getKeyboardAction moved to kbd.js
 
 /**
@@ -110,9 +133,14 @@ function isNodeToggle(target) {
  * @returns {string} The determined action
  */
 export const getClickAction = (event) => {
-	const { ctrlKey, metaKey, target } = event
+	const { ctrlKey, metaKey, shiftKey, target } = event
 
-	// Check for modifier keys first (highest priority)
+	// Check for shift key first (range selection)
+	if (shiftKey && !ctrlKey && !metaKey) {
+		return 'range'
+	}
+
+	// Check for modifier keys (toggle selection)
 	if (ctrlKey || metaKey) {
 		return 'extend'
 	}
@@ -122,6 +150,11 @@ export const getClickAction = (event) => {
 		return 'toggle'
 	}
 
+	// Check if clicked on accordion trigger (header area)
+	if (isAccordionTrigger(target)) {
+		return 'toggle'
+	}
+
 	// Default action
 	return 'select'
 }