@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-RRLE7QRH.mjs → chunk-FZQAYEIU.mjs}

@@ -1,66 +1,64 @@
 import {
   TabPane,
   Tabs
-} from "./chunk-U6OGGZBY.mjs";
+} from "./chunk-B4RZHDOU.mjs";
 import {
   List
-} from "./chunk-GQOPDD44.mjs";
-import {
-  Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-66JX7T3H.mjs";
 import {
   Loading
-} from "./chunk-ZOP7PEKY.mjs";
+} from "./chunk-NWPALCKN.mjs";
 import {
   Text
-} from "./chunk-NN6AINLG.mjs";
+} from "./chunk-I77GUQV4.mjs";
 import {
   Card
-} from "./chunk-TC6ZPQFT.mjs";
+} from "./chunk-W4A6L2TC.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/NotificationCenter.ts
-import { defineComponent, computed, ref, watch, h } from "vue";
+import { defineComponent, computed, ref, watch, getCurrentInstance, h } from "vue";
 import {
   classNames,
   coerceClassValue,
   mergeStyleValues,
   buildNotificationGroups,
   formatActivityTime,
+  formatBadgeCountLabel,
+  shouldUseNotificationTabs,
   getNotificationCenterLabels,
   mergeTigerLocale,
-  resolveLocaleText
+  resolveLocaleText,
+  notificationCenterItemClasses,
+  notificationCenterUnreadItemClasses,
+  notificationCenterReadItemClasses,
+  notificationCenterReadTitleClasses,
+  notificationCenterUnreadTitleClasses,
+  notificationCenterUnreadDotClasses,
+  notificationCenterTimeClasses,
+  notificationCenterReadDescriptionClasses,
+  notificationCenterUnreadDescriptionClasses,
+  notificationCenterItemActionClasses,
+  notificationCenterEmptyIconWrapperClasses,
+  notificationCenterEmptyIconClasses,
+  notificationCenterEmptyTextClasses,
+  notificationCenterLoadingClasses,
+  notificationCenterCardClasses,
+  notificationCenterTitleClasses,
+  notificationCenterUnreadBadgeClasses,
+  notificationCenterMarkAllBaseClasses,
+  notificationCenterMarkAllEnabledClasses,
+  notificationCenterMarkAllDisabledClasses,
+  notificationCenterFilterGroupClasses,
+  notificationCenterFilterButtonClasses,
+  notificationCenterFilterActiveClasses,
+  notificationCenterFilterIdleClasses
 } from "@expcat/tigercat-core";
