@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-MX2KCWM2.js → chunk-K3CIXMN4.js}

@@ -47,6 +47,7 @@ var Splitter = vue.defineComponent({
     const draggingIndex = vue.ref(-1);
     const startPos = vue.ref(0);
     const startSizes = vue.ref([]);
+    let dragSession = null;
     vue.watch(
       () => props.sizes,
       (newSizes) => {
@@ -78,19 +79,41 @@ var Splitter = vue.defineComponent({
     );
     const getMins = () => paneSizes.value.map(() => props.min);
     const getMaxes = () => paneSizes.value.map(() => props.max);
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
     const onMouseDown = (index, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingIndex.value = index;
       startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
       startSizes.value = [...paneSizes.value];
       emit("resize-start", { index, sizes: [...paneSizes.value] });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = tigercatCore.createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+          if (draggingIndex.value >= 0) {
+            emit("resize-end", {
+              index: draggingIndex.value,
+              sizes: [...paneSizes.value]
+            });
+          }
+          draggingIndex.value = -1;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
+    const applyDragResize = (currentX, currentY) => {
       if (draggingIndex.value < 0) return;
-      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const currentPos = props.direction === "horizontal" ? currentX : currentY;
       const delta = currentPos - startPos.value;
       const newSizes = tigercatCore.resizePanes(
         startSizes.value,
@@ -105,20 +128,8 @@ var Splitter = vue.defineComponent({
         emit("resize", { index: draggingIndex.value, sizes: newSizes });
       }
     };
-    const onMouseUp = () => {
-      if (draggingIndex.value >= 0) {
-        emit("resize-end", {
-          index: draggingIndex.value,
-          sizes: [...paneSizes.value]
-        });
-      }
-      draggingIndex.value = -1;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
     vue.onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
     });
     return () => {
       const children = slots.default?.() || [];

package/dist/{chunk-RDV4BMTK.js → chunk-KOI6AQ5H.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var chunk6DP7XE77_js = require('./chunk-6DP7XE77.js');
+var chunkCRGGJKV2_js = require('./chunk-CRGGJKV2.js');
 var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/ImageGroup.ts
-chunk6DP7XE77_js.init_ImagePreview();
 var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
 var ImageGroup = vue.defineComponent({
   name: "TigerImageGroup",
@@ -18,15 +17,12 @@ var ImageGroup = vue.defineComponent({
     const previewIndex = vue.ref(0);
     const context = {
       register(src) {
-        const idx = images.value.length;
-        images.value.push(src);
-        return idx;
+        const result = tigercatCore.registerImageGroupItem(images.value, src);
+        images.value = result.items;
+        return result.index;
       },
       unregister(src) {
-        const idx = images.value.indexOf(src);
-        if (idx > -1) {
-          images.value.splice(idx, 1);
-        }
+        images.value = tigercatCore.unregisterImageGroupItem(images.value, src);
       },
       openPreview(index) {
         if (!props.preview) return;
@@ -41,7 +37,7 @@ var ImageGroup = vue.defineComponent({
     });
     return () => {
       const children = slots.default?.();
-      const preview = props.preview ? vue.h(chunk6DP7XE77_js.ImagePreview, {
+      const preview = props.preview ? vue.h(chunkCRGGJKV2_js.ImagePreview, {
         open: previewVisible.value,
         images: images.value,
         currentIndex: previewIndex.value,
@@ -53,7 +49,7 @@ var ImageGroup = vue.defineComponent({
           previewIndex.value = val;
         }
       }) : null;
-      return vue.h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+      return vue.h("div", { class: tigercatCore.getImageGroupClasses(), role: "group" }, [children, preview]);
     };
   }
 });

package/dist/{chunk-AAO2B46J.js → chunk-KVJKG4D3.js}

@@ -1,9 +1,9 @@
 'use strict';
 
+var chunkEHBPMUT2_js = require('./chunk-EHBPMUT2.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/List.ts
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var LoadingSpinner = () => {
   return vue.h(
@@ -83,6 +83,35 @@ var List = vue.defineComponent({
     grid: {
       type: Object
     },
+    /**
+     * Enable fixed-height virtual rendering via VirtualList.
+     * Virtual mode applies to the current paginated data window and is ignored for grid lists.
+     */
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Virtual viewport height in pixels.
+     */
+    virtualHeight: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * Fixed virtual item height in pixels.
+     */
+    virtualItemHeight: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Number of extra virtual items to render above/below the viewport.
+     */
+    virtualOverscan: {
+      type: Number,
+      default: 5
+    },
     /**
      * Function to get item key
      */
@@ -328,6 +357,23 @@ var List = vue.defineComponent({
           items
         );
       }
+      if (props.virtual) {
+        return vue.h(
+          chunkEHBPMUT2_js.VirtualList,
+          {
+            itemCount: paginatedData.value.length,
+            itemHeight: props.virtualItemHeight,
+            height: props.virtualHeight,
+            overscan: props.virtualOverscan
+          },
+          {
+            default: ({ index }) => {
+              const item = paginatedData.value[index];
+              return item ? renderListItem(item, index) : null;
+            }
+          }
+        );
+      }
       return items;
     }
     function renderPagination() {

package/dist/{chunk-ABPOLQLE.mjs → chunk-LBHKQW3U.mjs}

@@ -1,17 +1,17 @@
-import { PieChart } from './chunk-NVJRZYES.mjs';
+import { PieChart } from './chunk-XVUATQPD.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
 
 var DONUT_PALETTE = [
-  "#5470c6",
-  "#91cc75",
-  "#fac858",
-  "#ee6666",
-  "#73c0de",
-  "#3ba272",
-  "#fc8452",
-  "#9a60b4",
-  "#ea7ccc"
+  "var(--tiger-chart-1,#5470c6)",
+  "var(--tiger-chart-2,#91cc75)",
+  "var(--tiger-chart-3,#fac858)",
+  "var(--tiger-chart-4,#ee6666)",
+  "var(--tiger-chart-5,#73c0de)",
+  "var(--tiger-chart-6,#3ba272)",
+  "var(--tiger-chart-1,#fc8452)",
+  "var(--tiger-chart-2,#9a60b4)",
+  "var(--tiger-chart-3,#ea7ccc)"
 ];
 var DonutChart = defineComponent({
   name: "TigerDonutChart",
@@ -131,7 +131,7 @@ var DonutChart = defineComponent({
     },
     borderColor: {
       type: String,
-      default: "#ffffff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     hoverOffset: {
       type: Number,
@@ -155,6 +155,11 @@ var DonutChart = defineComponent({
     animated: {
       type: Boolean,
       default: false
+    },
+    // Visual modes (forwarded to PieChart, opt-in per PR-19k(b6/b7))
+    gradient: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
@@ -222,6 +227,7 @@ var DonutChart = defineComponent({
         borderColor: props.borderColor,
         hoverOffset: props.hoverOffset,
         shadow: props.shadow,
+        gradient: props.gradient,
         hoverable: props.hoverable,
         hoveredIndex: props.hoveredIndex,
         activeOpacity: props.activeOpacity,
@@ -252,7 +258,13 @@ var DonutChart = defineComponent({
             transform: "translate(-50%, -50%)",
             textAlign: "center",
             pointerEvents: "none",
-            lineHeight: "1.3"
+            lineHeight: "1.3",
+            padding: "var(--tiger-chart-donut-center-padding, 0)",
+            borderRadius: "var(--tiger-radius-pill, 9999px)",
+            background: "var(--tiger-chart-donut-center-bg, transparent)",
+            boxShadow: "var(--tiger-chart-donut-center-shadow, none)",
+            backdropFilter: "var(--tiger-chart-donut-center-backdrop, none)",
+            WebkitBackdropFilter: "var(--tiger-chart-donut-center-backdrop, none)"
           },
           "data-donut-center": "true"
         },

package/dist/{chunk-FK2XBMC3.mjs → chunk-LBIQHIXN.mjs}

@@ -1,10 +1,10 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { defineComponent, computed, ref, h } from 'vue';
-import { getChartInnerRect, resolveSeriesData, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getRadarGradientPrefix, getChartInnerRect, resolveSeriesData, buildChartSeriesKeys, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 
 var RadarChart = defineComponent({
   name: "TigerRadarChart",
@@ -162,6 +162,18 @@ var RadarChart = defineComponent({
       type: Boolean,
       default: false
     },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     splitAreaOpacity: {
       type: Number,
       default: 0.06
@@ -175,7 +187,7 @@ var RadarChart = defineComponent({
     },
     pointBorderColor: {
       type: String,
-      default: "#fff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     pointHoverSize: {
       type: Number,
@@ -197,6 +209,7 @@ var RadarChart = defineComponent({
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "series-click", "series-hover"],
   setup(props, { emit }) {
+    const gradientPrefix = getRadarGradientPrefix();
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const radius = computed(
       () => Math.max(0, Math.min(innerRect.value.width, innerRect.value.height) / 2)
@@ -208,6 +221,9 @@ var RadarChart = defineComponent({
         data: []
       })
     );
+    const seriesKeys = computed(
+      () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "radar-" })
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -261,8 +277,9 @@ var RadarChart = defineComponent({
     });
     const angles = computed(() => getRadarAngles(axisData.value.length, props.startAngle));
     const seriesPoints = computed(
-      () => resolvedSeries.value.map((item) => ({
+      () => resolvedSeries.value.map((item, seriesIndex) => ({
         series: item,
+        seriesKey: seriesKeys.value[seriesIndex],
         points: getRadarPoints(item.data, {
           cx: cx.value,
           cy: cy.value,
@@ -403,6 +420,94 @@ var RadarChart = defineComponent({
         },
         {
           default: () => [
+            // Gradient defs for area fills
+            props.gradient || props.strokeGradient || props.pointGradient ? h("defs", null, [
+              ...props.gradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedFillColor = item.series.fillColor ?? seriesColor ?? props.fillColor ?? palette.value[0];
+                const resolvedFillOpacity = item.series.fillOpacity ?? props.fillOpacity;
+                return h(
+                  "linearGradient",
+                  {
+                    key: `radar-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-${item.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": resolvedFillColor,
+                      "stop-opacity": resolvedFillOpacity
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": resolvedFillColor,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                );
+              }) : [],
+              ...props.strokeGradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? props.strokeColor ?? palette.value[0];
+                return h(
+                  "linearGradient",
+                  {
+                    key: `radar-stroke-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${item.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${resolvedStrokeColor} 100%, white 12%)`
+                    }),
+                    h("stop", {
+                      offset: "50%",
+                      "stop-color": resolvedStrokeColor
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${resolvedStrokeColor} 100%, black 8%)`
+                    })
+                  ]
+                );
+              }) : [],
+              ...props.pointGradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedPointColor = item.series.pointColor ?? seriesColor ?? props.pointColor ?? palette.value[0];
+                return h(
+                  "radialGradient",
+                  {
+                    key: `radar-point-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-point-${item.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${resolvedPointColor} 100%, white 30%)`
+                    }),
+                    h("stop", {
+                      offset: "70%",
+                      "stop-color": resolvedPointColor
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${resolvedPointColor} 100%, black 12%)`
+                    })
+                  ]
+                );
+              }) : []
+            ]) : null,
             // Split area (alternating fills – ECharts splitArea style)
             ...splitAreaPaths.value.map((area, index) => {
               if (area.type === "circle-ring") {
@@ -489,10 +594,11 @@ var RadarChart = defineComponent({
               return h(
                 ChartSeries,
                 {
-                  key: `series-${seriesIndex}`,
+                  key: item.seriesKey,
                   data: item.series.data,
                   name: item.series.name,
                   type: "radar",
+                  "data-series-key": item.seriesKey,
                   class: classNames(
                     item.series.className,
                     props.hoverable || props.selectable ? "cursor-pointer" : null
@@ -513,15 +619,16 @@ var RadarChart = defineComponent({
                   default: () => [
                     areaPath ? h("path", {
                       d: areaPath,
-                      fill: resolvedFillColor,
-                      "fill-opacity": resolvedFillOpacity,
-                      stroke: resolvedStrokeColor,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${item.seriesKey})` : resolvedFillColor,
+                      "fill-opacity": props.gradient ? 1 : resolvedFillOpacity,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${item.seriesKey})` : resolvedStrokeColor,
                       "stroke-width": resolvedStrokeWidth,
                       "stroke-linejoin": "round",
                       class: "transition-[fill-opacity,filter] duration-200 ease-out",
                       style: resolvedActiveIndex.value === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                       "data-radar-area": "true",
-                      "data-series-index": seriesIndex
+                      "data-series-index": seriesIndex,
+                      "data-series-key": item.seriesKey
                     }) : null,
                     resolvedShowPoints ? item.points.map((point) => {
                       const isHoveredPoint = hoveredPoint.value?.seriesIndex === seriesIndex && hoveredPoint.value?.pointIndex === point.index;
@@ -530,11 +637,11 @@ var RadarChart = defineComponent({
                       const resolvedBorderWidth = item.series.pointBorderWidth ?? props.pointBorderWidth;
                       const resolvedBorderColor = item.series.pointBorderColor ?? props.pointBorderColor;
                       return h("circle", {
-                        key: `point-${seriesIndex}-${point.index}`,
+                        key: `point-${item.seriesKey}-${point.index}`,
                         cx: point.x,
                         cy: point.y,
                         r: currentSize,
-                        fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                        fill: props.pointGradient ? `url(#${gradientPrefix}-point-${item.seriesKey})` : point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
                         stroke: resolvedBorderColor,
                         "stroke-width": resolvedBorderWidth,
                         class: classNames(
@@ -543,6 +650,7 @@ var RadarChart = defineComponent({
                         ),
                         "data-radar-point": "true",
                         "data-series-index": seriesIndex,
+                        "data-series-key": item.seriesKey,
                         "data-point-index": point.index,
                         onMouseenter: props.showTooltip && props.hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                         onMousemove: props.showTooltip && props.hoverable ? handlePointMove : void 0,

package/dist/{chunk-XFZZWZ6Q.js → chunk-LG6KGO5D.js}

@@ -38,6 +38,7 @@ var Resizable = vue.defineComponent({
     const startMouseY = vue.ref(0);
     const startWidth = vue.ref(0);
     const startHeight = vue.ref(0);
+    let dragSession = null;
     const containerClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.resizableBaseClasses,
@@ -52,9 +53,14 @@ var Resizable = vue.defineComponent({
       if (height.value != null) s.height = `${height.value}px`;
       return s;
     });
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
     const onMouseDown = (handle, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingHandle.value = handle;
       startMouseX.value = e.clientX;
       startMouseY.value = e.clientY;
@@ -67,15 +73,27 @@ var Resizable = vue.defineComponent({
         deltaX: 0,
         deltaY: 0
       });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = tigercatCore.createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize", event));
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize-end", event));
+          draggingHandle.value = null;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
-      if (!draggingHandle.value) return;
-      const mouseDeltaX = e.clientX - startMouseX.value;
-      const mouseDeltaY = e.clientY - startMouseY.value;
+    const applyResize = (currentX, currentY, notify) => {
+      const handle = draggingHandle.value;
+      if (!handle) return;
+      const mouseDeltaX = currentX - startMouseX.value;
+      const mouseDeltaY = currentY - startMouseY.value;
       const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
-        draggingHandle.value,
+        handle,
         mouseDeltaX,
         mouseDeltaY,
         props.axis
@@ -97,31 +115,16 @@ var Resizable = vue.defineComponent({
       );
       width.value = clamped.width;
       height.value = clamped.height;
-      emit("resize", {
+      notify({
         width: clamped.width,
         height: clamped.height,
-        handle: draggingHandle.value,
+        handle,
         deltaX: clamped.width - startWidth.value,
         deltaY: clamped.height - startHeight.value
       });
     };
-    const onMouseUp = () => {
-      if (draggingHandle.value) {
-        emit("resize-end", {
-          width: width.value ?? 0,
-          height: height.value ?? 0,
-          handle: draggingHandle.value,
-          deltaX: (width.value ?? 0) - startWidth.value,
-          deltaY: (height.value ?? 0) - startHeight.value
-        });
-      }
-      draggingHandle.value = null;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
     vue.onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
     });
     return () => {
       const handleNodes = props.handles.map(

package/dist/{chunk-EXQSRZJX.mjs → chunk-LL4ASJ4O.mjs}

@@ -1,5 +1,5 @@
 import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
-import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, treeSelectBaseClasses, coerceClassValue, getTreeSelectTriggerClasses, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses } from '@expcat/tigercat-core';
+import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, treeSelectBaseClasses, coerceClassValue, getPickerComboboxAria, getTreeSelectTriggerClasses, treeSelectDropdownClasses, getPickerListboxAria, treeSelectSearchClasses, getTreeSelectNodeClasses, getPickerOptionAria, chevronRightSolidIcon20PathD, treeSelectEmptyClasses, getPickerTriggerKeyAction } from '@expcat/tigercat-core';
 
 // src/components/TreeSelect.ts
 var treeSelectInstanceId = 0;
@@ -159,12 +159,16 @@ var TreeSelect = defineComponent({
       emit("change", val);
     }
     function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        closeDropdown();
-      } else if ((e.key === "Enter" || e.key === " ") && !isOpen.value) {
-        e.preventDefault();
+      const action = getPickerTriggerKeyAction(e.key, isOpen.value);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        if (isOpen.value) closeDropdown();
+        else openDropdown();
+      } else if (action === "open") {
         openDropdown();
+      } else if (action === "close") {
+        closeDropdown();
       }
     }
     function handleClickOutside(e) {
@@ -191,10 +195,7 @@ var TreeSelect = defineComponent({
           {
             type: "button",
             class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
-            role: "combobox",
-            "aria-expanded": String(isOpen.value),
-            "aria-haspopup": "listbox",
-            "aria-controls": isOpen.value ? listboxId : void 0,
+            ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
             disabled: props.disabled,
             onClick: toggleDropdown,
             onKeydown: handleKeyDown
@@ -232,8 +233,7 @@ var TreeSelect = defineComponent({
         isOpen.value ? h(
           "div",
           {
-            id: listboxId,
-            role: "listbox",
+            ...getPickerListboxAria({ id: listboxId }),
             class: treeSelectDropdownClasses
           },
           [
@@ -257,9 +257,7 @@ var TreeSelect = defineComponent({
                 "div",
                 {
                   key: node.key,
-                  role: "option",
-                  "aria-selected": selected,
-                  "aria-disabled": node.disabled,
+                  ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
                   class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
                   style: { paddingLeft: `${indent + 8}px` },
                   onClick: (e) => {