@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-VITTXNTD.js → chunk-656KMUL3.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -164,6 +164,18 @@ var RadarChart = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     splitAreaOpacity: {
       type: Number,
       default: 0.06
@@ -177,7 +189,7 @@ var RadarChart = vue.defineComponent({
     },
     pointBorderColor: {
       type: String,
-      default: "#fff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     pointHoverSize: {
       type: Number,
@@ -199,6 +211,7 @@ var RadarChart = vue.defineComponent({
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "series-click", "series-hover"],
   setup(props, { emit }) {
+    const gradientPrefix = tigercatCore.getRadarGradientPrefix();
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
     const radius = vue.computed(
       () => Math.max(0, Math.min(innerRect.value.width, innerRect.value.height) / 2)
@@ -210,6 +223,9 @@ var RadarChart = vue.defineComponent({
         data: []
       })
     );
+    const seriesKeys = vue.computed(
+      () => tigercatCore.buildChartSeriesKeys(resolvedSeries.value, { prefix: "radar-" })
+    );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
       resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -223,7 +239,7 @@ var RadarChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -263,8 +279,9 @@ var RadarChart = vue.defineComponent({
     });
     const angles = vue.computed(() => tigercatCore.getRadarAngles(axisData.value.length, props.startAngle));
     const seriesPoints = vue.computed(
-      () => resolvedSeries.value.map((item) => ({
+      () => resolvedSeries.value.map((item, seriesIndex) => ({
         series: item,
+        seriesKey: seriesKeys.value[seriesIndex],
         points: tigercatCore.getRadarPoints(item.data, {
           cx: cx.value,
           cy: cy.value,
@@ -394,7 +411,7 @@ var RadarChart = vue.defineComponent({
     );
     return () => {
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -405,6 +422,94 @@ var RadarChart = vue.defineComponent({
         },
         {
           default: () => [
+            // Gradient defs for area fills
+            props.gradient || props.strokeGradient || props.pointGradient ? vue.h("defs", null, [
+              ...props.gradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedFillColor = item.series.fillColor ?? seriesColor ?? props.fillColor ?? palette.value[0];
+                const resolvedFillOpacity = item.series.fillOpacity ?? props.fillOpacity;
+                return vue.h(
+                  "linearGradient",
+                  {
+                    key: `radar-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-${item.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": resolvedFillColor,
+                      "stop-opacity": resolvedFillOpacity
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": resolvedFillColor,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                );
+              }) : [],
+              ...props.strokeGradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? props.strokeColor ?? palette.value[0];
+                return vue.h(
+                  "linearGradient",
+                  {
+                    key: `radar-stroke-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${item.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${resolvedStrokeColor} 100%, white 12%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "50%",
+                      "stop-color": resolvedStrokeColor
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${resolvedStrokeColor} 100%, black 8%)`
+                    })
+                  ]
+                );
+              }) : [],
+              ...props.pointGradient ? seriesPoints.value.map((item, seriesIndex) => {
+                const seriesColor = item.series.color ?? palette.value[seriesIndex % palette.value.length];
+                const resolvedPointColor = item.series.pointColor ?? seriesColor ?? props.pointColor ?? palette.value[0];
+                return vue.h(
+                  "radialGradient",
+                  {
+                    key: `radar-point-grad-${item.seriesKey}`,
+                    id: `${gradientPrefix}-point-${item.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${resolvedPointColor} 100%, white 30%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "70%",
+                      "stop-color": resolvedPointColor
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${resolvedPointColor} 100%, black 12%)`
+                    })
+                  ]
+                );
+              }) : []
+            ]) : null,
             // Split area (alternating fills – ECharts splitArea style)
             ...splitAreaPaths.value.map((area, index) => {
               if (area.type === "circle-ring") {
@@ -491,10 +596,11 @@ var RadarChart = vue.defineComponent({
               return vue.h(
                 chunkHBFFINAI_js.ChartSeries,
                 {
-                  key: `series-${seriesIndex}`,
+                  key: item.seriesKey,
                   data: item.series.data,
                   name: item.series.name,
                   type: "radar",
+                  "data-series-key": item.seriesKey,
                   class: tigercatCore.classNames(
                     item.series.className,
                     props.hoverable || props.selectable ? "cursor-pointer" : null
@@ -515,15 +621,16 @@ var RadarChart = vue.defineComponent({
                   default: () => [
                     areaPath ? vue.h("path", {
                       d: areaPath,
-                      fill: resolvedFillColor,
-                      "fill-opacity": resolvedFillOpacity,
-                      stroke: resolvedStrokeColor,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${item.seriesKey})` : resolvedFillColor,
+                      "fill-opacity": props.gradient ? 1 : resolvedFillOpacity,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${item.seriesKey})` : resolvedStrokeColor,
                       "stroke-width": resolvedStrokeWidth,
                       "stroke-linejoin": "round",
                       class: "transition-[fill-opacity,filter] duration-200 ease-out",
                       style: resolvedActiveIndex.value === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                       "data-radar-area": "true",
-                      "data-series-index": seriesIndex
+                      "data-series-index": seriesIndex,
+                      "data-series-key": item.seriesKey
                     }) : null,
                     resolvedShowPoints ? item.points.map((point) => {
                       const isHoveredPoint = hoveredPoint.value?.seriesIndex === seriesIndex && hoveredPoint.value?.pointIndex === point.index;
@@ -532,11 +639,11 @@ var RadarChart = vue.defineComponent({
                       const resolvedBorderWidth = item.series.pointBorderWidth ?? props.pointBorderWidth;
                       const resolvedBorderColor = item.series.pointBorderColor ?? props.pointBorderColor;
                       return vue.h("circle", {
-                        key: `point-${seriesIndex}-${point.index}`,
+                        key: `point-${item.seriesKey}-${point.index}`,
                         cx: point.x,
                         cy: point.y,
                         r: currentSize,
-                        fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                        fill: props.pointGradient ? `url(#${gradientPrefix}-point-${item.seriesKey})` : point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
                         stroke: resolvedBorderColor,
                         "stroke-width": resolvedBorderWidth,
                         class: tigercatCore.classNames(
@@ -545,6 +652,7 @@ var RadarChart = vue.defineComponent({
                         ),
                         "data-radar-point": "true",
                         "data-series-index": seriesIndex,
+                        "data-series-key": item.seriesKey,
                         "data-point-index": point.index,
                         onMouseenter: props.showTooltip && props.hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                         onMousemove: props.showTooltip && props.hoverable ? handlePointMove : void 0,
@@ -587,7 +695,7 @@ var RadarChart = vue.defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: hoveredPoint.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -598,7 +706,7 @@ var RadarChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-5XF5IAUD.mjs → chunk-6EI23IND.mjs}

@@ -1,10 +1,10 @@
-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 { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, resolveChartPalette, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, getTreeMapGradientPrefix, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
 
 var TreeMapChart = defineComponent({
   name: "TigerTreeMapChart",
@@ -17,6 +17,7 @@ var TreeMapChart = defineComponent({
     showLabels: { type: Boolean, default: true },
     minLabelSize: { type: Number, default: 10 },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -70,6 +71,7 @@ var TreeMapChart = defineComponent({
     });
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const palette = computed(() => resolveChartPalette(props.colors));
+    const gradientPrefix = getTreeMapGradientPrefix();
     const nodes = computed(
       () => computeTreeMapNodes(props.data, {
         width: innerRect.value.width,
@@ -108,55 +110,90 @@ var TreeMapChart = defineComponent({
         },
         {
           default: () => {
+            const gradientDefs = props.gradient ? h(
+              "defs",
+              null,
+              nodes.value.map(
+                (node) => h(
+                  "linearGradient",
+                  {
+                    id: `${gradientPrefix}-${node.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": node.color,
+                      "stop-opacity": "1"
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": node.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
             return h(
               ChartSeries,
               { data: nodes.value, type: "treemap" },
               {
-                default: () => nodes.value.map((node) => {
-                  const opacity = getChartElementOpacity(node.index, activeIndex.value, {
-                    activeOpacity: props.activeOpacity,
-                    inactiveOpacity: props.inactiveOpacity
-                  });
-                  const elems = [
-                    h("rect", {
-                      key: `node-${node.index}`,
-                      x: node.x,
-                      y: node.y,
-                      width: node.w,
-                      height: node.h,
-                      rx: 2,
-                      fill: node.color,
-                      opacity,
-                      class: classNames(interactive && "cursor-pointer"),
-                      style: { transition: "opacity 0.2s ease-out" },
-                      onMouseenter: (e) => handleMouseEnter(node.index, e),
-                      onMousemove: handleMouseMove,
-                      onMouseleave: handleMouseLeave,
-                      onClick: () => handleClick(node.index)
-                    })
-                  ];
-                  if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
-                    elems.push(
-                      h(
-                        "text",
-                        {
-                          key: `label-${node.index}`,
-                          x: node.x + node.w / 2,
-                          y: node.y + node.h / 2,
-                          class: "fill-white text-xs",
-                          "text-anchor": "middle",
-                          "dominant-baseline": "middle",
-                          style: {
-                            pointerEvents: "none",
-                            fontSize: `${Math.min(12, node.h * 0.3)}px`
-                          }
+                default: () => [
+                  gradientDefs,
+                  ...nodes.value.map((node) => {
+                    const opacity = getChartElementOpacity(node.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    });
+                    const elems = [
+                      h("rect", {
+                        key: `node-${node.index}`,
+                        x: node.x,
+                        y: node.y,
+                        width: node.w,
+                        height: node.h,
+                        rx: 2,
+                        fill: props.gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                        opacity,
+                        class: classNames(interactive && "cursor-pointer"),
+                        style: {
+                          transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                          rx: "var(--tiger-chart-block-radius, 2px)",
+                          filter: activeIndex.value === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
                         },
-                        node.label
-                      )
-                    );
-                  }
-                  return elems;
-                }).flat()
+                        onMouseenter: (e) => handleMouseEnter(node.index, e),
+                        onMousemove: handleMouseMove,
+                        onMouseleave: handleMouseLeave,
+                        onClick: () => handleClick(node.index)
+                      })
+                    ];
+                    if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
+                      elems.push(
+                        h(
+                          "text",
+                          {
+                            key: `label-${node.index}`,
+                            x: node.x + node.w / 2,
+                            y: node.y + node.h / 2,
+                            class: "fill-white text-xs",
+                            "text-anchor": "middle",
+                            "dominant-baseline": "middle",
+                            style: {
+                              pointerEvents: "none",
+                              fontSize: `${Math.min(12, node.h * 0.3)}px`
+                            }
+                          },
+                          node.label
+                        )
+                      );
+                    }
+                    return elems;
+                  }).flat()
+                ]
               }
             );
           }

package/dist/{chunk-6XU5PSC2.js → chunk-6PJ3JANP.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -19,6 +19,7 @@ var FunnelChart = vue.defineComponent({
     gap: { type: Number, default: 2 },
     pinch: { type: Boolean, default: false },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -56,7 +57,7 @@ var FunnelChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -80,6 +81,7 @@ var FunnelChart = vue.defineComponent({
       })
     );
     const total = vue.computed(() => props.data.reduce((s, d) => s + d.value, 0));
+    const gradientPrefix = tigercatCore.getFunnelGradientPrefix();
     const legendItems = vue.computed(
       () => tigercatCore.buildChartLegendItems({
         data: props.data,
@@ -104,7 +106,7 @@ var FunnelChart = vue.defineComponent({
     return () => {
       const interactive = props.hoverable || props.selectable;
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -115,6 +117,31 @@ var FunnelChart = vue.defineComponent({
         },
         {
           default: () => {
+            const defs = props.gradient ? vue.h(
+              "defs",
+              {},
+              segments.value.map(
+                (seg) => vue.h(
+                  "linearGradient",
+                  {
+                    key: `grad-${seg.index}`,
+                    id: `${gradientPrefix}-${seg.index}`,
+                    x1: 0,
+                    y1: 0,
+                    x2: 0,
+                    y2: 1
+                  },
+                  [
+                    vue.h("stop", { offset: "0%", "stop-color": seg.color, "stop-opacity": 1 }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": seg.color,
+                      "stop-opacity": 0.55
+                    })
+                  ]
+                )
+              )
+            ) : null;
             const paths = vue.h(
               chunkHBFFINAI_js.ChartSeries,
               { data: props.data, type: "funnel" },
@@ -127,7 +154,7 @@ var FunnelChart = vue.defineComponent({
                   return vue.h("path", {
                     key: `seg-${seg.index}`,
                     d: seg.path,
-                    fill: seg.color,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
                     opacity,
                     class: tigercatCore.classNames(interactive && "cursor-pointer"),
                     style: {
@@ -159,11 +186,11 @@ var FunnelChart = vue.defineComponent({
                 seg.label
               )
             );
-            return [paths, ...labels];
+            return [defs, paths, ...labels].filter(Boolean);
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -174,7 +201,7 @@ var FunnelChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-MKLJ2LJW.mjs → chunk-6WACKCWM.mjs}

@@ -1,6 +1,6 @@
-import { FormContextKey } from './chunk-WNF7XUX4.mjs';
+import { FormContextKey } from './chunk-5YFSAKRQ.mjs';
 import { defineComponent, inject, computed, ref, watch, onUnmounted, isVNode, cloneVNode, h } from 'vue';
-import { getFieldError, getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses } from '@expcat/tigercat-core';
+import { getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses } from '@expcat/tigercat-core';
 
 function mergeAriaDescribedBy(existing, next) {
   if (!existing) return next;
@@ -131,18 +131,16 @@ var FormItem = defineComponent({
       return showRequiredAsterisk.value && (formContext.value?.showRequiredAsterisk ?? true);
     });
     watch(
-      () => formContext.value?.errors,
-      (errors) => {
-        if (props.name && errors) {
-          const error = getFieldError(props.name, errors) || "";
-          errorMessage.value = error;
-          if (error && error !== prevFormError.value) {
-            shakeTrigger.value++;
-          }
-          prevFormError.value = error;
+      () => props.name ? formContext.value?.errorsByField[props.name] : void 0,
+      (error) => {
+        const nextError = error || "";
+        errorMessage.value = nextError;
+        if (nextError && nextError !== prevFormError.value) {
+          shakeTrigger.value++;
         }
+        prevFormError.value = nextError;
       },
-      { deep: true, immediate: true }
+      { immediate: true }
     );
     watch(
       () => props.error,
@@ -283,7 +281,6 @@ var FormItem = defineComponent({
               "aria-labelledby": props.label ? labelId : void 0,
               "aria-describedby": describedById.value,
               "aria-invalid": hasError.value ? "true" : void 0,
-              "aria-required": isRequired.value ? "true" : void 0,
               onFocusout: isSingleVNode ? void 0 : handleBlur,
               onInput: isSingleVNode ? void 0 : handleChange
             },

package/dist/{chunk-JIMDJWZZ.js → chunk-7ADONGSB.js}

@@ -26,10 +26,8 @@ var ButtonGroup = vue.defineComponent({
       }
     });
     return () => {
-      const classes = tigercatCore.classNames(
-        tigercatCore.buttonGroupBaseClasses,
-        props.vertical ? tigercatCore.buttonGroupVerticalClasses : tigercatCore.buttonGroupHorizontalClasses,
-        props.vertical ? tigercatCore.buttonGroupItemVerticalClasses : tigercatCore.buttonGroupItemClasses,
+      const classes = tigercatCore.getButtonGroupClasses(
+        props.vertical,
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       );

package/dist/{chunk-MADOTDW7.mjs → chunk-7PY6OQVE.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, h } from 'vue';
-import { watermarkDefaults, resolveWatermarkFont, getWatermarkOverlayStyle, mergeStyleValues, classNames, watermarkWrapperClasses, coerceClassValue, renderWatermarkCanvas } from '@expcat/tigercat-core';
+import { watermarkDefaults, resolveWatermarkFont, createWatermarkRenderController, getWatermarkOverlayStyle, mergeStyleValues, classNames, watermarkWrapperClasses, coerceClassValue } from '@expcat/tigercat-core';
 
 // src/components/Watermark.ts
 var Watermark = defineComponent({
@@ -34,42 +34,34 @@ var Watermark = defineComponent({
   },
   setup(props, { slots, attrs }) {
     const base64 = ref();
+    const wrapperRef = ref(null);
+    let renderController;
     const resolvedFont = computed(() => resolveWatermarkFont(props.font));
     const generate = () => {
-      if (props.image) {
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = () => {
-          const canvas = document.createElement("canvas");
-          const dpr = window.devicePixelRatio || 1;
-          canvas.width = props.width * dpr;
-          canvas.height = props.height * dpr;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) return;
-          ctx.scale(dpr, dpr);
-          ctx.translate(props.width / 2, props.height / 2);
-          ctx.rotate(props.rotate * Math.PI / 180);
-          ctx.translate(-props.width / 2, -props.height / 2);
-          ctx.drawImage(img, 0, 0, props.width, props.height);
-          base64.value = canvas.toDataURL();
-        };
-        img.src = props.image;
-      } else {
-        base64.value = renderWatermarkCanvas({
+      renderController?.render();
+    };
+    onMounted(() => {
+      if (!wrapperRef.value) return;
+      renderController = createWatermarkRenderController({
+        getRenderOptions: () => ({
           content: props.content,
+          image: props.image,
           width: props.width,
           height: props.height,
           rotate: props.rotate,
           font: resolvedFont.value
-        });
-      }
-    };
-    onMounted(generate);
+        }),
+        onRender: (base64Url) => {
+          base64.value = base64Url;
+        }
+      });
+      renderController.observe(wrapperRef.value);
+      renderController.render();
+    });
     watch(
       () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
       generate
     );
-    const wrapperRef = ref(null);
     let observer;
     onMounted(() => {
       if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
@@ -85,7 +77,11 @@ var Watermark = defineComponent({
       });
       observer.observe(wrapperRef.value, { childList: true });
     });
-    onBeforeUnmount(() => observer?.disconnect());
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      renderController?.disconnect();
+      renderController = void 0;
+    });
     const overlayStyle = computed(
       () => getWatermarkOverlayStyle({
         base64Url: base64.value,