-
-// ../core/src/internal/notification-center-styles.ts
-var notificationCenterItemClasses = "tiger-motion-aware group relative flex items-start gap-3.5 w-full p-3.5 rounded-[var(--tiger-radius-lg,0.75rem)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterUnreadItemClasses = "bg-[var(--tiger-outline-bg-hover,#eff6ff)] border-l-[3px] border-l-[var(--tiger-primary,#2563eb)] -ml-[3px] pl-[calc(0.875rem-3px)]";
-var notificationCenterReadItemClasses = "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]";
-var notificationCenterReadTitleClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
-var notificationCenterUnreadTitleClasses = "text-[var(--tiger-text,#111827)]";
-var notificationCenterUnreadDotClasses = "tiger-motion-aware w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] shrink-0 shadow-sm animate-pulse";
-var notificationCenterTimeClasses = "text-[11px] text-[var(--tiger-text-muted,#6b7280)] font-medium whitespace-nowrap flex-shrink-0 self-center";
-var notificationCenterReadDescriptionClasses = "text-[var(--tiger-text-muted,#6b7280)]";
-var notificationCenterUnreadDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
-var notificationCenterItemActionClasses = "tiger-motion-aware opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--tiger-surface-muted,#f3f4f6)] hover:bg-[var(--tiger-fill-hover,#e5e7eb)] text-[var(--tiger-text-secondary,#374151)] border-0 flex-shrink-0 self-center [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterEmptyIconWrapperClasses = "p-3.5 bg-[var(--tiger-surface-muted,#f9fafb)] rounded-full mb-3 shadow-inner";
-var notificationCenterEmptyIconClasses = "tiger-motion-aware w-8 h-8 text-[var(--tiger-text-muted,#9ca3af)] animate-pulse";
-var notificationCenterEmptyTextClasses = "font-semibold text-[var(--tiger-text-muted,#6b7280)]";
-var notificationCenterLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
-var notificationCenterCardClasses = "tiger-motion-aware w-full rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-glass,0_8px_30px_rgb(0_0_0_/_0.04))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] overflow-hidden";
-var notificationCenterTitleClasses = "text-[var(--tiger-text,#111827)]";
-var notificationCenterUnreadBadgeClasses = "tiger-motion-aware inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white shadow-sm animate-pulse";
-var notificationCenterMarkAllBaseClasses = "tiger-motion-aware text-xs font-semibold transition-colors";
-var notificationCenterMarkAllEnabledClasses = "text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)]";
-var notificationCenterMarkAllDisabledClasses = "text-[var(--tiger-text-muted,#9ca3af)]";
-var notificationCenterFilterGroupClasses = "inline-flex items-center gap-0.5 p-0.5 rounded-[var(--tiger-radius-md,0.5rem)] bg-[var(--tiger-surface-muted,#f3f4f6)] self-start";
-var notificationCenterFilterButtonClasses = "tiger-motion-aware px-3.5 py-1 text-xs font-semibold rounded-[var(--tiger-radius-sm,0.375rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var notificationCenterFilterActiveClasses = "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text,#111827)] shadow-sm";
-var notificationCenterFilterIdleClasses = "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]";
-
-// src/components/NotificationCenter.ts
 var getGroupKey = (group, index) => {
   return group.key ?? group.title ?? index;
 };
@@ -171,11 +169,19 @@ var NotificationCenter = defineComponent({
     "item-read-change"
   ],
   setup(props, { emit, attrs }) {
+    const instance = getCurrentInstance();
+    const vnodeProps = () => instance?.vnode.props ?? {};
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getNotificationCenterLabels(mergedLocale.value, props.labels));
     const resolvedGroups = computed(
-      () => buildNotificationGroups(props.items, props.groups, props.groupBy, props.groupOrder)
+      () => buildNotificationGroups(
+        props.items,
+        props.groups,
+        props.groupBy,
+        props.groupOrder,
+        labels.value.defaultGroupTitle
+      )
     );
     const internalActiveGroupKey = ref(props.defaultActiveGroupKey);
     const internalReadFilter = ref(props.defaultReadFilter ?? "all");
@@ -214,9 +220,16 @@ var NotificationCenter = defineComponent({
       });
     };
     watch(
-      () => props.items,
+      () => [props.items, props.groups],
       () => {
-        if (props.manageReadState) readStateOverrides.value = /* @__PURE__ */ new Map();
+        if (!props.manageReadState || readStateOverrides.value.size === 0) return;
+        const source = (props.groups ?? []).flatMap((group) => group.items ?? []).concat(props.items ?? []);
+        const next = new Map(readStateOverrides.value);
+        for (const [id, read] of readStateOverrides.value) {
+          const item = source.find((entry) => entry.id === id);
+          if (!item || Boolean(item.read) === read) next.delete(id);
+        }
+        readStateOverrides.value = next;
       }
     );
     const effectiveGroups = computed(
@@ -225,17 +238,6 @@ var NotificationCenter = defineComponent({
         items: applyReadOverrides(group.items)
       }))
     );
-    const effectiveCurrentGroup = computed(() => {
-      const groups = effectiveGroups.value;
-      if (groups.length === 0) return void 0;
-      const activeKey = currentGroupKey.value;
-      if (activeKey === void 0) return groups[0];
-      const matchedIndex = groups.findIndex(
-        (group, index) => getGroupKey(group, index) === activeKey
-      );
-      return matchedIndex >= 0 ? groups[matchedIndex] : groups[0];
-    });
-    const effectiveCurrentGroupItems = computed(() => effectiveCurrentGroup.value?.items ?? []);
     const effectiveItems = computed(() => applyReadOverrides(props.items));
     const totalUnread = computed(() => {
       const allItems = effectiveGroups.value.flatMap((group) => group.items);
@@ -251,7 +253,11 @@ var NotificationCenter = defineComponent({
         return true;
       });
     };
-    const hasUnread = computed(() => effectiveCurrentGroupItems.value.some((item) => !item.read));
+    const allManagedItems = computed(() => {
+      const grouped = effectiveGroups.value.flatMap((group) => group.items);
+      return grouped.length > 0 ? grouped : effectiveItems.value;
+    });
+    const hasUnread = computed(() => allManagedItems.value.some((item) => !item.read));
     const groupTabData = computed(
       () => resolvedGroups.value.map((group, index) => {
         const effectiveGroup = effectiveGroups.value.find(
@@ -292,13 +298,13 @@ var NotificationCenter = defineComponent({
       emit("read-filter-change", filter);
     };
     const handleMarkAllRead = () => {
-      const items = effectiveCurrentGroupItems.value;
+      const items = allManagedItems.value;
       if (props.manageReadState) {
         const next = new Map(readStateOverrides.value);
         items.forEach((item) => next.set(item.id, true));
         readStateOverrides.value = next;
       }
-      emit("mark-all-read", currentGroupKey.value, items);
+      emit("mark-all-read", void 0, items);
     };
     const handleItemClick = (item, index) => {
       emit("item-click", item, index);
@@ -320,13 +326,17 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: notificationCenterFilterGroupClasses
+          class: notificationCenterFilterGroupClasses,
+          role: "radiogroup"
         },
         options.map(
           (option) => h(
             "button",
             {
               key: option.key,
+              type: "button",
+              role: "radio",
+              "aria-checked": currentReadFilter.value === option.key,
               class: classNames(
                 notificationCenterFilterButtonClasses,
                 currentReadFilter.value === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses
@@ -340,7 +350,7 @@ var NotificationCenter = defineComponent({
     };
     const renderListItem = (item, _index) => {
       const isRead = Boolean(item.read);
-      const timeText = item.time ? formatActivityTime(item.time) : "";
+      const timeText = formatActivityTime(item.time, mergedLocale.value);
       return h(
         "div",
         {
@@ -364,7 +374,8 @@ var NotificationCenter = defineComponent({
                   { default: () => item.title }
                 ),
                 !isRead ? h("span", {
-                  class: notificationCenterUnreadDotClasses
+                  class: notificationCenterUnreadDotClasses,
+                  "aria-hidden": "true"
                 }) : null
               ]),
               timeText ? h(
@@ -452,11 +463,11 @@ var NotificationCenter = defineComponent({
         List,
         {
           dataSource: items,
+          rowKey: "id",
           split: true,
-          bordered: "divided",
-          hoverable: true,
+          hoverable: typeof vnodeProps().onItemClick === "function",
           emptyText: resolveLocaleText(labels.value.emptyText, props.emptyText),
-          onItemClick: handleItemClick
+          onItemClick: typeof vnodeProps().onItemClick === "function" ? handleItemClick : void 0
         },
         {
           renderItem: ({ item, index }) => renderListItem(item, index)
@@ -468,6 +479,7 @@ var NotificationCenter = defineComponent({
       {
         type: "line",
         size: "small",
+        swipeable: false,
         activeKey: currentGroupKey.value,
         onChange: handleGroupChange
       },
@@ -508,7 +520,12 @@ var NotificationCenter = defineComponent({
             totalUnread.value > 0 ? h(
               "span",
               {
-                class: notificationCenterUnreadBadgeClasses
+                class: notificationCenterUnreadBadgeClasses,
+                "aria-label": formatBadgeCountLabel(
+                  labels.value.unreadCountText,
+                  totalUnread.value,
+                  mergedLocale.value?.locale
+                )
               },
               String(totalUnread.value)
             ) : null
@@ -532,13 +549,29 @@ var NotificationCenter = defineComponent({
         ]),
         renderReadFilterButtons()
       ]);
-      const content = props.loading ? h("div", { class: "flex items-center justify-center py-16" }, [
+      const listBody = shouldUseNotificationTabs(props.groups, props.groupBy) ? resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [renderList([])]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
+        renderList(filteredFlatItems.value)
+      ]);
+      const hasList = shouldUseNotificationTabs(props.groups, props.groupBy) ? resolvedGroups.value.length > 0 || filteredFlatItems.value.length > 0 : filteredFlatItems.value.length > 0;
+      const content = props.loading && !hasList ? h("div", { class: "flex items-center justify-center py-16" }, [
         h(Loading, {
           text: resolveLocaleText(labels.value.loadingText, props.loadingText),
           class: notificationCenterLoadingClasses
         })
-      ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
-        renderList(filteredFlatItems.value)
+      ]) : h("div", { class: "relative", "aria-busy": props.loading ? "true" : void 0 }, [
+        listBody,
+        props.loading ? h(
+          "div",
+          {
+            class: "absolute inset-0 flex items-center justify-center bg-[var(--tiger-surface,#ffffff)]/70"
+          },
+          [
+            h(Loading, {
+              text: resolveLocaleText(labels.value.loadingText, props.loadingText),
+              class: notificationCenterLoadingClasses
+            })
+          ]
+        ) : null
       ]);
       const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : resolveLocaleText(labels.value.title, props.title));
       return h(
@@ -548,6 +581,7 @@ var NotificationCenter = defineComponent({
           class: wrapperClasses.value,
           style: wrapperStyle.value,
           role: attrs.role ?? "region",
+          "aria-busy": props.loading ? "true" : void 0,
           "aria-label": ariaLabel,
           "data-tiger-notification-center": true
         },

package/dist/{chunk-6GR3XC5V.mjs → chunk-G6R2CQRS.mjs}

@@ -1,18 +1,24 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/ScrollArea.ts
 import {
+  computed,
   defineComponent,
   h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   ref,
   shallowRef,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
   watch
 } from "vue";
 import {
+  applyScrollAreaWheel,
   classNames,
   coerceClassValue,
-  mergeStyleValues,
+  computeScrollAreaKeyboardDelta,
   computeScrollAreaState,
   computeScrollFromThumbOffset,
   computeScrollFromTrackPoint,
@@ -20,14 +26,23 @@ import {
   createEmptyScrollAreaState,
   getScrollAreaBoxStyle,
   getScrollAreaContentClasses,
+  getScrollAreaGutterStyle,
+  getScrollAreaLabels,
   getScrollAreaScrollbarClasses,
+  getScrollAreaScrollbarPlacementStyle,
   getScrollAreaShadowClasses,
   getScrollAreaShadowSides,
+  getScrollAreaShadowStyle,
   getScrollAreaThumbClasses,
   getScrollAreaThumbStyle,
   getScrollAreaViewportClasses,
+  mergeTigerLocale,
   observeScrollAreaSize,
+  physicalInlineScrollFromLogical,
+  readInlineDirection,
   readScrollAreaMetrics,
+  resolveScrollAreaViewportTabIndex,
+  scrollAreaHasFocusable,
   scrollAreaRootClasses,
   shouldRenderScrollAreaScrollbar,
   SCROLL_AREA_MIN_THUMB_SIZE
@@ -56,7 +71,8 @@ var ScrollArea = defineComponent({
     maxWidth: { type: [Number, String], default: void 0 },
     ariaLabel: { type: String, default: void 0 },
     className: { type: String, default: void 0 },
-    viewportClassName: { type: String, default: void 0 }
+    viewportClassName: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
   },
   emits: ["scroll"],
   setup(props, { slots, emit, attrs, expose }) {
@@ -64,50 +80,61 @@ var ScrollArea = defineComponent({
     const contentRef = ref(null);
     const scrollState = shallowRef(createEmptyScrollAreaState());
     const draggingAxis = ref(null);
+    const scrolling = ref(false);
     let dragSession = null;
     let stopObserving = null;
+    let scrollTimer = 0;
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getScrollAreaLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     function syncState() {
       const viewport = viewportRef.value;
       if (!viewport) return;
       scrollState.value = computeScrollAreaState(
         readScrollAreaMetrics(viewport),
-        props.minThumbSize
+        props.minThumbSize,
+        readInlineDirection(viewport)
       );
     }
     function handleScroll() {
       const viewport = viewportRef.value;
       if (!viewport) return;
       syncState();
+      scrolling.value = true;
+      window.clearTimeout(scrollTimer);
+      scrollTimer = window.setTimeout(() => {
+        scrolling.value = false;
+      }, 600);
       emit("scroll", {
         scrollTop: viewport.scrollTop,
         scrollLeft: viewport.scrollLeft,
         state: scrollState.value
       });
     }
-    function applyScroll(axis, position) {
+    function applyScroll(axis, logical) {
       const viewport = viewportRef.value;
       if (!viewport) return;
-      if (axis === "y") viewport.scrollTop = position;
-      else viewport.scrollLeft = position;
+      if (axis === "y") viewport.scrollTop = logical;
+      else {
+        viewport.scrollLeft = physicalInlineScrollFromLogical(
+          logical,
+          viewport.scrollWidth,
+          viewport.clientWidth,
+          readInlineDirection(viewport),
+          viewport.scrollLeft
+        );
+      }
       handleScroll();
     }
-    function trackSizeOf(axis) {
-      const viewport = viewportRef.value;
-      if (!viewport) return 0;
-      return axis === "y" ? viewport.clientHeight : viewport.clientWidth;
-    }
-    function scrollSizeOf(axis) {
-      const viewport = viewportRef.value;
-      if (!viewport) return 0;
-      return axis === "y" ? viewport.scrollHeight : viewport.scrollWidth;
-    }
     function startThumbDrag(axis, event) {
       const viewport = viewportRef.value;
-      if (!viewport) return;
+      if (!viewport || event.button !== 0) return;
       event.preventDefault();
       event.stopPropagation();
       const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
       const startOffset = axisState.thumbOffset;
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
       const startPoint = axis === "y" ? event.clientY : event.clientX;
       dragSession?.dispose();
       draggingAxis.value = axis;
@@ -115,16 +142,20 @@ var ScrollArea = defineComponent({
         startX: event.clientX,
         startY: event.clientY,
         ownerDocument: viewport.ownerDocument,
+        pointerId: event.pointerId,
+        pointerTarget: event.currentTarget instanceof Element ? event.currentTarget : null,
+        lockAxis: axis,
         onMove: ({ currentX, currentY }) => {
           const current = axis === "y" ? currentY : currentX;
-          const trackSize = trackSizeOf(axis);
+          const delta = rtl ? startPoint - current : current - startPoint;
+          const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
           applyScroll(
             axis,
             computeScrollFromThumbOffset(
-              startOffset + (current - startPoint),
+              startOffset + delta,
               trackSize,
               axisState.thumbSize,
-              scrollSizeOf(axis),
+              axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
               trackSize
             )
           );
@@ -135,24 +166,27 @@ var ScrollArea = defineComponent({
         }
       });
     }
-    function handleTrackMouseDown(axis, event) {
+    function handleTrackPointerDown(axis, event) {
       const target = event.target;
       if (target?.dataset.scrollAreaThumb) {
         startThumbDrag(axis, event);
         return;
       }
+      const viewport = viewportRef.value;
+      if (!viewport) return;
       const track = event.currentTarget;
       const rect = track.getBoundingClientRect();
-      const point = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
+      const point = axis === "y" ? event.clientY - rect.top : rtl ? rect.right - event.clientX : event.clientX - rect.left;
       const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
-      const trackSize = trackSizeOf(axis);
+      const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
       applyScroll(
         axis,
         computeScrollFromTrackPoint(
           point,
           trackSize,
           axisState.thumbSize,
-          scrollSizeOf(axis),
+          axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
           trackSize
         )
       );
@@ -169,23 +203,14 @@ var ScrollArea = defineComponent({
       }
       handleScroll();
     }
-    function scrollToTop(behavior) {
-      scrollTo({ top: 0, behavior });
-    }
-    function scrollToBottom(behavior) {
-      const viewport = viewportRef.value;
-      if (!viewport) return;
-      scrollTo({ top: viewport.scrollHeight, behavior });
-    }
     onMounted(() => {
       syncState();
       stopObserving = observeScrollAreaSize([viewportRef.value, contentRef.value], syncState);
     });
     onBeforeUnmount(() => {
       dragSession?.dispose();
-      dragSession = null;
       stopObserving?.();
-      stopObserving = null;
+      window.clearTimeout(scrollTimer);
     });
     watch(
       () => [props.direction, props.minThumbSize],
@@ -195,8 +220,8 @@ var ScrollArea = defineComponent({
     );
     expose({
       scrollTo,
-      scrollToTop,
-      scrollToBottom,
+      scrollToTop: (behavior) => scrollTo({ top: 0, behavior }),
+      scrollToBottom: (behavior) => scrollTo({ top: viewportRef.value?.scrollHeight ?? 0, behavior }),
       getViewport: () => viewportRef.value,
       getState: () => scrollState.value
     });
@@ -205,14 +230,33 @@ var ScrollArea = defineComponent({
       if (!shouldRenderScrollAreaScrollbar(props.scrollbar, props.direction, axis, axisState)) {
         return null;
       }
+      const otherVisible = axis === "y" ? shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "x",
+        scrollState.value.x
+      ) : shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "y",
+        scrollState.value.y
+      );
       return h(
         "div",
         {
           key: `scrollbar-${axis}`,
           class: getScrollAreaScrollbarClasses(axis, props.scrollbarSize, props.scrollbar),
+          style: getScrollAreaScrollbarPlacementStyle(axis, props.scrollbarSize, otherVisible),
           "data-scroll-area-scrollbar": axis,
+          "data-dragging": draggingAxis.value === axis ? "" : void 0,
           "aria-hidden": "true",
-          onMousedown: (event) => handleTrackMouseDown(axis, event)
+          onPointerdown: (event) => handleTrackPointerDown(axis, event),
+          onWheel: (event) => {
+            const viewport = viewportRef.value;
+            if (!viewport) return;
+            applyScrollAreaWheel(event, viewport);
+            handleScroll();
+          }
         },
         [
           h("div", {
@@ -224,14 +268,50 @@ var ScrollArea = defineComponent({
       );
     }
     return () => {
+      const visibleY = shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "y",
+        scrollState.value.y
+      );
+      const visibleX = shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "x",
+        scrollState.value.x
+      );
+      const overflow = visibleY && scrollState.value.y.scrollable || visibleX && scrollState.value.x.scrollable;
+      const userTabIndex = typeof attrs.tabindex === "number" ? attrs.tabindex : typeof attrs.tabIndex === "number" ? attrs.tabIndex : void 0;
+      const tabIndex = resolveScrollAreaViewportTabIndex({
+        overflow,
+        hasFocusable: scrollAreaHasFocusable(contentRef.value),
+        userTabIndex
+      });
+      const labelledBy = attrs["aria-labelledby"] || void 0;
+      const attrLabel = attrs["aria-label"] || props.ariaLabel;
+      const viewportName = attrLabel || labelledBy || (tabIndex === 0 ? labels.value.ariaLabel : void 0);
+      const {
+        class: attrClass,
+        style: attrStyle,
+        tabindex: _t,
+        tabIndex: _t2,
+        ...rootAttrs
+      } = attrs;
       const shadows = props.shadow ? getScrollAreaShadowSides(scrollState.value, props.direction) : [];
+      const restRoot = {};
+      const restA11y = {};
+      for (const [key, value] of Object.entries(rootAttrs)) {
+        if (key.startsWith("aria-")) restA11y[key] = value;
+        else restRoot[key] = value;
+      }
       return h(
         "div",
         {
-          ...attrs,
-          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrs.class)),
-          style: mergeStyleValues(attrs.style),
-          "data-scroll-area": ""
+          ...restRoot,
+          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrClass)),
+          style: attrStyle,
+          "data-scroll-area": "",
+          "data-scrolling": scrolling.value ? "" : void 0
         },
         [
           h(
@@ -239,12 +319,40 @@ var ScrollArea = defineComponent({
             {
               ref: viewportRef,
               class: getScrollAreaViewportClasses(props.direction, props.viewportClassName),
-              style: getScrollAreaBoxStyle(props),
-              tabindex: 0,
-              role: props.ariaLabel ? "region" : void 0,
-              "aria-label": props.ariaLabel,
+              style: {
+                ...getScrollAreaBoxStyle(props),
+                ...getScrollAreaGutterStyle(props.scrollbarSize, visibleX, visibleY)
+              },
+              tabindex: tabIndex,
+              role: viewportName ? "region" : void 0,
+              "aria-label": attrLabel || (tabIndex === 0 ? labels.value.ariaLabel : void 0),
+              "aria-labelledby": labelledBy,
               "data-scroll-area-viewport": "",
-              onScroll: handleScroll
+              onScroll: handleScroll,
+              onKeydown: (event) => {
+                const viewport = viewportRef.value;
+                if (!viewport) return;
+                const delta = computeScrollAreaKeyboardDelta(
+                  event.key,
+                  props.direction,
+                  { width: viewport.clientWidth, height: viewport.clientHeight },
+                  readInlineDirection(viewport)
+                );
+                if (!delta) return;
+                event.preventDefault();
+                if ("to" in delta) {
+                  applyScroll(
+                    delta.axis,
+                    delta.to === "start" ? 0 : delta.axis === "y" ? viewport.scrollHeight : viewport.scrollWidth
+                  );
+                  return;
+                }
+                if (delta.axis === "y") applyScroll("y", viewport.scrollTop + delta.delta);
+                else {
+                  const logical = scrollState.value.x.progress * Math.max(viewport.scrollWidth - viewport.clientWidth, 0) + delta.delta;
+                  applyScroll("x", logical);
+                }
+              }
             },
             [
               h(
@@ -262,6 +370,7 @@ var ScrollArea = defineComponent({
             (side) => h("div", {
               key: `shadow-${side}`,
               class: getScrollAreaShadowClasses(side),
+              style: getScrollAreaShadowStyle(side),
               "data-scroll-area-shadow": side,
               "aria-hidden": "true"
             })