@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-6XU5PSC2.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
+var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
+var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var FunnelChart = vue.defineComponent({
+  name: "TigerFunnelChart",
+  props: {
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 300 },
+    padding: { type: [Number, Object], default: 24 },
+    data: { type: Array, required: true },
+    direction: { type: String, default: "vertical" },
+    gap: { type: Number, default: 2 },
+    pinch: { type: Boolean, default: false },
+    colors: { type: Array },
+    // Interaction
+    hoverable: { type: Boolean, default: false },
+    hoveredIndex: { type: Number, default: void 0 },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
+    selectedIndex: { type: Number, default: void 0 },
+    // Legend
+    showLegend: { type: Boolean, default: false },
+    legendPosition: { type: String, default: "bottom" },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    // a11y
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "segment-click", "segment-hover"],
+  setup(props, { emit }) {
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleKeyDown,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
+      wrapperClasses
+    } = chunkFLAJKB2O_js.useChartInteraction({
+      hoverable: vue.computed(() => props.hoverable),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: vue.computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: vue.computed(() => props.activeOpacity),
+      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
+      legendPosition: vue.computed(() => props.legendPosition),
+      emit,
+      getData: (index) => props.data[index],
+      eventNames: { hover: "segment-hover", click: "segment-click" }
+    });
+    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const segments = vue.computed(
+      () => tigercatCore.computeFunnelSegments(props.data, {
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        gap: props.gap,
+        pinch: props.pinch,
+        colors: palette.value
+      })
+    );
+    const total = vue.computed(() => props.data.reduce((s, d) => s + d.value, 0));
+    const legendItems = vue.computed(
+      () => tigercatCore.buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d, i) => d.label ?? `Stage ${i + 1}`,
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
+      })
+    );
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const pct = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
+          const label = datum.label ?? `Stage ${index + 1}`;
+          return `${label}: ${datum.value} (${pct}%)`;
+        }
+      )
+    );
+    return () => {
+      const interactive = props.hoverable || props.selectable;
+      const chart = vue.h(
+        chunkFCV4ML6I_js.ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: tigercatCore.classNames(props.className)
+        },
+        {
+          default: () => {
+            const paths = vue.h(
+              chunkHBFFINAI_js.ChartSeries,
+              { data: props.data, type: "funnel" },
+              {
+                default: () => segments.value.map((seg) => {
+                  const opacity = tigercatCore.getChartElementOpacity(seg.index, activeIndex.value, {
+                    activeOpacity: props.activeOpacity,
+                    inactiveOpacity: props.inactiveOpacity
+                  });
+                  return vue.h("path", {
+                    key: `seg-${seg.index}`,
+                    d: seg.path,
+                    fill: seg.color,
+                    opacity,
+                    class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                    style: {
+                      transition: "opacity 0.2s ease-out"
+                    },
+                    tabindex: props.selectable ? 0 : void 0,
+                    role: props.selectable ? "button" : "img",
+                    "aria-label": seg.label,
+                    onMouseenter: (e) => handleMouseEnter(seg.index, e),
+                    onMousemove: handleMouseMove,
+                    onMouseleave: handleMouseLeave,
+                    onClick: () => handleClick(seg.index),
+                    onKeydown: (e) => handleKeyDown(e, seg.index)
+                  });
+                })
+              }
+            );
+            const labels = segments.value.map(
+              (seg) => vue.h(
+                "text",
+                {
+                  key: `label-${seg.index}`,
+                  x: seg.cx,
+                  y: seg.cy,
+                  class: tigercatCore.chartAxisTickTextClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle"
+                },
+                seg.label
+              )
+            );
+            return [paths, ...labels];
+          }
+        }
+      );
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+        content: tooltipContent.value,
+        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      if (!props.showLegend) {
+        return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+      }
+      return vue.h("div", { class: wrapperClasses.value }, [
+        chart,
+        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+          items: legendItems.value,
+          position: props.legendPosition,
+          markerSize: props.legendMarkerSize,
+          gap: props.legendGap,
+          interactive,
+          onItemClick: handleLegendClick,
+          onItemHover: handleLegendHover,
+          onItemLeave: handleLegendLeave
+        }),
+        tooltip
+      ]);
+    };
+  }
+});
+var FunnelChart_default = FunnelChart;
+
+exports.FunnelChart = FunnelChart;
+exports.FunnelChart_default = FunnelChart_default;

