@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-DU2NXX75.mjs → chunk-N4GS2LSN.mjs}

@@ -1,5 +1,5 @@
-import { ref, computed } from 'vue';
-import { classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { ref, onScopeDispose, computed } from 'vue';
+import { createChartPointerMoveScheduler, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
 
 // src/composables/useChartInteraction.ts
 function unref(value) {
@@ -10,6 +10,12 @@ function useChartInteraction(options) {
   const localHoveredIndex = ref(null);
   const localSelectedIndex = ref(null);
   const tooltipPosition = ref({ x: 0, y: 0 });
+  const tooltipScheduler = createChartPointerMoveScheduler({
+    onPositionChange: (position) => {
+      tooltipPosition.value = position;
+    }
+  });
+  onScopeDispose(() => tooltipScheduler.cancel());
   const resolvedHoveredIndex = computed(() => {
     const prop = options.hoveredIndexProp?.();
     return prop !== void 0 ? prop : localHoveredIndex.value;
@@ -43,9 +49,10 @@ function useChartInteraction(options) {
     }
   };
   const handleMouseMove = (event) => {
-    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
   };
   const handleMouseLeave = () => {
+    tooltipScheduler.cancel();
     if (!unref(options.hoverable)) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;

package/dist/{chunk-LAAPLTP3.js → chunk-NCFY3VXA.js}

@@ -51,7 +51,7 @@ var Switch = vue.defineComponent({
   },
   setup(props, { emit, attrs }) {
     const switchClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.getSwitchClasses(props.size, props.checked, props.disabled), props.className)
+      () => tigercatCore.getSwitchClasses(props.size, props.checked, props.disabled, props.className, attrs.class)
     );
     const thumbClasses = vue.computed(() => tigercatCore.getSwitchThumbClasses(props.size, props.checked));
     const emitChange = () => {
@@ -75,7 +75,7 @@ var Switch = vue.defineComponent({
         role: "switch",
         "aria-checked": props.checked,
         "aria-disabled": props.disabled ? "true" : void 0,
-        class: [switchClasses.value, attrs.class],
+        class: switchClasses.value,
         style: props.style,
         disabled: props.disabled,
         tabindex: props.disabled ? -1 : attrs.tabindex,

package/dist/{chunk-TW64ZNZY.mjs → chunk-NG7TLPQQ.mjs}

@@ -1,8 +1,9 @@
+import { VirtualList } from './chunk-GWNXDOIG.mjs';
 import { Input } from './chunk-2WJADO6O.mjs';
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
+import { Button } from './chunk-UM5GGKIX.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';
-import { defineComponent, ref, watch, computed, h } from 'vue';
+import { defineComponent, ref, watch, computed, onMounted, onUpdated, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';
 
 var ChatWindow = defineComponent({
@@ -91,6 +92,22 @@ var ChatWindow = defineComponent({
       type: Boolean,
       default: true
     },
+    virtual: {
+      type: Boolean,
+      default: false
+    },
+    virtualItemHeight: {
+      type: Number,
+      default: 88
+    },
+    virtualHeight: {
+      type: Number,
+      default: 400
+    },
+    autoScrollToBottom: {
+      type: Boolean,
+      default: true
+    },
     className: {
       type: String
     },
@@ -116,7 +133,7 @@ var ChatWindow = defineComponent({
     );
     const wrapperClasses = computed(
       () => classNames(
-        "tiger-chat-window flex flex-col w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
+        "tiger-chat-window flex flex-col w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)]",
         props.className,
         coerceClassValue(attrs.class)
       )
@@ -154,6 +171,28 @@ var ChatWindow = defineComponent({
       event.preventDefault();
       handleSend();
     };
+    const messageListRef = ref(null);
+    const virtualWrapperRef = ref(null);
+    const scrollToBottom = () => {
+      if (!props.autoScrollToBottom) return;
+      requestAnimationFrame(() => {
+        if (props.virtual) {
+          const wrapper = virtualWrapperRef.value;
+          const scroller = wrapper?.firstElementChild ?? wrapper;
+          if (scroller) {
+            scroller.scrollTop = scroller.scrollHeight;
+          }
+        } else if (messageListRef.value) {
+          messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+        }
+      });
+    };
+    onMounted(scrollToBottom);
+    onUpdated(scrollToBottom);
+    watch(
+      () => props.messages.length,
+      () => scrollToBottom()
+    );
     const renderMessageItem = (message, index) => {
       const isSelf = message.direction === "self";
       const statusInfo = message.status ? getChatMessageStatusInfo(message.status) : void 0;
@@ -192,7 +231,7 @@ var ChatWindow = defineComponent({
               "div",
               {
                 class: classNames(
-                  "rounded-lg px-3 py-2 text-sm break-words",
+                  "rounded-[var(--tiger-radius-md,0.5rem)] px-3 py-2 text-sm break-words",
                   isSelf ? "bg-[var(--tiger-primary,#2563eb)] text-white rounded-tr-none" : "bg-[var(--tiger-surface-muted,#f3f4f6)] text-[var(--tiger-text,#111827)] rounded-tl-none"
                 ),
                 "data-tiger-chat-bubble": ""
@@ -234,9 +273,32 @@ var ChatWindow = defineComponent({
         "data-tiger-chat-window": ""
       },
       [
-        h(
+        props.virtual && props.messages.length > 0 ? h(
+          "div",
+          {
+            ref: virtualWrapperRef,
+            role: "log",
+            "aria-live": "polite",
+            "aria-relevant": "additions text",
+            "aria-label": props.messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868"
+          },
+          [
+            h(
+              VirtualList,
+              {
+                itemCount: props.messages.length,
+                itemHeight: props.virtualItemHeight,
+                height: props.virtualHeight
+              },
+              {
+                default: ({ index }) => renderMessageItem(props.messages[index], index)
+              }
+            )
+          ]
+        ) : h(
           "div",
           {
+            ref: messageListRef,
             class: "flex-1 overflow-auto p-4 space-y-3",
             role: "log",
             "aria-live": "polite",

package/dist/{chunk-THEYWGOT.js → chunk-NJLNZ73T.js}

@@ -1,10 +1,10 @@
 '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 chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -123,7 +123,7 @@ var PieChart = vue.defineComponent({
     },
     borderColor: {
       type: String,
-      default: "#ffffff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     hoverOffset: {
       type: Number,
@@ -136,6 +136,10 @@ var PieChart = vue.defineComponent({
     shadow: {
       type: Boolean,
       default: false
+    },
+    gradient: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
@@ -153,7 +157,7 @@ var PieChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -182,6 +186,7 @@ var PieChart = vue.defineComponent({
       })
     );
     const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const gradientPrefix = tigercatCore.getPieGradientPrefix();
     const legendItems = vue.computed(
       () => tigercatCore.buildChartLegendItems({
         data: props.data,
@@ -214,7 +219,7 @@ var PieChart = vue.defineComponent({
       const hoverOff = props.hoverOffset ?? 8;
       const formatLabel = props.labelFormatter ?? ((value, datum) => datum.label ?? `${value}`);
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -225,6 +230,36 @@ var PieChart = vue.defineComponent({
         },
         {
           default: () => {
+            const gradientDefs = props.gradient ? vue.h(
+              "defs",
+              null,
+              arcs.value.map((arc) => {
+                const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
+                return vue.h(
+                  "linearGradient",
+                  {
+                    key: `pie-grad-${arc.index}`,
+                    id: `${gradientPrefix}-${arc.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": color,
+                      "stop-opacity": "1"
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                );
+              })
+            ) : null;
             const slices = vue.h(
               chunkHBFFINAI_js.ChartSeries,
               { data: props.data, type: "pie" },
@@ -248,7 +283,7 @@ var PieChart = vue.defineComponent({
                   return vue.h("path", {
                     key: `slice-${arc.index}`,
                     d: path,
-                    fill: color,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
                     opacity,
                     stroke: props.borderColor,
                     "stroke-width": props.borderWidth,
@@ -257,7 +292,7 @@ var PieChart = vue.defineComponent({
                     style: {
                       transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
                       transformOrigin: `${cx}px ${cy}px`,
-                      transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
+                      transition: "transform var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-spring,cubic-bezier(0.4,0,0.2,1)), opacity 0.2s ease-out, filter 0.3s ease-out",
                       filter: props.shadow ? isEmphasized ? tigercatCore.PIE_EMPHASIS_SHADOW : tigercatCore.PIE_BASE_SHADOW : void 0
                     },
                     tabindex: props.selectable ? 0 : void 0,
@@ -274,7 +309,7 @@ var PieChart = vue.defineComponent({
                 })
               }
             );
-            if (!props.showLabels) return [slices];
+            if (!props.showLabels) return [gradientDefs, slices];
             if (props.labelPosition === "outside") {
               const labelNodes = arcs.value.map((arc) => {
                 const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
@@ -304,7 +339,7 @@ var PieChart = vue.defineComponent({
                   )
                 ];
               }).flat();
-              return [slices, ...labelNodes];
+              return [gradientDefs, slices, ...labelNodes];
             }
             const labelRadius = innerR + (outerR - innerR) / 2;
             const insideLabels = arcs.value.map((arc) => {
@@ -324,11 +359,11 @@ var PieChart = vue.defineComponent({
                 label
               );
             });
-            return [slices, ...insideLabels];
+            return [gradientDefs, slices, ...insideLabels];
           }
         }
       );
-      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,
@@ -339,7 +374,7 @@ var PieChart = 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-WLKOJFOC.mjs → chunk-NNNG6NIA.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
-import { classNames, coerceClassValue, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses, extractMentionQuery } from '@expcat/tigercat-core';
+import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, h } from 'vue';
+import { positionMentionsDropdown, classNames, coerceClassValue, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses, extractMentionQuery } from '@expcat/tigercat-core';
 
 // src/components/Mentions.ts
 var Mentions = defineComponent({
@@ -20,6 +20,7 @@ var Mentions = defineComponent({
     const mentionStartPos = ref(-1);
     const query = ref("");
     const textareaRef = ref(null);
+    const dropdownRef = ref(null);
     const containerRef = ref(null);
     const filteredOptions = computed(() => {
       if (!query.value) return props.options || [];
@@ -78,6 +79,16 @@ var Mentions = defineComponent({
       if (val) document.addEventListener("mousedown", onClickOutside);
       else document.removeEventListener("mousedown", onClickOutside);
     });
+    watch(
+      [isOpen, filteredOptions],
+      async () => {
+        if (!isOpen.value || filteredOptions.value.length === 0) return;
+        await nextTick();
+        if (!textareaRef.value || !dropdownRef.value) return;
+        await positionMentionsDropdown(textareaRef.value, dropdownRef.value);
+      },
+      { flush: "post" }
+    );
     onBeforeUnmount(() => {
       document.removeEventListener("mousedown", onClickOutside);
     });
@@ -96,7 +107,7 @@ var Mentions = defineComponent({
         }),
         isOpen.value && filteredOptions.value.length > 0 ? h(
           "div",
-          { class: mentionsDropdownClasses, role: "listbox" },
+          { ref: dropdownRef, class: mentionsDropdownClasses, role: "listbox" },
           filteredOptions.value.map(
             (opt, i) => h(
               "div",

package/dist/{chunk-5NOZXKMU.js → chunk-O3JPGBAK.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');
@@ -116,7 +116,7 @@ var ScatterChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -204,7 +204,7 @@ var ScatterChart = vue.defineComponent({
       ) : null;
       const animStyle = props.animated && mounted.value ? vue.h("style", null, tigercatCore.SCATTER_ENTRANCE_KEYFRAMES) : null;
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -300,7 +300,7 @@ var ScatterChart = 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,
@@ -311,7 +311,7 @@ var ScatterChart = 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-LGVPLGK3.mjs → chunk-OCL22D5E.mjs}

@@ -1,5 +1,5 @@
 import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
-import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, coerceClassValue, icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, cascaderSearchResultClasses, cascaderColumnClasses, isCascaderOptionExpandable, getCascaderOptionClasses, cascaderDropdownClasses, cascaderBaseClasses } from '@expcat/tigercat-core';
+import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, coerceClassValue, icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, getPickerComboboxAria, cascaderSearchInputClasses, cascaderEmptyStateClasses, getPickerListboxAria, getPickerOptionAria, cascaderSearchResultClasses, cascaderColumnClasses, isCascaderOptionExpandable, getCascaderOptionClasses, cascaderDropdownClasses, cascaderBaseClasses, getPickerTriggerKeyAction } from '@expcat/tigercat-core';
 
 // src/components/Cascader.ts
 var cascaderInstanceId = 0;
@@ -149,22 +149,15 @@ var Cascader = 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 = 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) {
@@ -240,10 +233,7 @@ var Cascader = 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,
+          ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
           onClick: toggleOpen,
           onKeydown: handleTriggerKeyDown
         },
@@ -283,7 +273,7 @@ var Cascader = defineComponent({
           } else {
             const searchList = h(
               "div",
-              { class: "max-h-64 overflow-auto", role: "listbox", id: listboxId },
+              { class: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }) },
               searchResults.value.map(
                 (item) => h(
                   "div",
@@ -292,9 +282,10 @@ var Cascader = defineComponent({
                       cascaderSearchResultClasses,
                       item.disabled && "opacity-50 cursor-not-allowed"
                     ),
-                    role: "option",
-                    "aria-selected": props.modelValue?.join(",") === item.valuePath.join(","),
-                    "aria-disabled": item.disabled,
+                    ...getPickerOptionAria({
+                      selected: props.modelValue?.join(",") === item.valuePath.join(","),
+                      disabled: item.disabled
+                    }),
                     onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
                   },
                   item.label
@@ -309,9 +300,10 @@ var Cascader = defineComponent({
               "div",
               {
                 class: cascaderColumnClasses,
-                role: "listbox",
-                id: colIndex === 0 ? listboxId : void 0,
-                "aria-label": `Level ${colIndex + 1}`
+                ...getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                })
               },
               col.options.map((option) => {
                 const isSelected = col.selectedValue === option.value;
@@ -320,9 +312,7 @@ var Cascader = defineComponent({
                   "div",
                   {
                     class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
-                    role: "option",
-                    "aria-selected": isSelected,
-                    "aria-disabled": option.disabled,
+                    ...getPickerOptionAria({ selected: isSelected, disabled: !!option.disabled }),
                     onClick: () => handleOptionClick(option, colIndex),
                     onMouseenter: () => handleOptionHover(option, colIndex)
                   },

package/dist/{chunk-GHPSCR6M.js → chunk-ODQOYMUQ.js}

@@ -25,9 +25,8 @@ var AvatarGroup = vue.defineComponent({
   setup(props, { slots, attrs }) {
     vue.provide(AVATAR_GROUP_INJECTION_KEY, {
       size: props.size,
-      itemClass: tigercatCore.avatarGroupItemClasses
+      itemClass: tigercatCore.getAvatarGroupItemClasses()
     });
-    const overflowSizeClass = vue.computed(() => tigercatCore.avatarSizeClasses[props.size ?? "md"]);
     return () => {
       const children = slots.default?.() ?? [];
       const flatChildren = children.flatMap(
@@ -35,27 +34,24 @@ var AvatarGroup = vue.defineComponent({
       );
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
-      const total = flatChildren.length;
-      const visibleCount = props.max != null && props.max < total ? props.max : total;
-      const overflow = total - visibleCount;
-      const visible = flatChildren.slice(0, visibleCount);
+      const { visibleItems, overflowCount } = tigercatCore.getVisibleGroupItems(flatChildren, props.max);
       return vue.h(
         "div",
         {
           ...attrs,
-          class: tigercatCore.classNames(tigercatCore.avatarGroupBaseClasses, props.className, tigercatCore.coerceClassValue(attrsClass)),
+          class: tigercatCore.getAvatarGroupClasses(props.className, tigercatCore.coerceClassValue(attrsClass)),
           role: "group",
           "aria-label": "Avatar group"
         },
         [
-          ...visible,
-          overflow > 0 ? vue.h(
+          ...visibleItems,
+          overflowCount > 0 ? vue.h(
             "span",
             {
-              class: tigercatCore.classNames(tigercatCore.avatarGroupOverflowClasses, overflowSizeClass.value),
-              "aria-label": `${overflow} more`
+              class: tigercatCore.getAvatarGroupOverflowClasses(props.size ?? "md"),
+              "aria-label": tigercatCore.getAvatarGroupOverflowLabel(overflowCount)
             },
-            `+${overflow}`
+            tigercatCore.getAvatarGroupOverflowText(overflowCount)
           ) : null
         ]
       );

package/dist/{chunk-FXGIIFGN.mjs → chunk-OK4PVFQG.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, watch, computed, h, Teleport } from 'vue';
-import { classNames } from '@expcat/tigercat-core';
+import { classNames, getChartTooltipTransform } from '@expcat/tigercat-core';
 
 // src/components/ChartTooltip.ts
 var ChartTooltip = defineComponent({
@@ -30,11 +30,11 @@ var ChartTooltip = defineComponent({
     const adjustedPosition = ref({ x: props.x, y: props.y });
     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;
@@ -49,14 +49,15 @@ var ChartTooltip = defineComponent({
           y = Math.max(8, y);
           adjustedPosition.value = { x, y };
         });
+        onCleanup(() => cancelAnimationFrame(frameHandle));
         adjustedPosition.value = { x, y };
       },
       { immediate: true }
     );
     const tooltipClasses = computed(
       () => 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",
@@ -74,8 +75,7 @@ var ChartTooltip = defineComponent({
             ref: tooltipRef,
             class: tooltipClasses.value,
             style: {
-              left: `${adjustedPosition.value.x}px`,
-              top: `${adjustedPosition.value.y}px`
+              transform: getChartTooltipTransform(adjustedPosition.value)
             },
             role: "tooltip",
             "data-chart-tooltip": "true"