@sit-onyx/headless 0.10.0 → 0.11.0-dev-20260610140621

package/dist/composables/calendar/TestCalendar.d.vue.ts

@@ -2,7 +2,8 @@ import { SelectionMode } from './createCalendar.js';
 type __VLS_Props = {
     mode?: SelectionMode;
 };
-declare const _default: import('@vue/runtime-core').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     mode: SelectionMode;
-}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/comboBox/SelectOnlyCombobox.d.vue.ts

@@ -1,4 +1,4 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {
     comboBox: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessComposable<{
         option: import('@vue/reactivity').ComputedRef<(data: {
             label: string;
@@ -230,7 +230,6 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
         getOptionValueById: (id: string) => string | undefined;
         getOption: (value: string) => HTMLElement | null;
     }>;
-}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
-    combobox: HTMLDivElement;
-}, HTMLDivElement>;
+}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/comboBox/TestCombobox.d.vue.ts

@@ -1,4 +1,4 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {
     comboBox: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessComposable<{
         option: import('@vue/reactivity').ComputedRef<(data: {
             label: string;
@@ -230,7 +230,6 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
         getOptionValueById: (id: string) => string | undefined;
         getOption: (value: string) => HTMLElement | null;
     }>;
-}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
-    combobox: HTMLDivElement;
-}, HTMLDivElement>;
+}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/dataGrid/TestDataGrid.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLTableElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/dataGrid/TestLazyDataGrid.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLTableElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/listbox/TestListbox.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLUListElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/menuButton/TestMenuButton.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/navigationMenu/TestMenu.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/slider/TestSlider.d.vue.ts

@@ -1,9 +1,10 @@
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     modelValue: number | [number, number];
 };
-declare const _default: import('@vue/runtime-core').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {
     "update:modelValue": (value: number | [number, number]) => any;
-}, string, import('@vue/runtime-core').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import('@vue/runtime-core').PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/tabs/TestTabs.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/toggleButton/TestToggleButton.d.vue.ts

@@ -1,2 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/treeView/createTreeView.d.ts

@@ -0,0 +1,15 @@
+import { MaybeRefOrGetter } from 'vue';
+export type UseTreeViewOptions = {
+    /**
+     * The accessible label for the tree.
+     */
+    label: MaybeRefOrGetter<string>;
+};
+export declare const createTreeView: (options: UseTreeViewOptions) => {
+    elements: {
+        tree: import('vue').ComputedRef<{
+            role: string;
+            "aria-label": string;
+        }>;
+    };
+};

package/dist/composables/treeView/createTreeView.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/treeView/createTreeViewItem.d.ts

@@ -0,0 +1,41 @@
+import { MaybeRef, MaybeRefOrGetter } from 'vue';
+type UseTreeViewItemNavigationOptions = {
+    /**
+     * Whether the tree view item has nested children.
+     */
+    hasChildren: MaybeRefOrGetter<boolean>;
+    /**
+     * Whether the children of the tree view item are open.
+     */
+    isOpen: MaybeRef<boolean>;
+    /**
+     * The level of nesting that the item is placed inside the tree view.
+     */
+    level: MaybeRefOrGetter<number>;
+    /**
+     * Whether the item is disabled and can not be interacted with.
+     */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Callback when the tree view item is selected.
+     */
+    onSelect?: () => void;
+    /**
+     * Callback when the open state is toggled.
+     */
+    onToggle?: (open: boolean) => void;
+};
+export declare const createTreeViewItem: (options: UseTreeViewItemNavigationOptions) => {
+    elements: {
+        treeItem: import('vue').ComputedRef<{
+            role: string;
+            "aria-expanded": boolean | undefined;
+            "aria-level": number;
+            "aria-disabled": "true" | undefined;
+            tabindex: number;
+            onClick: () => void;
+            onKeydown: (event: KeyboardEvent) => void;
+        }>;
+    };
+};
+export {};

package/dist/composables/treeView/createTreeViewItem.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export * from './composables/tabs/createTabs.js';
 export * from './composables/toggleButton/createToggleButton.js';
 export * from './composables/tooltip/createToggletip.js';
 export * from './composables/tooltip/createTooltip.js';