package/dist/{chunk-MJ7RGL34.mjs → chunk-7DGAOCPX.mjs}

@@ -156,6 +156,13 @@ var Tree = defineComponent({
       type: String,
       default: ""
     },
+    /**
+     * Whether to show built-in search input
+     */
+    searchable: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Custom filter function
      */
@@ -189,6 +196,13 @@ var Tree = defineComponent({
     ariaLabel: {
       type: String,
       default: "Tree"
+    },
+    /**
+     * Whether nodes are draggable
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -200,7 +214,8 @@ var Tree = defineComponent({
     "node-collapse",
     "update:expandedKeys",
     "update:selectedKeys",
-    "update:checkedKeys"
+    "update:checkedKeys",
+    "drop"
   ],
   setup(props, { emit, attrs }) {
     const rootEl = ref(null);
@@ -217,6 +232,27 @@ var Tree = defineComponent({
       return props.multiple;
     });
     const internalExpandedKeys = ref(/* @__PURE__ */ new Set());
+    const dragNodeKey = ref(null);
+    function handleTreeDragStart(key) {
+      dragNodeKey.value = key;
+    }
+    function handleTreeDragOver(e) {
+      e.preventDefault();
+    }
+    function handleTreeDrop(targetKey) {
+      if (dragNodeKey.value === null || dragNodeKey.value === targetKey) {
+        dragNodeKey.value = null;
+        return;
+      }
+      emit("drop", {
+        dragKey: dragNodeKey.value,
+        dropKey: targetKey
+      });
+      dragNodeKey.value = null;
+    }
+    function handleTreeDragEnd() {
+      dragNodeKey.value = null;
+    }
     const internalSelectedKeys = ref(
       new Set(props.selectedKeys ?? props.defaultSelectedKeys)
     );
@@ -284,8 +320,12 @@ var Tree = defineComponent({
         target?.focus();
       }
     );
+    const internalSearchValue = ref("");
+    const effectiveFilterValue = computed(
+      () => props.searchable ? internalSearchValue.value : props.filterValue
+    );
     watch(
-      () => props.filterValue,
+      () => effectiveFilterValue.value,
       (newValue) => {
         if (newValue) {
           const matched = filterTreeNodes(props.treeData, newValue, props.filterFn);
@@ -499,6 +539,18 @@ var Tree = defineComponent({
               "aria-expanded": isExpandable ? isExpanded ? true : false : void 0,
               "aria-checked": props.checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
               tabIndex: isFocusable ? 0 : -1,
+              draggable: props.draggable && !node.disabled ? true : void 0,
+              onDragstart: props.draggable && !node.disabled ? (e) => {
+                e.stopPropagation();
+                handleTreeDragStart(node.key);
+              } : void 0,
+              onDragover: props.draggable ? handleTreeDragOver : void 0,
+              onDrop: props.draggable ? (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleTreeDrop(node.key);
+              } : void 0,
+              onDragend: props.draggable ? handleTreeDragEnd : void 0,
               onFocus: () => {
                 if (!node.disabled) activeKey.value = node.key;
               },
@@ -620,6 +672,15 @@ var Tree = defineComponent({
           [h("div", { class: treeEmptyStateClasses }, props.emptyText)]
         );
       }
+      const searchInput = props.searchable ? h("input", {
+        type: "text",
+        class: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
+        placeholder: "Search...",
+        value: internalSearchValue.value,
+        onInput: (e) => {
+          internalSearchValue.value = e.target.value;
+        }
+      }) : null;
       return h(
         "div",
         {
@@ -630,7 +691,7 @@ var Tree = defineComponent({
           "aria-multiselectable": effectiveMultiple.value ? true : void 0,
           ref: rootEl
         },
-        props.treeData.map((node) => renderTreeNode(node, 0))
+        [searchInput, ...props.treeData.map((node) => renderTreeNode(node, 0))]
       );
     };
   }

package/dist/{chunk-W36SYMVH.js → chunk-7VSD3NPI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -11,10 +11,10 @@ var Modal = vue.defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the modal is visible
+     * Whether the modal is open
      * @default false
      */
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -26,6 +26,13 @@ var Modal = vue.defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Custom width (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
     /**
      * Modal title
      */
@@ -142,28 +149,54 @@ var Modal = vue.defineComponent({
     disableTeleport: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Whether the modal is draggable by its header
+     * @default false
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:visible", "close", "cancel", "ok"],
+  emits: ["update:open", "close", "cancel", "ok"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = vue.ref(createModalId());
-    const hasBeenOpened = vue.ref(props.visible);
+    const hasBeenOpened = vue.ref(props.open);
     const dialogRef = vue.ref(null);
     const closeButtonRef = vue.ref(null);
     const previousActiveElement = vue.ref(null);
+    const dragOffset = vue.ref({ x: 0, y: 0 });
+    const isDragging = vue.ref(false);
+    const dragStart = vue.ref({ x: 0, y: 0 });
+    const handleDragMouseDown = (e) => {
+      if (!props.draggable) return;
+      isDragging.value = true;
+      dragStart.value = { x: e.clientX - dragOffset.value.x, y: e.clientY - dragOffset.value.y };
+      const onMouseMove = (ev) => {
+        dragOffset.value = { x: ev.clientX - dragStart.value.x, y: ev.clientY - dragStart.value.y };
+      };
+      const onMouseUp = () => {
+        isDragging.value = false;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
     const titleId = vue.computed(() => `${instanceId.value}-title`);
     const shouldRender = vue.computed(() => {
-      if (props.visible) return true;
+      if (props.open) return true;
       if (props.destroyOnClose) return false;
       return hasBeenOpened.value;
     });
     const handleClose = () => {
-      emit("update:visible", false);
+      emit("update:open", false);
       emit("cancel");
     };
     const handleOk = () => {
       emit("ok");
-      emit("update:visible", false);
+      emit("update:open", false);
     };
     const handleMaskClick = (event) => {
       if (props.maskClosable && event.target === event.currentTarget) {
@@ -171,11 +204,11 @@ var Modal = vue.defineComponent({
       }
     };
     const handleKeyDown = (event) => {
-      if (event.key === "Escape" && props.visible) {
+      if (event.key === "Escape" && props.open) {
         handleClose();
         return;
       }
-      if (event.key === "Tab" && props.visible && dialogRef.value) {
+      if (event.key === "Tab" && props.open && dialogRef.value) {
         const focusables = tigercatCore.getFocusableElements(dialogRef.value);
         const result = tigercatCore.getFocusTrapNavigation(event, focusables, document.activeElement);
         if (result.shouldHandle && result.next) {
@@ -191,7 +224,7 @@ var Modal = vue.defineComponent({
       document.removeEventListener("keydown", handleKeyDown);
     });
     vue.watch(
-      () => props.visible,
+      () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
           hasBeenOpened.value = true;
@@ -203,6 +236,7 @@ var Modal = vue.defineComponent({
         } else {
           emit("close");
           previousActiveElement.value?.focus?.();
+          dragOffset.value = { x: 0, y: 0 };
         }
       }
     );
@@ -240,33 +274,47 @@ var Modal = vue.defineComponent({
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.title ? titleId.value : void 0);
       const mergedClass = tigercatCore.classNames(contentClasses.value, tigercatCore.coerceClassValue(attrs.class));
-      const mergedStyle = tigercatCore.mergeStyleValues(attrs.style, props.style);
-      const header = props.title || slots.title || props.closable ? vue.h("div", { class: tigercatCore.modalHeaderClasses }, [
-        props.title || slots.title ? vue.h(
-          "h3",
-          {
-            id: titleId.value,
-            class: tigercatCore.modalTitleClasses
-          },
-          slots.title ? slots.title() : props.title
-        ) : null,
-        props.closable ? vue.h(
-          "button",
-          {
-            type: "button",
-            class: tigercatCore.modalCloseButtonClasses,
-            onClick: handleClose,
-            "aria-label": tigercatCore.resolveLocaleText(
-              "Close",
-              props.closeAriaLabel,
-              props.locale?.modal?.closeAriaLabel,
-              props.locale?.common?.closeText
-            ),
-            ref: closeButtonRef
-          },
-          CloseIcon
-        ) : null
-      ]) : null;
+      const widthStyle = props.width ? {
+        width: typeof props.width === "number" ? `${props.width}px` : props.width,
+        maxWidth: "100%"
+      } : void 0;
+      const mergedStyle = tigercatCore.mergeStyleValues(attrs.style, props.style, widthStyle);
+      const dragStyle = props.draggable && (dragOffset.value.x !== 0 || dragOffset.value.y !== 0) ? { transform: `translate(${dragOffset.value.x}px, ${dragOffset.value.y}px)` } : void 0;
+      const finalStyle = tigercatCore.mergeStyleValues(mergedStyle, dragStyle);
+      const header = props.title || slots.title || props.closable ? vue.h(
+        "div",
+        {
+          class: tigercatCore.modalHeaderClasses,
+          onMousedown: props.draggable ? handleDragMouseDown : void 0,
+          style: props.draggable ? "cursor: grab; user-select: none" : void 0
+        },
+        [
+          props.title || slots.title ? vue.h(
+            "h3",
+            {
+              id: titleId.value,
+              class: tigercatCore.modalTitleClasses
+            },
+            slots.title ? slots.title() : props.title
+          ) : null,
+          props.closable ? vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.modalCloseButtonClasses,
+              onClick: handleClose,
+              "aria-label": tigercatCore.resolveLocaleText(
+                "Close",
+                props.closeAriaLabel,
+                props.locale?.modal?.closeAriaLabel,
+                props.locale?.common?.closeText
+              ),
+              ref: closeButtonRef
+            },
+            CloseIcon
+          ) : null
+        ]
+      ) : null;
       const body = slots.default ? vue.h("div", { class: tigercatCore.modalBodyClasses }, slots.default()) : null;
       const footer = slots.footer ? vue.h(
         "div",
@@ -274,7 +322,7 @@ var Modal = vue.defineComponent({
         slots.footer({ ok: handleOk, cancel: handleClose })
       ) : props.showDefaultFooter ? vue.h("div", { class: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "" }, [
         vue.h(
-          chunkDELTFEEJ_js.Button,
+          chunkU7CCKZAG_js.Button,
           { variant: "secondary", onClick: handleClose },
           {
             default: () => tigercatCore.resolveLocaleText(
@@ -286,7 +334,7 @@ var Modal = vue.defineComponent({
           }
         ),
         vue.h(
-          chunkDELTFEEJ_js.Button,
+          chunkU7CCKZAG_js.Button,
           { onClick: handleOk },
           {
             default: () => tigercatCore.resolveLocaleText(
@@ -303,8 +351,8 @@ var Modal = vue.defineComponent({
         {
           class: tigercatCore.modalWrapperClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.visible,
-          "aria-hidden": !props.visible ? "true" : void 0,
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-modal-root": ""
         },
         [
@@ -325,7 +373,7 @@ var Modal = vue.defineComponent({
                 {
                   ...forwardedAttrs,
                   class: mergedClass,
-                  style: mergedStyle,
+                  style: finalStyle,
                   role: "dialog",
                   "aria-modal": "true",
                   "aria-labelledby": ariaLabelledby,

package/dist/{chunk-D5CR2P7K.mjs → chunk-A64AWAOW.mjs}

@@ -1,8 +1,10 @@
 import { DropdownMenu } from './chunk-AN3HKOCS.mjs';
 import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
-import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h } from 'vue';
-import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
+import { defineComponent, onMounted, ref, computed, watch, onBeforeUnmount, provide, h, nextTick } from 'vue';
+import { injectDropdownStyles, classNames, getDropdownContainerClasses, coerceClassValue, mergeStyleValues, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH, restoreFocus, handleMenuNavigation, captureActiveElement, focusFirstMenuItem } from '@expcat/tigercat-core';
 
+var dropdownIdCounter = 0;
+var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
 var Dropdown = defineComponent({
   name: "TigerDropdown",
@@ -41,17 +43,17 @@ var Dropdown = defineComponent({
       default: false
     },
     /**
-     * Whether the dropdown is visible (controlled mode)
+     * Whether the dropdown is open (controlled mode)
      */
-    visible: {
+    open: {
       type: Boolean,
       default: void 0
     },
     /**
-     * Default visibility (uncontrolled mode)
+     * Default open state (uncontrolled mode)
      * @default false
      */
-    defaultVisible: {
+    defaultOpen: {
       type: Boolean,
       default: false
     },
@@ -83,26 +85,41 @@ var Dropdown = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
     onMounted(() => injectDropdownStyles());
-    const internalVisible = ref(props.defaultVisible);
+    const menuId = createDropdownMenuId();
+    const previousActiveElement = ref(null);
+    const internalVisible = ref(props.defaultOpen);
     const currentVisible = computed(
-      () => props.visible !== void 0 ? props.visible : internalVisible.value
+      () => props.open !== void 0 ? props.open : internalVisible.value
     );
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const floatingRef = ref(null);
     const setVisible = (visible) => {
       if (props.disabled && visible) return;
-      if (props.visible === void 0) {
+      if (visible && !currentVisible.value) {
+        previousActiveElement.value = captureActiveElement();
+      }
+      if (props.open === void 0) {
         internalVisible.value = visible;
       }
-      emit("update:visible", visible);
-      emit("visible-change", visible);
+      emit("update:open", visible);
+      emit("open-change", visible);
+      if (visible) {
+        nextTick(() => {
+          if (floatingRef.value) {
+            focusFirstMenuItem(floatingRef.value);
+          }
+        });
+      } else {
+        restoreFocus(previousActiveElement.value);
+        previousActiveElement.value = null;
+      }
     };
     const handleItemClick = () => {
       if (props.closeOnClick) setVisible(false);
@@ -122,6 +139,11 @@ var Dropdown = defineComponent({
       if (props.trigger !== "click") return;
       setVisible(!currentVisible.value);
     };
+    const handleMenuKeyDown = (event) => {
+      if (floatingRef.value) {
+        handleMenuNavigation(floatingRef.value, event);
+      }
+    };
     const {
       x,
       y,
@@ -227,7 +249,8 @@ var Dropdown = defineComponent({
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           "aria-haspopup": "menu",
-          "aria-expanded": currentVisible.value
+          "aria-expanded": currentVisible.value,
+          "aria-controls": currentVisible.value ? menuId : void 0
         },
         [triggerNode, chevronNode]
       ) : null;
@@ -239,9 +262,16 @@ var Dropdown = defineComponent({
           style: menuWrapperStyles.value,
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
+          onKeydown: handleMenuKeyDown,
           hidden: !currentVisible.value
         },
-        menuNode
+        [
+          h(
+            menuNode.type,
+            { ...menuNode.props || {}, id: menuId },
+            menuNode.children
+          )
+        ]
       ) : null;
       const {
         class: _class,