@sit-onyx/headless 0.5.0 → 0.6.0-dev-20260126101353

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

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

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

@@ -0,0 +1,2 @@
+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>;
+export default _default;

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

@@ -0,0 +1,26 @@
+import { MaybeRefOrGetter } from 'vue';
+type CreateToggleButtonOptions = {
+    /**
+     * The current state of the toggle button.
+     */
+    isPressed: MaybeRefOrGetter<boolean>;
+    /**
+     * Triggered when the toggle button is clicked and the `isPressed` state should be toggled.
+     */
+    onToggle: () => void;
+};
+/**
+ * Based on https://www.w3.org/WAI/ARIA/apg/patterns/button/#:~:text=Toggle%20button
+ */
+export declare const createToggleButton: (options: CreateToggleButtonOptions) => {
+    elements: {
+        /**
+         * A html button element that is supposed to act as a toggle button.
+         */
+        button: import('vue').ComputedRef<{
+            "aria-pressed": boolean;
+            onClick: () => void;
+        }>;
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+import { Locator } from '@playwright/test';
+export type ToggleButtonTestingOptions = {
+    /**
+     * Locator for the (toggle) button element.
+     */
+    button: Locator;
+    labelText: string;
+    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.
+ */
+export declare const toggleButtonTesting: ({ button, labelText, initiallyPressed, }: ToggleButtonTestingOptions) => Promise<void>;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './composables/menuButton/createMenuButton.js';
 export * from './composables/navigationMenu/createMenu.js';
 export * from './composables/slider/createSlider.js';
 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 './utils/builder.js';

package/dist/index.js

@@ -1320,6 +1320,21 @@ const createTabs = createBuilder((options) => {
     }
   };
 });
+const createToggleButton = createBuilder((options) => {
+  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
+        })
+      )
+    }
+  };
+});
 const useDismissible = ({ isExpanded }) => useGlobalEventListener({
   type: "keydown",
   listener: (e) => {
@@ -1426,6 +1441,7 @@ export {
   createNavigationMenu,
   createSlider,
   createTabs,
+  createToggleButton,
   createToggletip,
   createTooltip,
   debounce,

package/dist/playwright.d.ts

@@ -4,3 +4,4 @@ export * from './composables/menuButton/createMenuButton.testing.js';
 export * from './composables/navigationMenu/createMenu.testing.js';
 export * from './composables/slider/createSlider.testing.js';
 export * from './composables/tabs/createTabs.testing.js';
+export * from './composables/toggleButton/createToggleButton.testing.js';

package/dist/playwright.js

@@ -495,6 +495,36 @@ const expectPanelAttributes = async (panel, tabId) => {
     tabId
   );
 };
+const 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));
+  await expect(button).toBeVisible();
+  await expect(button).toHaveAccessibleName(labelText);
+  await button.click();
+  await expect(button, `button must toggle 'aria-pressed' attribute after click.`).toHaveAttribute(
+    "aria-pressed",
+    String(!initiallyPressed)
+  );
+  await expect(
+    button,
+    "button must not switch it's label after a state change"
+  ).toHaveAccessibleName(labelText);
+  await button.press("Space");
+  await expect(button, `button must toggle 'aria-pressed' attribute after click.`).toHaveAttribute(
+    "aria-pressed",
+    String(initiallyPressed)
+  );
+  await expect(
+    button,
+    "button must not switch it's label after a state change"
+  ).toHaveAccessibleName(labelText);
+};
 export {
   comboboxSelectOnlyTesting,
   comboboxTesting,
@@ -503,5 +533,6 @@ export {
   navigationTesting,
   rangeSliderTesting,
   singleSliderTesting,
-  tabsTesting
+  tabsTesting,
+  toggleButtonTesting
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.5.0",
+  "version": "0.6.0-dev-20260126101353",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -38,8 +38,8 @@
     "vue": ">= 3.5.0"
   },
   "devDependencies": {
-    "@vue/compiler-dom": "3.5.26",
-    "vue": "3.5.26",
+    "@vue/compiler-dom": "3.5.27",
+    "vue": "3.5.27",
     "@sit-onyx/shared": "^0.1.0"
   },
   "scripts": {