sit-onyx 1.0.0-beta.98 → 1.0.0-dev-20250912111044

package/dist/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.d.vue.ts

@@ -0,0 +1,427 @@
+import { iconArrowSmallLeft, iconChevronRightSmall } from '@sit-onyx/icons';
+import { nextTick } from 'vue';
+import { mergeVueProps } from '../../../../utils/attrs.js';
+import { extractLinkProps } from '../../../../utils/router.js';
+import { default as ButtonOrLinkLayout } from '../../../OnyxButton/ButtonOrLinkLayout.vue';
+import { default as OnyxExternalLinkIcon } from '../../../OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue';
+import { default as OnyxIcon } from '../../../OnyxIcon/OnyxIcon.vue';
+import { default as OnyxListItem } from '../../../OnyxListItem/OnyxListItem.vue';
+import { OnyxMenuItemProps } from './types.js';
+declare const t: Readonly<import('vue').Ref<import('../../../../i18n/index.js', { with: { "resolution-mode": "import" } }).TranslationFunction, import('../../../../i18n/index.js', { with: { "resolution-mode": "import" } }).TranslationFunction>>;
+declare const rootAttrs: import('vue').ComputedRef<Pick<Pick<import('vue').HTMLAttributes, "style" | "class">, "style" | "class">>, restAttrs: import('vue').ComputedRef<Omit<Pick<import('vue').HTMLAttributes, "style" | "class">, "style" | "class">>;
+declare const slots: Readonly<{
+    /**
+     * Button/link text and additional inline content.
+     */
+    default(): unknown;
+    /**
+     * Children menuitems.
+     */
+    children(): unknown;
+}> & {
+    /**
+     * Button/link text and additional inline content.
+     */
+    default(): unknown;
+    /**
+     * Children menuitems.
+     */
+    children(): unknown;
+};
+/**
+ * Controls the open state.
+ */
+declare const open: import('vue').Ref<NonNullable<import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>>, NonNullable<import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>>>;
+declare const listItem: {
+    role: string;
+};
+declare const isActive: import('vue').ComputedRef<boolean>;
+declare const menuItemProps: import('vue').ComputedRef<{
+    "aria-current": "page" | undefined;
+    "aria-disabled": boolean | undefined;
+    role: string;
+    onKeydown: (event: KeyboardEvent) => void;
+}>;
+declare const hasChildren: import('vue').ComputedRef<boolean>;
+declare const childrenClickHandler: import('vue').ComputedRef<{
+    onClick: () => boolean;
+} | null>;
+declare const handleBackButtonKeydown: (event: KeyboardEvent) => Promise<void>;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Button/link text and additional inline content.
+         */
+        default(): unknown;
+        /**
+         * Children menuitems.
+         */
+        children(): unknown;
+    }> & {
+        /**
+         * Button/link text and additional inline content.
+         */
+        default(): unknown;
+        /**
+         * Children menuitems.
+         */
+        children(): unknown;
+    };
+    refs: {
+        menuItemRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+                readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+                readonly autofocus?: boolean | undefined;
+                readonly loading?: boolean | undefined;
+                readonly type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                buttonRef: HTMLButtonElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+                link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+                autofocus?: boolean | undefined;
+                loading?: boolean | undefined;
+                type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+            }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                type: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            type: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+        }> & Omit<Readonly<{
+            disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+            link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+            autofocus?: boolean | undefined;
+            loading?: boolean | undefined;
+            type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+        }> & Readonly<{}>, "type"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: Readonly<{
+                default(): unknown;
+            }> & {
+                default(): unknown;
+            };
+        }) | null;
+        backButtonRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+                readonly open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+                readonly label?: string | undefined;
+                readonly active?: boolean | "auto" | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger"> | undefined;
+                readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "update:open", value: boolean) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<OnyxMenuItemProps> & Readonly<{
+                "onUpdate:open"?: ((value: boolean) => any) | undefined;
+            }>, {
+                iconArrowSmallLeft: typeof iconArrowSmallLeft;
+                iconChevronRightSmall: typeof iconChevronRightSmall;
+                mergeVueProps: typeof mergeVueProps;
+                extractLinkProps: typeof extractLinkProps;
+                ButtonOrLinkLayout: typeof ButtonOrLinkLayout;
+                OnyxExternalLinkIcon: typeof OnyxExternalLinkIcon;
+                OnyxIcon: typeof OnyxIcon;
+                OnyxListItem: typeof OnyxListItem;
+                t: typeof t;
+                rootAttrs: typeof rootAttrs;
+                restAttrs: typeof restAttrs;
+                open: typeof open;
+                listItem: typeof listItem;
+                isActive: typeof isActive;
+                menuItemProps: typeof menuItemProps;
+                hasChildren: typeof hasChildren;
+                childrenClickHandler: typeof childrenClickHandler;
+                handleBackButtonKeydown: typeof handleBackButtonKeydown;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                "update:open": (value: boolean) => any;
+            }, string, {
+                open: boolean | null;
+                active: boolean | "auto";
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            open: boolean | null;
+            active: boolean | "auto";
+        }> & Omit<Readonly<OnyxMenuItemProps> & Readonly<{
+            "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        }>, "t" | "OnyxIcon" | "isActive" | "ButtonOrLinkLayout" | "mergeVueProps" | "listItem" | "OnyxExternalLinkIcon" | "OnyxListItem" | "rootAttrs" | "restAttrs" | "iconArrowSmallLeft" | "iconChevronRightSmall" | "extractLinkProps" | "menuItemProps" | "hasChildren" | "childrenClickHandler" | "handleBackButtonKeydown" | ("open" | "active")> & import('vue').ShallowUnwrapRef<{
+            iconArrowSmallLeft: typeof iconArrowSmallLeft;
+            iconChevronRightSmall: typeof iconChevronRightSmall;
+            mergeVueProps: typeof mergeVueProps;
+            extractLinkProps: typeof extractLinkProps;
+            ButtonOrLinkLayout: typeof ButtonOrLinkLayout;
+            OnyxExternalLinkIcon: typeof OnyxExternalLinkIcon;
+            OnyxIcon: typeof OnyxIcon;
+            OnyxListItem: typeof OnyxListItem;
+            t: typeof t;
+            rootAttrs: typeof rootAttrs;
+            restAttrs: typeof restAttrs;
+            open: typeof open;
+            listItem: typeof listItem;
+            isActive: typeof isActive;
+            menuItemProps: typeof menuItemProps;
+            hasChildren: typeof hasChildren;
+            childrenClickHandler: typeof childrenClickHandler;
+            handleBackButtonKeydown: typeof handleBackButtonKeydown;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: typeof slots;
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxMenuItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxMenuItemProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean | null;
+    active: boolean | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    menuItemRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+            readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+            readonly autofocus?: boolean | undefined;
+            readonly loading?: boolean | undefined;
+            readonly type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            buttonRef: HTMLButtonElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+            link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+            autofocus?: boolean | undefined;
+            loading?: boolean | undefined;
+            type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            type: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        type: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+    }> & Omit<Readonly<{
+        disabled?: import('../../../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean> | undefined;
+        link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+        autofocus?: boolean | undefined;
+        loading?: boolean | undefined;
+        type?: import('../../../OnyxButton/types.js', { with: { "resolution-mode": "import" } }).ButtonType | undefined;
+    }> & Readonly<{}>, "type"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: Readonly<{
+            default(): unknown;
+        }> & {
+            default(): unknown;
+        };
+    }) | null;
+    backButtonRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+            readonly open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+            readonly label?: string | undefined;
+            readonly active?: boolean | "auto" | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger"> | undefined;
+            readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:open", value: boolean) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<OnyxMenuItemProps> & Readonly<{
+            "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        }>, {
+            iconArrowSmallLeft: typeof iconArrowSmallLeft;
+            iconChevronRightSmall: typeof iconChevronRightSmall;
+            mergeVueProps: typeof mergeVueProps;
+            extractLinkProps: typeof extractLinkProps;
+            ButtonOrLinkLayout: typeof ButtonOrLinkLayout;
+            OnyxExternalLinkIcon: typeof OnyxExternalLinkIcon;
+            OnyxIcon: typeof OnyxIcon;
+            OnyxListItem: typeof OnyxListItem;
+            t: typeof t;
+            rootAttrs: typeof rootAttrs;
+            restAttrs: typeof restAttrs;
+            open: typeof open;
+            listItem: typeof listItem;
+            isActive: typeof isActive;
+            menuItemProps: typeof menuItemProps;
+            hasChildren: typeof hasChildren;
+            childrenClickHandler: typeof childrenClickHandler;
+            handleBackButtonKeydown: typeof handleBackButtonKeydown;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            "update:open": (value: boolean) => any;
+        }, string, {
+            open: boolean | null;
+            active: boolean | "auto";
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        open: boolean | null;
+        active: boolean | "auto";
+    }> & Omit<Readonly<OnyxMenuItemProps> & Readonly<{
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, "t" | "OnyxIcon" | "isActive" | "ButtonOrLinkLayout" | "mergeVueProps" | "listItem" | "OnyxExternalLinkIcon" | "OnyxListItem" | "rootAttrs" | "restAttrs" | "iconArrowSmallLeft" | "iconChevronRightSmall" | "extractLinkProps" | "menuItemProps" | "hasChildren" | "childrenClickHandler" | "handleBackButtonKeydown" | ("open" | "active")> & import('vue').ShallowUnwrapRef<{
+        iconArrowSmallLeft: typeof iconArrowSmallLeft;
+        iconChevronRightSmall: typeof iconChevronRightSmall;
+        mergeVueProps: typeof mergeVueProps;
+        extractLinkProps: typeof extractLinkProps;
+        ButtonOrLinkLayout: typeof ButtonOrLinkLayout;
+        OnyxExternalLinkIcon: typeof OnyxExternalLinkIcon;
+        OnyxIcon: typeof OnyxIcon;
+        OnyxListItem: typeof OnyxListItem;
+        t: typeof t;
+        rootAttrs: typeof rootAttrs;
+        restAttrs: typeof restAttrs;
+        open: typeof open;
+        listItem: typeof listItem;
+        isActive: typeof isActive;
+        menuItemProps: typeof menuItemProps;
+        hasChildren: typeof hasChildren;
+        childrenClickHandler: typeof childrenClickHandler;
+        handleBackButtonKeydown: typeof handleBackButtonKeydown;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: typeof slots;
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxNavBar/modules/OnyxMenuItem/types.d.ts

@@ -1,16 +1,20 @@
-import type { OnyxColor } from "../../../../types";
-import type { OnyxLinkProps } from "../../../OnyxLink/types";
-export type OnyxMenuItemProps = Pick<OnyxLinkProps, "target"> & {
+import { Nullable, OnyxColor } from '../../../../types/index.js';
+import { WithLinkProp } from '../../../OnyxRouterLink/types.js';
+export type OnyxMenuItemProps = WithLinkProp & {
     /**
-     * URL that the menu item points to.
-     * If the property is set the menuitem will act as an anchor, otherwise it will act as an button.
+     * If the children of the menu item are visible.
      */
-    href?: string;
+    open?: Nullable<boolean>;
     /**
-     * Whether the menu item is currently active.
-     * This is the case if the given link is currently opened.
+     * Label text for the menu item.
      */
-    active?: boolean;
+    label?: string;
+    /**
+     * Whether the item is currently active.
+     * This is the case if the page of the given link is currently open.
+     * If "auto" and a [router](https://onyx.schwarz/development/router.html) is provided, the active state will be determined automatically based on the current route.
+     */
+    active?: boolean | "auto";
     /**
      * Whether the menu item is disabled.
      */

package/dist/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.d.vue.ts

@@ -0,0 +1,185 @@
+import { OnyxNavItemProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * You can replace the label of the menuitem with your custom content.
+         */
+        default?(): unknown;
+        /**
+         * OnyxNavItem Children can be nested here.
+         */
+        children?(): unknown;
+    }> & {
+        /**
+         * You can replace the label of the menuitem with your custom content.
+         */
+        default?(): unknown;
+        /**
+         * OnyxNavItem Children can be nested here.
+         */
+        children?(): unknown;
+    };
+    refs: {
+        componentRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+                readonly open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+                readonly label?: string | undefined;
+                readonly active?: boolean | "auto" | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger"> | undefined;
+                readonly context: "mobile" | "list" | "navbar";
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).WithLinkProp & {
+                open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+                label?: string;
+                active?: boolean | "auto";
+                disabled?: boolean;
+                color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger">;
+            } & {
+                context: "mobile" | "list" | "navbar";
+            }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).WithLinkProp & {
+            open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+            label?: string;
+            active?: boolean | "auto";
+            disabled?: boolean;
+            color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger">;
+        } & {
+            context: "mobile" | "list" | "navbar";
+        }> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: Readonly<{
+                default(): unknown;
+                children(): unknown;
+            }> & {
+                default(): unknown;
+                children(): unknown;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxNavItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxNavItemProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean | null;
+    active: boolean | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    componentRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly link?: string | import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).SharedLinkProps | undefined;
+            readonly open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+            readonly label?: string | undefined;
+            readonly active?: boolean | "auto" | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger"> | undefined;
+            readonly context: "mobile" | "list" | "navbar";
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).WithLinkProp & {
+            open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+            label?: string;
+            active?: boolean | "auto";
+            disabled?: boolean;
+            color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger">;
+        } & {
+            context: "mobile" | "list" | "navbar";
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<import('../../../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).WithLinkProp & {
+        open?: import('../../../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
+        label?: string;
+        active?: boolean | "auto";
+        disabled?: boolean;
+        color?: Extract<import('../../../../index.js', { with: { "resolution-mode": "import" } }).OnyxColor, "primary" | "danger">;
+    } & {
+        context: "mobile" | "list" | "navbar";
+    }> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: Readonly<{
+            default(): unknown;
+            children(): unknown;
+        }> & {
+            default(): unknown;
+            children(): unknown;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};