@sit-onyx/headless 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/playwright.d.ts

@@ -0,0 +1,5 @@
+export * from './composables/comboBox/createComboBox.testing.js';
+export * from './composables/listbox/createListbox.testing.js';
+export * from './composables/menuButton/createMenuButton.testing.js';
+export * from './composables/navigationMenu/createMenu.testing.js';
+export * from './composables/tabs/createTabs.testing.js';

package/dist/playwright.js

@@ -0,0 +1,369 @@
+import { expect, test } from "@playwright/experimental-ct-vue";
+const expectToOpen = async (keyCombo, combobox, listbox, checkActive) => {
+  await closeCombobox(combobox, listbox);
+  await combobox.press(keyCombo);
+  await expect(listbox, `Listbox should be opened after pressing ${keyCombo}.`).toBeVisible();
+  if (checkActive) {
+    const active = await checkActive();
+    expect(active, "Given option should be active").toBeTruthy();
+  }
+};
+const expectToClose = async (keyCombo, combobox, listbox, selectedLocator) => {
+  await openCombobox(combobox, listbox);
+  await combobox.press(keyCombo);
+  await expect(listbox, `Listbox should be closed after pressing ${keyCombo}.`).toBeHidden();
+  await expect(combobox).toBeFocused();
+  await openCombobox(combobox, listbox);
+  if (selectedLocator) {
+    await expectToBeSelected(selectedLocator());
+  }
+};
+const comboboxTesting = async (_page, listbox, combobox, button, options) => {
+  await expect(listbox, "Typically, the initial state of a combobox is collapsed.").toBeHidden();
+  await expect(combobox, "In the collapsed state, the combobox element is visible.").toBeVisible();
+  await expect(
+    button,
+    "In the collapsed state, the optional button element is visible."
+  ).toBeVisible();
+  await button.click();
+  await expect(
+    combobox,
+    "A combobox is said to be expanded when the combobox element shows its current value"
+  ).toHaveValue("");
+  await expect(
+    listbox,
+    "A combobox is said to be expanded when the associated popup is visible"
+  ).toBeVisible();
+  await button.click();
+  await expect(
+    combobox,
+    "Authors MUST set aria-expanded to false when it is collapsed."
+  ).toHaveAttribute("aria-expanded", "false");
+  await button.click();
+  await expect(
+    combobox,
+    "Authors MUST set aria-expanded to true when it is expanded."
+  ).toHaveAttribute("aria-expanded", "true");
+  await button.click();
+  await button.focus();
+  await expect(button, "authors SHOULD ensure that the button is focusable").toBeFocused();
+  await expect(
+    button,
+    "authors SHOULD ensure that the button is not included in the page Tab sequence"
+  ).toHaveAttribute("tabindex", "-1");
+  await expect(
+    combobox.getByRole("button"),
+    "authors SHOULD ensure that the button is not a descendant of the element with role combobox"
+  ).toHaveCount(0);
+  const firstElement = options.first();
+  await combobox.focus();
+  expectToOpen("ArrowDown", combobox, listbox);
+  const firstId = await (await firstElement.elementHandle()).getAttribute("id");
+  expect(typeof firstId).toBe("string");
+  await expect(
+    combobox,
+    "When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup."
+  ).toHaveAttribute("aria-activedescendant", firstId);
+  await expect(
+    combobox,
+    "When a descendant of the popup element is active, authors MAY ensure that the focus remains on the combobox element"
+  ).toBeFocused();
+};
+const closeCombobox = async (combobox, listbox) => {
+  await combobox.press("Escape");
+  return expect(listbox, "Listbox should be collapsed again").toBeHidden();
+};
+const openCombobox = async (combobox, listbox) => {
+  await combobox.press("Home");
+  return expect(listbox, "Listbox should be open again").toBeVisible();
+};
+const expectToBeSelected = async (selectedItem) => expect(selectedItem, "Option should be selected").toHaveAttribute("aria-selected", "true");
+const comboboxSelectOnlyTesting = async (page, listbox, combobox, isActive) => {
+  await expect(listbox, "Initial state of a combobox is collapsed.").toBeHidden();
+  await combobox.focus();
+  await test.step("Test opening keys", async () => {
+    await expectToOpen(
+      "ArrowUp",
+      combobox,
+      listbox,
+      () => isActive(page.getByRole("option").first())
+    );
+    await expectToOpen("Alt+ArrowDown", combobox, listbox);
+    await expectToOpen("Space", combobox, listbox);
+    await expectToOpen("Enter", combobox, listbox);
+    await expectToOpen("Home", combobox, listbox, () => isActive(page.getByRole("option").first()));
+    await expectToOpen("End", combobox, listbox, () => isActive(page.getByRole("option").last()));
+    await expectToOpen("ArrowDown", combobox, listbox);
+    await expectToOpen("a", combobox, listbox);
+  });
+  await test.step("Selecting with Enter", async () => {
+    await expectToClose("Enter", combobox, listbox, () => page.getByRole("option").first());
+    await expectToClose(" ", combobox, listbox, () => page.getByRole("option").first());
+    await expectToClose("Escape", combobox, listbox, () => page.getByRole("option").first());
+  });
+  await test.step("Activating with End", async () => {
+    await openCombobox(combobox, listbox);
+    await combobox.press("End");
+    const active = await isActive(listbox.getByRole("option").last());
+    expect(active, "Given option should be active").toBeTruthy();
+    await expect(combobox).toBeFocused();
+  });
+  await test.step("Activating with Home", async () => {
+    await openCombobox(combobox, listbox);
+    await combobox.press("Home");
+    const active = await isActive(listbox.getByRole("option").first());
+    expect(active, "Given option should be active").toBeTruthy();
+    await expect(combobox).toBeFocused();
+  });
+};
+const listboxTesting = async ({
+  page,
+  listbox,
+  options,
+  isOptionActive
+}) => {
+  const expectOptionToBeActive = async (locator, message) => {
+    expect(await isOptionActive(locator), message).toBeTruthy();
+    const optionId = await locator.getAttribute("id");
+    expect(optionId).toBeDefined();
+    await expect(
+      listbox,
+      "listbox should have set aria-activedescendant to the ID of the currently visually active option"
+    ).toHaveAttribute("aria-activedescendant", optionId);
+  };
+  await expect(listbox).toBeVisible();
+  await expect(
+    listbox,
+    'listbox must have a "aria-label" attribute with an existing id'
+  ).toHaveAttribute("aria-label");
+  await listbox.getAttribute("aria-label").then((label) => expect(page.locator(`#${label}`)).toBeDefined());
+  await expect(listbox, "listbox must have role attribute with value listbox").toHaveAttribute(
+    "role",
+    "listbox"
+  );
+  for (const option of await options.all()) {
+    await expect(option, "option must have arial-label attribute").toHaveAttribute("aria-label");
+    await expect(option, "option must have role attribute with value option").toHaveAttribute(
+      "role",
+      "option"
+    );
+  }
+  await page.keyboard.press("Tab");
+  await expect(listbox, "Listbox should be focused when pressing tab key").toBeFocused();
+  await listbox.press("ArrowDown");
+  await expectOptionToBeActive(
+    options.first(),
+    "Pressing arrow down key when no option is active should activate the first option"
+  );
+  await expect(
+    listbox,
+    "When option is visually active, DOM focus should still be on the listbox"
+  ).toBeFocused();
+  await listbox.press("ArrowDown");
+  await expectOptionToBeActive(
+    options.nth(1),
+    "Pressing arrow down key should activate the next option"
+  );
+  await listbox.press(" ");
+  await expect(
+    options.nth(1),
+    "Pressing space key should select the currently active option"
+  ).toHaveAttribute("aria-selected", "true");
+  await listbox.press("ArrowUp");
+  await expectOptionToBeActive(
+    options.first(),
+    "Pressing arrow up key should activate the previous option"
+  );
+  await listbox.press("End");
+  await expectOptionToBeActive(options.last(), "Pressing End key should activate the last option");
+  const secondOptionText = await options.nth(1).textContent();
+  expect(secondOptionText).toBeDefined();
+  const firstCharacter = secondOptionText.charAt(0);
+  await listbox.press(firstCharacter);
+  await expectOptionToBeActive(
+    listbox.getByLabel(firstCharacter).first(),
+    "Pressing any other printable character should activate the fist option starting with the pressed key"
+  );
+  await listbox.press("Home");
+  await expectOptionToBeActive(
+    options.first(),
+    "Pressing Home key should activate the first option"
+  );
+  const firstOptionHeight = await options.first().evaluate((element) => element.clientHeight);
+  await listbox.evaluate((element, height) => {
+    element.style.height = `${height}px`;
+    element.style.overflow = "hidden";
+  }, firstOptionHeight);
+  await expect(options.nth(1)).not.toBeInViewport();
+  await listbox.press("ArrowDown");
+  await expect(
+    options.nth(1),
+    "activating an option should scroll it into viewport if not visible"
+  ).toBeInViewport();
+  await listbox.evaluate((element) => {
+    element.style.height = "";
+    element.style.overflow = "";
+  });
+};
+const menuButtonTesting = async ({
+  page,
+  button,
+  menu,
+  menuItems
+}) => {
+  await expect(
+    button,
+    'navigation menu should have an "aria-haspopup" attribute set to true'
+  ).toHaveAttribute("aria-haspopup", "true");
+  await expect(button).toBeVisible();
+  await expect(button, "button must have arial-controls attribute").toHaveAttribute(
+    "aria-controls"
+  );
+  await expect(button, "button must have aria-expanded attribute").toHaveAttribute(
+    "aria-expanded",
+    "false"
+  );
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").toBeFocused();
+  const firstItem = menuItems.first();
+  const secondItem = menuItems.nth(1);
+  const lastItem = menuItems.last();
+  await page.keyboard.press("Enter");
+  await expect(button, "button must have aria-expanded attribute").toHaveAttribute(
+    "aria-expanded",
+    "true"
+  );
+  await button.press("ArrowDown");
+  await expect(
+    firstItem,
+    "First item should be focused when pressing arrow down key"
+  ).toBeFocused();
+  await menu.press("ArrowDown");
+  await expect(
+    secondItem,
+    "Second item should be focused when pressing arrow down key"
+  ).toBeFocused();
+  await menu.press("ArrowUp");
+  await expect(firstItem, "First item should be focused when pressing arrow up key").toBeFocused();
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
+  await page.keyboard.press("Tab");
+  await menu.press("Home");
+  await expect(firstItem, "First item should be focused when pressing home key").toBeFocused();
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
+  await page.keyboard.press("Tab");
+  await menu.press("End");
+  await expect(lastItem, "Last item should be focused when pressing end key").toBeFocused();
+};
+const navigationTesting = async ({ nav, buttons }) => {
+  await expect(nav).toHaveRole("navigation");
+  await expect(nav).toHaveAttribute("aria-label");
+  await buttons.first().focus();
+  await nav.press("ArrowRight");
+  await expect(buttons.nth(1)).toBeFocused();
+  await nav.press("ArrowLeft");
+  await expect(buttons.nth(0)).toBeFocused();
+};
+const tabsTesting = async (options) => {
+  await expect(options.tablist, 'tablist element must have role "tablist"').toHaveRole("tablist");
+  await expect(options.tablist, "tablist must have an accessible label").toHaveAttribute(
+    "aria-label"
+  );
+  const firstTab = options.tablist.getByRole("tab").first();
+  const secondTab = options.tablist.getByRole("tab").nth(1);
+  const lastTab = options.tablist.getByRole("tab").last();
+  const { tabId, panelId } = await expectTabAttributes(firstTab, true);
+  await expectPanelAttributes(options.page.locator(`#${panelId}`), tabId);
+  await secondTab.click();
+  const { tabId: tabId2, panelId: panelId2 } = await expectTabAttributes(secondTab, true);
+  await expectPanelAttributes(options.page.locator(`#${panelId2}`), tabId2);
+  await expect(secondTab, "second tab should be focused").toBeFocused();
+  await expect(options.page.getByRole("tabpanel"), "should hide previous panel").toHaveCount(1);
+  await options.page.keyboard.press("ArrowLeft");
+  await expect(firstTab, "should focus previous tab when pressing arrow left").toBeFocused();
+  await options.page.keyboard.press("End");
+  await expect(lastTab, "should focus last tab when pressing End").toBeFocused();
+  await options.page.keyboard.press("ArrowRight");
+  await expect(
+    firstTab,
+    "should focus first tab when last tab is focused and pressing arrow right"
+  ).toBeFocused();
+  await options.page.keyboard.press("ArrowRight");
+  await expect(secondTab, "should focus next tab when pressing arrow right").toBeFocused();
+  await options.page.keyboard.press("Home");
+  await expect(firstTab, "should focus first tab when pressing Home").toBeFocused();
+  await options.page.keyboard.press("ArrowLeft");
+  await expect(
+    lastTab,
+    "should focus last tab when first tab is focused and pressing arrow left"
+  ).toBeFocused();
+  await options.page.keyboard.press("Enter");
+  const { tabId: tabIdLast, panelId: panelIdLast } = await expectTabAttributes(lastTab, true);
+  await expectPanelAttributes(options.page.locator(`#${panelIdLast}`), tabIdLast);
+  await firstTab.focus();
+  await options.page.keyboard.press("Space");
+  const { tabId: tabIdFirst, panelId: panelIdFirst } = await expectTabAttributes(firstTab, true);
+  await expectPanelAttributes(options.page.locator(`#${panelIdFirst}`), tabIdFirst);
+  await firstTab.click();
+  await secondTab.evaluate((element) => element.ariaDisabled = "true");
+  await expect(secondTab, "should disable second tab when setting aria-disabled").toBeDisabled();
+  await options.page.keyboard.press("ArrowRight");
+  await expect(secondTab, "should not focus second tab if its aria-disabled").not.toBeFocused();
+  await expect(
+    options.tablist.getByRole("tab").nth(2),
+    "should focus next tab after disabled one when pressing arrow right"
+  ).toBeFocused();
+  await options.page.keyboard.press("ArrowLeft");
+  await expect(
+    firstTab,
+    "should focus tab before disabled one when pressing arrow left"
+  ).toBeFocused();
+  await secondTab.evaluate((element) => element.ariaDisabled = null);
+  await firstTab.evaluate((element) => element.ariaDisabled = "true");
+  await options.page.keyboard.press("Home");
+  await expect(
+    secondTab,
+    "should focus second tab when pressing Home if first tab is disabled"
+  ).toBeFocused();
+  await firstTab.evaluate((element) => element.ariaDisabled = null);
+  await lastTab.evaluate((element) => element.ariaDisabled = "true");
+  await firstTab.focus();
+  await options.page.keyboard.press("End");
+  await expect(
+    options.tablist.getByRole("tab").nth(-2),
+    "should focus second last tab when pressing End if last tab is disabled"
+  ).toBeFocused();
+};
+const expectTabAttributes = async (tab, selected) => {
+  await expect(tab, 'tab must have role "tab"').toHaveRole("tab");
+  await expect(tab, "tab must have an ID").toHaveAttribute("id");
+  await expect(tab, 'tab must have "aria-selected" set').toHaveAttribute(
+    "aria-selected",
+    String(selected)
+  );
+  await expect(tab, 'tab must have "aria-controls" set').toHaveAttribute("aria-controls");
+  {
+    await expect(tab, "selected tab should be focusable").toHaveAttribute("tabindex", "0");
+  }
+  const tabId = await tab.getAttribute("id");
+  const panelId = await tab.getAttribute("aria-controls");
+  return { tabId, panelId };
+};
+const expectPanelAttributes = async (panel, tabId) => {
+  await expect(panel, "panel should be visible").toBeVisible();
+  await expect(panel, 'panel must have role "tabpanel"').toHaveRole("tabpanel");
+  await expect(panel, "panel must have an ID").toHaveAttribute("id");
+  await expect(panel, 'panel must have "aria-labelledby" set').toHaveAttribute(
+    "aria-labelledby",
+    tabId
+  );
+};
+export {
+  comboboxSelectOnlyTesting,
+  comboboxTesting,
+  listboxTesting,
+  menuButtonTesting,
+  navigationTesting,
+  tabsTesting
+};

