@sit-onyx/headless 0.11.0 → 0.12.0-dev-20260730150439

package/LICENSE.txt

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2023 Schwarz IT KG
+   Copyright 2023 Schwarz Digits IT KG
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,12 +1,12 @@
 <div align="center" style="text-align: center">
-  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
+<img alt="Onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/packages/assets/src/onyx-brand/signet.svg" height="96px">
 </div>
 
 <br>
 
 # onyx Headless
 
-A composable headless library for Vue created by [Schwarz IT](https://it.schwarz).
+A composable headless library for Vue created by [Schwarz Digits](https://schwarz-digits.de).
 
 <br />
 

package/dist/composables/comboBox/createComboBox.d.ts

@@ -2,7 +2,9 @@ import { MaybeRef, Ref } from 'vue';
 import { PressedKey } from '../../utils/keyboard.js';
 import { Nullable } from '../../utils/types.js';
 import { CreateListboxOptions, ListboxValue } from '../listbox/createListbox.js';
-/** See https://w3c.github.io/aria/#aria-autocomplete */
+/**
+ * See https://w3c.github.io/aria/#aria-autocomplete
+ */
 export type ComboboxAutoComplete = "none" | "list" | "both";
 export declare const OPENING_KEYS: PressedKey[];
 export declare const CLOSING_KEYS: PressedKey[];
@@ -10,7 +12,8 @@ export type CreateComboboxOptions<TValue extends ListboxValue, TAutoComplete ext
     autocomplete: MaybeRef<TAutoComplete>;
     label: MaybeRef<string>;
     /**
-     * Labels the listbox which displays the available options. E.g. the list label could be "Countries" for a combobox which is labelled "Country".
+     * Labels the listbox which displays the available options. E.g. the list label could be
+     * "Countries" for a combobox which is labelled "Country".
      */
     listLabel: MaybeRef<string>;
     /**
@@ -18,7 +21,8 @@ export type CreateComboboxOptions<TValue extends ListboxValue, TAutoComplete ext
      */
     listDescription?: MaybeRef<Nullable<string>>;
     /**
-     * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
+     * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can
+     * be controlled via the keyboard.
      */
     isExpanded: MaybeRef<boolean>;
     /**
@@ -32,7 +36,8 @@ export type CreateComboboxOptions<TValue extends ListboxValue, TAutoComplete ext
     /**
      * Hook when the popover should toggle.
      *
-     * @param preventFocus If `true`, the parent combobox should not be focused (e.g. on outside click).
+     * @param preventFocus If `true`, the parent combobox should not be focused (e.g. on outside
+     *   click).
      */
     onToggle?: (preventFocus?: boolean) => void;
     /**
@@ -279,8 +284,9 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
         ref?: Ref<import('../../utils/builder.js').VueTemplateRefElement<Element>, import('../../utils/builder.js').VueTemplateRefElement<Element>> | undefined;
     }>;
     /**
-     * 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.
+     * 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: import('vue').ComputedRef<{
         "aria-autocomplete"?: TAutoComplete | undefined;

package/dist/composables/comboBox/createComboBox.testing.d.ts

@@ -5,6 +5,7 @@ import { Locator, Page } from '@playwright/test';
 export declare const comboboxTesting: (_page: Page, listbox: Locator, combobox: Locator, button: Locator, options: Locator) => Promise<void>;
 export type CheckLocator = (option: Locator) => Promise<boolean>;
 /**
- * Test an implementation of the combobox based on https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ * Test an implementation of the combobox based on
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
 export declare const comboboxSelectOnlyTesting: (page: Page, listbox: Locator, combobox: Locator, isActive: CheckLocator) => Promise<void>;

package/dist/composables/dataGrid/createDataGrid.d.ts

@@ -7,11 +7,13 @@ type CellIdentifier = {
 export type LazyOptions<Lazy extends boolean> = Lazy extends true ? {
     lazy: MaybeRefOrGetter<{
         /**
-         * total number of rows that are viewable, this includes rows that are hidden because they are out of view
+         * Total number of rows that are viewable, this includes rows that are hidden because they
+         * are out of view
          */
         totalRows: number | "unknown";
         /**
-         * total number of columns that are viewable, this includes columns that are hidden because they are out of view
+         * Total number of columns that are viewable, this includes columns that are hidden because
+         * they are out of view
          */
         totalCols: number | "unknown";
         requestLazyLoad: RequestLazyLoad;
@@ -71,9 +73,10 @@ export declare const createDataGrid: <Lazy extends boolean = false>(options: Cre
     }>;
 }, {
     /**
-     * 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.
+     * 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: import('vue').ComputedRef<boolean>;
 }, {}>;

package/dist/composables/dragAndDrop/createDragAndDrop.d.ts

@@ -0,0 +1,44 @@
+export type CreateDragAndDropOptions<TItem> = {
+    /**
+     * Emitted while actively dragging.
+     * Will be called for each animation frame.
+     */
+    onDragover?(event: DragEvent): void;
+    /**
+     * Emitted when an active drag is dropped over a valid drop target.
+     */
+    onDrop?: (event: DragEvent) => void;
+    /**
+     * Emitted when an item starts to be dragged.
+     */
+    onDragstart?: (event: DragEvent, item: TItem) => void;
+    /**
+     * Emitted when the user ends stops dragging the element.
+     */
+    onDragend?: (event: DragEvent, item: TItem) => void;
+};
+/**
+ * Composable for creating drag and drop functionality.
+ */
+export declare const createDragAndDrop: <TItem>(options: CreateDragAndDropOptions<TItem>) => {
+    elements: {
+        /**
+         * Drop target where draggable elements are allowed to be dropped.
+         * drop).
+         */
+        target: {
+            onDragover: (event: DragEvent) => void;
+            onDrop: (event: DragEvent) => void;
+        };
+        /**
+         * Drag and drop trigger / handle (e.g. an icon) that starts the drag.
+         */
+        trigger: ({ item }: {
+            item: TItem;
+        }) => {
+            draggable: true;
+            onDragstart: (event: DragEvent) => void | undefined;
+            onDragend: (event: DragEvent) => void | undefined;
+        };
+    };
+};

package/dist/composables/helpers/useAllSettled.d.ts

@@ -2,8 +2,9 @@
  * Execute a callback, when all added promise are settled (either resolved or rejected).
  * It allows for more promises to be added while waiting.
  *
- * @param cb callback to execute when all added promise are settled.
- * @returns an object with an add function and the active state which is true as long as any promise is running.
+ * @param cb Callback to execute when all added promise are settled.
+ * @returns An object with an add function and the active state which is true as long as any promise
+ *   is running.
  */
 export declare const useAllSettled: (cb?: () => void) => {
     add: (promise: Promise<unknown>) => void;

package/dist/composables/helpers/useDismissible.d.ts

@@ -3,8 +3,9 @@ type UseDismissibleOptions = {
     isExpanded: Ref<boolean>;
 };
 /**
- * Composable that sets `isExpanded` to false, when the `Escape` key is pressed.
- * Addresses the "dismissible" aspect of https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+ * Composable that sets `isExpanded` to false, when the `Escape` key is pressed. Addresses the
+ * "dismissible" aspect of
+ * https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
  */
 export declare const useDismissible: ({ isExpanded }: UseDismissibleOptions) => void;
 export {};

package/dist/composables/helpers/useLastSettled.d.ts

@@ -1,9 +1,11 @@
 /**
- * Execute a callback, when the latest promise is settled (either resolved or rejected).
- * This ensures that out-of-order settling promises are ignored and only the latest promise is considered.
+ * Execute a callback, when the latest promise is settled (either resolved or rejected). This
+ * ensures that out-of-order settling promises are ignored and only the latest promise is
+ * considered.
  *
- * @param cb callback to execute when the last promise, that was added to the queue, is settled.
- * @returns the active state of the last settled promise and a queue function to add new promises to the queue.
+ * @param cb Callback to execute when the last promise, that was added to the queue, is settled.
+ * @returns The active state of the last settled promise and a queue function to add new promises to
+ *   the queue.
  */
 export declare const useLastSettled: <T>(cb: (success: boolean, resolved?: T) => void) => {
     active: import('vue').Ref<boolean, boolean>;

package/dist/composables/helpers/useTypeAhead.d.ts

@@ -1,11 +1,12 @@
 /**
- * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.
+ * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable
+ * characters.
  *
  * @example
- * ```ts
- * const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
- * // ...
- * addEventListener("keydown", typeAhead);
- * ```
+ *   ```ts
+ *   const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
+ *   // ...
+ *   addEventListener("keydown", typeAhead);
+ *   ```;
  */
 export declare const useTypeAhead: (callback: (input: string) => void, timeout?: number) => (event: Pick<KeyboardEvent, "key">) => void;

package/dist/composables/listbox/createListbox.d.ts

@@ -21,7 +21,8 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
      */
     controlled?: boolean;
     /**
-     * Controls the opened/visible state of the listbox. When expanded the activeOption can be controlled via the keyboard.
+     * Controls the opened/visible state of the listbox. When expanded the activeOption can be
+     * controlled via the keyboard.
      */
     isExpanded?: MaybeRef<boolean>;
     /**
@@ -70,8 +71,8 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
     controlled?: false;
 });
 /**
- * Composable for creating a accessibility-conform listbox.
- * For supported keyboard shortcuts, see: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
+ * Composable for creating a accessibility-conform listbox. For supported keyboard shortcuts, see:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
  */
 export declare const createListbox: <TValue extends ListboxValue, TMultiple extends boolean = false>(options: CreateListboxOptions<TValue, TMultiple>) => import('../../utils/builder.js').HeadlessComposable<{
     listbox: import('vue').ComputedRef<VBindAttributes>;

package/dist/composables/listbox/createListbox.testing.d.ts

@@ -18,7 +18,8 @@ export type ListboxTestingOptions = {
     isOptionActive: (locator: Locator) => Promise<boolean>;
 };
 /**
- * Playwright utility for executing accessibility testing for a listbox.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
+ * Playwright utility for executing accessibility testing for a listbox. Will check aria attributes
+ * and keyboard shortcuts as defined in
+ * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
  */
 export declare const listboxTesting: ({ page, listbox, options, isOptionActive, }: ListboxTestingOptions) => Promise<void>;

package/dist/composables/menuButton/createMenuButton.d.ts

@@ -5,7 +5,8 @@ type CreateMenuButtonOptions = {
     onToggle: () => void;
     disabled?: Readonly<Ref<boolean>>;
     /**
-     * Whether the menu button opens to the top or bottom. Defines the keyboard navigation behavior (e.g. Arrow up and down).
+     * Whether the menu button opens to the top or bottom. Defines the keyboard navigation behavior
+     * (e.g. Arrow up and down).
      *
      * @default "bottom"
      */
@@ -74,23 +75,41 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
     };
 };
 type CreateMenuItemOptions = {
-    /** Current expanded state of the menu item (for nested children). */
+    /**
+     * Current expanded state of the menu item (for nested children).
+     */
     isExpanded?: Ref<boolean>;
-    /** Whether the menu item renders its children in an external flyout. */
+    /**
+     * Whether the menu item renders its children in an external flyout.
+     */
     isExternal?: MaybeRefOrGetter<boolean>;
-    /** Whether the menu item is disabled. */
+    /**
+     * Whether the menu item is disabled.
+     */
     disabled?: MaybeRefOrGetter<boolean>;
-    /** DOM element ref of the external children wrapper (used for focus checks). */
+    /**
+     * DOM element ref of the external children wrapper (used for focus checks).
+     */
     externalChildrenRef?: Readonly<Ref<HTMLElement | null>>;
-    /** Called when the menu item should be opened (if it has nested children). */
+    /**
+     * Called when the menu item should be opened (if it has nested children).
+     */
     onOpen?: () => void;
-    /** Called when the menu item should be closed.*/
+    /**
+     * Called when the menu item should be closed.
+     */
     onClose?: () => void;
-    /** Called when the external children should close and focus the trigger. */
+    /**
+     * Called when the external children should close and focus the trigger.
+     */
     onFocusTrigger?: () => void;
-    /** Called to notify a parent menu of a hover enter event. */
+    /**
+     * Called to notify a parent menu of a hover enter event.
+     */
     onHoverEnterParent?: () => void;
-    /** Called to notify a parent menu of a hover leave event. */
+    /**
+     * Called to notify a parent menu of a hover leave event.
+     */
     onHoverLeaveParent?: () => void;
     openingArrowDirection?: MaybeRefOrGetter<"ArrowRight" | "ArrowLeft">;
 };

package/dist/composables/menuButton/createMenuButton.testing.d.ts

@@ -18,7 +18,8 @@ export type MenuButtonTestingOptions = {
     menuItems: Locator;
 };
 /**
- * Playwright utility for executing accessibility testing for a navigation menu.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+ * Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+ * attributes and keyboard shortcuts as defined in
+ * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
  */
 export declare const menuButtonTesting: ({ page, button, menu, menuItems, }: MenuButtonTestingOptions) => Promise<void>;

package/dist/composables/navigationMenu/createMenu.testing.d.ts

@@ -10,7 +10,8 @@ export type NavigationMenuTestingOptions = {
     buttons: Locator;
 };
 /**
- * Playwright utility for executing accessibility testing for a navigation menu.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ * Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+ * attributes and keyboard shortcuts as defined in
+ * https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
  */
 export declare const navigationTesting: ({ nav, buttons }: NavigationMenuTestingOptions) => Promise<void>;

package/dist/composables/slider/createSlider.d.ts

@@ -25,9 +25,10 @@ export type CreateSliderOptions<TValue extends SliderValue = SliderValue> = {
      */
     step?: MaybeRef<number>;
     /**
-     * Step size to increase/decrease the slider value when changing the value via keyboard while pressing the "Shift" key.
+     * Step size to increase/decrease the slider value when changing the value via keyboard while
+     * pressing the "Shift" key.
      *
-     * default 10% of the total range (max - min)
+     * Default 10% of the total range (max - min)
      */
     shiftStep?: MaybeRef<number | undefined>;
     /**

package/dist/composables/tabs/createTabs.testing.d.ts

@@ -2,12 +2,13 @@ import { Locator, Page } from '@playwright/test';
 export type TabsTestingOptions = {
     page: Page;
     /**
-     * Locator of the tabs component. Must have at least 3 tabs where the first one is initially selected.
+     * Locator of the tabs component. Must have at least 3 tabs where the first one is initially
+     * selected.
      */
     tablist: Locator;
 };
 /**
- * Playwright utility for executing accessibility testing for tabs.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * Playwright utility for executing accessibility testing for tabs. Will check aria attributes and
+ * keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export declare const tabsTesting: (options: TabsTestingOptions) => Promise<void>;

package/dist/composables/toggleButton/createToggleButton.testing.d.ts

@@ -8,7 +8,8 @@ export type ToggleButtonTestingOptions = {
     initiallyPressed: boolean;
 };
 /**
- * Playwright utility for executing accessibility testing for a navigation menu.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+ * Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+ * attributes and keyboard shortcuts as defined in
+ * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
  */
 export declare const toggleButtonTesting: ({ button, labelText, initiallyPressed, }: ToggleButtonTestingOptions) => Promise<void>;

package/dist/composables/tooltip/createTooltip.d.ts

@@ -7,10 +7,11 @@ export type CreateTooltipOptions = {
     isVisible?: Ref<boolean>;
 };
 /**
- * Create a tooltip as described in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
- * Its visibility is toggled on hover or focus.
- * A tooltip MUST be used to describe the associated trigger element. E.g. The usage with the ⓘ would be incorrect.
- * To provide contextual information use the `createToggletip`.
+ * Create a tooltip as described in
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role Its visibility
+ * is toggled on hover or focus. A tooltip MUST be used to describe the associated trigger element.
+ * E.g. The usage with the ⓘ would be incorrect. To provide contextual information use the
+ * `createToggletip`.
  */
 export declare const createTooltip: (args_0: CreateTooltipOptions) => import('../../utils/builder.js').HeadlessComposable<{
     /**

package/dist/index.d.ts

@@ -13,6 +13,7 @@ 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 './composables/dragAndDrop/createDragAndDrop.js';
 export * from './utils/builder.js';
 export { isPrintableCharacter, wasKeyPressed } from './utils/keyboard.js';
 export { debounce } from './utils/timer.js';

package/dist/index.js

@@ -2,63 +2,65 @@ import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive
 //#region src/utils/builder.ts
 /**
 * We use this identity function to ensure the correct typings of the headless composables
+*
 * @example
-* ```ts
-* export const createTooltip = createBuilder(({ initialVisible }: CreateTooltipOptions) => {
-*   const tooltipId = useId();
-*   const isVisible = ref(initialVisible);
+*   ```ts
+*   export const createTooltip = createBuilder(({ initialVisible }: CreateTooltipOptions) => {
+*     const tooltipId = useId();
+*     const isVisible = ref(initialVisible);
 *
-*   const hoverEvents = {
-*     onMouseover: () => (isVisible.value = true),
-*     onMouseout: () => (isVisible.value = false),
-*     onFocusin: () => (isVisible.value = true),
-*     onFocusout: () => (isVisible.value = false),
-*   };
+*     const hoverEvents = {
+*       onMouseover: () => (isVisible.value = true),
+*       onMouseout: () => (isVisible.value = false),
+*       onFocusin: () => (isVisible.value = true),
+*       onFocusout: () => (isVisible.value = false),
+*     };
 *
-*   return {
-*     elements: {
-*       trigger: {
-*         "aria-describedby": tooltipId,
-*         ...hoverEvents,
+*     return {
+*       elements: {
+*         trigger: {
+*           "aria-describedby": tooltipId,
+*           ...hoverEvents,
+*         },
+*         tooltip: {
+*           role: "tooltip",
+*           id: tooltipId,
+*           tabindex: "-1",
+*           ...hoverEvents,
+*         },
 *       },
-*       tooltip: {
-*         role: "tooltip",
-*         id: tooltipId,
-*         tabindex: "-1",
-*         ...hoverEvents,
+*       state: {
+*         isVisible,
 *       },
-*     },
-*     state: {
-*       isVisible,
-*     },
-*   };
-* });
-*
-* ```
+*     };
+*   });
+*   ```;
 */
 var createBuilder = (builder) => builder;
 /**
 * Creates a special writeable computed that references a DOM Element.
 * Vue Component references will be unwrapped.
+*
 * @example
-* ```ts
-* createBuilder() => {
-*  const buttonRef = createElRef<HtmlButtonElement>();
-*  return {
-*    elements: {
-*      button: {
-*        ref: buttonRef,
-*      },
-*    }
-*  };
-* });
-* ```
+*   ```ts
+*   createBuilder() => {
+*   const buttonRef = createElRef<HtmlButtonElement>();
+*   return {
+*   elements: {
+*   button: {
+*   ref: buttonRef,
+*   },
+*   }
+*   };
+*   });
+*   ```;
 */
 function createElRef() {
 	const elementRef = shallowRef(null);
 	return computed({
 		set: (ref) => {
-			elementRef.value = getNativeElement(Array.isArray(ref) ? ref[0] : ref);
+			const element = Array.isArray(ref) ? ref[0] : ref;
+			elementRef.value = getNativeElement(element);
 		},
 		get: () => elementRef.value
 	});
@@ -361,6 +363,7 @@ var createCalendar = createBuilder((options) => {
 //#region src/utils/object.ts
 /**
 * Check if every entry of a subset exists and matches the entry of a target object.
+*
 * @returns `true`, if target contains the subset
 */
 var isSubsetMatching = (subset, target) => Object.entries(subset).every(([key, value]) => target[key] === value);
@@ -368,10 +371,12 @@ var isSubsetMatching = (subset, target) => Object.entries(subset).every(([key, v
 //#region src/utils/keyboard.ts
 /**
 * Check if a specified key was pressed.
+*
 * @param event The KeyboardEvent
-* @param key The key, either the [key property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) as a string (e.g. "m")
-* or an object with the relevant key parameters, e.g. `{ key: "m", altKey: true }`
-* @returns true, if the key was pressed with the specified parameters
+* @param key The key, either the [key
+*   property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) as a string (e.g.
+*   "m") or an object with the relevant key parameters, e.g. `{ key: "m", altKey: true }`
+* @returns True, if the key was pressed with the specified parameters
 */
 var wasKeyPressed = (event, key) => {
 	if (typeof key === "string") return event.key === key;
@@ -387,9 +392,11 @@ var GRAPHEME_SEGMENTER = new Intl.Segmenter("en-US");
 /**
 * Check if the `key` property of a KeyboardEvent is a printable character.
 *
-* There is no standardized or specified algorithm to check for [named keys](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) vs printable characters.
-* For this check we assume that any `key` value that is a single Grapheme is a printable characters.
-* This way we can ensure that combining characters and emojis are correctly recognized without need to keep a list of all named key.
+* There is no standardized or specified algorithm to check for [named
+* keys](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) vs printable characters.
+* For this check we assume that any `key` value that is a single Grapheme is a printable
+* characters. This way we can ensure that combining characters and emojis are correctly recognized
+* without need to keep a list of all named key.
 */
 var isPrintableCharacter = (key) => [...GRAPHEME_SEGMENTER.segment(key)].length === 1;
 //#endregion
@@ -415,8 +422,8 @@ var addGlobalListener = (type, listener) => {
 	document.addEventListener(type, GLOBAL_HANDLER);
 };
 /**
-* A single and unique function for all event types.
-* We use the fact that `addEventListener` and `removeEventListener` are idempotent when called with the same function reference.
+* A single and unique function for all event types. We use the fact that `addEventListener` and
+* `removeEventListener` are idempotent when called with the same function reference.
 */
 var GLOBAL_HANDLER = (event) => {
 	const type = event.type;
@@ -517,21 +524,24 @@ var debounce = (handler, timeout) => {
 		clearTimeout(timer);
 		timer = setTimeout(() => handler(...lastArgs), toValue(timeout));
 	};
-	/** Abort the currently debounced action, if any. */
+	/**
+	* Abort the currently debounced action, if any.
+	*/
 	func.abort = () => clearTimeout(timer);
 	return func;
 };
 //#endregion
 //#region src/composables/helpers/useTypeAhead.ts
 /**
-* Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.
+* Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable
+* characters.
 *
 * @example
-* ```ts
-* const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
-* // ...
-* addEventListener("keydown", typeAhead);
-* ```
+*   ```ts
+*   const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
+*   // ...
+*   addEventListener("keydown", typeAhead);
+*   ```;
 */
 var useTypeAhead = (callback, timeout = 500) => {
 	let inputString = "";
@@ -546,8 +556,8 @@ var useTypeAhead = (callback, timeout = 500) => {
 //#endregion
 //#region src/composables/listbox/createListbox.ts
 /**
-* Composable for creating a accessibility-conform listbox.
-* For supported keyboard shortcuts, see: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
+* Composable for creating a accessibility-conform listbox. For supported keyboard shortcuts, see:
+* https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable/
 */
 var createListbox = createBuilder((options) => {
 	const isMultiselect = computed(() => unref(options.multiple) ?? false);
@@ -682,7 +692,7 @@ var CLOSING_KEYS = [
 ];
 var SELECTING_KEYS = ["Enter"];
 /**
-* if the a search input is included, space should not be used to select
+* If the a search input is included, space should not be used to select
 * TODO: idea for the future: move this distinction to the listbox?
 */
 var isSelectingKey = (event, withSpace) => {
@@ -781,8 +791,9 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 				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.
+			* 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",
@@ -815,8 +826,9 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 * Execute a callback, when all added promise are settled (either resolved or rejected).
 * It allows for more promises to be added while waiting.
 *
-* @param cb callback to execute when all added promise are settled.
-* @returns an object with an add function and the active state which is true as long as any promise is running.
+* @param cb Callback to execute when all added promise are settled.
+* @returns An object with an add function and the active state which is true as long as any promise
+*   is running.
 */
 var useAllSettled = (cb) => {
 	const active = ref(false);
@@ -842,11 +854,13 @@ var useAllSettled = (cb) => {
 //#endregion
 //#region src/composables/helpers/useLastSettled.ts
 /**
-* Execute a callback, when the latest promise is settled (either resolved or rejected).
-* This ensures that out-of-order settling promises are ignored and only the latest promise is considered.
+* Execute a callback, when the latest promise is settled (either resolved or rejected). This
+* ensures that out-of-order settling promises are ignored and only the latest promise is
+* considered.
 *
-* @param cb callback to execute when the last promise, that was added to the queue, is settled.
-* @returns the active state of the last settled promise and a queue function to add new promises to the queue.
+* @param cb Callback to execute when the last promise, that was added to the queue, is settled.
+* @returns The active state of the last settled promise and a queue function to add new promises to
+*   the queue.
 */
 var useLastSettled = (cb) => {
 	const active = ref(false);
@@ -914,7 +928,8 @@ var createDataGrid = createBuilder((options) => {
 	const selectedCell = options.selectedCell || ref();
 	const selectedCellEl = createElRef();
 	/**
-	* Tracks if the latest `resolveCell` promise is finished, if successful the focus can be moved to the resolved cell.
+	* Tracks if the latest `resolveCell` promise is finished, if successful the focus can be moved
+	* to the resolved cell.
 	*/
 	const focusQueue = useLastSettled((success, cell) => {
 		if (success) cell?.focus();
@@ -956,7 +971,7 @@ var createDataGrid = createBuilder((options) => {
 		mutationObserver?.disconnect();
 	});
 	/**
-	* when a cell is focused programmatically or by click, it becomes the currently selected cell.
+	* When a cell is focused programmatically or by click, it becomes the currently selected cell.
 	*/
 	const onFocusin = (event) => {
 		setSelected(event.target);
@@ -1036,9 +1051,10 @@ var createDataGrid = createBuilder((options) => {
 		},
 		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.
+		* 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: {}
@@ -1297,15 +1313,15 @@ var MathUtils = {
 	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).
+	* Converts a value within a range to a percentage (0-100).
 	*
 	* @param value - The value to convert.
 	* @param min - The minimum allowed value.
@@ -1361,7 +1377,7 @@ var createNavigationMenu = createBuilder(({ navigationName }) => {
 var areArraysEqual = (arrayA, arrayB, comparer = (a, b) => a === b) => arrayA.length === arrayB.length && arrayA.every((value, index) => comparer(value, arrayB[index]));
 //#endregion
 //#region src/composables/slider/createSlider.ts
-var NAVIGATION_KEYS = new Set([
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"ArrowUp",
 	"ArrowDown",
 	"ArrowLeft",
@@ -1371,12 +1387,12 @@ var NAVIGATION_KEYS = new Set([
 	"Home",
 	"End"
 ]);
-var INCREMENT_KEYS = new Set([
+var INCREMENT_KEYS = /* @__PURE__ */ new Set([
 	"ArrowRight",
 	"ArrowUp",
 	"PageUp"
 ]);
-var DECREMENT_KEYS = new Set([
+var DECREMENT_KEYS = /* @__PURE__ */ new Set([
 	"ArrowLeft",
 	"ArrowDown",
 	"PageDown"
@@ -1695,8 +1711,9 @@ button: computed(() => ({
 //#endregion
 //#region src/composables/helpers/useDismissible.ts
 /**
-* Composable that sets `isExpanded` to false, when the `Escape` key is pressed.
-* Addresses the "dismissible" aspect of https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+* Composable that sets `isExpanded` to false, when the `Escape` key is pressed. Addresses the
+* "dismissible" aspect of
+* https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
 */
 var useDismissible = ({ isExpanded }) => useGlobalEventListener({
 	type: "keydown",
@@ -1736,7 +1753,8 @@ var createToggletip = createBuilder(({ toggleLabel, isVisible }) => {
 			*/
 			tooltip: {
 				onToggle: (e) => {
-					_isVisible.value = e.target.matches(":popover-open");
+					const tooltip = e.target;
+					_isVisible.value = tooltip.matches(":popover-open");
 				},
 				anchor: triggerId,
 				popover: "auto",
@@ -1750,10 +1768,11 @@ var createToggletip = createBuilder(({ toggleLabel, isVisible }) => {
 //#endregion
 //#region src/composables/tooltip/createTooltip.ts
 /**
-* Create a tooltip as described in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
-* Its visibility is toggled on hover or focus.
-* A tooltip MUST be used to describe the associated trigger element. E.g. The usage with the ⓘ would be incorrect.
-* To provide contextual information use the `createToggletip`.
+* Create a tooltip as described in
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role Its visibility
+* is toggled on hover or focus. A tooltip MUST be used to describe the associated trigger element.
+* E.g. The usage with the ⓘ would be incorrect. To provide contextual information use the
+* `createToggletip`.
 */
 var createTooltip = createBuilder(({ debounce, isVisible }) => {
 	const tooltipId = useId();
@@ -1907,4 +1926,46 @@ var createTreeViewItem = createBuilder((options) => {
 	})) } };
 });
 //#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 };
+//#region src/composables/dragAndDrop/createDragAndDrop.ts
+/**
+* Composable for creating drag and drop functionality.
+*/
+var createDragAndDrop = createBuilder((options) => {
+	let isDragoverAnimationFrameTicking = false;
+	const onDragover = (event) => {
+		event.preventDefault();
+		if (!isDragoverAnimationFrameTicking) {
+			requestAnimationFrame(() => {
+				options.onDragover?.(event);
+				isDragoverAnimationFrameTicking = false;
+			});
+			isDragoverAnimationFrameTicking = true;
+		}
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		options.onDrop?.(event);
+	};
+	const onDragstart = (event, item) => options.onDragstart?.(event, item);
+	const onDragend = (event, item) => options.onDragend?.(event, item);
+	return { elements: {
+		/**
+		* Drop target where draggable elements are allowed to be dropped.
+		* drop).
+		*/
+		target: {
+			onDragover,
+			onDrop
+		},
+		/**
+		* Drag and drop trigger / handle (e.g. an icon) that starts the drag.
+		*/
+		trigger: ({ item }) => ({
+			draggable: true,
+			onDragstart: (event) => onDragstart(event, item),
+			onDragend: (event) => onDragend(event, item)
+		})
+	} };
+});
+//#endregion
+export { CLOSING_KEYS, OPENING_KEYS, createBuilder, createCalendar, createComboBox, createDataGrid, createDragAndDrop, createElRef, createListbox, createMenuButton, createMenuItems, createNavigationMenu, createSlider, createTabs, createToggleButton, createToggletip, createTooltip, createTreeView, createTreeViewItem, debounce, getNativeElement, isPrintableCharacter, useGlobalEventListener, useOutsideClick, wasKeyPressed };

package/dist/playwright.js

@@ -51,7 +51,8 @@ var openCombobox = async (combobox, listbox) => {
 };
 var expectToBeSelected = async (selectedItem) => expect(selectedItem, "Option should be selected").toHaveAttribute("aria-selected", "true");
 /**
-* Test an implementation of the combobox based on https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+* Test an implementation of the combobox based on
+* https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 */
 var comboboxSelectOnlyTesting = async (page, listbox, combobox, isActive) => {
 	await expect(listbox, "Initial state of a combobox is collapsed.").toBeHidden();
@@ -87,8 +88,9 @@ var comboboxSelectOnlyTesting = async (page, listbox, combobox, isActive) => {
 //#endregion
 //#region src/composables/listbox/createListbox.testing.ts
 /**
-* Playwright utility for executing accessibility testing for a listbox.
-* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
+* Playwright utility for executing accessibility testing for a listbox. Will check aria attributes
+* and keyboard shortcuts as defined in
+* https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
 */
 var listboxTesting = async ({ page, listbox, options, isOptionActive }) => {
 	const expectOptionToBeActive = async (locator, message) => {
@@ -141,8 +143,9 @@ var listboxTesting = async ({ page, listbox, options, isOptionActive }) => {
 //#endregion
 //#region src/composables/menuButton/createMenuButton.testing.ts
 /**
-* Playwright utility for executing accessibility testing for a navigation menu.
-* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+* Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+* attributes and keyboard shortcuts as defined in
+* https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
 */
 var menuButtonTesting = async ({ page, button, menu, menuItems }) => {
 	await expect(button, "navigation menu should have an \"aria-haspopup\" attribute set to true").toHaveAttribute("aria-haspopup", "true");
@@ -176,8 +179,9 @@ var menuButtonTesting = async ({ page, button, menu, menuItems }) => {
 //#endregion
 //#region src/composables/navigationMenu/createMenu.testing.ts
 /**
-* Playwright utility for executing accessibility testing for a navigation menu.
-* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+* Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+* attributes and keyboard shortcuts as defined in
+* https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
 */
 var navigationTesting = async ({ nav, buttons }) => {
 	/**
@@ -352,8 +356,8 @@ var rangeSliderTesting = async ({ page, slider, rail }) => {
 //#endregion
 //#region src/composables/tabs/createTabs.testing.ts
 /**
-* Playwright utility for executing accessibility testing for tabs.
-* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+* Playwright utility for executing accessibility testing for tabs. Will check aria attributes and
+* keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 */
 var tabsTesting = async (options) => {
 	await expect(options.tablist, "tablist element must have role \"tablist\"").toHaveRole("tablist");
@@ -438,8 +442,9 @@ var expectPanelAttributes = async (panel, tabId) => {
 //#endregion
 //#region src/composables/toggleButton/createToggleButton.testing.ts
 /**
-* Playwright utility for executing accessibility testing for a navigation menu.
-* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+* Playwright utility for executing accessibility testing for a navigation menu. Will check aria
+* attributes and keyboard shortcuts as defined in
+* https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
 */
 var toggleButtonTesting = async ({ button, labelText, initiallyPressed }) => {
 	await expect(button, `button must have 'aria-pressed' attribute to be recognized as toggle button.`).toHaveAttribute("aria-pressed", String(initiallyPressed));

package/dist/utils/builder.d.ts

@@ -21,39 +21,39 @@ export type HeadlessComposable<Elements extends HeadlessElements, State extends
 } & IfDefined<"internals", Internals> & IfDefined<"state", State>;
 /**
  * We use this identity function to ensure the correct typings of the headless composables
+ *
  * @example
- * ```ts
- * export const createTooltip = createBuilder(({ initialVisible }: CreateTooltipOptions) => {
- *   const tooltipId = useId();
- *   const isVisible = ref(initialVisible);
+ *   ```ts
+ *   export const createTooltip = createBuilder(({ initialVisible }: CreateTooltipOptions) => {
+ *     const tooltipId = useId();
+ *     const isVisible = ref(initialVisible);
  *
- *   const hoverEvents = {
- *     onMouseover: () => (isVisible.value = true),
- *     onMouseout: () => (isVisible.value = false),
- *     onFocusin: () => (isVisible.value = true),
- *     onFocusout: () => (isVisible.value = false),
- *   };
+ *     const hoverEvents = {
+ *       onMouseover: () => (isVisible.value = true),
+ *       onMouseout: () => (isVisible.value = false),
+ *       onFocusin: () => (isVisible.value = true),
+ *       onFocusout: () => (isVisible.value = false),
+ *     };
  *
- *   return {
- *     elements: {
- *       trigger: {
- *         "aria-describedby": tooltipId,
- *         ...hoverEvents,
+ *     return {
+ *       elements: {
+ *         trigger: {
+ *           "aria-describedby": tooltipId,
+ *           ...hoverEvents,
+ *         },
+ *         tooltip: {
+ *           role: "tooltip",
+ *           id: tooltipId,
+ *           tabindex: "-1",
+ *           ...hoverEvents,
+ *         },
  *       },
- *       tooltip: {
- *         role: "tooltip",
- *         id: tooltipId,
- *         tabindex: "-1",
- *         ...hoverEvents,
+ *       state: {
+ *         isVisible,
  *       },
- *     },
- *     state: {
- *       isVisible,
- *     },
- *   };
- * });
- *
- * ```
+ *     };
+ *   });
+ *   ```;
  */
 export declare const createBuilder: <Args extends unknown[] = unknown[], Elements extends HeadlessElements = HeadlessElements, State extends HeadlessState | undefined = undefined, Internals extends object | undefined = undefined>(builder: (...args: Args) => HeadlessComposable<Elements, State, Internals>) => (...args: Args) => HeadlessComposable<Elements, State, Internals>;
 export type VueTemplateRefElement<E extends Element> = E | {
@@ -63,7 +63,7 @@ type VueTemplateRef<E extends Element> = Ref<VueTemplateRefElement<E>>;
 export declare const HeadlessElRefSymbol: unique symbol;
 export type HeadlessElRef<E extends Element | null> = WritableComputedRef<E | null> & {
     /**
-     * type differentiator
+     * Type differentiator
      * ensures that only `createElRef` can be used for headless element ref bindings
      */
     [HeadlessElRefSymbol]: true;
@@ -71,19 +71,20 @@ export type HeadlessElRef<E extends Element | null> = WritableComputedRef<E | nu
 /**
  * Creates a special writeable computed that references a DOM Element.
  * Vue Component references will be unwrapped.
+ *
  * @example
- * ```ts
- * createBuilder() => {
- *  const buttonRef = createElRef<HtmlButtonElement>();
- *  return {
- *    elements: {
- *      button: {
- *        ref: buttonRef,
- *      },
- *    }
- *  };
- * });
- * ```
+ *   ```ts
+ *   createBuilder() => {
+ *   const buttonRef = createElRef<HtmlButtonElement>();
+ *   return {
+ *   elements: {
+ *   button: {
+ *   ref: buttonRef,
+ *   },
+ *   }
+ *   };
+ *   });
+ *   ```;
  */
 export declare function createElRef<E extends Element>(): WritableComputedRef<E | null, E | null>;
 export declare const getNativeElement: <E extends Element>(element?: VueTemplateRefElement<E>) => E | null;

package/dist/utils/keyboard.d.ts

@@ -1,17 +1,21 @@
 export type PressedKey = string | Partial<Pick<KeyboardEvent, "altKey" | "key" | "ctrlKey" | "metaKey" | "shiftKey" | "code">>;
 /**
  * Check if a specified key was pressed.
+ *
  * @param event The KeyboardEvent
- * @param key The key, either the [key property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) as a string (e.g. "m")
- * or an object with the relevant key parameters, e.g. `{ key: "m", altKey: true }`
- * @returns true, if the key was pressed with the specified parameters
+ * @param key The key, either the [key
+ *   property](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) as a string (e.g.
+ *   "m") or an object with the relevant key parameters, e.g. `{ key: "m", altKey: true }`
+ * @returns True, if the key was pressed with the specified parameters
  */
 export declare const wasKeyPressed: (event: KeyboardEvent, key: PressedKey) => boolean;
 /**
  * Check if the `key` property of a KeyboardEvent is a printable character.
  *
- * There is no standardized or specified algorithm to check for [named keys](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) vs printable characters.
- * For this check we assume that any `key` value that is a single Grapheme is a printable characters.
- * This way we can ensure that combining characters and emojis are correctly recognized without need to keep a list of all named key.
+ * There is no standardized or specified algorithm to check for [named
+ * keys](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) vs printable characters.
+ * For this check we assume that any `key` value that is a single Grapheme is a printable
+ * characters. This way we can ensure that combining characters and emojis are correctly recognized
+ * without need to keep a list of all named key.
  */
 export declare const isPrintableCharacter: (key: string) => boolean;

package/dist/utils/math.d.ts

@@ -5,15 +5,15 @@ export declare const MathUtils: {
     clamp: (number: number, min: number, max: number) => number;
     /**
      * 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: number) => number;
     /**
-     *  Converts a value within a range to a percentage (0-100).
+     * Converts a value within a range to a percentage (0-100).
      *
      * @param value - The value to convert.
      * @param min - The minimum allowed value.

package/dist/utils/object.d.ts

@@ -1,5 +1,6 @@
 /**
  * Check if every entry of a subset exists and matches the entry of a target object.
+ *
  * @returns `true`, if target contains the subset
  */
 export declare const isSubsetMatching: (subset: object, target: object) => boolean;

package/dist/utils/types.d.ts

@@ -1,12 +1,13 @@
 /**
  * Adds the entry with the key `Key` and the value of type `TValue` to a record when it is defined.
  * Then the entry is either undefined or exists without being optional.
+ *
  * @example
- * ```ts
- * const _no_error: IfDefined<"b", number> & { a: number } = { a: 1, b: 2 };
- * // Error: Object literal may only specify known properties, and 'b' does not exist in type '{ a: number; }'.
- * const _error: IfDefined<"b", undefined> & { a: number } = { a: 1, b: 2 };
- * ```
+ *   ```ts
+ *   const _no_error: IfDefined<"b", number> & { a: number } = { a: 1, b: 2 };
+ *   // Error: Object literal may only specify known properties, and 'b' does not exist in type '{ a: number; }'.
+ *   const _error: IfDefined<"b", undefined> & { a: number } = { a: 1, b: 2 };
+ *   ```;
  */
 export type IfDefined<Key extends string, TValue> = TValue extends NonNullable<unknown> ? {
     [key in Key]: TValue;

package/dist/utils/vitest.d.ts

@@ -7,6 +7,7 @@
  *
  * `onBeforeMount` and `onMounted` callbacks are executed immediately.
  * `onBeforeUnmount` and `onUnmounted` are executed when the returned callback is run.
- * @returns a callback to trigger the run of `onBeforeUnmount` and `onUnmounted`
+ *
+ * @returns A callback to trigger the run of `onBeforeUnmount` and `onUnmounted`
  */
 export declare const mockVueLifecycle: () => () => Promise<void>;

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@sit-onyx/headless",
+  "version": "0.12.0-dev-20260730150439",
   "description": "Headless composables for Vue",
-  "version": "0.11.0",
-  "type": "module",
-  "author": "Schwarz IT KG",
+  "homepage": "https://onyx.schwarz/development/packages/headless.html",
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
   "license": "Apache-2.0",
-  "engines": {
-    "node": ">=20"
+  "author": "Schwarz Digits IT KG",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/headless"
   },
   "files": [
     "dist"
   ],
+  "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -22,27 +28,21 @@
       "default": "./dist/playwright.js"
     }
   },
-  "homepage": "https://onyx.schwarz/development/packages/headless.html",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/SchwarzIT/onyx",
-    "directory": "packages/headless"
-  },
-  "bugs": {
-    "url": "https://github.com/SchwarzIT/onyx/issues"
+  "devDependencies": {
+    "@vue/compiler-dom": "3.5.40",
+    "unplugin-dts": "1.0.3",
+    "vite": "8.1.5",
+    "vue": "3.5.40",
+    "@sit-onyx/shared": "^0.1.0"
   },
   "peerDependencies": {
-    "@playwright/experimental-ct-vue": "1.61.0",
-    "@playwright/test": "1.61.0",
+    "@playwright/experimental-ct-vue": "1.61.1",
+    "@playwright/test": "1.61.1",
     "typescript": ">= 5",
     "vue": ">= 3.5.0"
   },
-  "devDependencies": {
-    "@vue/compiler-dom": "3.5.38",
-    "unplugin-dts": "1.0.2",
-    "vite": "8.0.16",
-    "vue": "3.5.38",
-    "@sit-onyx/shared": "^0.1.0"
+  "engines": {
+    "node": ">=20"
   },
   "scripts": {
     "build": "vite build",