@knime/kds-components 0.23.2 → 0.24.0

package/dist/src/containers/Menu/KdsMenu.vue.d.ts

@@ -0,0 +1,363 @@
+import { UnwrapRef, nextTick } from 'vue';
+import { KdsMenuProps } from './types';
+declare const isMenuOpenReadonly: import('vue').ComputedRef<boolean>;
+declare const open: () => void;
+declare const close: () => void;
+declare const toggle: () => void;
+declare const attrs: import('vue').ComputedRef<{
+    "aria-haspopup": "menu";
+    "aria-expanded": boolean;
+    "aria-controls": string;
+} | {
+    style: Record<string, string>;
+    "aria-haspopup": "menu";
+    "aria-expanded": boolean;
+    "aria-controls": string;
+}>;
+type SlotPropsType = {
+    attrs: UnwrapRef<typeof attrs>;
+    isOpen: UnwrapRef<typeof isMenuOpenReadonly>;
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Custom toggle for the menu. This slot provides the following props:
+         *
+         * `attrs`: Attributes you must bind to your custom toggle. They ensure the correct aria attributes as well as the anchor positioning for the menu <br/>
+         * `isOpen`: Readonly state that communicates the current state of the menu <br/>
+         * `open`: function to programmatically open the menu <br/>
+         * `close`: function to programmatically close the menu <br/>
+         * `toggle`: function to programmatically switch between the open/close states <br/>
+         */
+        default(props: SlotPropsType): unknown;
+    }> & {
+        /**
+         * Custom toggle for the menu. This slot provides the following props:
+         *
+         * `attrs`: Attributes you must bind to your custom toggle. They ensure the correct aria attributes as well as the anchor positioning for the menu <br/>
+         * `isOpen`: Readonly state that communicates the current state of the menu <br/>
+         * `open`: function to programmatically open the menu <br/>
+         * `close`: function to programmatically close the menu <br/>
+         * `toggle`: function to programmatically switch between the open/close states <br/>
+         */
+        default(props: SlotPropsType): unknown;
+    };
+    refs: {
+        popover: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: ({
+                readonly modelValue?: boolean | undefined;
+                readonly role?: import('../../overlays/Popover').KdsPopoverRole | undefined;
+                readonly popoverType?: import('../../overlays/Popover').KdsPopoverType | undefined;
+                readonly fullWidth?: boolean | undefined;
+                readonly maxInlineSize?: string | undefined;
+                readonly content?: string | undefined;
+                readonly placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom"> | undefined;
+                readonly customPlacementPosition?: never | undefined;
+                readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            } | {
+                readonly modelValue?: boolean | undefined;
+                readonly role?: import('../../overlays/Popover').KdsPopoverRole | undefined;
+                readonly popoverType?: import('../../overlays/Popover').KdsPopoverType | undefined;
+                readonly fullWidth?: boolean | undefined;
+                readonly maxInlineSize?: string | undefined;
+                readonly content?: string | undefined;
+                readonly placement: "custom";
+                readonly customPlacementPosition: {
+                    x: number;
+                    y: number;
+                };
+                readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            }) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                popoverEl: HTMLDivElement;
+            };
+            $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:modelValue", value: boolean) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<({
+                modelValue?: boolean;
+            } & {
+                role?: import('../../overlays/Popover').KdsPopoverRole;
+                popoverType?: import('../../overlays/Popover').KdsPopoverType;
+                fullWidth?: boolean;
+                maxInlineSize?: string;
+                content?: string;
+            } & {
+                placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom">;
+                customPlacementPosition?: never;
+            }) | ({
+                modelValue?: boolean;
+            } & {
+                role?: import('../../overlays/Popover').KdsPopoverRole;
+                popoverType?: import('../../overlays/Popover').KdsPopoverType;
+                fullWidth?: boolean;
+                maxInlineSize?: string;
+                content?: string;
+            } & {
+                placement: "custom";
+                customPlacementPosition: {
+                    x: number;
+                    y: number;
+                };
+            })> & Readonly<{
+                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            }>, {
+                anchorStyle: Record<string, string>;
+                popoverId: string;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                "update:modelValue": (value: boolean) => any;
+            }, 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 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<({
+            modelValue?: boolean;
+        } & {
+            role?: import('../../overlays/Popover').KdsPopoverRole;
+            popoverType?: import('../../overlays/Popover').KdsPopoverType;
+            fullWidth?: boolean;
+            maxInlineSize?: string;
+            content?: string;
+        } & {
+            placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom">;
+            customPlacementPosition?: never;
+        }) | ({
+            modelValue?: boolean;
+        } & {
+            role?: import('../../overlays/Popover').KdsPopoverRole;
+            popoverType?: import('../../overlays/Popover').KdsPopoverType;
+            fullWidth?: boolean;
+            maxInlineSize?: string;
+            content?: string;
+        } & {
+            placement: "custom";
+            customPlacementPosition: {
+                x: number;
+                y: number;
+            };
+        })> & Readonly<{
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }>), "anchorStyle" | "popoverId"> & {
+            anchorStyle: Record<string, string>;
+            popoverId: string;
+        } & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+        menuContainer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../MenuContainer').KdsMenuContainerProps> & Readonly<{
+            onItemClick?: ((id: string) => any) | undefined;
+        }>, {
+            focus: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            itemClick: (id: string) => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            containerEl: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../MenuContainer').KdsMenuContainerProps> & Readonly<{
+            onItemClick?: ((id: string) => any) | undefined;
+        }>, {
+            focus: () => void;
+        }, {}, {}, {}, {}> | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<KdsMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<KdsMenuProps> & Readonly<{
+    onItemClick?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    popover: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: ({
+            readonly modelValue?: boolean | undefined;
+            readonly role?: import('../../overlays/Popover').KdsPopoverRole | undefined;
+            readonly popoverType?: import('../../overlays/Popover').KdsPopoverType | undefined;
+            readonly fullWidth?: boolean | undefined;
+            readonly maxInlineSize?: string | undefined;
+            readonly content?: string | undefined;
+            readonly placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom"> | undefined;
+            readonly customPlacementPosition?: never | undefined;
+            readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        } | {
+            readonly modelValue?: boolean | undefined;
+            readonly role?: import('../../overlays/Popover').KdsPopoverRole | undefined;
+            readonly popoverType?: import('../../overlays/Popover').KdsPopoverType | undefined;
+            readonly fullWidth?: boolean | undefined;
+            readonly maxInlineSize?: string | undefined;
+            readonly content?: string | undefined;
+            readonly placement: "custom";
+            readonly customPlacementPosition: {
+                x: number;
+                y: number;
+            };
+            readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            popoverEl: HTMLDivElement;
+        };
+        $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:modelValue", value: boolean) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<({
+            modelValue?: boolean;
+        } & {
+            role?: import('../../overlays/Popover').KdsPopoverRole;
+            popoverType?: import('../../overlays/Popover').KdsPopoverType;
+            fullWidth?: boolean;
+            maxInlineSize?: string;
+            content?: string;
+        } & {
+            placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom">;
+            customPlacementPosition?: never;
+        }) | ({
+            modelValue?: boolean;
+        } & {
+            role?: import('../../overlays/Popover').KdsPopoverRole;
+            popoverType?: import('../../overlays/Popover').KdsPopoverType;
+            fullWidth?: boolean;
+            maxInlineSize?: string;
+            content?: string;
+        } & {
+            placement: "custom";
+            customPlacementPosition: {
+                x: number;
+                y: number;
+            };
+        })> & Readonly<{
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }>, {
+            anchorStyle: Record<string, string>;
+            popoverId: string;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            "update:modelValue": (value: boolean) => any;
+        }, 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 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<({
+        modelValue?: boolean;
+    } & {
+        role?: import('../../overlays/Popover').KdsPopoverRole;
+        popoverType?: import('../../overlays/Popover').KdsPopoverType;
+        fullWidth?: boolean;
+        maxInlineSize?: string;
+        content?: string;
+    } & {
+        placement?: Exclude<import('../../overlays/Popover').KdsPopoverPlacement, "custom">;
+        customPlacementPosition?: never;
+    }) | ({
+        modelValue?: boolean;
+    } & {
+        role?: import('../../overlays/Popover').KdsPopoverRole;
+        popoverType?: import('../../overlays/Popover').KdsPopoverType;
+        fullWidth?: boolean;
+        maxInlineSize?: string;
+        content?: string;
+    } & {
+        placement: "custom";
+        customPlacementPosition: {
+            x: number;
+            y: number;
+        };
+    })> & Readonly<{
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>), "anchorStyle" | "popoverId"> & {
+        anchorStyle: Record<string, string>;
+        popoverId: string;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+    menuContainer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../MenuContainer').KdsMenuContainerProps> & Readonly<{
+        onItemClick?: ((id: string) => any) | undefined;
+    }>, {
+        focus: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        itemClick: (id: string) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        containerEl: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../MenuContainer').KdsMenuContainerProps> & Readonly<{
+        onItemClick?: ((id: string) => any) | undefined;
+    }>, {
+        focus: () => void;
+    }, {}, {}, {}, {}> | 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;
+    };
+};
+//# sourceMappingURL=KdsMenu.vue.d.ts.map

