@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

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

@@ -1,6 +1,9 @@
 import {
   createFilledIcon
 } from "./chunk-2TNZ4JNT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/DatePicker.ts
 import { defineComponent, computed, ref, nextTick, h, watch, onBeforeUnmount } from "vue";
@@ -13,11 +16,10 @@ import {
   formatMonthYear,
   addDays,
   addMonths,
-  isSameDay,
   isDateInRange,
   getCalendarDays,
   getShortDayNames,
-  isToday as isTodayUtil,
+  getDatePickerCalendarCellState,
   normalizeDate,
   datePickerBaseClasses,
   datePickerInputWrapperClasses,
@@ -36,18 +38,32 @@ import {
   datePickerClearButtonClasses,
   datePickerFooterClasses,
   datePickerFooterButtonClasses,
-  CalendarIconPath,
-  CloseIconPath,
-  ChevronLeftIconPath,
-  ChevronRightIconPath,
+  calendarSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  chevronLeftSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
   getDatePickerLocaleCode,
   getDatePickerLabels,
-  getLocaleDirection
+  getLocaleDirection,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
-var CalendarIcon = createFilledIcon(CalendarIconPath, "w-5 h-5");
-var CloseIcon = createFilledIcon(CloseIconPath, "w-4 h-4");
-var ChevronLeftIcon = createFilledIcon(ChevronLeftIconPath, "w-5 h-5");
-var ChevronRightIcon = createFilledIcon(ChevronRightIconPath, "w-5 h-5");
+var CalendarIcon = createFilledIcon(calendarSolidIcon20PathD, "w-5 h-5");
+var CloseIcon = createFilledIcon(closeSolidIcon20PathD, "w-4 h-4");
+var ChevronLeftIcon = createFilledIcon(chevronLeftSolidIcon20PathD, "w-5 h-5");
+var ChevronRightIcon = createFilledIcon(chevronRightSolidIcon20PathD, "w-5 h-5");
+function normalizeDatePickerLocale(locale) {
+  if (!locale) return void 0;
+  if (typeof locale === "string") return { locale };
+  if ("datePicker" in locale) return locale;
+  const preset = locale;
+  return {
+    locale: hasDatePickerLocaleCode(preset) ? preset.locale : void 0,
+    datePicker: preset
+  };
+}
+function hasDatePickerLocaleCode(locale) {
+  return typeof locale.locale === "string";
+}
 var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
 var isModelValue = (value) => {
   if (isDateLike(value)) return true;
@@ -201,7 +217,11 @@ var DatePicker = defineComponent({
       return isModelValue(value);
     },
     /**
-     * Emitted when date changes
+     * Convenience event emitted alongside `update:modelValue` on every value
+     * change. This is an intentional, non-v-model event (the idiomatic Vue
+     * pattern); it always carries the same normalized value as
+     * `update:modelValue`. Prefer `v-model` for two-way binding and use
+     * `@change` only for side effects.
      */
     change: (value) => {
       return isModelValue(value);
@@ -212,6 +232,7 @@ var DatePicker = defineComponent({
     clear: () => true
   },
   setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
     const isOpen = ref(false);
     const calendarRef = ref(null);
     const mobileCalendarRef = ref(null);
@@ -234,7 +255,10 @@ var DatePicker = defineComponent({
     });
     const minDateParsed = computed(() => parseDate(props.minDate));
     const maxDateParsed = computed(() => parseDate(props.maxDate));
-    const localeCode = computed(() => getDatePickerLocaleCode(props.locale));
+    const mergedLocale = computed(
+      () => mergeTigerLocale(config.value.locale, normalizeDatePickerLocale(props.locale))
+    );
+    const localeCode = computed(() => getDatePickerLocaleCode(mergedLocale.value));
     const viewingMonth = ref(
       (selectedDate.value ?? selectedRange.value[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
     );
@@ -268,7 +292,7 @@ var DatePicker = defineComponent({
     const isRtl = computed(() => getLocaleDirection(localeCode.value) === "rtl");
     const previousMonthIcon = computed(() => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
     const nextMonthIcon = computed(() => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
-    const labels = computed(() => getDatePickerLabels(props.locale, props.labels));
+    const labels = computed(() => getDatePickerLabels(mergedLocale.value, props.labels));
     const mobileDate = computed(() => {
       if (!isRangeMode.value) return selectedDate.value ?? normalizeDate(/* @__PURE__ */ new Date());
       const [start, end] = selectedRange.value;
@@ -417,7 +441,18 @@ var DatePicker = defineComponent({
     }
     function handleShortcut(shortcut) {
       const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      emitValue(val);
+      if (!isRangeMode.value) {
+        const date = val instanceof Date ? normalizeDate(val) : val ? normalizeDate(parseDate(val)) : null;
+        emitValue(date);
+      } else {
+        const range = val;
+        if (range && Array.isArray(range)) {
+          emitValue([
+            range[0] ? normalizeDate(range[0] instanceof Date ? range[0] : parseDate(range[0])) : null,
+            range[1] ? normalizeDate(range[1] instanceof Date ? range[1] : parseDate(range[1])) : null
+          ]);
+        }
+      }
       closeCalendar();
     }
     function selectDate(date) {
@@ -719,10 +754,6 @@ var DatePicker = defineComponent({
               ]),
               // Calendar grid
               (() => {
-                const [rangeStart, rangeEnd] = selectedRange.value;
-                const normStart = rangeStart ? normalizeDate(rangeStart) : null;
-                const normEnd = rangeEnd ? normalizeDate(rangeEnd) : null;
-                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
                 return h(
                   "div",
                   {
@@ -734,41 +765,39 @@ var DatePicker = defineComponent({
                   [
                     ...calendarDays.value.map((date, index) => {
                       if (!date) return null;
-                      const normDate = normalizeDate(date);
-                      const isRangeStart = isRangeMode.value && rangeStart ? isSameDay(date, rangeStart) : false;
-                      const isRangeEnd = isRangeMode.value && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                      const isSelected = !isRangeMode.value ? selectedDate.value ? isSameDay(date, selectedDate.value) : false : isRangeStart || isRangeEnd;
-                      const isCurrentMonthDay = isCurrentMonth(date);
-                      const isTodayDay = isTodayUtil(date);
-                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                      const iso = formatDate(date, "yyyy-MM-dd");
+                      const cell = getDatePickerCalendarCellState({
+                        date,
+                        selectedDate: selectedDate.value,
+                        selectedRange: selectedRange.value,
+                        isRangeMode: isRangeMode.value,
+                        isCurrentMonth,
+                        isDateDisabled
+                      });
                       return h(
                         "button",
                         {
                           key: index,
                           type: "button",
                           class: getDatePickerDayCellClasses(
-                            isCurrentMonthDay,
-                            isSelected,
-                            isTodayDay,
-                            isDisabled,
-                            Boolean(isInRange),
-                            Boolean(isRangeStart),
-                            Boolean(isRangeEnd)
+                            cell.isCurrentMonthDay,
+                            cell.isSelected,
+                            cell.isTodayDay,
+                            cell.isDisabled,
+                            cell.isInRange,
+                            cell.isRangeStart,
+                            cell.isRangeEnd
                           ),
-                          disabled: isDisabled,
+                          disabled: cell.isDisabled,
                           onClick: () => selectDate(date),
                           role: "gridcell",
-                          "data-date": iso,
+                          "data-date": cell.iso,
                           onFocus: () => {
-                            activeDateIso.value = iso;
+                            activeDateIso.value = cell.iso;
                           },
-                          tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
-                          "aria-label": iso,
-                          "aria-selected": isSelected,
-                          "aria-current": isTodayDay ? "date" : void 0
+                          tabindex: activeDateIso.value === cell.iso && !cell.isDisabled ? 0 : -1,
+                          "aria-label": cell.iso,
+                          "aria-selected": cell.isSelected,
+                          "aria-current": cell.isTodayDay ? "date" : void 0
                         },
                         date.getDate()
                       );

package/dist/{chunk-UKMOWUYH.mjs → chunk-MYKKKVGK.mjs}

@@ -58,7 +58,7 @@ var Checkbox = defineComponent({
      * Default checked state (uncontrolled mode)
      * @default false
      */
-    defaultChecked: {
+    defaultValue: {
       type: Boolean,
       default: false
     },
@@ -88,7 +88,7 @@ var Checkbox = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const groupContextRef = inject(CheckboxGroupKey, null);
     const groupContext = computed(() => groupContextRef?.value);
-    const internalChecked = ref(props.defaultChecked);
+    const internalChecked = ref(props.defaultValue);
     const isControlled = computed(() => props.modelValue !== null);
     const effectiveSize = computed(() => props.size || groupContext.value?.size || "md");
     const effectiveDisabled = computed(

package/dist/{chunk-3AF4VRCD.mjs → chunk-N3C6YI7I.mjs}

@@ -13,7 +13,7 @@ var Switch = defineComponent({
      * Whether the switch is checked
      * @default false
      */
-    checked: {
+    modelValue: {
       type: Boolean,
       default: false
     },
@@ -42,9 +42,9 @@ var Switch = defineComponent({
   },
   emits: {
     /**
-     * Emitted when checked state changes (for v-model:checked)
+     * Emitted when checked state changes (for v-model)
      */
-    "update:checked": (value) => typeof value === "boolean",
+    "update:modelValue": (value) => typeof value === "boolean",
     /**
      * Emitted when checked state changes
      */
@@ -52,13 +52,13 @@ var Switch = defineComponent({
   },
   setup(props, { emit, attrs }) {
     const switchClasses = computed(
-      () => getSwitchClasses(props.size, props.checked, props.disabled, props.className, attrs.class)
+      () => getSwitchClasses(props.size, props.modelValue, props.disabled, props.className, attrs.class)
     );
-    const thumbClasses = computed(() => getSwitchThumbClasses(props.size, props.checked));
+    const thumbClasses = computed(() => getSwitchThumbClasses(props.size, props.modelValue));
     const emitChange = () => {
       if (props.disabled) return;
-      const newValue = !props.checked;
-      emit("update:checked", newValue);
+      const newValue = !props.modelValue;
+      emit("update:modelValue", newValue);
       emit("change", newValue);
     };
     const handleKeyDown = (event) => {
@@ -74,7 +74,7 @@ var Switch = defineComponent({
         ...attrs,
         type: "button",
         role: "switch",
-        "aria-checked": props.checked,
+        "aria-checked": props.modelValue,
         "aria-disabled": props.disabled ? "true" : void 0,
         class: switchClasses.value,
         style: mergeStyleValues(attrs.style, props.style),

package/dist/{chunk-NHBN6VAY.mjs → chunk-NYWIBDO6.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/SunburstChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -206,7 +206,7 @@ var SunburstChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-Y3BQSELH.mjs → chunk-O4F75KHL.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/FunnelChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -211,7 +211,7 @@ var FunnelChart = defineComponent({
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

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

@@ -64,6 +64,14 @@ var AutoComplete = defineComponent({
       type: String,
       default: ""
     },
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
     size: {
       type: String,
       default: "md"
@@ -76,9 +84,9 @@ var AutoComplete = defineComponent({
       type: Boolean,
       default: false
     },
-    notFoundText: {
+    emptyText: {
       type: String,
-      default: "No matches found"
+      default: void 0
     },
     filterOption: {
       type: [Boolean, Function],
@@ -97,14 +105,17 @@ var AutoComplete = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "select", "search", "change"],
+  emits: ["update:modelValue", "update:searchValue", "select", "search-change", "change"],
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const instanceId = ++autoCompleteInstanceId;
     const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
     const isOpen = ref(false);
-    const inputValue = ref(String(props.modelValue ?? ""));
+    const uncontrolledSearchValue = ref(
+      String(props.searchValue ?? props.modelValue ?? props.defaultSearchValue ?? "")
+    );
+    const inputValue = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activeIndex = ref(-1);
     const containerRef = ref(null);
     const inputRef = ref(null);
@@ -117,7 +128,9 @@ var AutoComplete = defineComponent({
     watch(
       () => props.modelValue,
       (val) => {
-        inputValue.value = String(val ?? "");
+        if (props.searchValue === void 0) {
+          uncontrolledSearchValue.value = String(val ?? props.defaultSearchValue ?? "");
+        }
       }
     );
     function openDropdown() {
@@ -132,11 +145,35 @@ var AutoComplete = defineComponent({
       isOpen.value = false;
       activeIndex.value = -1;
     }
+    function constrainToOption() {
+      if (props.allowFreeInput) return;
+      const match = props.options.find((o) => !o.disabled && o.label === inputValue.value);
+      if (match) {
+        if (String(match.value) !== String(props.modelValue)) {
+          emit("update:modelValue", match.value);
+          emit("select", match.value, match);
+          emit("change", match.value);
+        }
+        return;
+      }
+      const current = props.options.find((o) => String(o.value) === String(props.modelValue));
+      const revertLabel = current ? current.label : "";
+      if (revertLabel !== inputValue.value) {
+        uncontrolledSearchValue.value = revertLabel;
+        emit("update:searchValue", revertLabel);
+        emit("search-change", revertLabel);
+        emit("update:modelValue", current ? current.value : "");
+        emit("change", current ? current.value : "");
+      }
+    }
     function handleInput(e) {
       const val = e.target.value;
-      inputValue.value = val;
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = val;
+      }
       emit("update:modelValue", val);
-      emit("search", val);
+      emit("update:searchValue", val);
+      emit("search-change", val);
       emit("change", val);
       if (!isOpen.value) openDropdown();
       if (props.defaultActiveFirstOption) {
@@ -145,16 +182,23 @@ var AutoComplete = defineComponent({
     }
     function handleSelect(option) {
       if (option.disabled) return;
-      inputValue.value = option.label;
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = option.label;
+      }
       emit("update:modelValue", option.value);
+      emit("update:searchValue", option.label);
       emit("select", option.value, option);
+      emit("search-change", option.label);
       emit("change", option.value);
       closeDropdown();
     }
     function handleClear(e) {
       e.stopPropagation();
-      inputValue.value = "";
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = "";
+      }
       emit("update:modelValue", "");
+      emit("update:searchValue", "");
       emit("change", "");
       nextTick(() => inputRef.value?.focus());
     }
@@ -179,6 +223,9 @@ var AutoComplete = defineComponent({
           e.preventDefault();
           if (activeIndex.value >= 0 && activeIndex.value < options.length) {
             handleSelect(options[activeIndex.value]);
+          } else {
+            constrainToOption();
+            closeDropdown();
           }
           break;
         case "Escape":
@@ -228,7 +275,8 @@ var AutoComplete = defineComponent({
             autocomplete: "off",
             onInput: handleInput,
             onFocus: openDropdown,
-            onKeydown: handleKeyDown
+            onKeydown: handleKeyDown,
+            onBlur: constrainToOption
           }),
           // Clear button
           showClearButton.value ? h(
@@ -262,6 +310,7 @@ var AutoComplete = defineComponent({
                     !!option.disabled,
                     props.size
                   ),
+                  onMousedown: (e) => e.preventDefault(),
                   onClick: () => handleSelect(option),
                   onMouseenter: () => {
                     activeIndex.value = index;
@@ -275,7 +324,11 @@ var AutoComplete = defineComponent({
             {
               class: classNames(autoCompleteDropdownClasses, autoCompleteEmptyStateClasses)
             },
-            props.notFoundText
+            resolveLocaleText(
+              "No matches found",
+              props.emptyText,
+              mergedLocale.value?.common?.emptyText
+            )
           ) : null
         ]
       );

package/dist/{chunk-DMV26JNR.mjs → chunk-PD2PKYJE.mjs}

@@ -9,7 +9,9 @@ import {
   clampDimensions,
   applyAspectRatio,
   defaultResizeHandles,
-  createDocumentDragSession
+  createDocumentDragSession,
+  getResizeKeyboardDelta,
+  getResizeHandleOrientation
 } from "@expcat/tigercat-core";
 var Resizable = defineComponent({
   name: "TigerResizable",
@@ -130,17 +132,67 @@ var Resizable = defineComponent({
         deltaY: clamped.height - startHeight.value
       });
     };
+    const onKeyDown = (handle, e) => {
+      if (props.disabled) return;
+      const delta = getResizeKeyboardDelta(e.key);
+      if (!delta) return;
+      e.preventDefault();
+      const startW = width.value ?? 0;
+      const startH = height.value ?? 0;
+      const { deltaWidth, deltaHeight } = calculateResizeDelta(
+        handle,
+        delta.deltaX,
+        delta.deltaY,
+        props.axis
+      );
+      let newW = startW + deltaWidth;
+      let newH = startH + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = applyAspectRatio(newW, newH, startW, startH);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = clampDimensions(
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      const evt = {
+        width: clamped.width,
+        height: clamped.height,
+        handle,
+        deltaX: clamped.width - startW,
+        deltaY: clamped.height - startH
+      };
+      emit("resize", evt);
+      emit("resize-end", evt);
+    };
     onBeforeUnmount(() => {
       cleanupDragSession();
     });
     return () => {
-      const handleNodes = props.handles.map(
-        (pos) => h("div", {
+      const handleNodes = props.handles.map((pos) => {
+        const usesHeight = pos === "top" || pos === "bottom";
+        const valueNow = Math.round((usesHeight ? height.value : width.value) ?? 0);
+        return h("div", {
           class: getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
           "data-handle": pos,
-          onMousedown: (e) => onMouseDown(pos, e)
-        })
-      );
+          role: "separator",
+          "aria-label": `Resize ${pos}`,
+          "aria-orientation": getResizeHandleOrientation(pos),
+          "aria-valuenow": valueNow,
+          "aria-valuemin": usesHeight ? props.minHeight : props.minWidth,
+          "aria-valuemax": usesHeight ? props.maxHeight : props.maxWidth,
+          tabindex: props.disabled ? -1 : 0,
+          onMousedown: (e) => onMouseDown(pos, e),
+          onKeydown: (e) => onKeyDown(pos, e)
+        });
+      });
       return h(
         "div",
         {

package/dist/{chunk-HVVPFQW2.mjs → chunk-PLUABMUD.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Badge.ts
 import { defineComponent, computed, h } from "vue";
 import {
@@ -12,12 +16,18 @@ import {
   badgeWrapperClasses,
   badgePositionClasses,
   formatBadgeContent,
-  shouldHideBadge
+  shouldHideBadge,
+  getStatusLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var Badge = defineComponent({
   name: "TigerBadge",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     variant: {
       type: String,
       default: "danger"
@@ -60,6 +70,10 @@ var Badge = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getStatusLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     const isDot = computed(() => props.type === "dot");
     const isHidden = computed(() => shouldHideBadge(props.content, props.type, props.showZero));
     const displayContent = computed(
@@ -79,7 +93,7 @@ var Badge = defineComponent({
         return props.standalone ? null : slots.default?.() ?? null;
       }
       const attrsRecord = attrs;
-      const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${displayContent.value ?? ""}`);
+      const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? labels.value.badgeLabel : props.type === "number" ? labels.value.badgeCountLabel.replace("{count}", String(displayContent.value)) : `${displayContent.value ?? ""}`);
       const badgeElement = h(
         "span",
         {