@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-5AXCKK6Z.js → chunk-OKSLWGXR.js}

@@ -1,8 +1,9 @@
 'use strict';
 
+var chunkEHBPMUT2_js = require('./chunk-EHBPMUT2.js');
 var chunkBYNMOQBB_js = require('./chunk-BYNMOQBB.js');
 var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -93,6 +94,22 @@ var ChatWindow = vue.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
     },
@@ -118,7 +135,7 @@ var ChatWindow = vue.defineComponent({
     );
     const wrapperClasses = vue.computed(
       () => tigercatCore.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,
         tigercatCore.coerceClassValue(attrs.class)
       )
@@ -156,6 +173,28 @@ var ChatWindow = vue.defineComponent({
       event.preventDefault();
       handleSend();
     };
+    const messageListRef = vue.ref(null);
+    const virtualWrapperRef = vue.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;
+        }
+      });
+    };
+    vue.onMounted(scrollToBottom);
+    vue.onUpdated(scrollToBottom);
+    vue.watch(
+      () => props.messages.length,
+      () => scrollToBottom()
+    );
     const renderMessageItem = (message, index) => {
       const isSelf = message.direction === "self";
       const statusInfo = message.status ? tigercatCore.getChatMessageStatusInfo(message.status) : void 0;
@@ -194,7 +233,7 @@ var ChatWindow = vue.defineComponent({
               "div",
               {
                 class: tigercatCore.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": ""
@@ -236,9 +275,32 @@ var ChatWindow = vue.defineComponent({
         "data-tiger-chat-window": ""
       },
       [
-        vue.h(
+        props.virtual && props.messages.length > 0 ? vue.h(
+          "div",
+          {
+            ref: virtualWrapperRef,
+            role: "log",
+            "aria-live": "polite",
+            "aria-relevant": "additions text",
+            "aria-label": props.messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868"
+          },
+          [
+            vue.h(
+              chunkEHBPMUT2_js.VirtualList,
+              {
+                itemCount: props.messages.length,
+                itemHeight: props.virtualItemHeight,
+                height: props.virtualHeight
+              },
+              {
+                default: ({ index }) => renderMessageItem(props.messages[index], index)
+              }
+            )
+          ]
+        ) : vue.h(
           "div",
           {
+            ref: messageListRef,
             class: "flex-1 overflow-auto p-4 space-y-3",
             role: "log",
             "aria-live": "polite",
@@ -270,7 +332,7 @@ var ChatWindow = vue.defineComponent({
           [
             vue.h("div", { class: "flex-1" }, [renderInput()]),
             vue.h(
-              chunkU7CCKZAG_js.Button,
+              chunk5436FG3B_js.Button,
               {
                 disabled: !canSend.value,
                 onClick: handleSend,

package/dist/{chunk-W5A4E4C7.js → chunk-OMVVPNU7.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');
@@ -174,7 +174,7 @@ var AreaChart = vue.defineComponent({
     },
     gradient: {
       type: Boolean,
-      default: false
+      default: true
     },
     animated: {
       type: Boolean,
@@ -184,6 +184,14 @@ var AreaChart = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     tooltipFormatter: {
       type: Function
     },
@@ -228,7 +236,7 @@ var AreaChart = vue.defineComponent({
       handleLegendHover: _handleLegendHover,
       handleLegendLeave: _handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -272,9 +280,13 @@ var AreaChart = vue.defineComponent({
     const shouldShowXAxis = vue.computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = vue.computed(() => props.showAxis && props.showYAxis);
     const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const seriesKeys = vue.computed(
+      () => tigercatCore.buildChartSeriesKeys(resolvedSeries.value, { prefix: "area-" })
+    );
     const seriesData = vue.computed(() => {
       const stackedData = props.stacked ? tigercatCore.stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null;
       return resolvedSeries.value.map((series, seriesIndex) => {
+        const seriesKey = seriesKeys.value[seriesIndex];
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
         const fillColor = series.fillColor ?? color;
         const seriesFillOpacity = series.fillOpacity ?? props.fillOpacity;
@@ -315,6 +327,7 @@ var AreaChart = vue.defineComponent({
         return {
           series,
           seriesIndex,
+          seriesKey,
           color,
           fillColor,
           fillOpacity: seriesFillOpacity,
@@ -383,7 +396,7 @@ var AreaChart = vue.defineComponent({
     return () => {
       const reversedSeriesData = [...seriesData.value].reverse();
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -395,7 +408,7 @@ var AreaChart = vue.defineComponent({
         {
           default: () => [
             // Gradient defs and animation styles
-            props.gradient || props.animated ? vue.h("defs", null, [
+            props.gradient || props.animated || props.strokeGradient || props.pointGradient ? vue.h("defs", null, [
               // Animation keyframes
               props.animated ? vue.h(
                 "style",
@@ -415,8 +428,8 @@ var AreaChart = vue.defineComponent({
                 (sd) => vue.h(
                   "linearGradient",
                   {
-                    key: `area-grad-${sd.seriesIndex}`,
-                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    key: `area-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-${sd.seriesKey}`,
                     x1: "0",
                     y1: "0",
                     x2: "0",
@@ -435,6 +448,61 @@ var AreaChart = vue.defineComponent({
                     })
                   ]
                 )
+              ) : [],
+              // Point fill radial gradients (bright center → series color edge)
+              ...props.pointGradient ? reversedSeriesData.map(
+                (sd) => vue.h(
+                  "radialGradient",
+                  {
+                    key: `point-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-point-${sd.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 30%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "70%",
+                      "stop-color": sd.color
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                    })
+                  ]
+                )
+              ) : [],
+              // Stroke gradients (3-stop horizontal brightness ramp)
+              ...props.strokeGradient ? reversedSeriesData.map(
+                (sd) => vue.h(
+                  "linearGradient",
+                  {
+                    key: `stroke-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 12%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "50%",
+                      "stop-color": sd.color
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 8%)`
+                    })
+                  ]
+                )
               ) : []
             ]) : null,
             props.showGrid ? vue.h(chunk57MJTNDL_js.ChartGrid, {
@@ -470,11 +538,12 @@ var AreaChart = vue.defineComponent({
               (sd) => vue.h(
                 chunkHBFFINAI_js.ChartSeries,
                 {
-                  key: `series-${sd.seriesIndex}`,
+                  key: sd.seriesKey,
                   data: sd.series.data,
                   name: sd.series.name,
                   type: "area",
                   opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey,
                   class: tigercatCore.classNames(
                     sd.series.className,
                     (props.hoverable || props.selectable) && "cursor-pointer",
@@ -491,17 +560,18 @@ var AreaChart = vue.defineComponent({
                     // Area fill
                     vue.h("path", {
                       d: sd.areaPath,
-                      fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                       "fill-opacity": props.gradient ? 1 : sd.fillOpacity,
                       stroke: "none",
                       class: "transition-opacity duration-300",
-                      "data-area-series": sd.seriesIndex
+                      "data-area-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }),
                     // Line stroke
                     vue.h("path", {
                       d: sd.linePath,
                       fill: "none",
-                      stroke: sd.color,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                       "stroke-width": sd.strokeWidth,
                       "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                       "stroke-dashoffset": props.animated ? "1" : void 0,
@@ -521,21 +591,26 @@ var AreaChart = vue.defineComponent({
             ...seriesData.value.filter((sd) => sd.showPoints).map(
               (sd) => vue.h(
                 "g",
-                { key: `points-${sd.seriesIndex}`, opacity: sd.opacity },
+                {
+                  key: `points-${sd.seriesKey}`,
+                  opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey
+                },
                 sd.points.map((point) => {
                   const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                   const hoverSize = sd.pointSize + 2;
                   return vue.h("circle", {
-                    key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                    key: `point-${sd.seriesKey}-${point.pointIndex}`,
                     cx: point.x,
                     cy: point.y,
                     r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     "stroke-width": sd.pointHollow ? 2 : 0,
-                    class: "transition-all duration-200 ease-out",
+                    class: tigercatCore.linePointTransitionClasses,
                     style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                     "data-point-index": point.pointIndex,
+                    "data-series-key": sd.seriesKey,
                     onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                     onMousemove: handlePointMouseMove,
                     onMouseleave: handlePointMouseLeave,
@@ -550,7 +625,7 @@ var AreaChart = vue.defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: hoveredPointInfo.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -561,7 +636,7 @@ var AreaChart = 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-M6PEW6V5.mjs → chunk-OSOA7LWH.mjs}

@@ -1,6 +1,7 @@
-import { Button } from './chunk-M7JUNLA7.mjs';
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
-import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
+import { Button } from './chunk-UM5GGKIX.mjs';
+import { useVueBodyScrollLock, useVueFocusTrap, useVueEscapeKey, renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h } from 'vue';
+import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses, shouldCloseOnMaskClick } from '@expcat/tigercat-core';
 
 var modalIdCounter = 0;
 var createModalId = () => `tiger-modal-${++modalIdCounter}`;
@@ -197,29 +198,19 @@ var Modal = defineComponent({
       emit("update:open", false);
     };
     const handleMaskClick = (event) => {
-      if (props.maskClosable && event.target === event.currentTarget) {
+      if (shouldCloseOnMaskClick(event, props.maskClosable)) {
         handleClose();
       }
     };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && props.open) {
-        handleClose();
-        return;
-      }
-      if (event.key === "Tab" && props.open && dialogRef.value) {
-        const focusables = getFocusableElements(dialogRef.value);
-        const result = getFocusTrapNavigation(event, focusables, document.activeElement);
-        if (result.shouldHandle && result.next) {
-          event.preventDefault();
-          result.next.focus();
-        }
-      }
-    };
+    const overlayOpen = computed(() => props.open);
+    let cleanupEscape;
+    useVueBodyScrollLock(overlayOpen);
+    useVueFocusTrap({ enabled: overlayOpen, containerRef: dialogRef });
     onMounted(() => {
-      document.addEventListener("keydown", handleKeyDown);
+      cleanupEscape = useVueEscapeKey({ enabled: overlayOpen, onEscape: handleClose });
     });
     onBeforeUnmount(() => {
-      document.removeEventListener("keydown", handleKeyDown);
+      cleanupEscape?.();
     });
     watch(
       () => props.open,
@@ -385,7 +376,7 @@ var Modal = defineComponent({
           )
         ]
       );
-      return h(Teleport, { to: "body", disabled: props.disableTeleport }, [renderedWrapper]);
+      return renderVueBodyTeleport([renderedWrapper], props.disableTeleport);
     };
   }
 });

package/dist/{chunk-PBWSBNDS.js → chunk-OZYJ3U4H.js}

@@ -194,27 +194,9 @@ var Select = vue.defineComponent({
       }
       return props.modelValue === option.value;
     }
-    const findFirstEnabledIndex = () => flatFilteredOptions.value.findIndex((opt) => !opt.disabled);
-    const findLastEnabledIndex = () => {
-      for (let i = flatFilteredOptions.value.length - 1; i >= 0; i--) {
-        if (!flatFilteredOptions.value[i]?.disabled) {
-          return i;
-        }
-      }
-      return -1;
-    };
-    const findNextEnabledIndex = (current, direction) => {
-      if (flatFilteredOptions.value.length === 0) {
-        return -1;
-      }
-      const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.value.length - 1 : current + direction;
-      for (let i = start; i >= 0 && i < flatFilteredOptions.value.length; i += direction) {
-        if (!flatFilteredOptions.value[i]?.disabled) {
-          return i;
-        }
-      }
-      return current;
-    };
+    const findFirstEnabledIndex = () => tigercatCore.findFirstEnabledIndex(flatFilteredOptions.value);
+    const findLastEnabledIndex = () => tigercatCore.findLastEnabledIndex(flatFilteredOptions.value);
+    const findNextEnabledIndex = (current, direction) => tigercatCore.findNextEnabledIndex(flatFilteredOptions.value, current, direction);
     const focusOptionAt = (index) => {
       if (index < 0) {
         return;

package/dist/{chunk-LLU76X6I.js → chunk-P4XGEFV3.js}

@@ -2,7 +2,7 @@
 
 var chunk27T3QDSF_js = require('./chunk-27T3QDSF.js');
 var chunkZED7TU62_js = require('./chunk-ZED7TU62.js');
-var chunkDN5GU5PC_js = require('./chunk-DN5GU5PC.js');
+var chunk2LNNB55E_js = require('./chunk-2LNNB55E.js');
 var chunk2KDSHEZT_js = require('./chunk-2KDSHEZT.js');
 var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
 var chunkXGXGAK27_js = require('./chunk-XGXGAK27.js');
@@ -111,19 +111,19 @@ var ActivityFeed = vue.defineComponent({
       return vue.h(
         "div",
         {
-          class: "tiger-activity-item"
+          class: tigercatCore.activityItemClasses
         },
         [
-          vue.h("div", { class: "flex gap-3 items-start" }, [
+          vue.h("div", { class: tigercatCore.activityItemLayoutClasses }, [
             props.showAvatar && item.user ? vue.h(chunkWPIDP6IG_js.Avatar, {
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
               className: "shrink-0"
             }) : null,
-            vue.h("div", { class: "flex-1 min-w-0" }, [
-              vue.h("div", { class: "flex items-center justify-between gap-2 mb-1" }, [
-                vue.h("div", { class: "flex items-center gap-2 min-w-0" }, [
+            vue.h("div", { class: tigercatCore.activityItemBodyClasses }, [
+              vue.h("div", { class: tigercatCore.activityItemHeaderClasses }, [
+                vue.h("div", { class: tigercatCore.activityItemTitleGroupClasses }, [
                   titleText ? vue.h(
                     chunkDUQ7Q2GO_js.Text,
                     { tag: "div", size: "sm", weight: "medium", class: "truncate" },
@@ -152,24 +152,34 @@ var ActivityFeed = vue.defineComponent({
               ]),
               descriptionText ? vue.h(
                 chunkDUQ7Q2GO_js.Text,
-                { tag: "div", size: "sm", color: "muted", class: "mb-2 break-words" },
+                { tag: "div", size: "sm", color: "muted", class: tigercatCore.activityItemDescriptionClasses },
                 { default: () => descriptionText }
               ) : null,
-              actionNodes?.length ? vue.h("div", { class: "flex flex-wrap gap-2" }, actionNodes) : null
+              actionNodes?.length ? vue.h("div", { class: tigercatCore.activityItemActionsClasses }, actionNodes) : null
             ])
           ])
         ]
       );
     };
+    const feedRole = vue.computed(() => attrs.role ?? "feed");
+    const feedAriaLabel = vue.computed(
+      () => attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : "\u52A8\u6001")
+    );
+    const feedAriaBusy = vue.computed(
+      () => attrs["aria-busy"] ?? (props.loading ? "true" : void 0)
+    );
     return () => {
       if (props.loading) {
-        const loadingNode = slots.loading ? slots.loading() : vue.h(chunkDN5GU5PC_js.Loading, { text: props.loadingText });
+        const loadingNode = slots.loading ? slots.loading() : vue.h(chunk2LNNB55E_js.Loading, { text: props.loadingText });
         return vue.h(
           "div",
           {
             ...attrs,
             class: wrapperClasses.value,
             style: wrapperStyle.value,
+            role: feedRole.value,
+            "aria-label": feedAriaLabel.value,
+            "aria-busy": feedAriaBusy.value,
             "data-tiger-activity-feed": true
           },
           [
@@ -191,6 +201,8 @@ var ActivityFeed = vue.defineComponent({
             ...attrs,
             class: wrapperClasses.value,
             style: wrapperStyle.value,
+            role: feedRole.value,
+            "aria-label": feedAriaLabel.value,
             "data-tiger-activity-feed": true
           },
           [
@@ -210,6 +222,8 @@ var ActivityFeed = vue.defineComponent({
           ...attrs,
           class: wrapperClasses.value,
           style: wrapperStyle.value,
+          role: feedRole.value,
+          "aria-label": feedAriaLabel.value,
           "data-tiger-activity-feed": true
         },
         resolvedGroups.value.map((group, groupIndex) => {

package/dist/{chunk-4Y2SJZB5.js → chunk-P7RXZVLT.js}

@@ -89,9 +89,10 @@ var AutoComplete = vue.defineComponent({
     function openDropdown() {
       if (props.disabled) return;
       isOpen.value = true;
-      if (props.defaultActiveFirstOption && filteredOptions.value.length > 0) {
-        activeIndex.value = 0;
-      }
+      activeIndex.value = tigercatCore.getInitialPickerActiveIndex(
+        filteredOptions.value,
+        props.defaultActiveFirstOption
+      );
     }
     function closeDropdown() {
       isOpen.value = false;
@@ -105,7 +106,7 @@ var AutoComplete = vue.defineComponent({
       emit("change", val);
       if (!isOpen.value) openDropdown();
       if (props.defaultActiveFirstOption) {
-        activeIndex.value = filteredOptions.value.length > 0 ? 0 : -1;
+        activeIndex.value = tigercatCore.getInitialPickerActiveIndex(filteredOptions.value, true);
       }
     }
     function handleSelect(option) {
@@ -134,20 +135,11 @@ var AutoComplete = vue.defineComponent({
       const options = filteredOptions.value;
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault();
-          if (options.length > 0) {
-            let next = activeIndex.value + 1;
-            while (next < options.length && options[next].disabled) next++;
-            if (next < options.length) activeIndex.value = next;
-          }
-          break;
         case "ArrowUp":
+        case "Home":
+        case "End":
           e.preventDefault();
-          if (options.length > 0) {
-            let prev = activeIndex.value - 1;
-            while (prev >= 0 && options[prev].disabled) prev--;
-            if (prev >= 0) activeIndex.value = prev;
-          }
+          activeIndex.value = tigercatCore.getPickerNavigationIndex(options, activeIndex.value, e.key);
           break;
         case "Enter":
           e.preventDefault();
@@ -194,11 +186,11 @@ var AutoComplete = vue.defineComponent({
             value: inputValue.value,
             placeholder: props.placeholder,
             disabled: props.disabled,
-            role: "combobox",
-            "aria-expanded": String(isOpen.value),
-            "aria-haspopup": "listbox",
-            "aria-controls": isOpen.value ? listboxId : void 0,
-            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : void 0,
+            ...tigercatCore.getPickerComboboxAria({
+              expanded: isOpen.value,
+              listboxId,
+              activeIndex: activeIndex.value
+            }),
             autocomplete: "off",
             onInput: handleInput,
             onFocus: openDropdown,
@@ -219,18 +211,18 @@ var AutoComplete = vue.defineComponent({
           isOpen.value && options.length > 0 ? vue.h(
             "div",
             {
-              id: listboxId,
-              role: "listbox",
+              ...tigercatCore.getPickerListboxAria({ id: listboxId }),
               class: tigercatCore.autoCompleteDropdownClasses
             },
             options.map(
               (option, index) => vue.h(
                 "div",
                 {
-                  id: `${listboxId}-option-${index}`,
-                  role: "option",
-                  "aria-selected": String(option.value) === String(props.modelValue),
-                  "aria-disabled": option.disabled,
+                  id: tigercatCore.getPickerOptionId(listboxId, index),
+                  ...tigercatCore.getPickerOptionAria({
+                    selected: String(option.value) === String(props.modelValue),
+                    disabled: !!option.disabled
+                  }),
                   class: tigercatCore.getAutoCompleteOptionClasses(
                     String(option.value) === String(props.modelValue),
                     !!option.disabled,