+export * from './composables/treeView/createTreeView.js';
+export * from './composables/treeView/createTreeViewItem.js';
 export * from './utils/builder.js';
 export { isPrintableCharacter, wasKeyPressed } from './utils/keyboard.js';
 export { debounce } from './utils/timer.js';

package/dist/index.js

@@ -331,9 +331,8 @@ var createCalendar = createBuilder((options) => {
 				"aria-disabled": isDisabled.value(cell.date)
 			})),
 			button: computed(() => (button) => {
-				const formatter = new Intl.DateTimeFormat(toValue(options.locale), { dateStyle: "full" });
 				const attributes = {
-					"aria-label": formatter.format(button.date),
+					"aria-label": new Intl.DateTimeFormat(toValue(options.locale), { dateStyle: "full" }).format(button.date),
 					"data-date": button.date.toDateString()
 				};
 				if (!toValue(options.selectionMode)) return attributes;
@@ -773,11 +772,18 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 		elements: {
 			option,
 			group,
+			/**
+			* The listbox associated with the combobox.
+			*/
 			listbox: computed(() => ({
 				...listbox.value,
 				id: controlsId,
 				onMousedown: (e) => e.preventDefault()
 			})),
+			/**
+			* An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
+			* The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
+			*/
 			input: computed(() => ({
 				role: "combobox",
 				"aria-expanded": isExpanded.value,
@@ -788,6 +794,9 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 				onKeydown: handleKeydown,
 				...autocompleteInput.value
 			})),
+			/**
+			* An optional button to control the visibility of the popup.
+			*/
 			button: computed(() => ({
 				tabindex: "-1",
 				onClick: () => onToggle?.()
@@ -1025,7 +1034,13 @@ var createDataGrid = createBuilder((options) => {
 				};
 			})
 		},
-		state: { busy },
+		state: { 
+		/**
+		* Indicates that the data grid expects a content change soon, e.g. because more or other data is loaded.
+		* If `loading` is passed in via the options, this will mirror its value.
+		* Otherwise it will be dynamically set based on the running state of the `requestLazyLoad` promises.
+		*/
+busy },
 		internals: {}
 	};
 });
@@ -1276,9 +1291,36 @@ var createMenuItems = createBuilder((options) => {
 //#endregion
 //#region src/utils/math.ts
 var MathUtils = {
+	/**
+	* Ensures that a given `number` is or is between a given `min` and `max`.
+	*/
 	clamp: (number, min, max) => Math.max(Math.min(number, max), min),
+	/**
+	* Returns the count of decimal places in a number.
+	* @param number - The number to check.
+	* @returns The count of decimal places.
+	*
+	* decimals(1.23); // 2
+	* decimals(10);   // 0
+	*/
 	decimalsCount: (number) => String(number).split(".")[1]?.length ?? 0,
+	/**
+	*  Converts a value within a range to a percentage (0-100).
+	*
+	* @param value - The value to convert.
+	* @param min - The minimum allowed value.
+	* @param max - The maximum allowed value.
+	* @returns The percentage representation of the value.
+	*/
 	valueToPercent: (value, min, max) => (value - min) * 100 / (max - min),
+	/**
+	* Converts a percentage (0-100) to a value within a range.
+	*
+	* @param percent - The percentage to convert.
+	* @param min - The minimum allowed value.
+	* @param max - The maximum allowed value.
+	* @returns The value representation of the percentage.
+	*/
 	percentToValue: (percent, min, max) => (max - min) * percent + min
 };
 //#endregion
@@ -1483,6 +1525,9 @@ var createSlider = createBuilder((options) => {
 	};
 	return {
 		elements: {
+			/**
+			* Root slider container element
+			*/
 			root: computed(() => {
 				const events = { onPointerdown: handlePointerdown };
 				return {
@@ -1491,8 +1536,10 @@ var createSlider = createBuilder((options) => {
 					...toValue(options.disabled) ? void 0 : events
 				};
 			}),
+			/**
+			* Input inside each thumb for accessibility
+			*/
 			thumbInput: computed(() => (data) => {
-				const events = { onKeydown: (event) => handleKeydown(event, data.index) };
 				return {
 					min: min.value,
 					max: max.value,
@@ -1507,13 +1554,16 @@ var createSlider = createBuilder((options) => {
 					step: step.value,
 					disabled: toValue(options.disabled),
 					ref: data.index === 0 ? firstThumbRef : data.index === 1 ? secondThumbRef : void 0,
-					...toValue(options.disabled) ? void 0 : events
+					...toValue(options.disabled) ? void 0 : { onKeydown: (event) => handleKeydown(event, data.index) }
 				};
 			})
 		},
 		state: {
 			normalizedValue,
 			shiftStep,
+			/**
+			* Track element representing the selected range
+			*/
 			track: computed(() => {
 				const start = normalizedValue.value.length > 1 ? normalizedValue.value[0] : min.value;
 				const startPercentage = getValueInPercentage.value(start);
@@ -1633,7 +1683,11 @@ var createTabs = createBuilder((options) => {
 * Based on https://www.w3.org/WAI/ARIA/apg/patterns/button/#:~:text=Toggle%20button
 */
 var createToggleButton = createBuilder((options) => {
-	return { elements: { button: computed(() => ({
+	return { elements: { 
+	/**
+	* A html button element that is supposed to act as a toggle button.
+	*/
+button: computed(() => ({
 		"aria-pressed": toValue(options.isPressed),
 		onClick: options.onToggle
 	})) } };
@@ -1667,11 +1721,19 @@ var createToggletip = createBuilder(({ toggleLabel, isVisible }) => {
 	const toggle = () => _isVisible.value = !_isVisible.value;
 	return {
 		elements: {
+			/**
+			* The element which controls the toggletip visibility:
+			* Preferably a `button` element.
+			*/
 			trigger: computed(() => ({
 				id: triggerId,
 				onClick: toggle,
 				"aria-label": toValue(toggleLabel)
 			})),
+			/**
+			* The element with the relevant toggletip content.
+			* Only simple, textual content is allowed.
+			*/
 			tooltip: {
 				onToggle: (e) => {
 					_isVisible.value = e.target.matches(":popover-open");
@@ -1718,10 +1780,17 @@ var createTooltip = createBuilder(({ debounce, isVisible }) => {
 	useDismissible({ isExpanded: _isVisible });
 	return {
 		elements: {
+			/**
+			* The element which controls the tooltip visibility on hover.
+			*/
 			trigger: {
 				"aria-describedby": tooltipId,
 				...hoverEvents
 			},
+			/**
+			* The element describing the tooltip.
+			* Only simple, textual and non-focusable content is allowed.
+			*/
 			tooltip: {
 				popover: "manual",
 				role: "tooltip",
@@ -1734,4 +1803,108 @@ var createTooltip = createBuilder(({ debounce, isVisible }) => {
 	};
 });
 //#endregion
-export { CLOSING_KEYS, OPENING_KEYS, createBuilder, createCalendar, createComboBox, createDataGrid, createElRef, createListbox, createMenuButton, createMenuItems, createNavigationMenu, createSlider, createTabs, createToggleButton, createToggletip, createTooltip, debounce, getNativeElement, isPrintableCharacter, useGlobalEventListener, useOutsideClick, wasKeyPressed };
+//#region src/composables/treeView/createTreeView.ts
+var createTreeView = createBuilder((options) => {
+	return { elements: { tree: computed(() => ({
+		role: "tree",
+		"aria-label": toValue(options.label)
+	})) } };
+});
+//#endregion
+//#region src/composables/treeView/createTreeViewItem.ts
+var createTreeViewItem = createBuilder((options) => {
+	const disabled = computed(() => toValue(options.disabled));
+	const level = computed(() => toValue(options.level));
+	const hasChildren = computed(() => toValue(options.hasChildren));
+	const isOpen = computed(() => toValue(options.isOpen));
+	const toggleOpen = () => {
+		if (disabled.value) return;
+		if (hasChildren.value) options.onToggle?.(!isOpen.value);
+		options.onSelect?.();
+	};
+	/**
+	* Determines if a specific DOM element or its tree item wrapper is disabled.
+	*/
+	const isElementDisabled = (item) => {
+		if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") return true;
+		return (item.parentElement?.closest("[role=\"treeitem\"]"))?.getAttribute("aria-disabled") === "true";
+	};
+	/**
+	* Crawls the parent tree structure to retrieve all currently visible, active tree items.
+	*/
+	const getVisibleTreeItems = (triggerEl) => {
+		const rootTree = triggerEl.closest("[role=\"tree\"]");
+		if (!rootTree) return [];
+		return Array.from(rootTree.querySelectorAll("[role=\"treeitem\"]")).filter((item) => {
+			if (!(item.offsetWidth > 0 || item.offsetHeight > 0 || item.getClientRects().length > 0)) return false;
+			return !isElementDisabled(item);
+		});
+	};
+	const handleKeyDown = (event) => {
+		if (disabled.value) return;
+		const currentTrigger = event.currentTarget;
+		switch (event.key) {
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				toggleOpen();
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				if (hasChildren.value) if (isOpen.value) {
+					const items = getVisibleTreeItems(currentTrigger);
+					const currentIndex = items.indexOf(currentTrigger);
+					if (currentIndex !== -1 && currentIndex < items.length - 1) items[currentIndex + 1].focus();
+				} else options.onToggle?.(true);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				if (hasChildren.value && isOpen.value) options.onToggle?.(false);
+				else {
+					const parentGroup = currentTrigger.closest("[role=\"group\"]");
+					if (parentGroup) {
+						const parentTrigger = parentGroup.closest("[role=\"treeitem\"]") || parentGroup.parentElement?.querySelector("[role=\"treeitem\"]");
+						if (parentTrigger && parentTrigger !== currentTrigger) parentTrigger.focus();
+					}
+				}
+				break;
+			case "ArrowDown": {
+				event.preventDefault();
+				const items = getVisibleTreeItems(currentTrigger);
+				const currentIndex = items.indexOf(currentTrigger);
+				if (currentIndex !== -1 && currentIndex < items.length - 1) items[currentIndex + 1].focus();
+				break;
+			}
+			case "ArrowUp": {
+				event.preventDefault();
+				const items = getVisibleTreeItems(currentTrigger);
+				const currentIndex = items.indexOf(currentTrigger);
+				if (currentIndex > 0) items[currentIndex - 1].focus();
+				break;
+			}
+			case "Home": {
+				event.preventDefault();
+				const items = getVisibleTreeItems(currentTrigger);
+				if (items.length > 0) items[0].focus();
+				break;
+			}
+			case "End": {
+				event.preventDefault();
+				const items = getVisibleTreeItems(currentTrigger);
+				if (items.length > 0) items[items.length - 1].focus();
+				break;
+			}
+		}
+	};
+	return { elements: { treeItem: computed(() => ({
+		role: "treeitem",
+		"aria-expanded": hasChildren.value ? isOpen.value : void 0,
+		"aria-level": level.value,
+		"aria-disabled": disabled.value ? "true" : void 0,
+		tabindex: disabled.value ? -1 : 0,
+		onClick: toggleOpen,
+		onKeydown: handleKeyDown
+	})) } };
+});
+//#endregion
+export { CLOSING_KEYS, OPENING_KEYS, createBuilder, createCalendar, createComboBox, createDataGrid, createElRef, createListbox, createMenuButton, createMenuItems, createNavigationMenu, createSlider, createTabs, createToggleButton, createToggletip, createTooltip, createTreeView, createTreeViewItem, debounce, getNativeElement, isPrintableCharacter, useGlobalEventListener, useOutsideClick, wasKeyPressed };

package/dist/utils/FocusVisibleTest.d.vue.ts

@@ -1,4 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
-    button: HTMLButtonElement;
-}, HTMLDivElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/utils/TouchEventTest.d.vue.ts

@@ -1,4 +1,3 @@
-declare const _default: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
-    button: HTMLButtonElement;
-}, HTMLDivElement>;
+declare const __VLS_export: import('@vue/runtime-core').DefineComponent<{}, {}, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.10.0",
+  "version": "0.11.0-dev-20260610140621",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -32,14 +32,16 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@playwright/experimental-ct-vue": "1.59.1",
-    "@playwright/test": "1.59.1",
+    "@playwright/experimental-ct-vue": "1.60.0",
+    "@playwright/test": "1.60.0",
     "typescript": ">= 5",
     "vue": ">= 3.5.0"
   },
   "devDependencies": {
-    "@vue/compiler-dom": "3.5.33",
-    "vue": "3.5.33",
+    "@vue/compiler-dom": "3.5.35",
+    "unplugin-dts": "1.0.2",
+    "vite": "8.0.16",
+    "vue": "3.5.35",
     "@sit-onyx/shared": "^0.1.0"
   },
   "scripts": {