@expcat/tigercat-vue 1.4.0 → 1.5.0

package/dist/{chunk-EIH6ABOR.js → chunk-2FYVPPTD.js}

@@ -1,5 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
+
+
+
+var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
+
+
 var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
 
 
@@ -33,6 +39,9 @@ var _vue = require('vue');
 
 
 
+
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var Tour = _vue.defineComponent.call(void 0, {
   name: "TigerTour",
@@ -66,14 +75,12 @@ var Tour = _vue.defineComponent.call(void 0, {
   setup(props, { emit }) {
     const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
-    const nextLabel = _vue.computed.call(void 0, 
-      () => _tigercatcore.resolveLocaleText.call(void 0, "Next", props.nextText, _optionalChain([mergedLocale, 'access', _ => _.value, 'optionalAccess', _2 => _2.formWizard, 'optionalAccess', _3 => _3.nextText]))
-    );
-    const prevLabel = _vue.computed.call(void 0, 
-      () => _tigercatcore.resolveLocaleText.call(void 0, "Previous", props.prevText, _optionalChain([mergedLocale, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.formWizard, 'optionalAccess', _6 => _6.prevText]))
-    );
-    const finishLabel = _vue.computed.call(void 0, 
-      () => _tigercatcore.resolveLocaleText.call(void 0, "Finish", props.finishText, _optionalChain([mergedLocale, 'access', _7 => _7.value, 'optionalAccess', _8 => _8.formWizard, 'optionalAccess', _9 => _9.finishText]))
+    const labels = _vue.computed.call(void 0, 
+      () => _tigercatcore.getTourLabels.call(void 0, mergedLocale.value, {
+        nextText: props.nextText,
+        prevText: props.prevText,
+        finishText: props.finishText
+      })
     );
     const internalStep = _vue.ref.call(void 0, 0);
     const resolvedSteps = _vue.ref.call(void 0, props.steps);
@@ -83,13 +90,16 @@ var Tour = _vue.defineComponent.call(void 0, {
       () => _tigercatcore.getCurrentActiveTourStep.call(void 0, activeSteps.value, currentStep.value, resolvedSteps.value.length)
     );
     const activeStepPosition = _vue.computed.call(void 0, 
-      () => _tigercatcore.getActiveTourStepPosition.call(void 0, activeSteps.value, _optionalChain([activeStepInfo, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.index]))
+      () => _tigercatcore.getActiveTourStepPosition.call(void 0, activeSteps.value, _optionalChain([activeStepInfo, 'access', _ => _.value, 'optionalAccess', _2 => _2.index]))
     );
-    const step = _vue.computed.call(void 0, () => _optionalChain([activeStepInfo, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.step]));
+    const step = _vue.computed.call(void 0, () => _optionalChain([activeStepInfo, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.step]));
     const targetRect = _vue.ref.call(void 0, );
     const popoverRef = _vue.ref.call(void 0, null);
+    const closeButtonRef = _vue.ref.call(void 0, null);
+    const openRef = _vue.computed.call(void 0, () => props.open);
+    let previousActiveElement = null;
     const updateRect = () => {
-      if (_optionalChain([step, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.target])) {
+      if (_optionalChain([step, 'access', _5 => _5.value, 'optionalAccess', _6 => _6.target])) {
         targetRect.value = _tigercatcore.getTourTargetRect.call(void 0, step.value.target);
       } else {
         targetRect.value = void 0;
@@ -164,6 +174,24 @@ var Tour = _vue.defineComponent.call(void 0, {
       emit("close");
       emit("update:open", false);
     };
+    const detachEscape = _chunkEQW6IUHGjs.useVueEscapeKey.call(void 0, { enabled: openRef, onEscape: close });
+    _vue.onBeforeUnmount.call(void 0, detachEscape);
+    _chunkEQW6IUHGjs.useVueBodyScrollLock.call(void 0, openRef);
+    _chunkEQW6IUHGjs.useVueFocusTrap.call(void 0, { enabled: openRef, containerRef: popoverRef });
+    _vue.watch.call(void 0, 
+      openRef,
+      (open) => {
+        if (open) {
+          previousActiveElement = _tigercatcore.captureActiveElement.call(void 0, );
+          _vue.nextTick.call(void 0, () => {
+            _tigercatcore.focusFirst.call(void 0, [closeButtonRef.value, popoverRef.value]);
+          });
+        } else {
+          _tigercatcore.restoreFocus.call(void 0, previousActiveElement);
+        }
+      },
+      { immediate: true }
+    );
     return () => {
       if (!props.open || !step.value) return null;
       const placement = _nullishCoalesce(step.value.placement, () => ( "bottom"));
@@ -209,9 +237,10 @@ var Tour = _vue.defineComponent.call(void 0, {
           _vue.h.call(void 0, 
             "button",
             {
+              ref: closeButtonRef,
               class: _tigercatcore.tourCloseButtonClasses,
               type: "button",
-              "aria-label": "Close tour",
+              "aria-label": labels.value.closeAriaLabel,
               onClick: close
             },
             _chunkJCMGBKS6js.createStatusIcon.call(void 0, _tigercatcore.closeIconPathD, "h-4 w-4")
@@ -244,7 +273,7 @@ var Tour = _vue.defineComponent.call(void 0, {
               class: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
               onClick: prev
             },
-            prevLabel.value
+            labels.value.prevText
           )
         );
       }
@@ -256,7 +285,7 @@ var Tour = _vue.defineComponent.call(void 0, {
             class: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
             onClick: next
           },
-          isLast ? finishLabel.value : nextLabel.value
+          isLast ? labels.value.finishText : labels.value.nextText
         )
       );
       footerChildren.push(_vue.h.call(void 0, "div", { class: "flex items-center" }, buttons));
@@ -274,7 +303,7 @@ var Tour = _vue.defineComponent.call(void 0, {
           popoverChildren
         )
       );
-      return _vue.h.call(void 0, _vue.Teleport, { to: "body" }, children);
+      return _chunkEQW6IUHGjs.renderVueBodyTeleport.call(void 0, children);
     };
   }
 });

package/dist/{chunk-KY6AJRGT.mjs → chunk-2HRJGOAV.mjs}

@@ -1,6 +1,6 @@
 import {
   Timeline
-} from "./chunk-DOJPPVAN.mjs";
+} from "./chunk-RTZUIWCN.mjs";
 import {
   Loading
 } from "./chunk-6WF3336O.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-3MO7A4GU.mjs";
 import {
   Tag
-} from "./chunk-G6ULKE6H.mjs";
+} from "./chunk-KRWKO2JQ.mjs";
 import {
   Text
 } from "./chunk-NN6AINLG.mjs";
@@ -18,7 +18,7 @@ import {
 } from "./chunk-TC6ZPQFT.mjs";
 import {
   Avatar
-} from "./chunk-ZCT56WB7.mjs";
+} from "./chunk-XZYFVOOS.mjs";
 
 // src/components/ActivityFeed.ts
 import { defineComponent, computed, h } from "vue";
@@ -171,7 +171,7 @@ var ActivityFeed = defineComponent({
                     {
                       variant: item.status.variant ?? "default",
                       size: "sm",
-                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10 shadow-sm"
+                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-current/10 shadow-sm"
                     },
                     { default: () => item.status?.label }
                   ) : null

package/dist/{chunk-MKBIVETW.mjs → chunk-2OI6GWOT.mjs}

@@ -1,5 +1,19 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-VIIGYWUY.mjs";
+
 // src/components/Textarea.ts
-import { defineComponent, computed, ref, watch, onMounted, nextTick, h } from "vue";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  h,
+  inject,
+  getCurrentInstance
+} from "vue";
 import {
   autoResizeTextarea,
   classNames,
@@ -147,6 +161,12 @@ var Textarea = defineComponent({
     blur: null
   },
   setup(props, { emit, attrs }) {
+    const instance = getCurrentInstance();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const effectiveSize = computed(() => {
+      const hasOwnSize = Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "size");
+      return hasOwnSize ? props.size : inputGroup?.size ?? props.size;
+    });
     const textareaRef = ref(null);
     const localValue = ref(props.modelValue ?? "");
     watch(
@@ -161,7 +181,7 @@ var Textarea = defineComponent({
     const textareaClasses = computed(
       () => classNames(
         "block",
-        getInputClasses({ size: props.size }),
+        getInputClasses({ size: effectiveSize.value }),
         props.autoResize ? "resize-none" : "resize-y",
         props.className,
         coerceClassValue(attrs.class)

package/dist/{chunk-NCT5FXQB.js → chunk-2RCBEBBR.js}

@@ -19,6 +19,9 @@ var _vue = require('vue');
 
 
 
+
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
 var StepsItem = _vue.defineComponent.call(void 0, {
@@ -159,14 +162,14 @@ var StepsItem = _vue.defineComponent.call(void 0, {
               class: "w-4 h-4 shrink-0 transition-transform duration-300 animate-fade-in",
               fill: "none",
               stroke: "currentColor",
-              "stroke-width": "3",
-              viewBox: "0 0 24 24"
+              "stroke-width": _tigercatcore.stepFinishIconStrokeWidth,
+              viewBox: _tigercatcore.stepFinishIconViewBox
             },
             [
               _vue.h.call(void 0, "path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
-                d: "M4.5 12.75l6 6 9-13.5"
+                d: _tigercatcore.stepFinishIconPathD
               })
             ]
           )

package/dist/{chunk-6K4UE5MK.mjs → chunk-2YPPXZ4I.mjs}

@@ -24,8 +24,13 @@ import {
   taskBoardWipExceededClasses,
   taskBoardAddCardClasses,
   kanbanCardCountClasses,
+  kanbanSwimlaneClasses,
+  kanbanSwimlaneHeaderClasses,
+  kanbanSwimlaneDotClasses,
+  kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
   filterColumns,
+  groupBySwimlane,
   getColumnCardCount,
   moveCard,
   reorderColumns,
@@ -77,6 +82,14 @@ var TaskBoard = defineComponent({
     showCardCount: { type: Boolean, default: false },
     allowAddCard: { type: Boolean, default: false },
     allowAddColumn: { type: Boolean, default: false },
+    swimlanes: {
+      type: Array,
+      default: void 0
+    },
+    swimlaneField: {
+      type: String,
+      default: void 0
+    },
     locale: {
       type: Object,
       default: void 0
@@ -296,14 +309,55 @@ var TaskBoard = defineComponent({
         },
         headerContent
       );
-      const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
+      const renderCardNode = (card, originalIndex) => {
         const nodes = [];
-        if (isDropTarget && dragSnap.value.dropIndex === i) {
-          nodes.push(h("div", { key: `drop-${i}`, class: taskBoardDropIndicatorClasses }));
+        if (isDropTarget && dragSnap.value.dropIndex === originalIndex) {
+          nodes.push(
+            h("div", { key: `drop-${originalIndex}`, class: taskBoardDropIndicatorClasses })
+          );
         }
         nodes.push(renderCard(card, column));
         return nodes;
-      }).concat(
+      };
+      const cards = column.cards.length > 0 ? (props.swimlanes && props.swimlaneField ? groupBySwimlane(column.cards, props.swimlanes, props.swimlaneField).map(
+        (group) => h(
+          "div",
+          {
+            key: String(group.swimlane.id),
+            class: kanbanSwimlaneClasses,
+            "data-tiger-kanban-swimlane": "",
+            "data-tiger-kanban-swimlane-id": String(group.swimlane.id)
+          },
+          [
+            h("div", { class: kanbanSwimlaneHeaderClasses }, [
+              group.swimlane.color ? h("span", {
+                class: kanbanSwimlaneDotClasses,
+                style: { backgroundColor: group.swimlane.color }
+              }) : null,
+              h("span", null, group.swimlane.label),
+              h(
+                "span",
+                {
+                  class: "ml-auto text-xs text-[var(--tiger-text-muted,#6b7280)]"
+                },
+                String(group.cards.length)
+              )
+            ]),
+            h(
+              "div",
+              {
+                class: group.swimlane.collapsed ? kanbanSwimlaneCollapsedClasses : ""
+              },
+              group.cards.flatMap(
+                (card) => renderCardNode(
+                  card,
+                  column.cards.findIndex((item) => item.id === card.id)
+                )
+              )
+            )
+          ]
+        )
+      ) : column.cards.flatMap((card, i) => renderCardNode(card, i))).concat(
         isDropTarget && dragSnap.value.dropIndex >= column.cards.length ? [h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })] : []
       ) : [
         isDropTarget ? h("div", { key: "drop-empty", class: taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : h(
@@ -390,7 +444,7 @@ var TaskBoard = defineComponent({
                 }
               }
             },
-            "+ " + resolveLocaleText(labels.value.addCardText)
+            "+ " + resolveLocaleText(labels.value.addColumnText)
           )
         );
       }

package/dist/{chunk-HCANI7ZG.mjs → chunk-36ZFDXKU.mjs}

@@ -4,7 +4,9 @@ import {
   computed,
   inject,
   provide,
+  reactive,
   ref,
+  watch,
   Fragment,
   h
 } from "vue";
@@ -202,9 +204,16 @@ var Breadcrumb = defineComponent({
     const containerClasses = computed(() => {
       return classNames(breadcrumbContainerClasses, extraContent.value && "w-full", props.className);
     });
-    provide(BreadcrumbContextKey, {
+    const breadcrumbContext = reactive({
       separator: props.separator
     });
+    watch(
+      () => props.separator,
+      (separator) => {
+        breadcrumbContext.separator = separator;
+      }
+    );
+    provide(BreadcrumbContextKey, breadcrumbContext);
     const renderItems = () => {
       const rawChildren = slots.default?.() || [];
       const items = [];

package/dist/{chunk-JKEF7NB3.js → chunk-37LDNXLO.js}

@@ -3,13 +3,13 @@
 var _chunk2VOZFFW6js = require('./chunk-2VOZFFW6.js');
 
 
-var _chunkACYYQJ6Mjs = require('./chunk-ACYYQJ6M.js');
+var _chunkKLOUOXNAjs = require('./chunk-KLOUOXNA.js');
 
 
 var _chunkHBFFINAIjs = require('./chunk-HBFFINAI.js');
 
 
-var _chunkZOUJFFG4js = require('./chunk-ZOUJFFG4.js');
+var _chunkAYQER5UDjs = require('./chunk-AYQER5UD.js');
 
 
 var _chunkUHVUKLHFjs = require('./chunk-UHVUKLHF.js');
@@ -209,7 +209,7 @@ var FunnelChart = _vue.defineComponent.call(void 0, {
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? _vue.h.call(void 0, _chunkZOUJFFG4js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? _vue.h.call(void 0, _chunkAYQER5UDjs.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -220,7 +220,7 @@ var FunnelChart = _vue.defineComponent.call(void 0, {
       }
       return _vue.h.call(void 0, "div", { class: wrapperClasses.value }, [
         chart,
-        _vue.h.call(void 0, _chunkACYYQJ6Mjs.ChartLegend, {
+        _vue.h.call(void 0, _chunkKLOUOXNAjs.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-DEJKRMMU.mjs → chunk-4IZUJJUO.mjs}

@@ -1,5 +1,17 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/ImageCropper.ts
-import { defineComponent, h, ref, computed, watch, onMounted } from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  getCurrentInstance
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -15,12 +27,18 @@ import {
   getInitialCropRect,
   resizeCropRect,
   moveCropRect,
-  cropCanvas
+  cropCanvas,
+  getImageEditorLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var ImageCropper = defineComponent({
   name: "TigerImageCropper",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     src: { type: String, required: true },
     aspectRatio: { type: Number, default: void 0 },
     minWidth: { type: Number, default: 20 },
@@ -39,6 +57,11 @@ var ImageCropper = defineComponent({
   },
   emits: ["crop-change", "ready"],
   setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const maskId = `tiger-crop-mask-${instance?.uid ?? "0"}`;
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
     const containerRef = ref(null);
     const imageRef = ref(null);
     const imageLoaded = ref(false);
@@ -270,7 +293,7 @@ var ImageCropper = defineComponent({
               minHeight: "200px"
             }),
             role: "img",
-            "aria-label": "Loading image for cropping"
+            "aria-label": labels.value.loadingCropImageAriaLabel
           },
           [
             h("div", {
@@ -288,7 +311,7 @@ var ImageCropper = defineComponent({
           height: `${displayHeight.value}px`
         },
         draggable: false,
-        alt: "Image to crop"
+        alt: labels.value.imageToCropAriaLabel
       });
       const mask = h(
         "svg",
@@ -300,7 +323,7 @@ var ImageCropper = defineComponent({
         },
         [
           h("defs", null, [
-            h("mask", { id: "crop-mask" }, [
+            h("mask", { id: maskId }, [
               h("rect", {
                 width: displayWidth.value,
                 height: displayHeight.value,
@@ -319,7 +342,7 @@ var ImageCropper = defineComponent({
             width: displayWidth.value,
             height: displayHeight.value,
             fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-            mask: "url(#crop-mask)"
+            mask: `url(#${maskId})`
           })
         ]
       );
@@ -342,7 +365,7 @@ var ImageCropper = defineComponent({
         },
         role: "button",
         tabindex: 0,
-        "aria-label": "Move crop area",
+        "aria-label": labels.value.moveCropAreaAriaLabel,
         onMousedown: (e) => handleMouseDown(e, "move"),
         onTouchstart: (e) => handleTouchStart(e, "move"),
         onKeydown: handleMoveKeyDown
@@ -412,7 +435,7 @@ var ImageCropper = defineComponent({
           style: pos,
           role: "button",
           tabindex: 0,
-          "aria-label": `Resize crop area ${handle}`,
+          "aria-label": labels.value.resizeCropAreaAriaLabel.replace("{handle}", handle),
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
           onTouchstart: (e) => handleTouchStart(e, "resize", handle),
           onKeydown: (e) => handleResizeKeyDown(e, handle)
@@ -429,7 +452,7 @@ var ImageCropper = defineComponent({
             height: `${displayHeight.value}px`
           }),
           role: "application",
-          "aria-label": "Image cropper",
+          "aria-label": labels.value.cropperDialogAriaLabel,
           "aria-roledescription": "image cropper"
         },
         [img, mask, selection, dragArea, ...guideLines, ...handles]

package/dist/{chunk-L6ZD3ZCO.mjs → chunk-4QCJUILG.mjs}

@@ -1,6 +1,6 @@
 import {
   VirtualList
-} from "./chunk-PENI3H3I.mjs";
+} from "./chunk-HS4YQGZQ.mjs";
 import {
   useTigerConfig
 } from "./chunk-R6WFL6NI.mjs";

package/dist/{chunk-NWS45JQP.mjs → chunk-4RK5BDGR.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-R2HO74FE.mjs";
 import {
   ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
+} from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-G2LB4QCL.mjs";
 import {
   ChartAxis
 } from "./chunk-ZWVA7HT3.mjs";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-MI6TL3CQ.mjs";
 
 // src/components/AreaChart.ts
-import { defineComponent, computed, h, ref, useId } from "vue";
+import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
 import {
   classNames,
   createAreaPath,
@@ -249,12 +249,16 @@ var AreaChart = defineComponent({
     "point-hover"
   ],
   setup(props, { emit }) {
+    const instance = getCurrentInstance();
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("area", useId());
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const resolvedSeries = computed(
-      () => resolveSeriesData(props.series, props.data)
+      () => resolveSeriesData(props.series, props.data, {
+        color: props.areaColor,
+        pointColor: props.pointColor
+      })
     );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
@@ -409,6 +413,18 @@ var AreaChart = defineComponent({
       hoveredPointInfo.value = null;
       emit("point-hover", null, null, null);
     };
+    const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
+      if (!props.hoverable) return;
+      const rect = el.getBoundingClientRect();
+      hoveredPointInfo.value = { seriesIndex, pointIndex };
+      tooltipPosition.value = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+      emit(
+        "point-hover",
+        seriesIndex,
+        pointIndex,
+        resolvedSeries.value[seriesIndex]?.data[pointIndex]
+      );
+    };
     const handlePointClick = (seriesIndex, pointIndex) => {
       emit(
         "point-click",
@@ -425,6 +441,7 @@ var AreaChart = defineComponent({
       handleSeriesSelect(seriesIndex);
     };
     return () => {
+      const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
       const reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
         ChartCanvas,
@@ -633,6 +650,8 @@ var AreaChart = defineComponent({
                 sd.points.map((point) => {
                   const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                   const hoverSize = sd.pointSize + 2;
+                  const datum = resolvedSeries.value[sd.seriesIndex]?.data?.[point.pointIndex];
+                  const pointInteractive = props.hoverable || pointClickable;
                   return h("circle", {
                     key: `point-${sd.seriesKey}-${point.pointIndex}`,
                     cx: point.x,
@@ -641,17 +660,46 @@ var AreaChart = defineComponent({
                     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: linePointTransitionClasses,
+                    class: classNames(
+                      linePointTransitionClasses,
+                      pointInteractive && "cursor-pointer"
+                    ),
                     style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
+                    role: pointInteractive ? "button" : "img",
+                    "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                    tabindex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                    onMousemove: handlePointMouseMove,
-                    onMouseleave: handlePointMouseLeave,
-                    onClick: (e) => {
+                    onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMousemove: props.hoverable ? handlePointMouseMove : void 0,
+                    onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                    onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);
-                    }
+                    } : void 0,
+                    onFocus: props.hoverable ? (e) => showPointTooltipFromElement(
+                      e.currentTarget,
+                      sd.seriesIndex,
+                      point.pointIndex
+                    ) : void 0,
+                    onBlur: props.hoverable ? handlePointMouseLeave : void 0,
+                    onKeydown: pointInteractive ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (pointClickable) {
+                          handlePointClick(sd.seriesIndex, point.pointIndex);
+                        } else {
+                          showPointTooltipFromElement(
+                            e.currentTarget,
+                            sd.seriesIndex,
+                            point.pointIndex
+                          );
+                        }
+                      } else if (e.key === "Escape" && props.hoverable) {
+                        handlePointMouseLeave();
+                      }
+                    } : void 0
                   });
                 })
               )