origam 2.5.0 → 2.6.1

package/dist/src/composables/Commons/color.composable.cjs

@@ -9,15 +9,15 @@ exports.useColor = useColor;
 exports.useColorEffect = useColorEffect;
 exports.useTextColor = useTextColor;
 var _vue = require("vue");
-var _colorUtil = require("../../utils/Commons/color.util.ts");
-var _gradientUtil = require("../../utils/Commons/gradient.util.ts");
+var _color = require("../../utils/Commons/color.util.cjs");
+var _gradient = require("../../utils/Commons/gradient.util.cjs");
 function useColor(colors) {
   const colorClasses = (0, _vue.computed)(() => {
     const classes = [];
-    if (colors.value.background && !(0, _gradientUtil.isGradient)(colors.value.background) && (0, _colorUtil.isUtilityIntent)(colors.value.background)) {
+    if (colors.value.background && !(0, _gradient.isGradient)(colors.value.background) && (0, _color.isUtilityIntent)(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && !(0, _gradientUtil.isGradient)(colors.value.text) && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
+    if (colors.value.text && !(0, _gradient.isGradient)(colors.value.text) && (0, _color.isUtilityIntent)(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -28,47 +28,47 @@ function useColor(colors) {
     let bgDecl = null;
     let bgIsGradient = false;
     if (colors.value.background) {
-      if ((0, _gradientUtil.isGradient)(colors.value.background)) {
-        const grad = (0, _gradientUtil.resolveGradient)(colors.value.background);
+      if ((0, _gradient.isGradient)(colors.value.background)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.background);
         if (grad) {
           bgDecl = `background-image: ${grad}`;
           bgIsGradient = true;
         }
-      } else if ((0, _colorUtil.isIntent)(colors.value.background)) {
-        const m = (0, _colorUtil.tokenStylesForIntent)(colors.value.background, "default");
+      } else if ((0, _color.isIntent)(colors.value.background)) {
+        const m = (0, _color.tokenStylesForIntent)(colors.value.background, "default");
         bgDecl = `background-color: ${m["background-color"]}`;
         bgIntentFg = m.color;
       } else if (colors.value.background === "transparent") {
         bgDecl = `background-color: ${colors.value.background}`;
-      } else if (typeof colors.value.background === "string" && (0, _colorUtil.isCssColor)(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && (0, _color.isCssColor)(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if ((0, _gradientUtil.isGradient)(colors.value.text)) {
-        const grad = (0, _gradientUtil.resolveGradient)(colors.value.text);
+      if ((0, _gradient.isGradient)(colors.value.text)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.text);
         if (grad) {
           fgDecl = "color: transparent";
           styles.push(`background-image: ${grad}`);
           styles.push("background-clip: text");
           styles.push("-webkit-background-clip: text");
         }
-      } else if ((0, _colorUtil.isIntent)(colors.value.text)) {
-        if (bgIntentFg && (0, _colorUtil.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
+      } else if ((0, _color.isIntent)(colors.value.text)) {
+        if (bgIntentFg && (0, _color.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
-          fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(colors.value.text)}`;
+          fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(colors.value.text)}`;
         }
-      } else if (typeof colors.value.text === "string" && (0, _colorUtil.isCssColor)(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && (0, _color.isCssColor)(colors.value.text)) {
         fgDecl = `color: ${colors.value.text}`;
       }
     } else if (bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _colorUtil.isParsableColor)(colors.value.background)) {
-      const parsed = (0, _colorUtil.parseColor)(colors.value.background);
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _color.isParsableColor)(colors.value.background)) {
+      const parsed = (0, _color.parseColor)(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     if (bgDecl) styles.push(bgDecl);
@@ -131,21 +131,21 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     const classes = [];
     const bgVal = bgColor.value;
     const fgVal = color.value;
-    if (bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) {
       classes.push(`origam--bg-${bgVal}`);
     }
-    if (fgVal && (0, _colorUtil.isUtilityIntent)(fgVal)) {
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) {
       classes.push(`origam--color-${fgVal}`);
-    } else if (!fgVal && bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {}
+    } else if (!fgVal && bgVal && (0, _color.isUtilityIntent)(bgVal)) {}
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
     void isDisabled.value;
     const sameIntentBg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const sameIntentFg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const bgRole = isHover.value && (!props.hoverBgColor || sameIntentBg(props.hoverBgColor, props.bgColor)) ? "hover" : isActive.value && (!props.activeBgColor || sameIntentBg(props.activeBgColor, props.bgColor)) ? "active" : "default";
     const _fgRole = isHover.value && (!props.hoverColor || sameIntentFg(props.hoverColor, props.color)) ? "hover" : isActive.value && (!props.activeColor || sameIntentFg(props.activeColor, props.color)) ? "active" : "default";
@@ -155,44 +155,44 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     let bgIntentFg = null;
     let bgIsGradient = false;
     let clipText = false;
-    if (bgColor.value && (0, _gradientUtil.isGradient)(bgColor.value)) {
-      const grad = (0, _gradientUtil.resolveGradient)(bgColor.value);
+    if (bgColor.value && (0, _gradient.isGradient)(bgColor.value)) {
+      const grad = (0, _gradient.resolveGradient)(bgColor.value);
       if (grad) {
         bgDecl = `background-image: ${grad}`;
         bgIsGradient = true;
       }
-    } else if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
-      const m = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, bgRole);
+    } else if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, "default").color;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
     } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _colorUtil.isCssColor)(bgColor.value)) {
-      (0, _colorUtil.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)(bgColor.value, bgRole)}`;
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
+      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _gradientUtil.isGradient)(color.value)) {
-      const grad = (0, _gradientUtil.resolveGradient)(color.value);
+    if (color.value && (0, _gradient.isGradient)(color.value)) {
+      const grad = (0, _gradient.resolveGradient)(color.value);
       if (grad) {
         fgDecl = "color: transparent";
         bgDecl = `background-image: ${grad}`;
         clipText = true;
       }
-    } else if (color.value && (0, _colorUtil.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _colorUtil.isIntent)(bgColor.value) && color.value === bgColor.value) {
+    } else if (color.value && (0, _color.isIntent)(color.value)) {
+      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
-        fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(color.value)}`;
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
       }
-    } else if (color.value && typeof color.value === "string" && (0, _colorUtil.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _colorUtil.warnLegacyColor)("color", color.value);
+    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
+      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
       fgDecl = `color: ${color.value}`;
     } else if (!color.value && bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _colorUtil.parseColor)(bgColor.value);
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
+      const parsed = (0, _color.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     const styles = [];

package/dist/src/composables/Commons/color.composable.d.ts

@@ -35,9 +35,14 @@ export declare function useBackgroundColor<T extends Record<K, TColor>, K extend
 /*********************************************************
  * useColorEffect
  ********************************************************/
-export declare function useColorEffect(props: IColorProps & IBgColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
+export declare function useColorEffect(props: IColorProps & IBgColorProps & {
+    hoverColor?: TColor;
+    activeColor?: TColor;
+    hoverBgColor?: TColor;
+    activeBgColor?: TColor;
+}, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
-    color: ComputedRef<any>;
-    bgColor: ComputedRef<any>;
+    color: ComputedRef<TColor>;
+    bgColor: ComputedRef<TColor>;
 };

package/dist/src/composables/Commons/color.composable.js

@@ -10,8 +10,8 @@ import {
   tokenForegroundForIntent,
   tokenStylesForIntent,
   warnLegacyColor
-} from "../../utils/Commons/color.util.ts";
-import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.ts";
+} from "../../utils/Commons/color.util.js";
+import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.js";
 export function useColor(colors) {
   const colorClasses = computed(() => {
     const classes = [];

package/dist/src/composables/Commons/date-picker-calendar.composable.cjs

@@ -88,7 +88,7 @@ function useDatePickerCalendar(props) {
         isAdjacent,
         isHidden: isAdjacent && !props.showAdjacentMonths,
         isStart,
-        isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+        isSelected: model.value.some(value => adapter.isSameDay(date, adapter.date(value))),
         isEnd,
         isSame,
         localized: adapter.format(date, "dayOfMonth")

package/dist/src/composables/Commons/date-picker-calendar.composable.d.ts

@@ -7,7 +7,7 @@ export declare function useDatePickerCalendar(props: ICalendarProps): {
     daysInMonth: import("vue").ComputedRef<IDay[]>;
     daysInWeek: import("vue").ComputedRef<IDay[]>;
     genDays: (days: unknown[], today: unknown) => Array<IDay>;
-    model: import("../../types").TVModel<ICalendarProps, "date", unknown[]>;
+    model: import("../../types").TVModel<ICalendarProps, "date", readonly unknown[] | unknown[]>;
     weeksInMonth: import("vue").ComputedRef<unknown[][]>;
     weekDays: import("vue").ComputedRef<number[] | undefined>;
     weekNumbers: import("vue").ComputedRef<(number | null)[]>;

package/dist/src/composables/Commons/date-picker-calendar.composable.js

@@ -99,7 +99,7 @@ export function useDatePickerCalendar(props) {
         isAdjacent,
         isHidden: isAdjacent && !props.showAdjacentMonths,
         isStart,
-        isSelected: model.value.some((value) => adapter.isSameDay(date, value)),
+        isSelected: model.value.some((value) => adapter.isSameDay(date, adapter.date(value))),
         isEnd,
         isSame,
         localized: adapter.format(date, "dayOfMonth")

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -17,22 +17,23 @@ function useDefaults(props, name = (0, _utils.getCurrentInstanceName)()) {
   const vm = (0, _utils.getCurrentInstance)("useDefaults");
   const propNames = Object.keys(props);
   if (!propNames.length) return props;
-  const vnodeProps = vm.vnode.props || {};
-  const passedKeys = /* @__PURE__ */new Set();
-  for (const k of Object.keys(vnodeProps)) {
-    passedKeys.add(k);
-    passedKeys.add(camelize(k));
-  }
+  const wasPropPassed = key => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || camelize(k) === key) return true;
+    }
+    return false;
+  };
   const result = {};
   for (const key of propNames) {
-    const wasPassed = passedKeys.has(key);
     const c = (0, _vue.computed)(() => {
-      if (wasPassed) return props[key];
+      const ownValue = props[key];
+      if (wasPropPassed(key)) return ownValue;
       const componentDefs = defaults.value?.[name];
       if (componentDefs?.[key] !== void 0) return componentDefs[key];
       const globalDefs = defaults.value?.global;
       if (globalDefs?.[key] !== void 0) return globalDefs[key];
-      return props[key];
+      return ownValue;
     });
     Object.defineProperty(result, key, {
       get: () => c.value,

package/dist/src/composables/Commons/defaults.composable.js

@@ -9,22 +9,23 @@ export function useDefaults(props, name = getCurrentInstanceName()) {
   const vm = getCurrentInstance("useDefaults");
   const propNames = Object.keys(props);
   if (!propNames.length) return props;
-  const vnodeProps = vm.vnode.props || {};
-  const passedKeys = /* @__PURE__ */ new Set();
-  for (const k of Object.keys(vnodeProps)) {
-    passedKeys.add(k);
-    passedKeys.add(camelize(k));
-  }
+  const wasPropPassed = (key) => {
+    const vnodeProps = vm.vnode.props || {};
+    for (const k in vnodeProps) {
+      if (k === key || camelize(k) === key) return true;
+    }
+    return false;
+  };
   const result = {};
   for (const key of propNames) {
-    const wasPassed = passedKeys.has(key);
     const c = computed(() => {
-      if (wasPassed) return props[key];
+      const ownValue = props[key];
+      if (wasPropPassed(key)) return ownValue;
       const componentDefs = defaults.value?.[name];
       if (componentDefs?.[key] !== void 0) return componentDefs[key];
       const globalDefs = defaults.value?.global;
       if (globalDefs?.[key] !== void 0) return globalDefs[key];
-      return props[key];
+      return ownValue;
     });
     Object.defineProperty(result, key, {
       get: () => c.value,

package/dist/src/composables/Commons/delay.composable.cjs

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDelay = useDelay;
 var _utils = require("../../utils/index.cjs");
 function useDelay(props, cb) {
-  let clearDelay = () => {};
+  const cancelRef = {
+    current: () => {}
+  };
   const runDelay = isOpening => {
-    clearDelay?.();
+    cancelRef.current();
     const delay = Number(isOpening ? props.openDelay : props.closeDelay);
     return new Promise(resolve => {
-      clearDelay = (0, _utils.defer)(delay, () => {
+      cancelRef.current = (0, _utils.defer)(delay, () => {
         cb?.(isOpening);
         resolve(isOpening);
       });
@@ -23,6 +25,9 @@ function useDelay(props, cb) {
   const runCloseDelay = () => {
     return runDelay(false);
   };
+  const clearDelay = () => {
+    cancelRef.current();
+  };
   return {
     clearDelay,
     runOpenDelay,

package/dist/src/composables/Commons/delay.composable.js

@@ -1,12 +1,12 @@
 import { defer } from "../../utils/index.js";
 export function useDelay(props, cb) {
-  let clearDelay = () => {
-  };
+  const cancelRef = { current: () => {
+  } };
   const runDelay = (isOpening) => {
-    clearDelay?.();
+    cancelRef.current();
     const delay = Number(isOpening ? props.openDelay : props.closeDelay);
     return new Promise((resolve) => {
-      clearDelay = defer(delay, () => {
+      cancelRef.current = defer(delay, () => {
         cb?.(isOpening);
         resolve(isOpening);
       });
@@ -18,6 +18,9 @@ export function useDelay(props, cb) {
   const runCloseDelay = () => {
     return runDelay(false);
   };
+  const clearDelay = () => {
+    cancelRef.current();
+  };
   return {
     clearDelay,
     runOpenDelay,

package/dist/src/composables/Commons/density.composable.cjs

@@ -12,7 +12,7 @@ function useDensity(props, name = (0, _utils.getCurrentInstanceName)()) {
     const density = (0, _vue.isRef)(props) ? props.value : props.density;
     const classes = [];
     if (density == null) return classes;
-    if (density && _consts.PREDIFINED_DENSITY.includes(density)) {
+    if (density && _consts.PREDEFINED_DENSITY.includes(density)) {
       classes.push(`${name}--density-${density}`);
     }
     return classes;

package/dist/src/composables/Commons/density.composable.js

@@ -1,12 +1,12 @@
 import { computed, isRef } from "vue";
-import { PREDIFINED_DENSITY } from "../../consts/index.js";
+import { PREDEFINED_DENSITY } from "../../consts/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 export function useDensity(props, name = getCurrentInstanceName()) {
   const densityClasses = computed(() => {
     const density = isRef(props) ? props.value : props.density;
     const classes = [];
     if (density == null) return classes;
-    if (density && PREDIFINED_DENSITY.includes(density)) {
+    if (density && PREDEFINED_DENSITY.includes(density)) {
       classes.push(`${name}--density-${density}`);
     }
     return classes;

package/dist/src/composables/Commons/dragResizer.composable.cjs

@@ -18,6 +18,10 @@ function useDragResizer(el, value, min, max, axis) {
   const isHorizontal = (0, _vue.computed)(() => {
     return axis === _enums.AXIS.X;
   });
+  const onDragEnd = () => {
+    removeListeners.forEach(fn => fn());
+    resizing.value = false;
+  };
   const onMouseDown = e => {
     e.preventDefault();
     e.stopPropagation();
@@ -29,10 +33,7 @@ function useDragResizer(el, value, min, max, axis) {
       const delta = clickOffset - start;
       value.value = (0, _utils.clamp)(initialStart + delta, min, max);
     };
-    const onMouseUp = () => {
-      removeListeners.forEach(fn => fn());
-      resizing.value = false;
-    };
+    const onMouseUp = onDragEnd;
     removeListeners.push(...[(0, _utils.addWindowListener)("mousemove", onMouseMove, onUnmountedCleanupFns), (0, _utils.addWindowListener)("mouseup", onMouseUp, onUnmountedCleanupFns)]);
   };
   const onTouchStart = e => {
@@ -46,11 +47,8 @@ function useDragResizer(el, value, min, max, axis) {
       const delta = clickOffset - start;
       value.value = Math.max(min, Math.min(max, initialStart + delta));
     };
-    const onTouchEnd = () => {
-      removeListeners.forEach(fn => fn());
-      resizing.value = false;
-    };
-    removeListeners.push(...[(0, _utils.addWindowListener)("touchmove", onTouchMove, onUnmountedCleanupFns), (0, _utils.addWindowListener)("touchend touchcancel", onTouchEnd, onUnmountedCleanupFns)]);
+    const onTouchEnd = onDragEnd;
+    removeListeners.push(...[(0, _utils.addWindowListener)("touchmove", onTouchMove, onUnmountedCleanupFns), (0, _utils.addWindowListener)("touchend", onTouchEnd, onUnmountedCleanupFns), (0, _utils.addWindowListener)("touchcancel", onTouchEnd, onUnmountedCleanupFns)]);
   };
   if (el) {
     (0, _composables.useEventListener)(el, "mousedown", onMouseDown);

package/dist/src/composables/Commons/dragResizer.composable.js

@@ -12,6 +12,10 @@ export function useDragResizer(el, value, min, max, axis) {
   const isHorizontal = computed(() => {
     return axis === AXIS.X;
   });
+  const onDragEnd = () => {
+    removeListeners.forEach((fn) => fn());
+    resizing.value = false;
+  };
   const onMouseDown = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -23,10 +27,7 @@ export function useDragResizer(el, value, min, max, axis) {
       const delta = clickOffset - start;
       value.value = clamp(initialStart + delta, min, max);
     };
-    const onMouseUp = () => {
-      removeListeners.forEach((fn) => fn());
-      resizing.value = false;
-    };
+    const onMouseUp = onDragEnd;
     removeListeners.push(...[
       addWindowListener("mousemove", onMouseMove, onUnmountedCleanupFns),
       addWindowListener("mouseup", onMouseUp, onUnmountedCleanupFns)
@@ -43,13 +44,11 @@ export function useDragResizer(el, value, min, max, axis) {
       const delta = clickOffset - start;
       value.value = Math.max(min, Math.min(max, initialStart + delta));
     };
-    const onTouchEnd = () => {
-      removeListeners.forEach((fn) => fn());
-      resizing.value = false;
-    };
+    const onTouchEnd = onDragEnd;
     removeListeners.push(...[
       addWindowListener("touchmove", onTouchMove, onUnmountedCleanupFns),
-      addWindowListener("touchend touchcancel", onTouchEnd, onUnmountedCleanupFns)
+      addWindowListener("touchend", onTouchEnd, onUnmountedCleanupFns),
+      addWindowListener("touchcancel", onTouchEnd, onUnmountedCleanupFns)
     ]);
   };
   if (el) {

package/dist/src/composables/Commons/focus.composable.cjs

@@ -8,7 +8,7 @@ var _vue = require("vue");
 var _composables = require("../../composables/index.cjs");
 var _utils = require("../../utils/index.cjs");
 function useFocus(props, name = (0, _utils.getCurrentInstanceName)()) {
-  const isFocused = (0, _composables.useVModel)(props, "focused");
+  const isFocused = (0, _composables.useVModel)(props, "focused", false);
   const focusClasses = (0, _vue.computed)(() => {
     return {
       [`${name}--focused`]: isFocused.value

package/dist/src/composables/Commons/focus.composable.js

@@ -2,7 +2,7 @@ import { computed } from "vue";
 import { useVModel } from "../../composables/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 export function useFocus(props, name = getCurrentInstanceName()) {
-  const isFocused = useVModel(props, "focused");
+  const isFocused = useVModel(props, "focused", false);
   const focusClasses = computed(() => {
     return {
       [`${name}--focused`]: isFocused.value

package/dist/src/composables/Commons/layout.composable.cjs

@@ -176,6 +176,18 @@ function useCreateLayout(props) {
       if (disableTransitions) {
         disabledTransitions.set(id, disableTransitions);
       }
+      const staleIds = registered.value.filter(existingId => existingId !== id && priorities.get(existingId)?.value === order.value && positions.get(existingId)?.value === position.value);
+      if (staleIds.length > 0) {
+        const staleSet = new Set(staleIds);
+        for (const staleId of staleIds) {
+          priorities.delete(staleId);
+          positions.delete(staleId);
+          layoutSizes.delete(staleId);
+          activeItems.delete(staleId);
+          disabledTransitions.delete(staleId);
+        }
+        registered.value = registered.value.filter(v => !staleSet.has(v));
+      }
       const instances = (0, _utils.findChildrenWithProvide)(_consts.ORIGAM_LAYOUT_KEY, rootVm?.vnode);
       const instanceIndex = instances.indexOf(vm);
       if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);else registered.value.push(id);

package/dist/src/composables/Commons/layout.composable.js

@@ -162,6 +162,20 @@ export function useCreateLayout(props) {
       if (disableTransitions) {
         disabledTransitions.set(id, disableTransitions);
       }
+      const staleIds = registered.value.filter(
+        (existingId) => existingId !== id && priorities.get(existingId)?.value === order.value && positions.get(existingId)?.value === position.value
+      );
+      if (staleIds.length > 0) {
+        const staleSet = new Set(staleIds);
+        for (const staleId of staleIds) {
+          priorities.delete(staleId);
+          positions.delete(staleId);
+          layoutSizes.delete(staleId);
+          activeItems.delete(staleId);
+          disabledTransitions.delete(staleId);
+        }
+        registered.value = registered.value.filter((v) => !staleSet.has(v));
+      }
       const instances = findChildrenWithProvide(ORIGAM_LAYOUT_KEY, rootVm?.vnode);
       const instanceIndex = instances.indexOf(vm);
       if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);

package/dist/src/composables/Commons/message.composable.cjs

@@ -8,7 +8,7 @@ var _vue = require("vue");
 function useMessage(props, otherMessages = (0, _vue.ref)([])) {
   const $slots = (0, _vue.useSlots)();
   const hasMessages = (0, _vue.computed)(() => {
-    return Boolean(props.messages) || Boolean(props.errorMessages) || Boolean(otherMessages.value) || $slots.message;
+    return Boolean(props.messages) || Boolean(props.errorMessages) || otherMessages.value.length > 0 || Boolean($slots.message);
   });
   const messages = (0, _vue.computed)(() => {
     if (props.errorMessages?.length || otherMessages.value.length) {

package/dist/src/composables/Commons/message.composable.d.ts

@@ -3,6 +3,6 @@ import { ComputedRef, Ref } from 'vue';
  * useMessage
  ********************************************************/
 export declare function useMessage(props: any, otherMessages?: Ref<Array<any>> | ComputedRef<Array<any>>): {
-    hasMessages: ComputedRef<true | import("vue").Slot<any> | undefined>;
+    hasMessages: ComputedRef<boolean>;
     messages: ComputedRef<any>;
 };

package/dist/src/composables/Commons/message.composable.js

@@ -2,7 +2,7 @@ import { computed, ref, useSlots } from "vue";
 export function useMessage(props, otherMessages = ref([])) {
   const $slots = useSlots();
   const hasMessages = computed(() => {
-    return Boolean(props.messages) || Boolean(props.errorMessages) || Boolean(otherMessages.value) || $slots.message;
+    return Boolean(props.messages) || Boolean(props.errorMessages) || otherMessages.value.length > 0 || Boolean($slots.message);
   });
   const messages = computed(() => {
     if (props.errorMessages?.length || otherMessages.value.length) {

package/dist/src/composables/Commons/rounded.composable.cjs

@@ -20,7 +20,7 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
       classes.push(`origam--rounded-${rounded}`);
       return classes;
     }
-    if (typeof rounded === "string" && _consts.PREDIFINED_ROUNDED.includes(rounded)) {
+    if (typeof rounded === "string" && _consts.PREDEFINED_ROUNDED.includes(rounded)) {
       classes.push(`${name}--rounded-${rounded}`);
       return classes;
     }
@@ -38,20 +38,29 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
     "large": "var(--origam-radius---xl, 16px)",
     "x-large": "var(--origam-radius---2xl, 24px)"
   };
+  const UTILITY_RADIUS_FALLBACK = {
+    none: "0",
+    xs: "2px",
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  };
   const roundedStyles = (0, _vue.computed)(() => {
     const rounded = (0, _vue.isRef)(props) ? props.value : props.rounded;
     const styles = [];
     if (rounded == null || rounded === false) return styles;
     if (isUtilityRounded(rounded)) {
-      styles.push(`border-radius: var(--origam-radius---${rounded})`);
+      styles.push(`border-radius: var(--origam-radius---${rounded}, ${UTILITY_RADIUS_FALLBACK[rounded]})`);
       return styles;
     }
-    if (typeof rounded === "string" && _consts.PREDIFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
+    if (typeof rounded === "string" && _consts.PREDEFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
       const token = NAMED_RADIUS_TOKEN[rounded];
       if (token) styles.push(`border-radius: ${token}`);
       return styles;
     }
-    if (rounded === true || rounded === "") {
+    if (rounded === true || typeof rounded === "string" && rounded === "") {
       styles.push(`border-radius: var(--origam-radius---md, 8px)`);
       return styles;
     }
@@ -62,6 +71,8 @@ function useRounded(props, name = (0, _utils.getCurrentInstanceName)()) {
           const values = String(match[key]).split(" ");
           styles.push(...(0, _utils.formatRoundedStylesVar)(values));
         });
+      } else if ((0, _utils.isCustomBorderRadius)(rounded)) {
+        styles.push(`border-radius: ${rounded.trim()}`);
       }
     } else if (typeof rounded === "number") {
       styles.push(`border-radius: ${(0, _utils.convertToUnit)(rounded)}`);

package/dist/src/composables/Commons/rounded.composable.d.ts

@@ -5,7 +5,7 @@ import type { TRounded } from '../../types';
  * Resolve the consumer's `rounded` prop into either a class (named variant
  * or legacy boolean) or an inline `border-radius` declaration (free-form
  * CSS value). Mirrors the origam-design-system implementation but uses a
- * static `PREDIFINED_ROUNDED` whitelist instead of the origam
+ * static `PREDEFINED_ROUNDED` whitelist instead of the origam
  * theme-driven `useTheme().current.value.variables.rounded`, since origam
  * ships its radius rungs as fixed primitive tokens.
  *