package/dist/utils/builder.d.ts

@@ -0,0 +1,85 @@
+import { ComponentPublicInstance, HTMLAttributes, MaybeRef, Ref, WritableComputedRef } from 'vue';
+import { IfDefined } from './types.js';
+/**
+ * Properties as they can be used by `v-bind` on an HTML element.
+ * This includes generic html attributes and the vue reserved `ref` property.
+ * `ref` is restricted to be a `HeadlessElRef` which only can by created through `createElRef`.
+ */
+export type VBindAttributes<A extends HTMLAttributes = HTMLAttributes, E extends Element = Element> = A & {
+    ref?: VueTemplateRef<E>;
+};
+export type IteratedHeadlessElementFunc<A extends HTMLAttributes, T extends Record<string, unknown>> = (opts: T) => VBindAttributes<A>;
+export type HeadlessElementAttributes<A extends HTMLAttributes> = VBindAttributes<A> | IteratedHeadlessElementFunc<A, any>;
+export type HeadlessElements = Record<string, MaybeRef<HeadlessElementAttributes<HTMLAttributes>>>;
+export type HeadlessState = Record<string, Ref>;
+export type HeadlessComposable<Elements extends HeadlessElements, State extends HeadlessState | undefined = undefined, Internals extends object | undefined = undefined> = {
+    elements: Elements;
+} & 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);
+ *
+ *   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,
+ *       },
+ *       tooltip: {
+ *         role: "tooltip",
+ *         id: tooltipId,
+ *         tabindex: "-1",
+ *         ...hoverEvents,
+ *       },
+ *     },
+ *     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>;
+type VueTemplateRefElement<E extends Element> = E | (ComponentPublicInstance & {
+    $el: E;
+}) | null;
+type VueTemplateRef<E extends Element> = Ref<VueTemplateRefElement<E>>;
+export declare const HeadlessElRefSymbol: unique symbol;
+export type HeadlessElRef<E extends Element> = WritableComputedRef<E> & {
+    /**
+     * type differentiator
+     * ensures that only `createElRef` can be used for headless element ref bindings
+     */
+    [HeadlessElRefSymbol]: true;
+};
+/**
+ * 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,
+ *      },
+ *    }
+ *  };
+ * });
+ * ```
+ */
+export declare function createElRef<E extends Element>(): HeadlessElRef<E>;
+export {};