package/dist/src/containers/Menu/KdsMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/containers/Menu/KdsMenu.vue"],"names":[],"mappings":"AAsIA,OAAO,EACL,KAAK,SAAS,EAEd,QAAQ,EAKT,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAsC5C,QAAA,MAAM,kBAAkB,oCAAmC,CAAC;AAE5D,QAAA,MAAM,IAAI,YAET,CAAC;AAEF,QAAA,MAAM,KAAK,YAEV,CAAC;AAEF,QAAA,MAAM,MAAM,YAEX,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;EAeT,CAAC;AAEH,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,SAAS,CAAC,OAAO,KAAK,CAAC,CAAC;IAC/B,MAAM,EAAE,SAAS,CAAC,OAAO,kBAAkB,CAAC,CAAC;IAC7C,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAiBF,iBAAS,cAAc;WA8ET,OAAO,IAA6B;;QA5FhD;;;;;;;;WAQG;uBACY,aAAa,GAAG,OAAO;;QATtC;;;;;;;;WAQG;uBACY,aAAa,GAAG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmIw0gB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA3Cr+gB;AAmBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAuB21gB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAfp+gB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/src/containers/Menu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KdsMenu } from './KdsMenu.vue';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/containers/Menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/containers/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,mBAAmB,SAAS,CAAC"}

