@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-UNR5RUET.mjs → chunk-SPFWZCRX.mjs}

@@ -1,12 +1,12 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
+import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, buildChartSeriesKeys, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames, linePointTransitionClasses } from '@expcat/tigercat-core';
 
 var LineChart = defineComponent({
   name: "TigerLineChart",
@@ -176,6 +176,16 @@ var LineChart = defineComponent({
       type: Boolean,
       default: false
     },
+    // Stroke gradient (modern look — opt-in)
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    // Point fill radial gradient (modern look — opt-in)
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -260,8 +270,12 @@ var LineChart = defineComponent({
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors));
+    const seriesKeys = computed(
+      () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "line-" })
+    );
     const seriesData = computed(
       () => resolvedSeries.value.map((series, seriesIndex) => {
+        const seriesKey = seriesKeys.value[seriesIndex];
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
         const points = series.data.map((datum, pointIndex) => ({
           x: resolvedXScale.value.map(datum.x),
@@ -279,6 +293,7 @@ var LineChart = defineComponent({
         return {
           series,
           seriesIndex,
+          seriesKey,
           color,
           linePath,
           areaPath,
@@ -386,7 +401,7 @@ var LineChart = defineComponent({
               label: props.yAxisLabel
             }) : null,
             // Gradient defs and animation styles
-            seriesData.value.some((sd) => sd.showArea) || props.animated ? h("defs", null, [
+            seriesData.value.some((sd) => sd.showArea) || props.animated || props.strokeGradient || props.pointGradient ? h("defs", null, [
               // Animation keyframes
               props.animated ? h(
                 "style",
@@ -406,8 +421,8 @@ var LineChart = defineComponent({
                 (sd) => 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",
@@ -426,18 +441,74 @@ var LineChart = defineComponent({
                     })
                   ]
                 )
-              )
+              ),
+              // Point fill radial gradients (bright center → series color edge)
+              ...props.pointGradient ? seriesData.value.map(
+                (sd) => h(
+                  "radialGradient",
+                  {
+                    key: `point-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-point-${sd.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 30%)`
+                    }),
+                    h("stop", {
+                      offset: "70%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                    })
+                  ]
+                )
+              ) : [],
+              // Stroke gradients (3-stop horizontal lighter→base→darker)
+              ...props.strokeGradient ? seriesData.value.map(
+                (sd) => h(
+                  "linearGradient",
+                  {
+                    key: `stroke-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 12%)`
+                    }),
+                    h("stop", {
+                      offset: "50%",
+                      "stop-color": sd.color
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 8%)`
+                    })
+                  ]
+                )
+              ) : []
             ]) : null,
             // Render each series
             ...seriesData.value.map(
               (sd) => h(
                 ChartSeries,
                 {
-                  key: `series-${sd.seriesIndex}`,
+                  key: sd.seriesKey,
                   data: sd.series.data,
                   name: sd.series.name,
                   type: "line",
                   opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey,
                   class: classNames(
                     sd.series.className,
                     (props.hoverable || props.selectable) && "cursor-pointer"
@@ -453,16 +524,17 @@ var LineChart = defineComponent({
                     // Area fill path
                     sd.showArea && sd.areaPath ? h("path", {
                       d: sd.areaPath,
-                      fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                      fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                       stroke: "none",
                       class: "transition-opacity duration-300",
-                      "data-area-series": sd.seriesIndex
+                      "data-area-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }) : null,
                     // Line path
                     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,
@@ -473,23 +545,25 @@ var LineChart = defineComponent({
                         "transition-opacity duration-200",
                         props.animated && "tiger-line-animated"
                       ),
-                      "data-line-series": sd.seriesIndex
+                      "data-line-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }),
                     // Data points
                     sd.showPoints ? sd.points.map((point) => {
                       const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                       const hoverSize = sd.pointSize + 2;
                       return 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: 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,

package/dist/{chunk-OXOCGMPN.mjs → chunk-TGIXSJI3.mjs}

@@ -7,7 +7,10 @@ var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
 var MESSAGE_CONTAINER_ROOT_ID = `${MESSAGE_CONTAINER_ID}-root`;
 var messageInstances = ref([]);
 var instanceIdCounter = 0;
-var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
 var containerApp = null;
 function getNextInstanceId() {
   return ++instanceIdCounter;

package/dist/{chunk-Q6CGPWQF.js → chunk-TOE2XSEO.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunk2WZGK7XJ_js = require('./chunk-2WZGK7XJ.js');
+var chunkLWDA7ABQ_js = require('./chunk-LWDA7ABQ.js');
+var chunkJDCVS4SJ_js = require('./chunk-JDCVS4SJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -37,7 +38,7 @@ var Tooltip = vue.defineComponent({
       floatingRef,
       floatingStyles,
       triggerHandlers
-    } = chunk2WZGK7XJ_js.useFloatingPopup({ props, emit });
+    } = chunkLWDA7ABQ_js.useFloatingPopup({ props, emit });
     const tooltipId = createTooltipId();
     const containerClasses = vue.computed(
       () => tigercatCore.classNames(tigercatCore.getTooltipContainerClasses(), props.className, tigercatCore.coerceClassValue(attrsRecord.class))
@@ -74,24 +75,26 @@ var Tooltip = vue.defineComponent({
             defaultSlot
           ),
           // Tooltip content (positioned with Floating UI)
-          currentVisible.value ? vue.h(
-            "div",
-            {
-              ref: floatingRef,
-              style: floatingStyles.value,
-              "aria-hidden": false
-            },
-            [
-              vue.h(
-                "div",
-                {
-                  id: tooltipId,
-                  role: "tooltip",
-                  class: contentClasses.value
-                },
-                slots.content ? slots.content() : props.content
-              )
-            ]
+          currentVisible.value ? chunkJDCVS4SJ_js.renderVueBodyTeleport(
+            vue.h(
+              "div",
+              {
+                ref: floatingRef,
+                style: floatingStyles.value,
+                "aria-hidden": false
+              },
+              [
+                vue.h(
+                  "div",
+                  {
+                    id: tooltipId,
+                    role: "tooltip",
+                    class: contentClasses.value
+                  },
+                  slots.content ? slots.content() : props.content
+                )
+              ]
+            )
           ) : null
         ]
       );

package/dist/{chunk-UWL2XUAH.mjs → chunk-TVDLZZNO.mjs}

@@ -1,6 +1,6 @@
 import { createFilledIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, h } from 'vue';
-import { ClockIconPath, TimePickerCloseIconPath, parseTime, getTimePickerLabels, getTimePeriodLabels, classNames, timePickerBaseClasses, coerceClassValue, mergeStyleValues, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, timePickerInputWrapperClasses, timePickerClearButtonClasses, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, to12HourFormat, isTimeInRange, getCurrentTime, formatTime } from '@expcat/tigercat-core';
+import { ClockIconPath, TimePickerCloseIconPath, parseTime, getTimePickerLabels, getTimePeriodLabels, classNames, timePickerBaseClasses, coerceClassValue, mergeStyleValues, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, timePickerInputWrapperClasses, timePickerClearButtonClasses, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, padTwo, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, to12HourFormat, isTimeInRange, getCurrentTime, formatTime } from '@expcat/tigercat-core';
 
 var ClockIcon = createFilledIcon(ClockIconPath, "w-5 h-5");
 var CloseIcon = createFilledIcon(TimePickerCloseIconPath, "w-4 h-4");
@@ -590,7 +590,7 @@ var TimePicker = defineComponent({
                         ),
                         "aria-selected": isSelected
                       },
-                      hour.toString().padStart(2, "0")
+                      padTwo(hour)
                     );
                   })
                 )
@@ -621,7 +621,7 @@ var TimePicker = defineComponent({
                         ),
                         "aria-selected": isSelected
                       },
-                      minute.toString().padStart(2, "0")
+                      padTwo(minute)
                     );
                   })
                 )
@@ -650,7 +650,7 @@ var TimePicker = defineComponent({
                         ),
                         "aria-selected": isSelected
                       },
-                      second.toString().padStart(2, "0")
+                      padTwo(second)
                     );
                   })
                 )

package/dist/{chunk-URYEEQD7.mjs → chunk-UANF7XE5.mjs}

@@ -1,5 +1,5 @@
 import { h, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, computed } from 'vue';
-import { backTopIconPath, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, coerceClassValue, mergeStyleValues, getScrollTop, scrollToTop } from '@expcat/tigercat-core';
+import { backTopIconPath, createBackTopVisibilityController, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, coerceClassValue, mergeStyleValues, scrollToTop } from '@expcat/tigercat-core';
 
 // src/components/BackTop.ts
 var DefaultIcon = h(
@@ -36,7 +36,7 @@ var BackTop = defineComponent({
       default: () => window
     },
     /**
-     * Duration of scroll animation in milliseconds
+     * Use immediate scroll when set to 0; positive values use native smooth scrolling
      * @default 450
      */
     duration: {
@@ -56,11 +56,7 @@ var BackTop = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const visible = ref(false);
     const targetElement = shallowRef(null);
-    const handleScroll = () => {
-      if (!targetElement.value) return;
-      const scrollTop = getScrollTop(targetElement.value);
-      visible.value = scrollTop >= props.visibilityHeight;
-    };
+    let visibilityController;
     const handleClick = (event) => {
       if (!targetElement.value) return;
       scrollToTop(targetElement.value, props.duration);
@@ -68,13 +64,23 @@ var BackTop = defineComponent({
     };
     onMounted(() => {
       targetElement.value = props.target() ?? window;
-      targetElement.value.addEventListener("scroll", handleScroll, { passive: true });
-      handleScroll();
+      visibilityController = createBackTopVisibilityController({
+        target: targetElement.value,
+        getVisibilityHeight: () => props.visibilityHeight,
+        onChange: (nextVisible) => {
+          visible.value = nextVisible;
+        }
+      });
+      targetElement.value.addEventListener("scroll", visibilityController.schedule, {
+        passive: true
+      });
+      visibilityController.update();
     });
     onBeforeUnmount(() => {
-      if (targetElement.value) {
-        targetElement.value.removeEventListener("scroll", handleScroll);
+      if (targetElement.value && visibilityController) {
+        targetElement.value.removeEventListener("scroll", visibilityController.schedule);
       }
+      visibilityController?.cancel();
     });
     const buttonClasses = computed(() => {
       const target = targetElement.value ?? props.target();