@expcat/tigercat-vue 1.3.4 → 1.5.0

package/dist/{chunk-4K2CCBFT.mjs → chunk-FISKCPTN.mjs}

@@ -162,15 +162,16 @@ var Alert = defineComponent({
     let countdownInterval;
     onMounted(() => {
       if (props.duration && props.duration > 0 && props.closable) {
+        const duration = props.duration;
         autoCloseTimer = setTimeout(() => {
           visible.value = false;
           emit("close", new MouseEvent("click"));
-        }, props.duration);
+        }, duration);
         if (props.showCountdown) {
           const startTime = Date.now();
           countdownInterval = setInterval(() => {
             const elapsed = Date.now() - startTime;
-            countdownProgress.value = Math.max(0, 100 - elapsed / props.duration * 100);
+            countdownProgress.value = Math.max(0, 100 - elapsed / duration * 100);
           }, 50);
         }
       }

package/dist/{chunk-IORFQMZH.mjs → chunk-FT2HWF7P.mjs}

@@ -1,13 +1,13 @@
 import {
   Steps,
   StepsItem
-} from "./chunk-RE7K3KNW.mjs";
-import {
-  useTigerConfig
-} from "./chunk-VG6E4NX6.mjs";
+} from "./chunk-HWL36OCD.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/FormWizard.ts
 import { defineComponent, computed, ref, watch, h } from "vue";

package/dist/{chunk-OK4PVFQG.mjs → chunk-G2LB4QCL.mjs}

@@ -1,6 +1,10 @@
 // src/components/ChartTooltip.ts
 import { defineComponent, h, computed, ref, watch, Teleport } from "vue";
-import { classNames, getChartTooltipTransform } from "@expcat/tigercat-core";
+import {
+  classNames,
+  getChartTooltipTransform,
+  resolveChartTooltipPosition
+} from "@expcat/tigercat-core";
 var ChartTooltip = defineComponent({
   name: "TigerChartTooltip",
   props: {
@@ -31,25 +35,24 @@ var ChartTooltip = defineComponent({
       () => [props.x, props.y, props.visible],
       (_value, _oldValue, onCleanup) => {
         if (!props.visible) return;
-        let x = props.x + 12;
-        let y = props.y - 8;
+        const initialPosition = resolveChartTooltipPosition({
+          x: props.x,
+          y: props.y,
+          rect: { width: 0, height: 0 },
+          viewport: { width: window.innerWidth, height: window.innerHeight }
+        });
         const frameHandle = requestAnimationFrame(() => {
           if (!tooltipRef.value) return;
           const rect = tooltipRef.value.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const viewportHeight = window.innerHeight;
-          if (x + rect.width > viewportWidth - 8) {
-            x = props.x - rect.width - 12;
-          }
-          if (y + rect.height > viewportHeight - 8) {
-            y = props.y - rect.height - 8;
-          }
-          x = Math.max(8, x);
-          y = Math.max(8, y);
-          adjustedPosition.value = { x, y };
+          adjustedPosition.value = resolveChartTooltipPosition({
+            x: props.x,
+            y: props.y,
+            rect,
+            viewport: { width: window.innerWidth, height: window.innerHeight }
+          });
         });
         onCleanup(() => cancelAnimationFrame(frameHandle));
-        adjustedPosition.value = { x, y };
+        adjustedPosition.value = initialPosition;
       },
       { immediate: true }
     );

package/dist/{chunk-HFRPZA5S.js → chunk-GBYNY77G.js}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunkDS7RQFEGjs = require('./chunk-DS7RQFEG.js');
+var _chunk2RCBEBBRjs = require('./chunk-2RCBEBBR.js');
 
 
-var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
+var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
 
-var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
+var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
 
 // src/components/FormWizard.ts
 var _vue = require('vue');
@@ -159,7 +159,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
   },
   emits: ["change", "update:current", "finish"],
   setup(props, { slots, attrs, emit }) {
-    const config = _chunk25EYT2CBjs.useTigerConfig.call(void 0, );
+    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
     const labels = _vue.computed.call(void 0, () => _tigercatcore.getFormWizardLabels.call(void 0, mergedLocale.value, props.labels));
     const innerCurrent = _vue.ref.call(void 0, _nullishCoalesce(props.current, () => ( props.defaultCurrent)));
@@ -251,7 +251,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
     };
     return () => {
       const stepsNodes = props.steps.map(
-        (step, index) => _vue.h.call(void 0, _chunkDS7RQFEGjs.StepsItem, {
+        (step, index) => _vue.h.call(void 0, _chunk2RCBEBBRjs.StepsItem, {
           key: _nullishCoalesce(step.key, () => ( index)),
           title: step.title,
           description: step.description,
@@ -281,7 +281,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
         [
           props.showSteps && props.steps.length > 0 ? _vue.h.call(void 0, "div", { class: stepsHeaderClass }, [
             _vue.h.call(void 0, 
-              _chunkDS7RQFEGjs.Steps,
+              _chunk2RCBEBBRjs.Steps,
               {
                 current: currentIndex.value,
                 direction: props.direction,

package/dist/{chunk-OGDZTDZ6.mjs → chunk-GHG2MCLM.mjs}

@@ -4,6 +4,9 @@ import {
   useVueEscapeKey,
   useVueFocusTrap
 } from "./chunk-BDTPFPSB.mjs";
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/Spotlight.ts
 import {
@@ -31,6 +34,8 @@ import {
   getSpotlightSearchState,
   getSpotlightShortcutLabel,
   mergeStyleValues,
+  mergeTigerLocale,
+  resolveLocaleText,
   restoreFocus,
   shouldCloseOnMaskClick,
   spotlightEmptyClasses,
@@ -76,11 +81,15 @@ var Spotlight = defineComponent({
     },
     placeholder: {
       type: String,
-      default: "Search"
+      default: void 0
     },
     emptyText: {
       type: String,
-      default: "No results found"
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
     },
     inputAriaLabel: {
       type: String,
@@ -131,8 +140,13 @@ var Spotlight = defineComponent({
       default: false
     }
   },
-  emits: ["update:open", "open-change", "close", "update:query", "query-change", "select"],
+  emits: ["update:open", "open-change", "update:query", "query-change", "select"],
   setup(props, { emit, attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const placeholderText = computed(
+      () => resolveLocaleText("Search", props.placeholder, mergedLocale.value?.common?.searchPlaceholder)
+    );
     const uncontrolledOpen = ref(props.defaultOpen);
     const uncontrolledQuery = ref(props.defaultQuery);
     const activeIndex = ref(-1);
@@ -154,7 +168,6 @@ var Spotlight = defineComponent({
       if (props.open === void 0) uncontrolledOpen.value = nextOpen;
       emit("update:open", nextOpen);
       emit("open-change", nextOpen);
-      if (!nextOpen) emit("close");
     };
     const setQueryValue = (nextQuery) => {
       if (props.query === void 0) uncontrolledQuery.value = nextQuery;
@@ -275,8 +288,8 @@ var Spotlight = defineComponent({
                   value: resolvedQuery.value,
                   type: "search",
                   class: spotlightInputClasses,
-                  placeholder: props.placeholder,
-                  "aria-label": props.inputAriaLabel ?? props.placeholder,
+                  placeholder: placeholderText.value,
+                  "aria-label": props.inputAriaLabel ?? placeholderText.value,
                   autocomplete: "off",
                   ...getPickerComboboxAria({
                     expanded: true,
@@ -356,7 +369,15 @@ var Spotlight = defineComponent({
                     ]
                   )
                 )
-              ) : h("div", { class: spotlightEmptyClasses }, props.emptyText)
+              ) : h(
+                "div",
+                { class: spotlightEmptyClasses },
+                resolveLocaleText(
+                  "No results found",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
+              )
             ]
           )
         ]

package/dist/{chunk-ZUPVK5L7.js → chunk-GJ5HJOQP.js}

@@ -2,6 +2,9 @@
 
 var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
 
+
+var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
+
 // src/components/DatePicker.ts
 var _vue = require('vue');
 
@@ -38,6 +41,8 @@ var _vue = require('vue');
 
 
 
+
+
 
 
 
@@ -46,6 +51,19 @@ var CalendarIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.
 var CloseIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.CloseIconPath, "w-4 h-4");
 var ChevronLeftIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronLeftIconPath, "w-5 h-5");
 var ChevronRightIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronRightIconPath, "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;
@@ -199,7 +217,11 @@ var DatePicker = _vue.defineComponent.call(void 0, {
       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);
@@ -210,6 +232,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     clear: () => true
   },
   setup(props, { emit, attrs }) {
+    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const isOpen = _vue.ref.call(void 0, false);
     const calendarRef = _vue.ref.call(void 0, null);
     const mobileCalendarRef = _vue.ref.call(void 0, null);
@@ -232,7 +255,10 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     });
     const minDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.minDate));
     const maxDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.maxDate));
-    const localeCode = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLocaleCode.call(void 0, props.locale));
+    const mergedLocale = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, normalizeDatePickerLocale(props.locale))
+    );
+    const localeCode = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLocaleCode.call(void 0, mergedLocale.value));
     const viewingMonth = _vue.ref.call(void 0, 
       _nullishCoalesce(_optionalChain([(_nullishCoalesce(selectedDate.value, () => ( selectedRange.value[0]))), 'optionalAccess', _2 => _2.getMonth, 'call', _3 => _3()]), () => ( (/* @__PURE__ */ new Date()).getMonth()))
     );
@@ -266,7 +292,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     const isRtl = _vue.computed.call(void 0, () => _tigercatcore.getLocaleDirection.call(void 0, localeCode.value) === "rtl");
     const previousMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
     const nextMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
-    const labels = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLabels.call(void 0, props.locale, props.labels));
+    const labels = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLabels.call(void 0, mergedLocale.value, props.labels));
     const mobileDate = _vue.computed.call(void 0, () => {
       if (!isRangeMode.value) return _nullishCoalesce(selectedDate.value, () => ( _tigercatcore.normalizeDate.call(void 0, /* @__PURE__ */ new Date())));
       const [start, end] = selectedRange.value;
@@ -285,11 +311,6 @@ var DatePicker = _vue.defineComponent.call(void 0, {
       emit("update:modelValue", value);
       emit("change", value);
     };
-    const addDays = (date, days) => {
-      const next = new Date(date);
-      next.setDate(next.getDate() + days);
-      return next;
-    };
     const focusDateButtonByIso = (iso) => {
       const button = _optionalChain([calendarRef, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.querySelector, 'call', _8 => _8(
         `button[data-date="${iso}"]`
@@ -331,7 +352,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
       if (!baseIso) return;
       const baseDate = _tigercatcore.parseDate.call(void 0, baseIso);
       if (!baseDate) return;
-      let candidate = addDays(baseDate, deltaDays);
+      let candidate = _tigercatcore.addDays.call(void 0, baseDate, deltaDays);
       for (let attempts = 0; attempts < 42; attempts++) {
         const iso = _tigercatcore.formatDate.call(void 0, candidate, "yyyy-MM-dd");
         const el = _optionalChain([calendarRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(
@@ -357,7 +378,7 @@ var DatePicker = _vue.defineComponent.call(void 0, {
           if (fallback) focusDateButtonByIso(fallback);
           return;
         }
-        candidate = addDays(candidate, deltaDays);
+        candidate = _tigercatcore.addDays.call(void 0, candidate, deltaDays);
       }
     };
     const handleCalendarKeyDown = async (event) => {
@@ -420,7 +441,18 @@ var DatePicker = _vue.defineComponent.call(void 0, {
     }
     function handleShortcut(shortcut) {
       const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      emitValue(val);
+      if (!isRangeMode.value) {
+        const date = val instanceof Date ? _tigercatcore.normalizeDate.call(void 0, val) : val ? _tigercatcore.normalizeDate.call(void 0, _tigercatcore.parseDate.call(void 0, val)) : null;
+        emitValue(date);
+      } else {
+        const range = val;
+        if (range && Array.isArray(range)) {
+          emitValue([
+            range[0] ? _tigercatcore.normalizeDate.call(void 0, range[0] instanceof Date ? range[0] : _tigercatcore.parseDate.call(void 0, range[0])) : null,
+            range[1] ? _tigercatcore.normalizeDate.call(void 0, range[1] instanceof Date ? range[1] : _tigercatcore.parseDate.call(void 0, range[1])) : null
+          ]);
+        }
+      }
       closeCalendar();
     }
     function selectDate(date) {
@@ -471,21 +503,16 @@ var DatePicker = _vue.defineComponent.call(void 0, {
       emitValue(!isRangeMode.value ? null : [null, null]);
       emit("clear");
     }
+    function stepViewingMonth(delta) {
+      const next = _tigercatcore.addMonths.call(void 0, new Date(viewingYear.value, viewingMonth.value, 1), delta);
+      viewingYear.value = next.getFullYear();
+      viewingMonth.value = next.getMonth();
+    }
     function previousMonth() {
-      if (viewingMonth.value === 0) {
-        viewingMonth.value = 11;
-        viewingYear.value--;
-      } else {
-        viewingMonth.value--;
-      }
+      stepViewingMonth(-1);
     }
     function nextMonth() {
-      if (viewingMonth.value === 11) {
-        viewingMonth.value = 0;
-        viewingYear.value++;
-      } else {
-        viewingMonth.value++;
-      }
+      stepViewingMonth(1);
     }
     function isDateDisabled(date) {
       if (!date) return true;
@@ -727,10 +754,6 @@ var DatePicker = _vue.defineComponent.call(void 0, {
               ]),
               // Calendar grid
               (() => {
-                const [rangeStart, rangeEnd] = selectedRange.value;
-                const normStart = rangeStart ? _tigercatcore.normalizeDate.call(void 0, rangeStart) : null;
-                const normEnd = rangeEnd ? _tigercatcore.normalizeDate.call(void 0, rangeEnd) : null;
-                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
                 return _vue.h.call(void 0, 
                   "div",
                   {
@@ -742,41 +765,39 @@ var DatePicker = _vue.defineComponent.call(void 0, {
                   [
                     ...calendarDays.value.map((date, index) => {
                       if (!date) return null;
-                      const normDate = _tigercatcore.normalizeDate.call(void 0, date);
-                      const isRangeStart = isRangeMode.value && rangeStart ? _tigercatcore.isSameDay.call(void 0, date, rangeStart) : false;
-                      const isRangeEnd = isRangeMode.value && rangeEnd ? _tigercatcore.isSameDay.call(void 0, date, rangeEnd) : false;
-                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                      const isSelected = !isRangeMode.value ? selectedDate.value ? _tigercatcore.isSameDay.call(void 0, date, selectedDate.value) : false : isRangeStart || isRangeEnd;
-                      const isCurrentMonthDay = isCurrentMonth(date);
-                      const isTodayDay = _tigercatcore.isToday.call(void 0, date);
-                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                      const iso = _tigercatcore.formatDate.call(void 0, date, "yyyy-MM-dd");
+                      const cell = _tigercatcore.getDatePickerCalendarCellState.call(void 0, {
+                        date,
+                        selectedDate: selectedDate.value,
+                        selectedRange: selectedRange.value,
+                        isRangeMode: isRangeMode.value,
+                        isCurrentMonth,
+                        isDateDisabled
+                      });
                       return _vue.h.call(void 0, 
                         "button",
                         {
                           key: index,
                           type: "button",
                           class: _tigercatcore.getDatePickerDayCellClasses.call(void 0, 
-                            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-F7WZCYYD.mjs → chunk-GL63FRI4.mjs}

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

package/dist/{chunk-JZJEZKGN.js → chunk-GV3LRZSR.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
@@ -28,26 +28,36 @@ var _vue = require('vue');
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var MESSAGE_CONTAINER_ID = "tiger-message-container";
 var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
 var MESSAGE_CONTAINER_ROOT_ID = `${MESSAGE_CONTAINER_ID}-root`;
+var MESSAGE_POSITIONS = [
+  "top",
+  "top-left",
+  "top-right",
+  "bottom",
+  "bottom-left",
+  "bottom-right"
+];
 var messageInstances = _vue.ref.call(void 0, []);
-var instanceIdCounter = 0;
 var IS_TEST_ENV = (() => {
   const proc = globalThis.process;
   return typeof proc !== "undefined" && _optionalChain([proc, 'access', _ => _.env, 'optionalAccess', _2 => _2.NODE_ENV]) === "test";
 })();
 var containerApp = null;
-function getNextInstanceId() {
-  return ++instanceIdCounter;
-}
+var getNextInstanceId = _tigercatcore.createInstanceCounter.call(void 0, );
 var MessageContainer = _vue.defineComponent.call(void 0, {
   name: "TigerMessageContainer",
   props: {
     position: {
       type: String,
       default: "top"
+    },
+    messages: {
+      type: Array,
+      default: () => []
     }
   },
   setup(props) {
@@ -113,20 +123,33 @@ var MessageContainer = _vue.defineComponent.call(void 0, {
         "div",
         {
           class: containerClasses.value,
-          id: MESSAGE_CONTAINER_ID,
+          id: props.position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${props.position}`,
           "aria-live": "polite",
           "aria-relevant": "additions",
+          "data-tiger-message-position": props.position,
           "data-tiger-message-container": ""
         },
-        IS_TEST_ENV ? messageInstances.value.map(renderMessageItem) : _vue.h.call(void 0, 
-          _vue.TransitionGroup,
-          { name: "message" },
-          () => messageInstances.value.map(renderMessageItem)
-        )
+        IS_TEST_ENV ? props.messages.map(renderMessageItem) : _vue.h.call(void 0, _vue.TransitionGroup, { name: "message" }, () => props.messages.map(renderMessageItem))
       )
     );
   }
 });
+var MessageHost = _vue.defineComponent.call(void 0, {
+  name: "TigerMessageHost",
+  setup() {
+    return () => MESSAGE_POSITIONS.map((position) => {
+      const positionedMessages = messageInstances.value.filter(
+        (message) => message.position === position
+      );
+      if (positionedMessages.length === 0) return null;
+      return _vue.h.call(void 0, MessageContainer, {
+        key: position,
+        position,
+        messages: positionedMessages
+      });
+    });
+  }
+});
 function ensureContainer() {
   if (!_tigercatcore.isBrowser.call(void 0, )) {
     return;
@@ -144,7 +167,7 @@ function ensureContainer() {
     rootEl.id = MESSAGE_CONTAINER_ROOT_ID;
     document.body.appendChild(rootEl);
   }
-  containerApp = _vue.createApp.call(void 0, MessageContainer);
+  containerApp = _vue.createApp.call(void 0, MessageHost);
   containerApp.mount(rootEl);
 }
 function addMessage(config) {
@@ -157,7 +180,8 @@ function addMessage(config) {
     closable: config.closable || false,
     onClose: config.onClose,
     icon: config.icon,
-    className: config.className
+    className: config.className,
+    position: _nullishCoalesce(config.position, () => ( "top"))
   };
   messageInstances.value.push(instance);
   ensureContainer();

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

@@ -1,5 +1,5 @@
 // src/components/AvatarGroup.ts
-import { defineComponent, h, provide } from "vue";
+import { defineComponent, h, provide, reactive, watch } from "vue";
 import {
   coerceClassValue,
   getAvatarGroupClasses,
@@ -28,10 +28,17 @@ var AvatarGroup = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    provide(AVATAR_GROUP_INJECTION_KEY, {
+    const groupContext = reactive({
       size: props.size,
       itemClass: getAvatarGroupItemClasses()
     });
+    watch(
+      () => props.size,
+      (size) => {
+        groupContext.size = size;
+      }
+    );
+    provide(AVATAR_GROUP_INJECTION_KEY, groupContext);
     return () => {
       const children = slots.default?.() ?? [];
       const flatChildren = children.flatMap(