@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-W6TMZ7ZT.js → chunk-GOBWUEHV.js}

@@ -24,107 +24,75 @@ var RichTextEditor = vue.defineComponent({
     },
     readOnly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    className: { type: String, default: void 0 }
+    className: { type: String, default: void 0 },
+    engine: {
+      type: Object,
+      default: void 0
+    }
   },
   emits: ["update:value", "change"],
   setup(props, { emit, attrs }) {
     const editorRef = vue.ref(null);
     const internalValue = vue.ref(props.defaultValue || "");
     const activeFormats = vue.ref(/* @__PURE__ */ new Set());
+    let engineInstance = null;
     const isControlled = vue.computed(() => props.value !== void 0);
     const currentContent = vue.computed(() => isControlled.value ? props.value : internalValue.value);
-    const toolbarButtons = vue.computed(() => props.toolbar ?? tigercatCore.defaultToolbar);
+    const toolbarItems = vue.computed(() => props.toolbar ?? tigercatCore.defaultToolbar);
     const isEmpty = vue.computed(() => tigercatCore.isContentEmpty(currentContent.value));
     vue.watch(
       () => props.value,
       (newVal) => {
-        if (newVal !== void 0 && editorRef.value) {
-          const sanitized = tigercatCore.sanitizeHtml(newVal);
-          if (editorRef.value.innerHTML !== sanitized) {
-            editorRef.value.innerHTML = sanitized;
-          }
+        if (newVal !== void 0 && engineInstance) {
+          engineInstance.setValue(newVal);
         }
       }
     );
+    vue.watch(
+      () => [props.readOnly, props.disabled],
+      ([ro, dis]) => {
+        engineInstance?.setReadOnly(ro, dis);
+      }
+    );
     vue.onMounted(() => {
-      if (editorRef.value) {
-        const initial = tigercatCore.sanitizeHtml(currentContent.value);
-        if (initial) {
-          editorRef.value.innerHTML = initial;
+      if (!editorRef.value) return;
+      const engine = props.engine ?? tigercatCore.builtinRichTextEngine;
+      engineInstance = engine.create({
+        element: editorRef.value,
+        initialValue: currentContent.value,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        toolbar: toolbarItems.value,
+        notifyChange(html) {
+          if (!isControlled.value) internalValue.value = html;
+          emit("update:value", html);
+          emit("change", html);
+        },
+        notifyActiveFormats(next) {
+          activeFormats.value = next;
         }
-      }
+      });
     });
-    function updateActiveFormats() {
-      if (typeof document === "undefined") return;
-      const next = /* @__PURE__ */ new Set();
-      if (document.queryCommandState("bold")) next.add("bold");
-      if (document.queryCommandState("italic")) next.add("italic");
-      if (document.queryCommandState("underline")) next.add("underline");
-      if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
-      if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
-      if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
-      activeFormats.value = next;
-    }
-    function execAction(actionName) {
+    vue.onBeforeUnmount(() => {
+      engineInstance?.destroy();
+      engineInstance = null;
+    });
+    function execButtonAction(btn) {
       if (props.readOnly || props.disabled) return;
-      editorRef.value?.focus();
-      const mapping = tigercatCore.mapToolbarAction(actionName);
-      if (mapping) {
-        document.execCommand(mapping.command, false, mapping.argument);
-        handleInput();
-        updateActiveFormats();
-        return;
-      }
-      if (actionName === "codeBlock") {
-        document.execCommand("formatBlock", false, "PRE");
-        handleInput();
+      if (btn.action && editorRef.value) {
+        btn.action(editorRef.value);
         return;
       }
-      if (actionName === "link") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
-        if (url && tigercatCore.isValidUrl(url)) {
-          document.execCommand("createLink", false, url);
-          handleInput();
-        }
-        return;
-      }
-      if (actionName === "image") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
-        if (url && tigercatCore.isValidUrl(url)) {
-          document.execCommand("insertImage", false, url);
-          handleInput();
-        }
-      }
-    }
-    function handleInput() {
-      if (!editorRef.value) return;
-      const html = editorRef.value.innerHTML;
-      const sanitized = tigercatCore.sanitizeHtml(html);
-      if (!isControlled.value) {
-        internalValue.value = sanitized;
-      }
-      emit("update:value", sanitized);
-      emit("change", sanitized);
+      engineInstance?.exec(btn.name);
     }
     function handleKeydown(e) {
-      const match = tigercatCore.findHotkeyMatch(toolbarButtons.value, e);
+      const match = tigercatCore.findHotkeyMatch(toolbarItems.value, e);
       if (match) {
         e.preventDefault();
-        execAction(match);
+        execButtonAction(match);
       }
     }
-    let selectionHandler = null;
-    vue.onMounted(() => {
-      if (typeof document !== "undefined") {
-        selectionHandler = updateActiveFormats;
-        document.addEventListener("selectionchange", selectionHandler);
-      }
-    });
-    vue.onBeforeUnmount(() => {
-      if (selectionHandler && typeof document !== "undefined") {
-        document.removeEventListener("selectionchange", selectionHandler);
-      }
-    });
     const containerClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.getRichTextContainerClasses(props.disabled, props.className),
@@ -145,8 +113,17 @@ var RichTextEditor = vue.defineComponent({
           role: "toolbar",
           "aria-label": "Text formatting"
         },
-        toolbarButtons.value.map(
-          (btn) => vue.h(
+        toolbarItems.value.map((item, idx) => {
+          if (tigercatCore.isToolbarSeparator(item)) {
+            return vue.h("div", {
+              key: `sep-${idx}`,
+              class: tigercatCore.richTextToolbarSeparatorClasses,
+              role: "separator",
+              "aria-orientation": "vertical"
+            });
+          }
+          const btn = item;
+          return vue.h(
             "button",
             {
               key: btn.name,
@@ -158,24 +135,22 @@ var RichTextEditor = vue.defineComponent({
               disabled: props.disabled || props.readOnly,
               onClick: (e) => {
                 e.preventDefault();
-                execAction(btn.name);
+                execButtonAction(btn);
               }
             },
-            btn.label
-          )
-        )
+            btn.icon ? vue.h("span", { innerHTML: btn.icon }) : btn.label
+          );
+        })
       );
       const editorEl = vue.h("div", {
         ref: editorRef,
         class: editorAreaClasses.value,
-        contenteditable: !(props.readOnly || props.disabled),
         role: "textbox",
         "aria-multiline": true,
         "aria-readonly": props.readOnly || void 0,
         "aria-disabled": props.disabled || void 0,
         "aria-placeholder": props.placeholder,
         "data-placeholder": props.placeholder,
-        onInput: handleInput,
         onKeydown: handleKeydown
       });
       const placeholderEl = isEmpty.value && props.placeholder ? vue.h(

package/dist/{chunk-IOBJYUUO.mjs → chunk-GVZRR2WP.mjs}

@@ -1,4 +1,5 @@
-import { useFloatingPopup } from './chunk-6A57RY3H.mjs';
+import { useFloatingPopup } from './chunk-DBTS5QBX.mjs';
+import { renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { createFloatingIdFactory, classNames, getPopoverContainerClasses, coerceClassValue, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
 
@@ -80,31 +81,33 @@ var Popover = defineComponent({
             defaultSlot
           ),
           // Floating content
-          currentVisible.value ? h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
-            h(
-              "div",
-              {
-                id: popoverId,
-                role: "dialog",
-                "aria-modal": "false",
-                "aria-labelledby": hasTitle ? titleId : void 0,
-                "aria-describedby": hasContent ? contentId : void 0,
-                class: contentClasses.value
-              },
-              [
-                hasTitle && h(
-                  "div",
-                  { id: titleId, class: POPOVER_TITLE_CLASSES },
-                  slots.title ? slots.title() : props.title
-                ),
-                hasContent && h(
-                  "div",
-                  { id: contentId, class: POPOVER_TEXT_CLASSES },
-                  slots.content ? slots.content() : props.content
-                )
-              ].filter(Boolean)
-            )
-          ]) : null
+          currentVisible.value ? renderVueBodyTeleport(
+            h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
+              h(
+                "div",
+                {
+                  id: popoverId,
+                  role: "dialog",
+                  "aria-modal": "false",
+                  "aria-labelledby": hasTitle ? titleId : void 0,
+                  "aria-describedby": hasContent ? contentId : void 0,
+                  class: contentClasses.value
+                },
+                [
+                  hasTitle && h(
+                    "div",
+                    { id: titleId, class: POPOVER_TITLE_CLASSES },
+                    slots.title ? slots.title() : props.title
+                  ),
+                  hasContent && h(
+                    "div",
+                    { id: contentId, class: POPOVER_TEXT_CLASSES },
+                    slots.content ? slots.content() : props.content
+                  )
+                ].filter(Boolean)
+              )
+            ])
+          ) : null
         ]
       );
     };

package/dist/{chunk-RSBAFDUA.mjs → chunk-GWNXDOIG.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, h } from 'vue';
-import { getFixedVirtualRange, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
+import { variableSizeStrategy, dynamicSizeStrategy, fixedSizeStrategy, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
 
 // src/components/VirtualList.ts
 var VirtualList = defineComponent({
@@ -7,6 +7,15 @@ var VirtualList = defineComponent({
   props: {
     itemCount: { type: Number, default: 0 },
     itemHeight: { type: Number, default: 40 },
+    estimatedItemHeight: { type: Number, default: void 0 },
+    getItemHeight: {
+      type: Function,
+      default: void 0
+    },
+    sizeStrategy: {
+      type: Object,
+      default: void 0
+    },
     height: { type: Number, default: 400 },
     overscan: { type: Number, default: 5 }
   },
@@ -14,11 +23,20 @@ var VirtualList = defineComponent({
   setup(props, { emit, attrs, slots }) {
     const scrollTop = ref(0);
     const containerRef = ref(null);
+    const strategy = computed(() => {
+      if (props.sizeStrategy) return props.sizeStrategy;
+      if (props.getItemHeight) {
+        return variableSizeStrategy(props.getItemHeight, props.itemCount);
+      }
+      if (props.estimatedItemHeight !== void 0) {
+        return dynamicSizeStrategy(props.estimatedItemHeight, props.itemCount);
+      }
+      return fixedSizeStrategy(props.itemHeight);
+    });
     const range = computed(
-      () => getFixedVirtualRange(
+      () => strategy.value.getRange(
         scrollTop.value,
         props.height,
-        props.itemHeight,
         props.itemCount,
         props.overscan
       )
@@ -30,9 +48,11 @@ var VirtualList = defineComponent({
       }
     }
     return () => {
-      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const { startIndex, endIndex, totalHeight } = range.value;
+      const currentStrategy = strategy.value;
       const items = [];
       for (let i = startIndex; i <= endIndex; i++) {
+        const itemH = currentStrategy.getItemHeight(i);
         const slotContent = slots.default?.({ index: i });
         items.push(
           h(
@@ -40,7 +60,7 @@ var VirtualList = defineComponent({
             {
               key: i,
               style: {
-                height: `${props.itemHeight}px`,
+                height: `${itemH}px`,
                 width: "100%"
               }
             },
@@ -48,6 +68,7 @@ var VirtualList = defineComponent({
           )
         );
       }
+      const offsetTop = startIndex >= 0 ? currentStrategy.getItemOffset(startIndex) : 0;
       return h(
         "div",
         {

package/dist/{chunk-FLAJKB2O.js → chunk-GZK6R2E3.js}

@@ -12,6 +12,12 @@ function useChartInteraction(options) {
   const localHoveredIndex = vue.ref(null);
   const localSelectedIndex = vue.ref(null);
   const tooltipPosition = vue.ref({ x: 0, y: 0 });
+  const tooltipScheduler = tigercatCore.createChartPointerMoveScheduler({
+    onPositionChange: (position) => {
+      tooltipPosition.value = position;
+    }
+  });
+  vue.onScopeDispose(() => tooltipScheduler.cancel());
   const resolvedHoveredIndex = vue.computed(() => {
     const prop = options.hoveredIndexProp?.();
     return prop !== void 0 ? prop : localHoveredIndex.value;
@@ -45,9 +51,10 @@ function useChartInteraction(options) {
     }
   };
   const handleMouseMove = (event) => {
-    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
   };
   const handleMouseLeave = () => {
+    tooltipScheduler.cancel();
     if (!unref(options.hoverable)) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;

package/dist/{chunk-T77L326M.mjs → chunk-H2BH6TJN.mjs}

@@ -157,6 +157,51 @@ var ImageCropper = defineComponent({
       document.addEventListener("touchmove", onTouchMove, { passive: false });
       document.addEventListener("touchend", onTouchEnd);
     };
+    const updateCropRect = (nextRect) => {
+      cropRect.value = nextRect;
+      emit("crop-change", cropRect.value);
+    };
+    const getKeyboardDelta = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          return { dx: -step, dy: 0 };
+        case "ArrowRight":
+          return { dx: step, dy: 0 };
+        case "ArrowUp":
+          return { dx: 0, dy: -step };
+        case "ArrowDown":
+          return { dx: 0, dy: step };
+        default:
+          return null;
+      }
+    };
+    const handleMoveKeyDown = (e) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
+      );
+    };
+    const handleResizeKeyDown = (e, handle) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        resizeCropRect(
+          cropRect.value,
+          handle,
+          delta.dx,
+          delta.dy,
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio,
+          props.minWidth,
+          props.minHeight
+        )
+      );
+    };
     const getCropResult = () => {
       return new Promise((resolve, reject) => {
         if (!imageRef.value) {
@@ -280,8 +325,12 @@ var ImageCropper = defineComponent({
           width: `${cr.width}px`,
           height: `${cr.height}px`
         },
+        role: "button",
+        tabindex: 0,
+        "aria-label": "Move crop area",
         onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move")
+        onTouchstart: (e) => handleTouchStart(e, "move"),
+        onKeydown: handleMoveKeyDown
       });
       const guideLines = props.guides ? [
         // Horizontal lines
@@ -342,8 +391,12 @@ var ImageCropper = defineComponent({
         return h("div", {
           class: getCropperHandleClasses(handle),
           style: pos,
+          role: "button",
+          tabindex: 0,
+          "aria-label": `Resize crop area ${handle}`,
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
+          onKeydown: (e) => handleResizeKeyDown(e, handle)
         });
       });
       return h(

package/dist/chunk-H4F4G2E4.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, h } from 'vue';
+import { getSegmentedContainerStyle, classNames, getSegmentedContainerClasses, coerceClassValue, getSegmentedIndicatorStyle, getSegmentedIndicatorClasses, getSegmentedOptionClasses } from '@expcat/tigercat-core';
+
+// src/components/Segmented.ts
+var Segmented = defineComponent({
+  name: "TigerSegmented",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    return () => h(
+      "div",
+      {
+        class: classNames(
+          getSegmentedContainerClasses(props.size, props.block),
+          coerceClassValue(attrs.class)
+        ),
+        style: getSegmentedContainerStyle(props.options.length),
+        role: "radiogroup"
+      },
+      [
+        h("div", {
+          "data-tiger-segmented-indicator": "true",
+          "aria-hidden": "true",
+          class: getSegmentedIndicatorClasses(props.size),
+          style: getSegmentedIndicatorStyle(
+            props.options.findIndex((opt) => opt.value === props.modelValue),
+            props.options.length,
+            props.size
+          )
+        }),
+        ...props.options.map((opt) => {
+          const selected = opt.value === props.modelValue;
+          const isDisabled = !!opt.disabled || props.disabled;
+          return h(
+            "label",
+            {
+              key: opt.value,
+              class: classNames(
+                getSegmentedOptionClasses(props.size, selected, isDisabled),
+                props.block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt)
+            },
+            [h("span", null, opt.label)]
+          );
+        })
+      ]
+    );
+  }
+});
+var Segmented_default = Segmented;
+
+export { Segmented, Segmented_default };

package/dist/{chunk-QDFUM2QT.js → chunk-HU2XBA2A.js}

@@ -34,7 +34,7 @@ var DatePicker = vue.defineComponent({
      * Example: 'zh-CN', 'en-US'
      */
     locale: {
-      type: String
+      type: [String, Object]
     },
     /**
      * UI labels for i18n.
@@ -221,7 +221,8 @@ var DatePicker = vue.defineComponent({
     const calendarDays = vue.computed(() => {
       return tigercatCore.getCalendarDays(viewingYear.value, viewingMonth.value);
     });
-    const dayNames = vue.computed(() => tigercatCore.getShortDayNames(props.locale));
+    const localeCode = vue.computed(() => tigercatCore.getDatePickerLocaleCode(props.locale));
+    const dayNames = vue.computed(() => tigercatCore.getShortDayNames(localeCode.value));
     const labels = vue.computed(() => tigercatCore.getDatePickerLabels(props.locale, props.labels));
     const emitValue = (value) => {
       emit("update:modelValue", value);
@@ -534,7 +535,7 @@ var DatePicker = vue.defineComponent({
                 vue.h(
                   "div",
                   { class: tigercatCore.datePickerMonthYearClasses },
-                  tigercatCore.formatMonthYear(viewingYear.value, viewingMonth.value, props.locale)
+                  tigercatCore.formatMonthYear(viewingYear.value, viewingMonth.value, localeCode.value)
                 ),
                 vue.h(
                   "button",

package/dist/{chunk-JM3ZZYTE.mjs → chunk-I34OWAAY.mjs}

@@ -1,6 +1,6 @@
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
+import { defineComponent, computed, ref, watch, onBeforeUnmount, h } from 'vue';
+import { getChartInnerRect, getGaugeGradientPrefix, valueToGaugeAngle, createGaugeAnimation, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 
 var GaugeChart = defineComponent({
   name: "TigerGaugeChart",
@@ -23,6 +23,7 @@ var GaugeChart = defineComponent({
     },
     trackColor: { type: String, default: "var(--tiger-border,#e5e7eb)" },
     color: { type: String, default: "var(--tiger-primary,#2563eb)" },
+    gradient: { type: Boolean, default: false },
     // a11y
     title: { type: String },
     desc: { type: String },
@@ -33,9 +34,26 @@ var GaugeChart = defineComponent({
     const radius = computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2 - 4);
     const cx = computed(() => innerRect.value.width / 2);
     const cy = computed(() => innerRect.value.height / 2);
-    const needleAngle = computed(
+    const gradientPrefix = getGaugeGradientPrefix();
+    const valueGradientId = `${gradientPrefix}-value`;
+    const targetAngle = computed(
       () => valueToGaugeAngle(props.value, props.min, props.max, props.startAngle, props.endAngle)
     );
+    const animatedAngle = ref(targetAngle.value);
+    let animCtrl = null;
+    watch(targetAngle, (to, from) => {
+      animCtrl?.stop();
+      animCtrl = createGaugeAnimation({
+        from,
+        to,
+        onUpdate: (v) => {
+          animatedAngle.value = v;
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      animCtrl?.stop();
+    });
     const ticks = computed(
       () => props.showTicks ? computeGaugeTicks(
         cx.value,
@@ -54,7 +72,7 @@ var GaugeChart = defineComponent({
       const cY = cy.value;
       const aw = props.arcWidth;
       const trackPath = createGaugeArcPath(c, cY, r, props.startAngle, props.endAngle, aw);
-      const valuePath = needleAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, needleAngle.value, aw) : null;
+      const valuePath = animatedAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, animatedAngle.value, aw) : null;
       const segmentArcs = props.segments?.map((seg, i) => {
         const sStart = valueToGaugeAngle(
           seg.range[0],
@@ -77,7 +95,7 @@ var GaugeChart = defineComponent({
           "stroke-width": 0
         });
       }) ?? [];
-      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, needleAngle.value);
+      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, animatedAngle.value);
       const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
       return h(
         ChartCanvas,
@@ -91,6 +109,23 @@ var GaugeChart = defineComponent({
         },
         {
           default: () => [
+            // Gradient defs (opt-in, only when gradient mode is on and value arc renders)
+            props.gradient && !props.segments && valuePath ? h("defs", {}, [
+              h(
+                "linearGradient",
+                {
+                  id: valueGradientId,
+                  x1: 0,
+                  y1: 0,
+                  x2: 0,
+                  y2: 1
+                },
+                [
+                  h("stop", { offset: "0%", "stop-color": props.color, "stop-opacity": 1 }),
+                  h("stop", { offset: "100%", "stop-color": props.color, "stop-opacity": 0.55 })
+                ]
+              )
+            ]) : null,
             // Track
             h("path", {
               d: trackPath,
@@ -101,9 +136,8 @@ var GaugeChart = defineComponent({
             ...props.segments ? segmentArcs : valuePath ? [
               h("path", {
                 d: valuePath,
-                fill: props.color,
-                "stroke-width": 0,
-                style: { transition: "all 0.3s ease-out" }
+                fill: props.gradient ? `url(#${valueGradientId})` : props.color,
+                "stroke-width": 0
               })
             ] : [],
             // Ticks
@@ -134,8 +168,7 @@ var GaugeChart = defineComponent({
             // Needle
             h("path", {
               d: needlePath,
-              fill: "var(--tiger-text,#374151)",
-              style: { transition: "all 0.3s ease-out" }
+              fill: "var(--tiger-text,#374151)"
             }),
             // Center dot
             h("circle", {
@@ -150,7 +183,7 @@ var GaugeChart = defineComponent({
               {
                 x: c,
                 y: cY + r * 0.35,
-                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
                 "text-anchor": "middle",
                 "dominant-baseline": "middle"
               },