sit-onyx 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/components/OnyxFormElement/OnyxFormElement.ct-utils.d.ts

@@ -0,0 +1,11 @@
+import type { MountResultJsx } from "@playwright/experimental-ct-vue";
+import { type Locator, type Page } from "@playwright/test";
+type PageOrLocator = Page | Locator | MountResultJsx;
+type FormElementTooltip = "label" | "error" | "message";
+export declare const createFormElementUtils: (page: PageOrLocator) => {
+    getRoot: (prev?: PageOrLocator) => Locator;
+    getTooltipTrigger: (type: FormElementTooltip, prev?: PageOrLocator) => Locator;
+    getTooltipPopover: (type: FormElementTooltip, prev?: PageOrLocator) => Locator;
+    triggerTooltipVisible: (type: FormElementTooltip, prev?: PageOrLocator) => Promise<void>;
+};
+export {};

package/dist/components/OnyxInfoTooltip/OnyxInfoTooltip.vue.d.ts

@@ -1,6 +1,23 @@
 import type { OnyxInfoTooltipProps } from "./types";
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<OnyxInfoTooltipProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<OnyxInfoTooltipProps>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxInfoTooltipProps>, {
+    open: string;
+    color: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<OnyxInfoTooltipProps>, {
+    open: string;
+    color: string;
+}>>>, {
+    color: Extract<import("../../index.js").OnyxColor, "neutral" | "danger">;
+    open: import("../OnyxTooltip/types.js").TooltipOpen;
+}, {}>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {

package/dist/components/OnyxInfoTooltip/types.d.ts

@@ -1,6 +1,2 @@
 import type { OnyxTooltipProps } from "../OnyxTooltip/types";
-export type OnyxInfoTooltipProps = Required<Pick<OnyxTooltipProps, "text">> & Pick<OnyxTooltipProps, "position"> & {
-    /**
-     * Sets the aria-label of the info icon for accessibility / screen readers
-     */ label?: string;
-};
+export type OnyxInfoTooltipProps = Required<Pick<OnyxTooltipProps, "text">> & Pick<OnyxTooltipProps, "position" | "open" | "color">;

package/dist/components/OnyxTooltip/OnyxTooltip.ct-utils.d.ts

@@ -0,0 +1,7 @@
+import type { Locator, Page } from "@playwright/test";
+type PageLocater = Page | Locator;
+export declare const tooltipUtils: (page: Page) => {
+    getTrigger: (type: "label" | "error" | "message", prev?: PageLocater) => Locator;
+    getTooltipPopover: (type: "label" | "error" | "message", prev?: PageLocater) => Locator;
+};
+export {};

package/dist/components/OnyxTooltip/OnyxTooltip.vue.d.ts

@@ -1,30 +1,33 @@
+import type { HTMLAttributes, VNode } from "vue";
 import type { OnyxTooltipProps } from "./types";
 declare function __VLS_template(): Readonly<{
     /**
-     * Default slot where the parent content is placed that should open/close the tooltip.
+     * Default slot where the parent content is placed that controls the open/close state of the tooltip.
      *
-     * **Accessibility**: Please ensure that your content includes at least one focusable element
-     * (e.g. by using a button or input element).
+     * **Accessibility**: You must ensure that the trigger attributes are bound to a button when the `open` prop is not `hover`!
      */
-    default(): unknown;
+    default(params: {
+        trigger: HTMLAttributes;
+    }): VNode;
     /**
      * Optional slot to place custom content for the tooltip text.
      *
-     * **Accessibility**: Make sure that the tooltip content is NOT focusable/interactive.
+     * **Accessibility**: You must ensure that the tooltip content is NOT focusable/interactive.
      */
     tooltip?(): unknown;
 }> & {
     /**
-     * Default slot where the parent content is placed that should open/close the tooltip.
+     * Default slot where the parent content is placed that controls the open/close state of the tooltip.
      *
-     * **Accessibility**: Please ensure that your content includes at least one focusable element
-     * (e.g. by using a button or input element).
+     * **Accessibility**: You must ensure that the trigger attributes are bound to a button when the `open` prop is not `hover`!
      */
-    default(): unknown;
+    default(params: {
+        trigger: HTMLAttributes;
+    }): VNode;
     /**
      * Optional slot to place custom content for the tooltip text.
      *
-     * **Accessibility**: Make sure that the tooltip content is NOT focusable/interactive.
+     * **Accessibility**: You must ensure that the tooltip content is NOT focusable/interactive.
      */
     tooltip?(): unknown;
 };

package/dist/components/OnyxTooltip/TestWrapper.vue.d.ts

@@ -0,0 +1,12 @@
+import type { OnyxTooltipProps } from "./types";
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<OnyxTooltipProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<OnyxTooltipProps>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/OnyxTooltip/types.d.ts

@@ -1,5 +1,15 @@
+import type { MaybeRefOrGetter } from "vue";
 import type { DensityProp } from "../../composables/density";
 import type { OnyxColor } from "../../types";
+export type TooltipOptions = {
+    /**
+     * Number of milliseconds to use as debounce when showing/hiding the tooltip.
+     */
+    debounce: MaybeRefOrGetter<number>;
+};
+export type ToggletipOptions = {
+    toggleLabel: MaybeRefOrGetter<string>;
+};
 export type OnyxTooltipProps = DensityProp & {
     /**
      * Text to display inside the tooltip.
@@ -21,15 +31,19 @@ export type OnyxTooltipProps = DensityProp & {
     fitParent?: boolean;
     /**
      * How to open/trigger the tooltip. You can set a boolean to force show/hide the tooltip.
+     * When open is not the default value `hover`, the component will act as an "toggletip":
+     * - tooltip: Describes the associated element
+     * - toggletip: Gives additional information about in the current context
+     *
+     * The "toggletip" is implemented using an aria-live region.
+     * See also: https://inclusive-components.design/tooltips-toggletips/
      */
     open?: TooltipOpen;
 };
 export declare const TOOLTIP_POSITIONS: readonly ["top", "bottom"];
 export type TooltipPosition = (typeof TOOLTIP_POSITIONS)[number];
-export type TooltipOpen = "hover" | "click" | boolean | {
+export type TooltipOpen = "hover" | "click" | boolean | ({
     type: "hover";
-    /**
-     * Number of milliseconds to use as debounce when showing/hiding the tooltip
-     */
-    debounce: number;
-};
+} & Partial<TooltipOptions>) | ({
+    type: "click";
+} & Partial<ToggletipOptions>);

package/dist/components/examples/FormExample/FormExample.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;