@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-35VYCSVH.js → chunk-XXBMPKS7.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
 var chunk5PXTMXXS_js = require('./chunk-5PXTMXXS.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var chunk57MJTNDL_js = require('./chunk-57MJTNDL.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -211,7 +211,7 @@ var BarChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -340,7 +340,7 @@ var BarChart = vue.defineComponent({
         );
       }) : [];
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -402,7 +402,7 @@ var BarChart = vue.defineComponent({
                       "transition-[opacity,filter] duration-200",
                       (props.hoverable || props.selectable) && "cursor-pointer hover:brightness-110"
                     ),
-                    style: props.animated ? tigercatCore.barAnimatedTransition : void 0,
+                    style: props.animated ? `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px);${tigercatCore.barAnimatedTransition}` : `rx:var(--tiger-chart-bar-radius,${props.barRadius}px);ry:var(--tiger-chart-bar-radius,${props.barRadius}px)`,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": bar.datum.label ?? String(bar.datum.x),
@@ -420,7 +420,7 @@ var BarChart = vue.defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -431,7 +431,7 @@ var BarChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-QK3KKTYV.js → chunk-XY4A73TK.js}

@@ -39,17 +39,10 @@ var Code = vue.defineComponent({
     const timerRef = vue.ref(null);
     const containerClasses = vue.computed(() => {
       const attrsRecord = attrs;
-      return tigercatCore.classNames(
-        tigercatCore.codeBlockContainerClasses,
-        props.className,
-        tigercatCore.coerceClassValue(attrsRecord.class)
-      );
+      return tigercatCore.getCodeBlockContainerClasses(props.className, tigercatCore.coerceClassValue(attrsRecord.class));
     });
     const copyButtonClasses = vue.computed(() => {
-      return tigercatCore.classNames(
-        tigercatCore.codeBlockCopyButtonBaseClasses,
-        isCopied.value && tigercatCore.codeBlockCopyButtonCopiedClasses
-      );
+      return tigercatCore.getCodeBlockCopyButtonClasses(isCopied.value);
     });
     const clearTimer = () => {
       if (timerRef.value != null) {

package/dist/{chunk-YYRJA6VQ.mjs → chunk-YIYLO6AG.mjs}

@@ -1,8 +1,7 @@
-import { Table } from './chunk-HTG6ISVH.mjs';
-import { Select } from './chunk-QNODDATK.mjs';
-import { Pagination } from './chunk-NHCCPMLC.mjs';
+import { Table } from './chunk-XWE54AWW.mjs';
+import { Select } from './chunk-ZWTC2CUB.mjs';
 import { Input } from './chunk-2WJADO6O.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
+import { Button } from './chunk-UM5GGKIX.mjs';
 import { defineComponent, ref, getCurrentInstance, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
@@ -115,6 +114,9 @@ var DataTableWithToolbar = defineComponent({
   setup(props, { attrs, emit }) {
     const internalSearch = ref(props.toolbar?.defaultSearchValue ?? "");
     const internalFilters = ref({});
+    const previousPageSize = ref(
+      props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize ?? props.pagination.defaultPageSize ?? 10 : void 0
+    );
     const vnodeProps = getCurrentInstance()?.vnode.props ?? {};
     const hasSearchListener = Boolean(vnodeProps.onSearch || vnodeProps.onSearchChange);
     watch(
@@ -125,6 +127,14 @@ var DataTableWithToolbar = defineComponent({
         }
       }
     );
+    watch(
+      () => props.pagination,
+      (nextValue) => {
+        if (nextValue && typeof nextValue === "object") {
+          previousPageSize.value = nextValue.pageSize ?? nextValue.defaultPageSize ?? 10;
+        }
+      }
+    );
     watch(
       () => props.toolbar?.filters,
       (filters) => {
@@ -200,6 +210,16 @@ var DataTableWithToolbar = defineComponent({
       action.onClick?.(keys);
       emit("bulk-action", action, keys);
     };
+    const handleTablePageChange = ({
+      current,
+      pageSize
+    }) => {
+      emit("page-change", current, pageSize);
+      if (previousPageSize.value !== void 0 && previousPageSize.value !== pageSize) {
+        emit("page-size-change", current, pageSize);
+      }
+      previousPageSize.value = pageSize;
+    };
     const renderToolbar = () => {
       if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value) return null;
       const leftNodes = [];
@@ -289,7 +309,11 @@ var DataTableWithToolbar = defineComponent({
       }
       return h(
         "div",
-        { class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3" },
+        {
+          class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3",
+          role: "toolbar",
+          "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F"
+        },
         [
           h("div", { class: "flex items-center gap-2 flex-wrap flex-1 min-w-0" }, leftNodes),
           hasBulkActions.value ? h(
@@ -302,7 +326,6 @@ var DataTableWithToolbar = defineComponent({
     };
     return () => {
       const { class: _class, style: _style, ...restAttrs } = attrs;
-      const showPagination = props.pagination && typeof props.pagination === "object";
       const tableProps = {
         ...restAttrs,
         columns: props.columns,
@@ -318,14 +341,15 @@ var DataTableWithToolbar = defineComponent({
         hoverable: props.hoverable,
         loading: props.loading,
         emptyText: props.emptyText,
-        pagination: false,
+        pagination: props.pagination,
         rowSelection: props.rowSelection,
         rowKey: props.rowKey,
         rowClassName: props.rowClassName,
         stickyHeader: props.stickyHeader,
         maxHeight: props.maxHeight,
         tableLayout: props.tableLayout,
-        onSelectionChange: (keys) => emit("selection-change", keys)
+        onSelectionChange: (keys) => emit("selection-change", keys),
+        onPageChange: handleTablePageChange
       };
       return h(
         "div",
@@ -337,12 +361,7 @@ var DataTableWithToolbar = defineComponent({
         [
           renderToolbar(),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          h(Table, tableProps),
-          showPagination ? h(Pagination, {
-            ...props.pagination,
-            onChange: (current, pageSize) => emit("page-change", current, pageSize),
-            onPageSizeChange: (current, pageSize) => emit("page-size-change", current, pageSize)
-          }) : null
+          h(Table, tableProps)
         ]
       );
     };

package/dist/{chunk-PLGYRHPX.mjs → chunk-YQRRW4ZR.mjs}

@@ -1,4 +1,4 @@
-import { TaskBoard } from './chunk-J7VTGSHX.mjs';
+import { TaskBoard } from './chunk-G2IZAKJY.mjs';
 import { defineComponent, h } from 'vue';
 
 var Kanban = defineComponent({

package/dist/{chunk-W3Y22PMU.mjs → chunk-Z2ZECCGD.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, provide, h } from 'vue';
-import { classNames, buttonGroupBaseClasses, buttonGroupVerticalClasses, buttonGroupHorizontalClasses, buttonGroupItemVerticalClasses, buttonGroupItemClasses, coerceClassValue } from '@expcat/tigercat-core';
+import { getButtonGroupClasses, coerceClassValue } from '@expcat/tigercat-core';
 
 // src/components/ButtonGroup.ts
 var BUTTON_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerButtonGroup");
@@ -24,10 +24,8 @@ var ButtonGroup = defineComponent({
       }
     });
     return () => {
-      const classes = classNames(
-        buttonGroupBaseClasses,
-        props.vertical ? buttonGroupVerticalClasses : buttonGroupHorizontalClasses,
-        props.vertical ? buttonGroupItemVerticalClasses : buttonGroupItemClasses,
+      const classes = getButtonGroupClasses(
+        props.vertical,
         props.className,
         coerceClassValue(attrs.class)
       );

package/dist/{chunk-AGQNHT65.mjs → chunk-Z4SG7REU.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, h } from 'vue';
-import { classNames, stepperBaseClasses, coerceClassValue, getStepperButtonClasses, getStepperInputClasses, stepperIconViewBox, clampStepperValue, minusPathD, plusPathD } from '@expcat/tigercat-core';
+import { defineComponent, onBeforeUnmount, h } from 'vue';
+import { createRafRepeatActionController, classNames, stepperBaseClasses, coerceClassValue, getStepperButtonClasses, getStepperInputClasses, stepperIconViewBox, clampStepperValue, minusPathD, plusPathD } from '@expcat/tigercat-core';
 
 // src/components/Stepper.ts
 var Stepper = defineComponent({
@@ -15,18 +15,55 @@ var Stepper = defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
+    const repeatController = createRafRepeatActionController();
+    let repeatValue = props.modelValue;
+    let suppressNextClick = false;
+    onBeforeUnmount(() => repeatController.stop());
     function setValue(v) {
       const clamped = clampStepperValue(v, props.min, props.max, props.precision);
       emit("update:modelValue", clamped);
       emit("change", clamped);
+      return clamped;
+    }
+    function stepBy(direction, baseValue = props.modelValue) {
+      return setValue(direction === "up" ? baseValue + props.step : baseValue - props.step);
     }
     function decrement() {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
       if (props.disabled) return;
-      setValue(props.modelValue - props.step);
+      stepBy("down");
     }
     function increment() {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
       if (props.disabled) return;
-      setValue(props.modelValue + props.step);
+      stepBy("up");
+    }
+    function startStepRepeat(direction) {
+      return (event) => {
+        event.preventDefault();
+        if (props.disabled) return;
+        if (direction === "down" && props.modelValue <= props.min) return;
+        if (direction === "up" && props.modelValue >= props.max) return;
+        suppressNextClick = true;
+        repeatValue = props.modelValue;
+        repeatController.start(() => {
+          const baseValue = repeatValue;
+          const nextValue = stepBy(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) {
+            repeatController.stop();
+          }
+        });
+      };
+    }
+    function stopStepRepeat() {
+      repeatController.stop();
     }
     function handleInput(e) {
       const val = Number(e.target.value);
@@ -59,6 +96,10 @@ var Stepper = defineComponent({
               class: getStepperButtonClasses(props.size, props.disabled || atMin, "left"),
               disabled: props.disabled || atMin,
               "aria-label": "Decrease",
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
               onClick: decrement
             },
             [icon(minusPathD)]
@@ -78,6 +119,10 @@ var Stepper = defineComponent({
               class: getStepperButtonClasses(props.size, props.disabled || atMax, "right"),
               disabled: props.disabled || atMax,
               "aria-label": "Increase",
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
               onClick: increment
             },
             [icon(plusPathD)]

package/dist/{chunk-NMGH5YTV.mjs → chunk-Z7ETXBOL.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, h } from 'vue';
-import { splitTransferData, filterTransferItems, classNames, transferBaseClasses, coerceClassValue, transferOperationClasses, getTransferButtonClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, transferPanelBodyClasses, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD } from '@expcat/tigercat-core';
+import { splitTransferData, filterTransferItems, classNames, transferBaseClasses, coerceClassValue, transferOperationClasses, getTransferButtonClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, getPickerListboxAria, transferPanelBodyClasses, getPickerOptionAria, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD } from '@expcat/tigercat-core';
 
 // src/components/Transfer.ts
 function ArrowIcon(pathD) {
@@ -156,7 +156,10 @@ var Transfer = defineComponent({
         // Body
         h(
           "div",
-          { class: transferPanelBodyClasses, role: "listbox" },
+          {
+            class: transferPanelBodyClasses,
+            ...getPickerListboxAria({ label: `${title} items` })
+          },
           items.length > 0 ? items.map((item) => {
             const isSelected = selectedKeys.has(item.key);
             const isDisabled = props.disabled || !!item.disabled;
@@ -165,9 +168,7 @@ var Transfer = defineComponent({
               {
                 key: item.key,
                 class: getTransferItemClasses(isSelected, isDisabled, props.size),
-                role: "option",
-                "aria-selected": isSelected,
-                "aria-disabled": isDisabled
+                ...getPickerOptionAria({ selected: isSelected, disabled: isDisabled })
               },
               [
                 h("input", {

package/dist/{chunk-CQPHZU3H.mjs → chunk-ZIOGRGN5.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, h } from 'vue';
-import { classNames, getInfiniteScrollContainerClasses, coerceClassValue, infiniteScrollLoaderClasses, infiniteScrollEndClasses, shouldLoadMore } from '@expcat/tigercat-core';
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, h } from 'vue';
+import { classNames, getInfiniteScrollContainerClasses, coerceClassValue, infiniteScrollSentinelClasses, infiniteScrollLoaderClasses, infiniteScrollEndClasses, createInfiniteScrollObserver, shouldLoadMore } from '@expcat/tigercat-core';
 
 // src/components/InfiniteScroll.ts
 var InfiniteScroll = defineComponent({
@@ -22,12 +22,18 @@ var InfiniteScroll = defineComponent({
   emits: ["load-more"],
   setup(props, { emit, slots, attrs }) {
     const containerRef = ref(null);
+    const sentinelRef = ref(null);
+    let cleanupObserver = null;
     const containerClasses = computed(
       () => classNames(
         getInfiniteScrollContainerClasses(props.direction, props.className),
         coerceClassValue(attrs.class)
       )
     );
+    function handleLoadMore() {
+      if (props.disabled || props.loading || !props.hasMore) return;
+      emit("load-more");
+    }
     function checkScroll() {
       if (props.disabled || props.loading || !props.hasMore) return;
       const el = containerRef.value;
@@ -36,16 +42,43 @@ var InfiniteScroll = defineComponent({
         emit("load-more");
       }
     }
-    onMounted(() => {
-      containerRef.value?.addEventListener("scroll", checkScroll, {
-        passive: true
+    function setupObserver() {
+      cleanupObserver?.();
+      cleanupObserver = null;
+      if (props.disabled || !props.hasMore) return;
+      const sentinel = sentinelRef.value;
+      if (!sentinel) return;
+      const teardown = createInfiniteScrollObserver(sentinel, {
+        threshold: props.threshold,
+        direction: props.direction,
+        root: containerRef.value,
+        onLoadMore: handleLoadMore
       });
-    });
+      if (teardown) {
+        cleanupObserver = teardown;
+      } else {
+        containerRef.value?.addEventListener("scroll", checkScroll, { passive: true });
+        cleanupObserver = () => {
+          containerRef.value?.removeEventListener("scroll", checkScroll);
+        };
+      }
+    }
+    onMounted(setupObserver);
+    watch(
+      () => [props.hasMore, props.disabled, props.threshold, props.direction, props.inverse],
+      setupObserver
+    );
     onBeforeUnmount(() => {
-      containerRef.value?.removeEventListener("scroll", checkScroll);
+      cleanupObserver?.();
     });
     return () => {
       const content = slots.default?.();
+      const sentinel = props.hasMore ? h("div", {
+        ref: sentinelRef,
+        class: infiniteScrollSentinelClasses,
+        "aria-hidden": "true",
+        style: "height:0;overflow:hidden"
+      }) : null;
       const loader = props.loading ? h(
         "div",
         {
@@ -56,7 +89,7 @@ var InfiniteScroll = defineComponent({
         slots.loader?.() ?? props.loadingText
       ) : null;
       const end = !props.hasMore && !props.loading ? h("div", { class: infiniteScrollEndClasses }, slots.end?.() ?? props.endText) : null;
-      const children = props.inverse ? [loader, content, end] : [content, loader, end];
+      const children = props.inverse ? [sentinel, loader, content, end] : [content, sentinel, loader, end];
       return h(
         "div",
         {

package/dist/{chunk-I2B4CO22.mjs → chunk-ZMNX4SCS.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
-import { classNames, codeBlockContainerClasses, coerceClassValue, codeBlockCopyButtonBaseClasses, codeBlockCopyButtonCopiedClasses, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
+import { getCodeBlockContainerClasses, coerceClassValue, getCodeBlockCopyButtonClasses, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
 
 // src/components/Code.ts
 var Code = defineComponent({
@@ -37,17 +37,10 @@ var Code = defineComponent({
     const timerRef = ref(null);
     const containerClasses = computed(() => {
       const attrsRecord = attrs;
-      return classNames(
-        codeBlockContainerClasses,
-        props.className,
-        coerceClassValue(attrsRecord.class)
-      );
+      return getCodeBlockContainerClasses(props.className, coerceClassValue(attrsRecord.class));
     });
     const copyButtonClasses = computed(() => {
-      return classNames(
-        codeBlockCopyButtonBaseClasses,
-        isCopied.value && codeBlockCopyButtonCopiedClasses
-      );
+      return getCodeBlockCopyButtonClasses(isCopied.value);
     });
     const clearTimer = () => {
       if (timerRef.value != null) {

package/dist/{chunk-EPE6OOV7.js → chunk-ZOUJFFG4.js}

@@ -32,11 +32,11 @@ var ChartTooltip = vue.defineComponent({
     const adjustedPosition = vue.ref({ x: props.x, y: props.y });
     vue.watch(
       () => [props.x, props.y, props.visible],
-      () => {
+      (_value, _oldValue, onCleanup) => {
         if (!props.visible) return;
         let x = props.x + 12;
         let y = props.y - 8;
-        requestAnimationFrame(() => {
+        const frameHandle = requestAnimationFrame(() => {
           if (!tooltipRef.value) return;
           const rect = tooltipRef.value.getBoundingClientRect();
           const viewportWidth = window.innerWidth;
@@ -51,14 +51,15 @@ var ChartTooltip = vue.defineComponent({
           y = Math.max(8, y);
           adjustedPosition.value = { x, y };
         });
+        onCleanup(() => cancelAnimationFrame(frameHandle));
         adjustedPosition.value = { x, y };
       },
       { immediate: true }
     );
     const tooltipClasses = vue.computed(
       () => tigercatCore.classNames(
-        "fixed z-[9999] pointer-events-none",
-        "px-3 py-2 rounded-md shadow-lg",
+        "fixed left-0 top-0 z-[9999] pointer-events-none will-change-transform",
+        "px-3 py-2 rounded-[var(--tiger-radius-md,0.375rem)] shadow-[var(--tiger-shadow-glass,0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1))]",
         "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
         "text-[color:var(--tiger-text-inverse,#f9fafb)]",
         "text-sm whitespace-nowrap",
@@ -76,8 +77,7 @@ var ChartTooltip = vue.defineComponent({
             ref: tooltipRef,
             class: tooltipClasses.value,
             style: {
-              left: `${adjustedPosition.value.x}px`,
-              top: `${adjustedPosition.value.y}px`
+              transform: tigercatCore.getChartTooltipTransform(adjustedPosition.value)
             },
             role: "tooltip",
             "data-chart-tooltip": "true"

package/dist/{chunk-U5ABMOOV.js → chunk-ZSCOAOJJ.js}

@@ -151,22 +151,15 @@ var Cascader = vue.defineComponent({
       searchQuery.value = e.target.value;
     }
     function handleTriggerKeyDown(e) {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          toggleOpen();
-          break;
-        case "Escape":
-          e.preventDefault();
-          closeDropdown();
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-          }
-          break;
+      const action = tigercatCore.getPickerTriggerKeyAction(e.key, isOpen.value);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        toggleOpen();
+      } else if (action === "open") {
+        isOpen.value = true;
+      } else if (action === "close") {
+        closeDropdown();
       }
     }
     function handleDocumentClick(e) {
@@ -242,10 +235,7 @@ var Cascader = vue.defineComponent({
           type: "button",
           class: triggerClasses.value,
           disabled: props.disabled,
-          role: "combobox",
-          "aria-expanded": isOpen.value,
-          "aria-haspopup": "listbox",
-          "aria-controls": isOpen.value ? listboxId : void 0,
+          ...tigercatCore.getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
           onClick: toggleOpen,
           onKeydown: handleTriggerKeyDown
         },
@@ -285,7 +275,7 @@ var Cascader = vue.defineComponent({
           } else {
             const searchList = vue.h(
               "div",
-              { class: "max-h-64 overflow-auto", role: "listbox", id: listboxId },
+              { class: "max-h-64 overflow-auto", ...tigercatCore.getPickerListboxAria({ id: listboxId }) },
               searchResults.value.map(
                 (item) => vue.h(
                   "div",
@@ -294,9 +284,10 @@ var Cascader = vue.defineComponent({
                       tigercatCore.cascaderSearchResultClasses,
                       item.disabled && "opacity-50 cursor-not-allowed"
                     ),
-                    role: "option",
-                    "aria-selected": props.modelValue?.join(",") === item.valuePath.join(","),
-                    "aria-disabled": item.disabled,
+                    ...tigercatCore.getPickerOptionAria({
+                      selected: props.modelValue?.join(",") === item.valuePath.join(","),
+                      disabled: item.disabled
+                    }),
                     onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
                   },
                   item.label
@@ -311,9 +302,10 @@ var Cascader = vue.defineComponent({
               "div",
               {
                 class: tigercatCore.cascaderColumnClasses,
-                role: "listbox",
-                id: colIndex === 0 ? listboxId : void 0,
-                "aria-label": `Level ${colIndex + 1}`
+                ...tigercatCore.getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                })
               },
               col.options.map((option) => {
                 const isSelected = col.selectedValue === option.value;
@@ -322,9 +314,7 @@ var Cascader = vue.defineComponent({
                   "div",
                   {
                     class: tigercatCore.getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
-                    role: "option",
-                    "aria-selected": isSelected,
-                    "aria-disabled": option.disabled,
+                    ...tigercatCore.getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
                     onClick: () => handleOptionClick(option, colIndex),
                     onMouseenter: () => handleOptionHover(option, colIndex)
                   },