origam 2.5.0 → 2.6.2

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.
  *

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

@@ -1,6 +1,6 @@
 import { computed, isRef } from "vue";
-import { BORDER_RADIUS_REGEX, PREDIFINED_ROUNDED } from "../../consts/index.js";
-import { convertToUnit, formatRoundedStylesVar, getCurrentInstanceName } from "../../utils/index.js";
+import { BORDER_RADIUS_REGEX, PREDEFINED_ROUNDED } from "../../consts/index.js";
+import { convertToUnit, formatRoundedStylesVar, getCurrentInstanceName, isCustomBorderRadius } from "../../utils/index.js";
 const UTILITY_ROUNDED = /* @__PURE__ */ new Set([
   "none",
   "xs",
@@ -22,7 +22,7 @@ export function useRounded(props, name = getCurrentInstanceName()) {
       classes.push(`origam--rounded-${rounded}`);
       return classes;
     }
-    if (typeof rounded === "string" && PREDIFINED_ROUNDED.includes(rounded)) {
+    if (typeof rounded === "string" && PREDEFINED_ROUNDED.includes(rounded)) {
       classes.push(`${name}--rounded-${rounded}`);
       return classes;
     }
@@ -40,20 +40,29 @@ export function useRounded(props, name = 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 = computed(() => {
     const rounded = 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" && PREDIFINED_ROUNDED.includes(rounded) && rounded !== "shaped" && rounded !== "shaped-invert") {
+    if (typeof rounded === "string" && 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;
     }
@@ -64,6 +73,8 @@ export function useRounded(props, name = getCurrentInstanceName()) {
           const values = String(match[key]).split(" ");
           styles.push(...formatRoundedStylesVar(values));
         });
+      } else if (isCustomBorderRadius(rounded)) {
+        styles.push(`border-radius: ${rounded.trim()}`);
       }
     } else if (typeof rounded === "number") {
       styles.push(`border-radius: ${convertToUnit(rounded)}`);

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

@@ -21,7 +21,7 @@ function useScroll(props, args = {}) {
   const isScrollActive = (0, _vue.shallowRef)(false);
   const isScrollingUp = (0, _vue.shallowRef)(false);
   const scrollThreshold = (0, _vue.computed)(() => {
-    return Number(props.scrollThreshold);
+    return Number(props.scrollThreshold ?? 0);
   });
   const scrollRatio = (0, _vue.computed)(() => {
     return (0, _utils.clamp)((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
@@ -30,7 +30,7 @@ function useScroll(props, args = {}) {
     const targetEl = target.value;
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
-    currentScroll.value = "window" in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    currentScroll.value = "window" in targetEl ? targetEl.scrollY : targetEl.scrollTop;
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
   };

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

@@ -22,7 +22,7 @@ export function useScroll(props, args = {}) {
   const isScrollActive = shallowRef(false);
   const isScrollingUp = shallowRef(false);
   const scrollThreshold = computed(() => {
-    return Number(props.scrollThreshold);
+    return Number(props.scrollThreshold ?? 0);
   });
   const scrollRatio = computed(() => {
     return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
@@ -31,7 +31,7 @@ export function useScroll(props, args = {}) {
     const targetEl = target.value;
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
-    currentScroll.value = "window" in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    currentScroll.value = "window" in targetEl ? targetEl.scrollY : targetEl.scrollTop;
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
   };

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

@@ -3,6 +3,6 @@ import type { ISizeProps } from "../../interfaces";
  * useSize
  ********************************************************/
 export declare function useSize(props: ISizeProps, name?: string): {
-    sizeStyles: import("vue").ComputedRef<never[]>;
+    sizeStyles: import("vue").ComputedRef<string[]>;
     sizeClasses: import("vue").ComputedRef<string[]>;
 };

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

@@ -13,25 +13,37 @@ var _rounded = require("./rounded.composable.cjs");
 var _utils = require("../../utils/index.cjs");
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return (0, _vue.computed)(() => {
-    if (isActive.value && activeState.value?.[key] != null) {
-      return activeState.value[key];
-    }
     if (isHover.value && hoverState.value?.[key] != null) {
       return hoverState.value[key];
     }
-    return rest;
+    if (isActive.value && activeState.value?.[key] != null) {
+      return activeState.value[key];
+    }
+    return rest();
   });
 }
 const noopRef = (0, _vue.computed)(() => false);
 function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState = (0, _vue.computed)(() => void 0), activeState = (0, _vue.computed)(() => void 0), isDisabled = noopRef, flat = noopRef) {
-  const color = pickEffective(props.color, isHover, isActive, hoverState, activeState, "color");
-  const bgColor = pickEffective(props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
-  const border = pickEffective(props.border, isHover, isActive, hoverState, activeState, "border");
-  const rounded = pickEffective(props.rounded, isHover, isActive, hoverState, activeState, "rounded");
-  const elevation = pickEffective(props.elevation, isHover, isActive, hoverState, activeState, "elevation");
-  const padding = pickEffective(props.padding, isHover, isActive, hoverState, activeState, "padding");
-  const margin = pickEffective(props.margin, isHover, isActive, hoverState, activeState, "margin");
-  const gap = pickEffective(props.gap, isHover, isActive, hoverState, activeState, "gap");
+  const statusToIntent = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "danger"
+  };
+  const statusIntent = (0, _vue.computed)(() => {
+    const status = props.status;
+    return status ? statusToIntent[status] ?? status : void 0;
+  });
+  const baseColor = pickEffective(() => props.color, isHover, isActive, hoverState, activeState, "color");
+  const baseBgColor = pickEffective(() => props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
+  const color = (0, _vue.computed)(() => statusIntent.value ? void 0 : baseColor.value);
+  const bgColor = (0, _vue.computed)(() => statusIntent.value ?? baseBgColor.value);
+  const border = pickEffective(() => props.border, isHover, isActive, hoverState, activeState, "border");
+  const rounded = pickEffective(() => props.rounded, isHover, isActive, hoverState, activeState, "rounded");
+  const elevation = pickEffective(() => props.elevation, isHover, isActive, hoverState, activeState, "elevation");
+  const padding = pickEffective(() => props.padding, isHover, isActive, hoverState, activeState, "padding");
+  const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
+  const gap = pickEffective(() => props.gap, isHover, isActive, hoverState, activeState, "gap");
   const sameIntent = (a, b) => {
     return !!a && !!b && a === b && (0, _utils.isIntent)(a);
   };
@@ -48,7 +60,7 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     void isDisabled.value;
     const hoverHasOwnBg = hoverState.value?.bgColor != null && !sameIntent(hoverState.value.bgColor, props.bgColor);
     const activeHasOwnBg = activeState.value?.bgColor != null && !sameIntent(activeState.value.bgColor, props.bgColor);
-    const bgRole = isActive.value && !activeHasOwnBg ? "active" : isHover.value && !hoverHasOwnBg ? "hover" : "default";
+    const bgRole = isHover.value && !hoverHasOwnBg ? "hover" : isActive.value && !activeHasOwnBg ? "active" : "default";
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
@@ -88,7 +100,17 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   const {
     borderClasses,
     borderStyles
-  } = (0, _border.useBorder)(border);
+  } = (0, _border.useBorder)((0, _vue.reactive)({
+    get border() {
+      return border.value;
+    },
+    get borderColor() {
+      return props.borderColor;
+    },
+    get borderStyle() {
+      return props.borderStyle;
+    }
+  }));
   const {
     roundedClasses,
     roundedStyles

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

@@ -19,26 +19,38 @@ import {
 } from "../../utils/index.js";
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return computed(() => {
-    if (isActive.value && activeState.value?.[key] != null) {
-      return activeState.value[key];
-    }
     if (isHover.value && hoverState.value?.[key] != null) {
       return hoverState.value[key];
     }
-    return rest;
+    if (isActive.value && activeState.value?.[key] != null) {
+      return activeState.value[key];
+    }
+    return rest();
   });
 }
 const noopRef = computed(() => false);
 export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState = computed(() => void 0), activeState = computed(() => void 0), isDisabled = noopRef, flat = noopRef) {
-  const color = pickEffective(props.color, isHover, isActive, hoverState, activeState, "color");
-  const bgColor = pickEffective(props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
-  const border = pickEffective(props.border, isHover, isActive, hoverState, activeState, "border");
-  const rounded = pickEffective(props.rounded, isHover, isActive, hoverState, activeState, "rounded");
-  const elevation = pickEffective(props.elevation, isHover, isActive, hoverState, activeState, "elevation");
-  const padding = pickEffective(props.padding, isHover, isActive, hoverState, activeState, "padding");
-  const margin = pickEffective(props.margin, isHover, isActive, hoverState, activeState, "margin");
+  const statusToIntent = {
+    success: "success",
+    info: "info",
+    warning: "warning",
+    error: "danger"
+  };
+  const statusIntent = computed(() => {
+    const status = props.status;
+    return status ? statusToIntent[status] ?? status : void 0;
+  });
+  const baseColor = pickEffective(() => props.color, isHover, isActive, hoverState, activeState, "color");
+  const baseBgColor = pickEffective(() => props.bgColor, isHover, isActive, hoverState, activeState, "bgColor");
+  const color = computed(() => statusIntent.value ? void 0 : baseColor.value);
+  const bgColor = computed(() => statusIntent.value ?? baseBgColor.value);
+  const border = pickEffective(() => props.border, isHover, isActive, hoverState, activeState, "border");
+  const rounded = pickEffective(() => props.rounded, isHover, isActive, hoverState, activeState, "rounded");
+  const elevation = pickEffective(() => props.elevation, isHover, isActive, hoverState, activeState, "elevation");
+  const padding = pickEffective(() => props.padding, isHover, isActive, hoverState, activeState, "padding");
+  const margin = pickEffective(() => props.margin, isHover, isActive, hoverState, activeState, "margin");
   const gap = pickEffective(
-    props.gap,
+    () => props.gap,
     isHover,
     isActive,
     hoverState,
@@ -61,7 +73,7 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     void isDisabled.value;
     const hoverHasOwnBg = hoverState.value?.bgColor != null && !sameIntent(hoverState.value.bgColor, props.bgColor);
     const activeHasOwnBg = activeState.value?.bgColor != null && !sameIntent(activeState.value.bgColor, props.bgColor);
-    const bgRole = isActive.value && !activeHasOwnBg ? "active" : isHover.value && !hoverHasOwnBg ? "hover" : "default";
+    const bgRole = isHover.value && !hoverHasOwnBg ? "hover" : isActive.value && !activeHasOwnBg ? "active" : "default";
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
@@ -98,7 +110,19 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
     return styles;
   });
   void intentBgExpr;
-  const { borderClasses, borderStyles } = useBorder(border);
+  const { borderClasses, borderStyles } = useBorder(
+    reactive({
+      get border() {
+        return border.value;
+      },
+      get borderColor() {
+        return props.borderColor;
+      },
+      get borderStyle() {
+        return props.borderStyle;
+      }
+    })
+  );
   const { roundedClasses, roundedStyles } = useRounded(rounded);
   const { elevationClasses, elevationStyles } = useElevation(
     elevation,

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

@@ -7,10 +7,19 @@ exports.useStatus = useStatus;
 var _enums = require("../../enums/index.cjs");
 var _utils = require("../../utils/index.cjs");
 var _vue = require("vue");
+const STATUS_TO_INTENT = {
+  success: "success",
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
 function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
   const statusIcon = (0, _vue.computed)(() => {
     return `$${props.status}`;
   });
+  const statusIntent = (0, _vue.computed)(() => {
+    return props.status ? STATUS_TO_INTENT[props.status] ?? props.status : void 0;
+  });
   const effectivePosition = (0, _vue.computed)(() => {
     return props.statusIconPosition ?? `${_enums.STATUS_POSITION.PREPEND}`;
   });
@@ -37,6 +46,7 @@ function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
     icon,
     appendIcon,
     prependIcon,
-    statusClasses
+    statusClasses,
+    statusIntent
   };
 }

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

@@ -1,4 +1,5 @@
 import type { IAdjacentProps, IStatusProps } from "../../interfaces";
+import type { TColor } from "../../types";
 /*********************************************************
  * useStatus
  ********************************************************/
@@ -7,4 +8,5 @@ export declare function useStatus(props: IStatusProps & IAdjacentProps, name?: s
     appendIcon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;
     prependIcon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;
     statusClasses: import("vue").ComputedRef<string[]>;
+    statusIntent: import("vue").ComputedRef<TColor>;
 };

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

@@ -1,10 +1,19 @@
 import { STATUS_POSITION } from "../../enums/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 import { computed } from "vue";
+const STATUS_TO_INTENT = {
+  success: "success",
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
 export function useStatus(props, name = getCurrentInstanceName()) {
   const statusIcon = computed(() => {
     return `$${props.status}`;
   });
+  const statusIntent = computed(() => {
+    return props.status ? STATUS_TO_INTENT[props.status] ?? props.status : void 0;
+  });
   const effectivePosition = computed(() => {
     return props.statusIconPosition ?? `${STATUS_POSITION.PREPEND}`;
   });
@@ -27,5 +36,5 @@ export function useStatus(props, name = getCurrentInstanceName()) {
     }
     return classes;
   });
-  return { icon, appendIcon, prependIcon, statusClasses };
+  return { icon, appendIcon, prependIcon, statusClasses, statusIntent };
 }