package/dist/src/containers/Menu/types.d.ts

@@ -0,0 +1,13 @@
+import { KdsListItemVariant } from '../ListItem/KdsListItem';
+import { KdsMenuItem } from '../MenuContainer/types';
+export type KdsMenuProps = {
+    /** Menu items rendered in the list */
+    items: KdsMenuItem[];
+    /** Limits the height of the menu container */
+    menuMaxHeight?: string;
+    /** Size variant for all the items in this container */
+    variant?: KdsListItemVariant;
+    /** Accessible label for the menu. Defaults to "Menu". */
+    ariaLabel?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/containers/Menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/containers/Menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,sCAAsC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist/src/containers/MenuContainer/KdsMenuContainer.vue.d.ts

@@ -6,34 +6,7 @@ declare const _default: import('vue').DefineComponent<KdsMenuContainerProps, {
 }, string, import('vue').PublicProps, Readonly<KdsMenuContainerProps> & Readonly<{
     onItemClick?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    listContainerEl: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').KdsListContainerProps> & Readonly<{
-        onItemClick?: ((id?: string | undefined) => any) | undefined;
-    }>, {
-        handleKeydown: (event: KeyboardEvent) => void;
-        handleFocus: () => void;
-        handleBlur: () => void;
-        activeDescendant: Readonly<import('vue').Ref<string | undefined>>;
-        focus: () => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        itemClick: (id?: string | undefined) => any;
-    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-        containerEl: HTMLDivElement;
-    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<import('..').KdsListContainerProps> & Readonly<{
-        onItemClick?: ((id?: string | undefined) => any) | undefined;
-    }>, {
-        handleKeydown: (event: KeyboardEvent) => void;
-        handleFocus: () => void;
-        handleBlur: () => void;
-        activeDescendant: Readonly<import('vue').Ref<string | undefined>>;
-        focus: () => void;
-    }, {}, {}, {}, {}> | null;
+    containerEl: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=KdsMenuContainer.vue.d.ts.map

package/dist/src/containers/MenuContainer/KdsMenuContainer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KdsMenuContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/containers/MenuContainer/KdsMenuContainer.vue"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EAA0B,qBAAqB,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2G7E,wBAUG"}
+{"version":3,"file":"KdsMenuContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/containers/MenuContainer/KdsMenuContainer.vue"],"names":[],"mappings":"AAoIA,OAAO,KAAK,EAEV,qBAAqB,EAEtB,MAAM,SAAS,CAAC;;;;;;;;;;AA0JjB,wBAUG"}

