@expcat/tigercat-vue 2.0.0-preview.2 → 2.0.0-preview.3

package/dist/{chunk-EVIZXEB2.mjs → chunk-E6EZHSGY.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/QRCode.ts
 import { defineComponent, h, computed } from "vue";

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

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TaskBoard.ts
 import { defineComponent, computed, ref, watch, h, onMounted, onBeforeUnmount } from "vue";

package/dist/{chunk-4ZKSTL5P.mjs → chunk-EGIQPUEL.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/VirtualTable.ts
 import { defineComponent, h, ref, computed } from "vue";

package/dist/{chunk-UQK22ZMC.mjs → chunk-EWUHEW6W.mjs}

@@ -10,7 +10,8 @@ import {
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
-  isValidHex,
+  formatColorString,
+  parseColorInput,
   classNames,
   coerceClassValue
 } from "@expcat/tigercat-core";
@@ -27,18 +28,26 @@ var ColorPicker = defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
     const isOpen = ref(false);
+    const alpha = ref(1);
     const containerRef = ref(null);
-    const inputValue = ref(props.modelValue);
-    const hsv = computed(() => {
-      const rgb = hexToRgb(props.modelValue);
-      return rgbToHsv(rgb.r, rgb.g, rgb.b);
-    });
-    watch(
-      () => props.modelValue,
-      (v) => {
-        inputValue.value = v;
-      }
+    const rgb = computed(() => hexToRgb(props.modelValue));
+    const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
+    const displayValue = computed(
+      () => formatColorString(
+        rgb.value.r,
+        rgb.value.g,
+        rgb.value.b,
+        props.format,
+        props.showAlpha ? alpha.value : void 0
+      )
+    );
+    const swatchColor = computed(
+      () => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
     );
+    const inputValue = ref(displayValue.value);
+    watch(displayValue, (v) => {
+      inputValue.value = v;
+    });
     function togglePanel() {
       if (props.disabled) return;
       isOpen.value = !isOpen.value;
@@ -46,6 +55,18 @@ var ColorPicker = defineComponent({
     function closePanel() {
       isOpen.value = false;
     }
+    function handleTriggerKeydown(e) {
+      if (props.disabled) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        isOpen.value = !isOpen.value;
+      } else if (e.key === "Escape" && isOpen.value) {
+        isOpen.value = false;
+      }
+    }
+    function handleAlphaChange(e) {
+      alpha.value = Number(e.target.value) / 100;
+    }
     function handleHueChange(e) {
       const hue = Number(e.target.value);
       const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
@@ -56,8 +77,8 @@ var ColorPicker = defineComponent({
     function handleInputChange(e) {
       const val = e.target.value;
       inputValue.value = val;
-      if (isValidHex(val)) {
-        const hex = val.startsWith("#") ? val : `#${val}`;
+      const hex = parseColorInput(val);
+      if (hex) {
         emit("update:modelValue", hex);
         emit("change", hex);
       }
@@ -66,6 +87,12 @@ var ColorPicker = defineComponent({
       emit("update:modelValue", color);
       emit("change", color);
     }
+    function handlePresetKeydown(e, color) {
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        handlePresetClick(color);
+      }
+    }
     function handleClickOutside(e) {
       if (containerRef.value && !containerRef.value.contains(e.target)) {
         closePanel();
@@ -88,11 +115,15 @@ var ColorPicker = defineComponent({
         // Color trigger swatch
         h("div", {
           class: getColorPickerTriggerClasses(props.size, props.disabled),
-          style: { backgroundColor: props.modelValue },
+          style: { backgroundColor: swatchColor.value },
           role: "button",
           "aria-label": "Pick color",
-          tabindex: 0,
-          onClick: togglePanel
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen.value,
+          "aria-disabled": props.disabled || void 0,
+          tabindex: props.disabled ? -1 : 0,
+          onClick: togglePanel,
+          onKeydown: handleTriggerKeydown
         }),
         // Panel
         isOpen.value ? h("div", { class: colorPickerPanelClasses }, [
@@ -113,12 +144,31 @@ var ColorPicker = defineComponent({
               onInput: handleHueChange
             })
           ]),
-          // Hex input
-          h("div", { class: "mb-2" }, [
+          // Alpha slider
+          props.showAlpha ? h("div", { class: "mb-2" }, [
             h(
               "label",
               { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-              "Hex"
+              "Alpha"
+            ),
+            h("input", {
+              type: "range",
+              min: 0,
+              max: 100,
+              value: Math.round(alpha.value * 100),
+              class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+              "aria-label": "Alpha",
+              onInput: handleAlphaChange
+            })
+          ]) : null,
+          // Color value input (rendered in the selected format)
+          h("div", { class: "mb-2" }, [
+            h(
+              "label",
+              {
+                class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
+              },
+              props.format
             ),
             h("input", {
               type: "text",
@@ -132,13 +182,13 @@ var ColorPicker = defineComponent({
           h("div", { class: "flex items-center gap-2 mb-2" }, [
             h("div", {
               class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
-              style: { backgroundColor: props.modelValue },
+              style: { backgroundColor: swatchColor.value },
               "aria-label": "Color preview"
             }),
             h(
               "span",
               { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
-              props.modelValue
+              displayValue.value
             )
           ]),
           // Presets
@@ -148,8 +198,11 @@ var ColorPicker = defineComponent({
                 key: color,
                 class: colorPickerPresetClasses,
                 style: { backgroundColor: color },
+                role: "button",
+                tabindex: 0,
                 "aria-label": `Select ${color}`,
-                onClick: () => handlePresetClick(color)
+                onClick: () => handlePresetClick(color),
+                onKeydown: (e) => handlePresetKeydown(e, color)
               })
             )
           ]) : null

package/dist/{chunk-VFUBOKGT.mjs → chunk-F2IWAV3T.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2TNZ4JNT.mjs";
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TimePicker.ts
 import {

package/dist/{chunk-HIXWZVE5.mjs → chunk-FSJRNEZK.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
 // src/components/MarkdownEditor.ts
 import { defineComponent, h, ref, computed, nextTick } from "vue";
 import {
@@ -17,9 +21,10 @@ import {
   markdownEditorToolbarClasses,
   markdownEditorToolbarGroupClasses,
   markdownEditorToolbarSeparatorClasses,
-  markdownModeLabels,
   parseMarkdownHeight,
-  renderMarkdownToHtml
+  renderMarkdownToHtml,
+  mergeTigerLocale,
+  getMarkdownEditorLabels
 } from "@expcat/tigercat-core";
 var modes = ["edit", "split", "preview"];
 var MarkdownEditor = defineComponent({
@@ -51,6 +56,8 @@ var MarkdownEditor = defineComponent({
       type: Object,
       default: void 0
     },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
     className: { type: String, default: void 0 },
     style: {
       type: Object,
@@ -59,6 +66,7 @@ var MarkdownEditor = defineComponent({
   },
   emits: ["update:value", "change", "update:mode", "mode-change"],
   setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
     const internalValue = ref(props.defaultValue || "");
     const internalMode = ref(props.defaultMode);
     const textareaRef = ref(null);
@@ -76,6 +84,13 @@ var MarkdownEditor = defineComponent({
     const showPreview = computed(
       () => currentMode.value === "preview" || currentMode.value === "split"
     );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getMarkdownEditorLabels(mergedLocale.value, props.labels));
+    const modeLabels = computed(() => ({
+      edit: labels.value.editModeLabel,
+      split: labels.value.splitModeLabel,
+      preview: labels.value.previewModeLabel
+    }));
     const containerClasses = computed(
       () => classNames(
         getMarkdownContainerClasses(props.disabled, props.className),
@@ -147,7 +162,7 @@ var MarkdownEditor = defineComponent({
           {
             class: markdownEditorToolbarGroupClasses,
             role: "toolbar",
-            "aria-label": "Markdown formatting"
+            "aria-label": labels.value.formattingToolbarAriaLabel
           },
           toolbarItems.value.map((item, index) => {
             if (isMarkdownToolbarSeparator(item)) {
@@ -178,7 +193,7 @@ var MarkdownEditor = defineComponent({
           {
             class: markdownEditorToolbarGroupClasses,
             role: "toolbar",
-            "aria-label": "Markdown view mode"
+            "aria-label": labels.value.modeToolbarAriaLabel
           },
           modes.map(
             (item) => h(
@@ -187,12 +202,12 @@ var MarkdownEditor = defineComponent({
                 key: item,
                 type: "button",
                 class: getMarkdownToolbarButtonClasses(currentMode.value === item),
-                "aria-label": markdownModeLabels[item],
+                "aria-label": modeLabels.value[item],
                 "aria-pressed": currentMode.value === item,
                 disabled: props.disabled,
                 onClick: () => commitMode(item)
               },
-              markdownModeLabels[item]
+              modeLabels.value[item]
             )
           )
         ) : null
@@ -207,7 +222,7 @@ var MarkdownEditor = defineComponent({
         readonly: props.readOnly || props.disabled,
         disabled: props.disabled,
         spellcheck: true,
-        "aria-label": "Markdown editor",
+        "aria-label": labels.value.editorAriaLabel,
         "aria-multiline": true
       }) : null;
       const previewNode = showPreview.value ? h(
@@ -219,7 +234,7 @@ var MarkdownEditor = defineComponent({
             !currentValue.value ? markdownEditorEmptyPreviewClasses : void 0
           ),
           role: "region",
-          "aria-label": "Markdown preview",
+          "aria-label": labels.value.previewAriaLabel,
           ...currentValue.value ? { innerHTML: previewHtml.value } : {}
         },
         currentValue.value ? void 0 : props.placeholder

package/dist/{chunk-MJRFB6ZA.mjs → chunk-GDK5LNP3.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2TNZ4JNT.mjs";
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/DatePicker.ts
 import { defineComponent, computed, ref, nextTick, h, watch, onBeforeUnmount } from "vue";
@@ -276,9 +276,6 @@ var DatePicker = defineComponent({
       if (startText && endText) return `${startText} - ${endText}`;
       return startText ? `${startText} - ` : ` - ${endText}`;
     });
-    const placeholderText = computed(
-      () => props.placeholder ?? (props.range ? "Select date range" : "Select date")
-    );
     const showClearButton = computed(() => {
       if (!props.clearable || props.disabled || props.readonly) return false;
       if (!isRangeMode.value) return selectedDate.value !== null;
@@ -293,6 +290,9 @@ var DatePicker = defineComponent({
     const previousMonthIcon = computed(() => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
     const nextMonthIcon = computed(() => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
     const labels = computed(() => getDatePickerLabels(mergedLocale.value, props.labels));
+    const placeholderText = computed(
+      () => props.placeholder ?? (props.range ? labels.value.rangePlaceholder : labels.value.placeholder)
+    );
     const mobileDate = computed(() => {
       if (!isRangeMode.value) return selectedDate.value ?? normalizeDate(/* @__PURE__ */ new Date());
       const [start, end] = selectedRange.value;
@@ -656,7 +656,7 @@ var DatePicker = defineComponent({
                   {
                     class: datePickerMobileWheelSelectClasses,
                     value: mobileDate.value.getFullYear(),
-                    "aria-label": "Year",
+                    "aria-label": labels.value.year,
                     onChange: (event) => updateMobileDate("year", Number(event.target.value))
                   },
                   mobileYears.value.map((year) => h("option", { value: year }, year))
@@ -666,7 +666,7 @@ var DatePicker = defineComponent({
                   {
                     class: datePickerMobileWheelSelectClasses,
                     value: mobileDate.value.getMonth(),
-                    "aria-label": "Month",
+                    "aria-label": labels.value.month,
                     onChange: (event) => updateMobileDate("month", Number(event.target.value))
                   },
                   Array.from(
@@ -679,7 +679,7 @@ var DatePicker = defineComponent({
                   {
                     class: datePickerMobileWheelSelectClasses,
                     value: mobileDate.value.getDate(),
-                    "aria-label": "Day",
+                    "aria-label": labels.value.day,
                     onChange: (event) => updateMobileDate("day", Number(event.target.value))
                   },
                   mobileDays.value.map((day) => h("option", { value: day }, day))

package/dist/{chunk-Z4NJJ7NI.mjs → chunk-GWFVBG22.mjs}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-MI6TL3CQ.mjs";
 import {
   ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
+} from "./chunk-V443QIJM.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -40,6 +40,7 @@ import {
   resolveSeriesData,
   defaultSeriesXYTooltipFormatter
 } from "@expcat/tigercat-core";
+var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var LineChart = defineComponent({
   name: "TigerLineChart",
   props: {
@@ -53,8 +54,9 @@ var LineChart = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: 24
+      default: () => DEFAULT_CARTESIAN_PADDING
     },
+    responsive: { type: Boolean, default: false },
     data: {
       type: Array
     },
@@ -415,6 +417,7 @@ var LineChart = defineComponent({
           width: props.width,
           height: props.height,
           padding: props.padding,
+          responsive: props.responsive,
           title: props.title,
           desc: props.desc,
           className: classNames(props.className)

package/dist/{chunk-GMIKUE67.mjs → chunk-H2SX7D23.mjs}

@@ -130,7 +130,7 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
                 e.stopPropagation();
                 props.onClose?.(notification.id);
               },
-              "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
+              "aria-label": notification.closeAriaLabel ?? NOTIFICATION_CLOSE_ARIA_LABEL,
               type: "button"
             },
             createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {

package/dist/{chunk-FAQL7HFW.mjs → chunk-HAUG3OP5.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Form.ts
 import {

package/dist/{chunk-ODDPVS27.mjs → chunk-IDUEWMWN.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/AutoComplete.ts
 import {

package/dist/{chunk-GAEO66NY.mjs → chunk-IMFHJEUX.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-36WSYHJU.mjs";
+} from "./chunk-LPZBXTJ6.mjs";
 import {
   useFloatingPopup
 } from "./chunk-KE6RGD4Y.mjs";

package/dist/{chunk-GZWZP5AL.mjs → chunk-JHFM6IFO.mjs}

@@ -1,13 +1,19 @@
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
 // src/components/AvatarGroup.ts
-import { defineComponent, h, provide, reactive, watch } from "vue";
+import { computed, defineComponent, h, provide, reactive, watch } from "vue";
 import {
   coerceClassValue,
   getAvatarGroupClasses,
   getAvatarGroupItemClasses,
+  getAvatarGroupLabels,
   getAvatarGroupOverflowClasses,
   getAvatarGroupOverflowLabel,
   getAvatarGroupOverflowText,
-  getVisibleGroupItems
+  getVisibleGroupItems,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var AVATAR_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerAvatarGroup");
 var AvatarGroup = defineComponent({
@@ -25,9 +31,22 @@ var AvatarGroup = defineComponent({
     className: {
       type: String,
       default: void 0
+    },
+    /** Locale overrides merged on top of ConfigProvider locale */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /** Text/aria label overrides */
+    labels: {
+      type: Object,
+      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getAvatarGroupLabels(mergedLocale.value, props.labels));
     const groupContext = reactive({
       size: props.size,
       itemClass: getAvatarGroupItemClasses()
@@ -50,10 +69,10 @@ var AvatarGroup = defineComponent({
       return h(
         "div",
         {
-          ...attrs,
-          class: getAvatarGroupClasses(props.className, coerceClassValue(attrsClass)),
           role: "group",
-          "aria-label": "Avatar group"
+          "aria-label": labels.value.ariaLabel,
+          ...attrs,
+          class: getAvatarGroupClasses(props.className, coerceClassValue(attrsClass))
         },
         [
           ...visibleItems,
@@ -61,7 +80,10 @@ var AvatarGroup = defineComponent({
             "span",
             {
               class: getAvatarGroupOverflowClasses(props.size ?? "md"),
-              "aria-label": getAvatarGroupOverflowLabel(overflowCount)
+              "aria-label": getAvatarGroupOverflowLabel(
+                overflowCount,
+                labels.value.overflowAriaLabel
+              )
             },
             getAvatarGroupOverflowText(overflowCount)
           ) : null

package/dist/{chunk-V5ANPH5R.mjs → chunk-JL3CN4UK.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Calendar.ts
 import { defineComponent, h, ref, computed, nextTick } from "vue";

package/dist/{chunk-RTZUIWCN.mjs → chunk-JQSIWPNM.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-R6WFL6NI.mjs";
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Timeline.ts
 import { defineComponent, computed, h } from "vue";

package/dist/{chunk-RAO7ZJWR.mjs → chunk-JVQPU4M2.mjs}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-MI6TL3CQ.mjs";
 import {
   ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
+} from "./chunk-V443QIJM.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -41,6 +41,7 @@ import {
   resolveSeriesData,
   defaultSeriesXYTooltipFormatter
 } from "@expcat/tigercat-core";
+var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var AreaChart = defineComponent({
   name: "TigerAreaChart",
   props: {
@@ -54,8 +55,9 @@ var AreaChart = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: 24
+      default: () => DEFAULT_CARTESIAN_PADDING
     },
+    responsive: { type: Boolean, default: false },
     data: {
       type: Array
     },
@@ -449,6 +451,7 @@ var AreaChart = defineComponent({
           width: props.width,
           height: props.height,
           padding: props.padding,
+          responsive: props.responsive,
           title: props.title,
           desc: props.desc,
           className: classNames(props.className)

package/dist/{chunk-BGO2ILHM.mjs → chunk-JZCETBUV.mjs}

@@ -15,10 +15,13 @@ import {
 } from "./chunk-MI6TL3CQ.mjs";
 import {
   ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
+} from "./chunk-V443QIJM.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/ScatterChart.ts
 import { defineComponent, computed, h, onMounted, ref, useId } from "vue";
@@ -37,7 +40,9 @@ import {
   SCATTER_ENTRANCE_CLASS,
   resolveChartPalette,
   buildChartLegendItems,
-  resolveChartTooltipContent
+  resolveChartTooltipContent,
+  mergeTigerLocale,
+  getChartLabels
 } from "@expcat/tigercat-core";
 var ScatterChart = defineComponent({
   name: "TigerScatterChart",
@@ -48,6 +53,7 @@ var ScatterChart = defineComponent({
       type: [Number, Object],
       default: 24
     },
+    responsive: { type: Boolean, default: false },
     data: {
       type: Array,
       required: true
@@ -123,12 +129,17 @@ var ScatterChart = defineComponent({
     colors: { type: Array },
     title: { type: String },
     desc: { type: String },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
     className: { type: String }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "point-click", "point-hover"],
   setup(props, { emit }) {
+    const config = useTigerConfig();
     const gradientPrefix = getStableChartGradientPrefix("scatter", useId());
     const mounted = ref(false);
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getChartLabels(mergedLocale.value, props.labels));
     onMounted(() => {
       if (props.animated) mounted.value = true;
     });
@@ -238,6 +249,7 @@ var ScatterChart = defineComponent({
           width: props.width,
           height: props.height,
           padding: props.padding,
+          responsive: props.responsive,
           title: props.title,
           desc: props.desc,
           className: classNames(props.className)
@@ -301,7 +313,7 @@ var ScatterChart = defineComponent({
                     style: styleStr || void 0,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
-                    "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
+                    "aria-label": point.datum.label ?? labels.value.pointAriaLabel.replace("{index}", String(index + 1)).replace("{x}", String(point.datum.x)).replace("{y}", String(point.datum.y)),
                     "data-point-index": index,
                     onMouseenter: (e) => handleMouseEnter(index, e),
                     onMousemove: handleMouseMove,
@@ -346,6 +358,7 @@ var ScatterChart = defineComponent({
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,
           gap: props.legendGap,
+          ariaLabel: labels.value.legendAriaLabel,
           interactive: props.hoverable || props.selectable,
           onItemClick: handleLegendClick,
           onItemHover: handleLegendHover,

package/dist/{chunk-G7MOTNJO.mjs → chunk-KFJIZED5.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-W5RZPTFD.mjs";
 import {
   ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
+} from "./chunk-V443QIJM.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";