package/dist/utils/keyboard.d.ts

@@ -0,0 +1,26 @@
+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
+ */
+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 use the provided list provided by the standard, which might be incomplete.
+ */
+export declare const isPrintableCharacter: (key: string) => boolean;
+/**
+ * Based on https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+ *
+ * Extracted using
+ * ```js
+ * copy(JSON.stringify([...document.querySelectorAll(".key-table-key")].map(e => e.innerText.replaceAll("\"", ""))));
+ * ```
+ */
+export declare const NAMED_KEYS: readonly ["Unidentified", "Alt", "AltGraph", "CapsLock", "Control", "Fn", "FnLock", "Meta", "NumLock", "ScrollLock", "Shift", "Symbol", "SymbolLock", "Hyper", "Super", "Enter", "Tab", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "End", "Home", "PageDown", "PageUp", "Backspace", "Clear", "Copy", "CrSel", "Cut", "Delete", "EraseEof", "ExSel", "Insert", "Paste", "Redo", "Undo", "Accept", "Again", "Attn", "Cancel", "ContextMenu", "Escape", "Execute", "Find", "Help", "Pause", "Play", "Props", "Select", "ZoomIn", "ZoomOut", "BrightnessDown", "BrightnessUp", "Eject", "LogOff", "Power", "PowerOff", "PrintScreen", "Hibernate", "Standby", "WakeUp", "AllCandidates", "Alphanumeric", "CodeInput", "Compose", "Convert", "Dead", "FinalMode", "GroupFirst", "GroupLast", "GroupNext", "GroupPrevious", "ModeChange", "NextCandidate", "NonConvert", "PreviousCandidate", "Process", "SingleCandidate", "HangulMode", "HanjaMode", "JunjaMode", "Eisu", "Hankaku", "Hiragana", "HiraganaKatakana", "KanaMode", "KanjiMode", "Katakana", "Romaji", "Zenkaku", "ZenkakuHankaku", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Soft1", "Soft2", "Soft3", "Soft4", "ChannelDown", "ChannelUp", "Close", "MailForward", "MailReply", "MailSend", "MediaClose", "MediaFastForward", "MediaPause", "MediaPlay", "MediaPlayPause", "MediaRecord", "MediaRewind", "MediaStop", "MediaTrackNext", "MediaTrackPrevious", "New", "Open", "Print", "Save", "SpellCheck", "Key11", "Key12", "AudioBalanceLeft", "AudioBalanceRight", "AudioBassBoostDown", "AudioBassBoostToggle", "AudioBassBoostUp", "AudioFaderFront", "AudioFaderRear", "AudioSurroundModeNext", "AudioTrebleDown", "AudioTrebleUp", "AudioVolumeDown", "AudioVolumeUp", "AudioVolumeMute", "MicrophoneToggle", "MicrophoneVolumeDown", "MicrophoneVolumeUp", "MicrophoneVolumeMute", "SpeechCorrectionList", "SpeechInputToggle", "LaunchApplication1", "LaunchApplication2", "LaunchCalendar", "LaunchContacts", "LaunchMail", "LaunchMediaPlayer", "LaunchMusicPlayer", "LaunchPhone", "LaunchScreenSaver", "LaunchSpreadsheet", "LaunchWebBrowser", "LaunchWebCam", "LaunchWordProcessor", "BrowserBack", "BrowserFavorites", "BrowserForward", "BrowserHome", "BrowserRefresh", "BrowserSearch", "BrowserStop", "AppSwitch", "Call", "Camera", "CameraFocus", "EndCall", "GoBack", "GoHome", "HeadsetHook", "LastNumberRedial", "Notification", "MannerMode", "VoiceDial", "TV", "TV3DMode", "TVAntennaCable", "TVAudioDescription", "TVAudioDescriptionMixDown", "TVAudioDescriptionMixUp", "TVContentsMenu", "TVDataService", "TVInput", "TVInputComponent1", "TVInputComponent2", "TVInputComposite1", "TVInputComposite2", "TVInputHDMI1", "TVInputHDMI2", "TVInputHDMI3", "TVInputHDMI4", "TVInputVGA1", "TVMediaContext", "TVNetwork", "TVNumberEntry", "TVPower", "TVRadioService", "TVSatellite", "TVSatelliteBS", "TVSatelliteCS", "TVSatelliteToggle", "TVTerrestrialAnalog", "TVTerrestrialDigital", "TVTimer", "AVRInput", "AVRPower", "ColorF0Red", "ColorF1Green", "ColorF2Yellow", "ColorF3Blue", "ColorF4Grey", "ColorF5Brown", "ClosedCaptionToggle", "Dimmer", "DisplaySwap", "DVR", "Exit", "FavoriteClear0", "FavoriteClear1", "FavoriteClear2", "FavoriteClear3", "FavoriteRecall0", "FavoriteRecall1", "FavoriteRecall2", "FavoriteRecall3", "FavoriteStore0", "FavoriteStore1", "FavoriteStore2", "FavoriteStore3", "Guide", "GuideNextDay", "GuidePreviousDay", "Info", "InstantReplay", "Link", "ListProgram", "LiveContent", "Lock", "MediaApps", "MediaAudioTrack", "MediaLast", "MediaSkipBackward", "MediaSkipForward", "MediaStepBackward", "MediaStepForward", "MediaTopMenu", "NavigateIn", "NavigateNext", "NavigateOut", "NavigatePrevious", "NextFavoriteChannel", "NextUserProfile", "OnDemand", "Pairing", "PinPDown", "PinPMove", "PinPToggle", "PinPUp", "PlaySpeedDown", "PlaySpeedReset", "PlaySpeedUp", "RandomToggle", "RcLowBattery", "RecordSpeedNext", "RfBypass", "ScanChannelsToggle", "ScreenModeNext", "Settings", "SplitScreenToggle", "STBInput", "STBPower", "Subtitle", "Teletext", "VideoModeNext", "Wink", "ZoomToggle", "AudioVolumeDown", "AudioVolumeUp", "AudioVolumeMute", "BrowserBack", "BrowserForward", "ChannelDown", "ChannelUp", "ContextMenu", "Eject", "End", "Enter", "Home", "MediaFastForward", "MediaPlay", "MediaPlayPause", "MediaRecord", "MediaRewind", "MediaStop", "MediaNextTrack", "MediaPause", "MediaPreviousTrack", "Power", "Unidentified"];
+export declare const NAMED_KEYS_SET: Set<string>;

package/dist/utils/keyboard.spec.d.ts

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

package/dist/utils/math.d.ts

@@ -0,0 +1,6 @@
+export declare const MathUtils: {
+    /**
+     * Ensures that a given `number` is or is between a given `min` and `max`.
+     */
+    clamp: (number: number, min: number, max: number) => number;
+};

package/dist/utils/math.spec.d.ts

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

package/dist/utils/object.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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/object.spec.d.ts

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

package/dist/utils/timer.d.ts

@@ -0,0 +1,10 @@
+import { MaybeRefOrGetter } from 'vue';
+/**
+ * Debounces a given callback which will only be called when not called for the given timeout.
+ *
+ * @returns Callback to reset the debounce timer.
+ */
+export declare const debounce: <TArgs extends unknown[]>(handler: (...args: TArgs) => void, timeout: MaybeRefOrGetter<number>) => {
+    (...lastArgs: TArgs): void;
+    abort(): void;
+};

package/{src/utils/types.ts → dist/utils/types.d.ts}

@@ -8,25 +8,17 @@
  * 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;
-      }
-    : unknown;
-
+export type IfDefined<Key extends string, TValue> = TValue extends NonNullable<unknown> ? {
+    [key in Key]: TValue;
+} : unknown;
 /**
  * Wraps type `TValue` in an array, if `TMultiple` is true.
  */