package/dist/src/containers/MenuContainer/KdsMenuItem.vue.d.ts

@@ -0,0 +1,14 @@
+import { KdsMenuContainerProps, KdsMenuItem } from './types';
+type __VLS_Props = {
+    item: KdsMenuItem;
+    activeId: string | undefined;
+    isLast: boolean;
+    variant?: KdsMenuContainerProps["variant"];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=KdsMenuItem.vue.d.ts.map

package/dist/src/containers/MenuContainer/KdsMenuItem.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsMenuItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/containers/MenuContainer/KdsMenuItem.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C,CAAC;;;;;;AAuHF,wBAOG"}

package/dist/src/containers/MenuContainer/types.d.ts

@@ -1,8 +1,13 @@
-import { KdsIconName } from '../../accessories';
+import { KdsBadgeVariant, KdsIconName } from '../../accessories';
+import { KdsListItemVariant } from '../ListItem/KdsListItem';
 import { KdsAvatarAccessory, KdsIconAccessory, KdsLiveStatusAccessory } from '../ListItem/ListItemAccessory/types';
 type KdsMenuItemAccessory = KdsIconAccessory | KdsLiveStatusAccessory | KdsAvatarAccessory;
 export type KdsMenuItem = {
     id: string;
+    /** Main text to show in the item */
+    text: string;
+    /** Optional subtext shown below the main label (multiline list item layout) */
+    subText?: string;
     /** Optional leading icon shown before a section headline */
     sectionHeadlineIcon?: KdsIconName;
     /**
@@ -11,15 +16,26 @@ export type KdsMenuItem = {
      * during keyboard navigation and cannot be clicked.
      */
     sectionHeadline?: boolean;
-    /** Disables the option in the list */
+    /** Disables interaction and dims the content. */
     disabled?: boolean;
     /** Optional leading accessory (icon, data type, or color swatch) shown before the text */
     accessory?: KdsMenuItemAccessory;
-    text: string;
-    /** Optional subtext shown below the main label (multiline list item layout) */
-    subText?: string;
     /** Show a separator below the item if it's not the last in the list */
     separator?: boolean;
+    /** Optional shortcut text shown at the end of the row (e.g. "Ctrl + 1"). Only shown for regular items (not headlines) */
+    shortcut?: string;
+    /**
+     * `KdsBadge` to show on the item. Only rendered for regular items (not headlines) and when a shortcut is not passed in to this item
+     */
+    badge?: {
+        label: string;
+        variant?: KdsBadgeVariant;
+    };
+    /**
+     * Interaction handler callback. This will run whenever the item is interacted with, whether that is
+     * via a mouse event or a keyboard event
+     */
+    handler?: (item: KdsMenuItem, event: MouseEvent | KeyboardEvent) => void;
 };
 export type KdsMenuContainerProps = {
     /** id of the menu to be linked via aria-controls */
@@ -30,6 +46,8 @@ export type KdsMenuContainerProps = {
     items: KdsMenuItem[];
     /** Limits the height of the menu container */
     menuMaxHeight?: string;
+    /** Size variant for all the items in this container */
+    variant?: KdsListItemVariant;
 };
 export type KdsMenuContainerExpose = {
     /** Moves focus to the menu list */

package/dist/src/containers/MenuContainer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/containers/MenuContainer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,qCAAqC,CAAC;AAE7C,KAAK,oBAAoB,GACrB,gBAAgB,GAChB,sBAAsB,GACtB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/containers/MenuContainer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,qCAAqC,CAAC;AAE7C,KAAK,oBAAoB,GACrB,gBAAgB,GAChB,sBAAsB,GACtB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IAEb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAElC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yHAAyH;IACzH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,eAAe,CAAC;KAC3B,CAAC;IAEF;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC"}

package/dist/src/containers/_helpers/useListItemKeyboardNav.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+type ItemWithId = {
+    id: string;
+};
+type Options<T extends ItemWithId> = {
+    containerEl: ShallowRef<HTMLElement | null>;
+    selectableItems: ComputedRef<Array<T>>;
+    enabledItems: ComputedRef<Array<T>>;
+    listItemRole: MaybeRefOrGetter<"menuitem" | "option">;
+    allowNoSelection?: boolean;
+    emptyOptionId?: string;
+    loading?: boolean;
+    triggers?: {
+        onEnter?: (activeItemId: string, item: T, event: KeyboardEvent) => void;
+        onSpace?: (activeItemId: string, item: T, event: KeyboardEvent) => void;
+    };
+};
+export declare const useListItemKeyboardNav: <T extends ItemWithId>(options: Options<T>) => {
+    handleKeydown: (event: KeyboardEvent) => void;
+    activeId: Readonly<import('vue').Ref<string | undefined, string | undefined>>;
+    focus: () => void;
+    blur: () => void;
+    setActiveId: (id: string | undefined) => void;
+    scrollSelectedIntoView: () => void;
+};
+export {};
+//# sourceMappingURL=useListItemKeyboardNav.d.ts.map

package/dist/src/containers/_helpers/useListItemKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemKeyboardNav.d.ts","sourceRoot":"","sources":["../../../../src/containers/_helpers/useListItemKeyboardNav.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAShB,MAAM,KAAK,CAAC;AAEb,KAAK,UAAU,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjC,KAAK,OAAO,CAAC,CAAC,SAAS,UAAU,IAAI;IACnC,WAAW,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,eAAe,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,EAAE,gBAAgB,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC;IAEtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;QACxE,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;KACzE,CAAC;CACH,CAAC;AASF,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,UAAU,EACzD,SAAS,OAAO,CAAC,CAAC,CAAC;2BAwGW,aAAa;;;;sBAqElB,MAAM,GAAG,SAAS;;CAmD5C,CAAC"}

package/dist/src/containers/_helpers/useStableItemIds.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+type ItemWithId = {
+    id: string;
+};
+type Options<T extends ItemWithId> = {
+    items: Ref<Array<T>>;
+};
+/**
+ * This composable adds prefixes to the ids of the given list of items.
+ * This is to ensure uniqueness of these values, which is especially relevant when
+ * binding them to DOM id attributes
+ */
+export declare const useStableItemIds: <T extends ItemWithId>(options: Options<T>) => {
+    itemsWithPrefix: import('vue').ComputedRef<T[]>;
+    idPrefix: string;
+    toUnprefixedId: (elementId?: string) => string | undefined;
+};
+export {};
+//# sourceMappingURL=useStableItemIds.d.ts.map

package/dist/src/containers/_helpers/useStableItemIds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableItemIds.d.ts","sourceRoot":"","sources":["../../../../src/containers/_helpers/useStableItemIds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA0B,MAAM,KAAK,CAAC;AAEvD,KAAK,UAAU,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjC,KAAK,OAAO,CAAC,CAAC,SAAS,UAAU,IAAI;IACnC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC;;;iCAkDpC,MAAM;CAK3C,CAAC"}

package/dist/src/containers/index.d.ts

@@ -1,5 +1,8 @@
 export * from './ListContainer';
 export type * from './ListContainer';
-export * from './MenuContainer';
-export type * from './MenuContainer';
+export * from './Menu';
+export type * from './Menu';
+export * from './ContextMenu';
+export type * from './ContextMenu';
+export type { KdsMenuItem } from './MenuContainer/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/containers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,iBAAiB,CAAC;AAErC,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/containers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,iBAAiB,CAAC;AAErC,cAAc,QAAQ,CAAC;AACvB,mBAAmB,QAAQ,CAAC;AAE5B,cAAc,eAAe,CAAC;AAC9B,mBAAmB,eAAe,CAAC;AAEnC,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}