-export type IsArray<TValue, TMultiple extends boolean = false> = TMultiple extends true
-  ? TValue[]
-  : TValue;
-
+export type IsArray<TValue, TMultiple extends boolean = false> = TMultiple extends true ? TValue[] : TValue;
 /**
  * A type that can be wrapped in an array.
  */
 export type Arrayable<T> = T | Array<T>;
-
 /**
  * Either the actual value or a nullish one.
  */

package/dist/utils/vitest.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Mocks the following vue lifecycle functions:
+ * - onBeforeMount
+ * - onMounted
+ * - onBeforeUnmount
+ * - onUnmounted
+ *
+ * `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`
+ */
+export declare const mockVueLifecycle: () => () => Promise<void>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -9,12 +9,18 @@
     "node": ">=20"
   },
   "files": [
-    "src"
+    "dist"
   ],
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./playwright": "./src/playwright.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./playwright": {
+      "types": "./dist/playwright.d.ts",
+      "default": "./dist/playwright.js"
+    }
   },
   "homepage": "https://onyx.schwarz/development/packages/headless.html",
   "repository": {
@@ -27,15 +33,18 @@
   },
   "peerDependencies": {
     "typescript": ">= 5",
-    "vue": ">= 3.5.0"
+    "vue": ">= 3.5.0",
+    "@playwright/experimental-ct-vue": "1.51.1",
+    "@playwright/test": "1.51.1"
   },
   "devDependencies": {
     "@vue/compiler-dom": "3.5.16",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "3.5.16",
     "@sit-onyx/shared": "^1.0.0-beta.4"
   },
   "scripts": {
-    "build": "vue-tsc --build --force",
+    "build": "vite build",
     "test": "vitest",
     "test:playwright": "playwright install && playwright test"
   }