origam 2.16.0 → 2.17.0

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

@@ -1,12 +1,14 @@
-import { nextTick, watch } from "vue";
+import { nextTick, onMounted, watch } from "vue";
 export function useSelectLink(link, select) {
-  watch(() => link.isActive?.value, (isActive) => {
-    if (link.isLink.value && isActive && select) {
-      nextTick(() => {
-        select(true);
-      });
-    }
-  }, {
-    immediate: true
+  onMounted(() => {
+    watch(() => link.isActive?.value, (isActive) => {
+      if (link.isLink.value && isActive && select) {
+        nextTick(() => {
+          select(true);
+        });
+      }
+    }, {
+      immediate: true
+    });
   });
 }

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

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSize = useSize;
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _size = require("../../consts/Commons/size.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _vue = require("vue");
 const LEGACY_SIZE_TO_UTILITY = {
   "x-small": "xs",
@@ -14,11 +15,11 @@ const LEGACY_SIZE_TO_UTILITY = {
   "large": "lg",
   "x-large": "xl"
 };
-function useSize(props, name = (0, _utils.getCurrentInstanceName)()) {
+function useSize(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const sizeClasses = (0, _vue.computed)(() => {
     const size = (0, _vue.isRef)(props) ? props.value : props.size;
     const classes = [];
-    if (size && _consts.SIZES_ARRAY.includes(size)) {
+    if (size && _size.SIZES_ARRAY.includes(size)) {
       classes.push(`${name}--size-${size}`);
       const utilityRung = LEGACY_SIZE_TO_UTILITY[size];
       if (utilityRung) {
@@ -29,9 +30,9 @@ function useSize(props, name = (0, _utils.getCurrentInstanceName)()) {
   });
   const sizeStyles = (0, _vue.computed)(() => {
     const styles = [];
-    if (props.size && !_consts.SIZES_ARRAY.includes(props.size)) {
-      styles.push(`width: ${(0, _utils.convertToUnit)(props.size)}`);
-      styles.push(`height: ${(0, _utils.convertToUnit)(props.size)}`);
+    if (props.size && !_size.SIZES_ARRAY.includes(props.size)) {
+      styles.push(`width: ${(0, _commons.convertToUnit)(props.size)}`);
+      styles.push(`height: ${(0, _commons.convertToUnit)(props.size)}`);
     }
     return styles;
   });

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

@@ -1,6 +1,22 @@
-import type { ISizeProps } from "../../interfaces";
+import type { ISizeProps } from '../../interfaces/Commons/size.interface';
 /*********************************************************
  * useSize
+ *
+ * @description
+ * Pour une valeur d'enum connue (`SIZES_ARRAY`), emet une classe
+ * `{name}--size-{valeur}` PLUS, via `LEGACY_SIZE_TO_UTILITY`, la classe
+ * utilitaire typographique `origam--text-{xs|sm|md|lg|xl}` correspondante.
+ * Pour une valeur custom (nombre ou longueur CSS non reconnue de l'enum),
+ * `sizeStyles` emet `width`/`height` inline via `convertToUnit` — jamais
+ * les deux canaux a la fois pour une meme valeur.
+ *
+ * @description
+ * ⛔ `useSize` pilote historiquement `width`/`height`, PAS `font-size` —
+ * la classe `origam--text-*` n'est donc pertinente QUE pour un composant
+ * dont `size` implique aussi une echelle typographique (Btn, Chip). Un
+ * composant qui traite `size` comme une pure dimension de boite ne doit
+ * pas consommer `sizeClasses` dans son `:class` : `sizeStyles` reste seul
+ * autoritaire pour la geometrie.
  ********************************************************/
 export declare function useSize(props: ISizeProps, name?: string): {
     sizeStyles: import("vue").ComputedRef<string[]>;

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

@@ -1,5 +1,6 @@
-import { SIZES_ARRAY } from "../../consts/index.js";
-import { convertToUnit, getCurrentInstanceName } from "../../utils/index.js";
+import { SIZES_ARRAY } from "../../consts/Commons/size.const.js";
+import { convertToUnit } from "../../utils/Commons/commons.util.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 import { computed, isRef } from "vue";
 const LEGACY_SIZE_TO_UTILITY = {
   "x-small": "xs",

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

@@ -1,5 +1,19 @@
 /*********************************************************
  * useSsrBoot
+ *
+ * @description
+ * Empeche un flash de transition CSS entre le rendu SSR et l'hydratation :
+ * tant que `isBooted` est faux, `ssrBootStyles` force `transition: none
+ * !important`. `isBooted` bascule a `true` un frame apres le montage
+ * (`onMounted` + `requestAnimationFrame`), pas au montage lui-meme — le
+ * temps que la mise en page initiale se stabilise avant d'autoriser les
+ * transitions.
+ *
+ * @description
+ * `ssrBootStyles` retourne un OBJET quand la transition doit etre
+ * bloquee, et un TABLEAU VIDE une fois booted — deux formes differentes
+ * pour la meme cle de retour, a bind sans normalisation prealable (Vue
+ * accepte les deux formes dans un `:style`).
  ********************************************************/
 export declare function useSsrBoot(): {
     ssrBootStyles: import("vue").ComputedRef<never[] | {

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

@@ -4,41 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStack = useStack;
-var _composables = require("../../composables/index.cjs");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _toggleScope = require("./toggleScope.composable.cjs");
+var _stack = require("../../consts/Commons/stack.const.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _vue = require("vue");
 function useStack(isActive, zIndex, disableGlobalStack) {
-  const vm = (0, _utils.getCurrentInstance)("useStack");
-  const createStackEntry = !disableGlobalStack;
-  const parent = (0, _vue.inject)(_consts.ORIGAM_STACK_KEY, void 0);
+  const vm = (0, _getCurrentInstance.getCurrentInstance)("useStack");
+  const createStackEntry = (0, _vue.computed)(() => !disableGlobalStack.value);
+  const parent = (0, _vue.inject)(_stack.ORIGAM_STACK_KEY, void 0);
   const stack = (0, _vue.reactive)({
     activeChildren: /* @__PURE__ */new Set()
   });
-  (0, _vue.provide)(_consts.ORIGAM_STACK_KEY, stack);
+  (0, _vue.provide)(_stack.ORIGAM_STACK_KEY, stack);
   const _zIndex = (0, _vue.shallowRef)(+zIndex.value);
-  (0, _composables.useToggleScope)(isActive, () => {
-    const lastZIndex = _consts.GLOBAL_STACK.at(-1)?.[1];
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
-    if (createStackEntry) {
-      _consts.GLOBAL_STACK.push([vm.uid, _zIndex.value]);
+  (0, _toggleScope.useToggleScope)(isActive, () => {
+    const lastZIndex = _stack.GLOBAL_STACK.at(-1)?.[1];
+    _zIndex.value = lastZIndex ? lastZIndex + _stack.STACK_Z_INDEX_STEP : +zIndex.value;
+    if (createStackEntry.value) {
+      _stack.GLOBAL_STACK.push([vm.uid, _zIndex.value]);
     }
     parent?.activeChildren.add(vm.uid);
     (0, _vue.onScopeDispose)(() => {
-      if (createStackEntry) {
-        const idx = (0, _vue.toRaw)(_consts.GLOBAL_STACK).findIndex(v => v[0] === vm.uid);
-        _consts.GLOBAL_STACK.splice(idx, 1);
+      if (createStackEntry.value) {
+        const idx = (0, _vue.toRaw)(_stack.GLOBAL_STACK).findIndex(v => v[0] === vm.uid);
+        _stack.GLOBAL_STACK.splice(idx, 1);
       }
       parent?.activeChildren.delete(vm.uid);
     });
   });
   const globalTop = (0, _vue.shallowRef)(true);
-  if (createStackEntry) {
-    (0, _vue.watchEffect)(() => {
-      const _isTop = _consts.GLOBAL_STACK.at(-1)?.[0] === vm.uid;
-      setTimeout(() => globalTop.value = _isTop);
-    });
-  }
+  (0, _vue.watchEffect)(() => {
+    if (!createStackEntry.value) return;
+    const _isTop = _stack.GLOBAL_STACK.at(-1)?.[0] === vm.uid;
+    setTimeout(() => globalTop.value = _isTop);
+  });
   const localTop = (0, _vue.computed)(() => !stack.activeChildren.size);
   return {
     globalTop: (0, _vue.readonly)(globalTop),

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

@@ -1,8 +1,23 @@
 import { Ref } from 'vue';
 /*********************************************************
  * useStack
+ *
+ * @description
+ * ⛔ ADR-005 — `disableGlobalStack` used to arrive as a plain `boolean`
+ * (`props.disableGlobalStack`, read once by the caller's setup() body). A
+ * value set via `theme.components['origam-overlay'].disableGlobalStack`
+ * is only patched onto `instance.props` in the `beforeCreate` hook the
+ * theme-props-resolver installs — a read taken before that hook runs (a
+ * plain top-level `const`) can never see it.
+ *
+ * @description
+ * Accepting a `Ref` and re-reading `.value` only inside the reactive
+ * scopes below (the toggle-scope callback, the watchEffect) defers every
+ * read to render time — same fix shape as `useLink`/`useVModel` under the
+ * same issue. `createStackEntry` is a `computed` for the same reason: it
+ * must not snapshot `disableGlobalStack` either.
  ********************************************************/
-export declare function useStack(isActive: Readonly<Ref<boolean>>, zIndex: Readonly<Ref<string | number>>, disableGlobalStack: boolean): {
+export declare function useStack(isActive: Readonly<Ref<boolean>>, zIndex: Readonly<Ref<string | number>>, disableGlobalStack: Readonly<Ref<boolean>>): {
     globalTop: Readonly<Ref<boolean, boolean>>;
     localTop: import("vue").ComputedRef<boolean>;
     stackStyles: import("vue").ComputedRef<{

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

@@ -1,10 +1,10 @@
-import { useToggleScope } from "../../composables/index.js";
-import { GLOBAL_STACK, ORIGAM_STACK_KEY } from "../../consts/index.js";
-import { getCurrentInstance } from "../../utils/index.js";
+import { useToggleScope } from "./toggleScope.composable.js";
+import { GLOBAL_STACK, ORIGAM_STACK_KEY, STACK_Z_INDEX_STEP } from "../../consts/Commons/stack.const.js";
+import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 import { computed, inject, onScopeDispose, provide, reactive, readonly, shallowRef, toRaw, watchEffect } from "vue";
 export function useStack(isActive, zIndex, disableGlobalStack) {
   const vm = getCurrentInstance("useStack");
-  const createStackEntry = !disableGlobalStack;
+  const createStackEntry = computed(() => !disableGlobalStack.value);
   const parent = inject(ORIGAM_STACK_KEY, void 0);
   const stack = reactive({
     activeChildren: /* @__PURE__ */ new Set()
@@ -13,13 +13,13 @@ export function useStack(isActive, zIndex, disableGlobalStack) {
   const _zIndex = shallowRef(+zIndex.value);
   useToggleScope(isActive, () => {
     const lastZIndex = GLOBAL_STACK.at(-1)?.[1];
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
-    if (createStackEntry) {
+    _zIndex.value = lastZIndex ? lastZIndex + STACK_Z_INDEX_STEP : +zIndex.value;
+    if (createStackEntry.value) {
       GLOBAL_STACK.push([vm.uid, _zIndex.value]);
     }
     parent?.activeChildren.add(vm.uid);
     onScopeDispose(() => {
-      if (createStackEntry) {
+      if (createStackEntry.value) {
         const idx = toRaw(GLOBAL_STACK).findIndex((v) => v[0] === vm.uid);
         GLOBAL_STACK.splice(idx, 1);
       }
@@ -27,12 +27,11 @@ export function useStack(isActive, zIndex, disableGlobalStack) {
     });
   });
   const globalTop = shallowRef(true);
-  if (createStackEntry) {
-    watchEffect(() => {
-      const _isTop = GLOBAL_STACK.at(-1)?.[0] === vm.uid;
-      setTimeout(() => globalTop.value = _isTop);
-    });
-  }
+  watchEffect(() => {
+    if (!createStackEntry.value) return;
+    const _isTop = GLOBAL_STACK.at(-1)?.[0] === vm.uid;
+    setTimeout(() => globalTop.value = _isTop);
+  });
   const localTop = computed(() => !stack.activeChildren.size);
   return {
     globalTop: readonly(globalTop),

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

@@ -10,7 +10,7 @@ var _elevation = require("./elevation.composable.cjs");
 var _margin = require("./margin.composable.cjs");
 var _padding = require("./padding.composable.cjs");
 var _rounded = require("./rounded.composable.cjs");
-var _utils = require("../../utils/index.cjs");
+var _color = require("../../utils/Commons/color.util.cjs");
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return (0, _vue.computed)(() => {
     if (isHover.value && hoverState.value?.[key] != null) {
@@ -45,15 +45,15 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
   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);
+    return !!a && !!b && a === b && (0, _color.isIntent)(a);
   };
   const colorClasses = (0, _vue.computed)(() => {
     if (isHover.value || isActive.value || isDisabled.value) return [];
     const classes = [];
     const bgVal = bgColor.value;
     const fgVal = color.value;
-    if (bgVal && (0, _utils.isUtilityIntent)(bgVal)) classes.push(`origam--bg-${bgVal}`);
-    if (fgVal && (0, _utils.isUtilityIntent)(fgVal)) classes.push(`origam--color-${fgVal}`);
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) classes.push(`origam--bg-${bgVal}`);
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) classes.push(`origam--color-${fgVal}`);
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
@@ -64,31 +64,31 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && (0, _utils.isIntent)(bgColor.value)) {
-      const m = (0, _utils.tokenStylesForIntent)(bgColor.value, bgRole);
+    if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _utils.tokenStylesForIntent)(bgColor.value, "default").color;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
     } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _utils.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _utils.isCssColor)(bgColor.value)) {
-      (0, _utils.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _utils.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, _utils.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _utils.isIntent)(bgColor.value) && color.value === bgColor.value) {
+    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, _utils.tokenForegroundForIntent)(color.value)}`;
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
       }
-    } else if (color.value && typeof color.value === "string" && (0, _utils.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _utils.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) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _utils.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _utils.parseColor)(bgColor.value);
+    } else if (!color.value && 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, _utils.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     const styles = [];
@@ -96,7 +96,7 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     if (fgDecl) styles.push(fgDecl);
     return styles;
   });
-  void _utils.intentBgExpr;
+  void _color.intentBgExpr;
   const {
     borderClasses,
     borderStyles

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

@@ -1,8 +1,31 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { IActiveState, IHoverState } from '../../interfaces';
-import type { TColor, TStateEffectProps } from '../../types';
+import type { IActiveState, IHoverState } from '../../interfaces/Commons/state-effect.interface';
+import type { TColor } from '../../types/Commons/color.type';
+import type { TStateEffectProps } from '../../types/Commons/state-effect.type';
 /*********************************************************
  * useStateEffect
+ *
+ * @description
+ * Composable unique remplacant la chaine `useColorEffect` +
+ * `useBorder` + `useRounded` + `useElevation` + `usePadding` + `useMargin`
+ * que chaque composant visuel devait repeter. Lit les etats `isHover`/
+ * `isActive`/`isDisabled` (et leurs overrides `hoverState`/`activeState`)
+ * et resout 8 axes state-aware : color, bgColor, border, rounded,
+ * elevation, padding, margin, gap — chacun avec classes ET styles.
+ * Priorite de resolution par axe : HOVER gagne sur ACTIVE (survoler un
+ * element presse/selectionne montre la surface hover), qui gagne sur la
+ * valeur de repos (`props.xxx`).
+ *
+ * @description
+ * ⛔ `status` (`success|info|warning|error`) ECRASE `color`/`bgColor` —
+ * il n'est PAS surchargeable par les props de couleur du consommateur,
+ * sinon le statut serait cosmetiquement sans effet. Les props directionnelles
+ * (`borderTop`, `paddingBlock`, `marginInline`, les coins `roundedTopLeft`…)
+ * ne sont PAS state-swappables : elles sont lues directement depuis
+ * `props` via un objet `reactive` a accesseurs `get` — jamais un litteral
+ * plat, qui figerait la valeur au moment de l'appel et casserait la
+ * reactivite sur un changement de prop ulterieur (meme piege que
+ * `pickEffective` documente plus haut pour la valeur de repos).
  ********************************************************/
 export declare function useStateEffect(props: TStateEffectProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, hoverState?: ComputedRef<IHoverState | undefined>, activeState?: ComputedRef<IActiveState | undefined>, isDisabled?: Ref<boolean> | ComputedRef<boolean>, 
 /**

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

@@ -4,19 +4,7 @@ import { useElevation } from "./elevation.composable.js";
 import { useMargin } from "./margin.composable.js";
 import { usePadding } from "./padding.composable.js";
 import { useRounded } from "./rounded.composable.js";
-import {
-  getForeground,
-  intentBgExpr,
-  isCssColor,
-  isIntent,
-  isParsableColor,
-  isUtilityIntent,
-  parseColor,
-  rawBgExprWithState,
-  tokenForegroundForIntent,
-  tokenStylesForIntent,
-  warnLegacyColor
-} from "../../utils/index.js";
+import { getForeground, intentBgExpr, isCssColor, isIntent, isParsableColor, isUtilityIntent, parseColor, rawBgExprWithState, tokenForegroundForIntent, tokenStylesForIntent, warnLegacyColor } from "../../utils/Commons/color.util.js";
 function pickEffective(rest, isHover, isActive, hoverState, activeState, key) {
   return computed(() => {
     if (isHover.value && hoverState.value?.[key] != null) {

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

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStateFlag = useStateFlag;
+var _vue = require("vue");
+var _vModel = require("./vModel.composable.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
+function useStateFlag(props, options) {
+  const {
+    state,
+    source = state,
+    name = (0, _getCurrentInstance.getCurrentInstanceName)()
+  } = options;
+  const vmodel = (0, _vModel.useVModel)(props, source);
+  const config = (0, _vue.computed)(() => {
+    const v = props[source];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = (0, _vue.computed)(() => {
+    const v = props[source];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = (0, _vue.ref)(false);
+  const isOn = (0, _vue.computed)(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
+  const classes = (0, _vue.computed)(() => {
+    const list = [];
+    if (isOn.value) {
+      list.push(`${name}--${state}`);
+      const extraClass = state === "hover" ? props.hoverClass : props.activeClass;
+      if (extraClass) list.push(extraClass);
+    }
+    return list;
+  });
+  const set = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = true;
+    } else {
+      internalToggle.value = true;
+    }
+  };
+  const unset = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = false;
+    } else {
+      internalToggle.value = false;
+    }
+  };
+  const toggle = force => {
+    if (typeof force === "boolean") {
+      internalToggle.value = force;
+      return;
+    }
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isOn.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
+  };
+  return {
+    isOn,
+    config,
+    classes,
+    set,
+    unset,
+    toggle
+  };
+}

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

@@ -0,0 +1,37 @@
+import type { IStateFlagOptions, IStateFlagReturn } from '../../interfaces/Commons/state-flag.interface';
+import type { TStateName } from '../../types/Commons/state-flag.type';
+/*********************************************************
+ * useStateFlag
+ *
+ * @description
+ * `useHover` and `useActive` were the same algorithm written twice: 33 of
+ * their 49 lines were byte-identical once the domain word was normalised,
+ * and their config types (`IHoverState` / `IActiveState`) were already both
+ * aliases of `IStateEffectConfig`. This is the merge — one implementation,
+ * driven by `options.state` (`'hover' | 'active'`).
+ *
+ * @description
+ * `props.{state}` (or `props[source]` when `source` is set) accepts three
+ * shapes. `undefined` / `false` → `isOn` is driven by `set()` / `unset()` /
+ * `toggle()` (pointer events or click, depending on what the component
+ * wires up), `config` is undefined. `true` → `isOn` is FORCED to `true`
+ * regardless of interaction, `config` is undefined. An `IStateEffectConfig`
+ * object → `isOn` is still driven by `set()`/`unset()`/`toggle()` (UNLESS
+ * `enabled: true` is set inside the object, which forces it on like the
+ * bare `true` case), `config` is the object itself — consumed by
+ * `useStateEffect` to swap effective values per axis.
+ *
+ * @description
+ * ⛔ BUG FIX carried over from this merge (was hover-only): `set()` /
+ * `unset()` / `toggle()` now all gate on whether the current value is a
+ * config object, and if so flip a local `internalToggle` ref INSTEAD of
+ * writing through the v-model. `useActive` already did this (that's where
+ * `internalToggle` came from). `useHover` did not: its old `onMouseenter`
+ * wrote `vmodel.value = true` unconditionally, which — for a controlled
+ * `v-model:hover="{ bgColor: 'success' }"` — emitted `true` back to the
+ * parent and destroyed the config object on the FIRST mouseenter (measured:
+ * `{ bgColor: 'success' }` → `true`, config lost). Unifying on
+ * `useActive`'s gate fixes this by construction; hover consumers get it for
+ * free.
+ ********************************************************/
+export declare function useStateFlag<S extends TStateName>(props: object, options: IStateFlagOptions<S>): IStateFlagReturn;

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

@@ -0,0 +1,69 @@
+import { computed, ref } from "vue";
+import { useVModel } from "./vModel.composable.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
+export function useStateFlag(props, options) {
+  const { state, source = state, name = getCurrentInstanceName() } = options;
+  const vmodel = useVModel(props, source);
+  const config = computed(() => {
+    const v = props[source];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = computed(() => {
+    const v = props[source];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = ref(false);
+  const isOn = computed(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
+  const classes = computed(() => {
+    const list = [];
+    if (isOn.value) {
+      list.push(`${name}--${state}`);
+      const extraClass = state === "hover" ? props.hoverClass : props.activeClass;
+      if (extraClass) list.push(extraClass);
+    }
+    return list;
+  });
+  const set = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = true;
+    } else {
+      internalToggle.value = true;
+    }
+  };
+  const unset = () => {
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = false;
+    } else {
+      internalToggle.value = false;
+    }
+  };
+  const toggle = (force) => {
+    if (typeof force === "boolean") {
+      internalToggle.value = force;
+      return;
+    }
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isOn.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
+  };
+  return {
+    isOn,
+    config,
+    classes,
+    set,
+    unset,
+    toggle
+  };
+}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStatus = useStatus;
 var _enums = require("../../enums/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 var _vue = require("vue");
 const STATUS_TO_INTENT = {
   success: "success",
@@ -13,7 +13,7 @@ const STATUS_TO_INTENT = {
   warning: "warning",
   error: "danger"
 };
-function useStatus(props, name = (0, _utils.getCurrentInstanceName)()) {
+function useStatus(props, name = (0, _getCurrentInstance.getCurrentInstanceName)()) {
   const statusIcon = (0, _vue.computed)(() => {
     return `$${props.status}`;
   });

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

@@ -1,7 +1,22 @@
-import type { IAdjacentProps, IStatusProps } from "../../interfaces";
-import type { TColor } from "../../types";
+import type { IAdjacentProps } from '../../interfaces/Commons/adjacent.interface';
+import type { IStatusProps } from '../../interfaces/Commons/status.interface';
+import type { TColor } from '../../types/Commons/color.type';
 /*********************************************************
  * useStatus
+ *
+ * @description
+ * Traduit `props.status` (`success|info|warning|error`) en icone
+ * (`$success`, `$error`…), position (`prependIcon`/`appendIcon`/`icon`
+ * selon `statusIconPosition`), classe `{name}--{status}` et intention de
+ * couleur forcee (`statusIntent`, non surchargeable par `color`/`bgColor`
+ * — `error` mappe sur l'intent `danger`, les autres 1:1).
+ *
+ * @description
+ * Sans `statusIconPosition` explicite, la position par defaut est
+ * PREPEND, pas "partout" : l'ancienne logique traitait `undefined` comme
+ * "rendre a chaque emplacement", peignant l'icone en double (prepend ET
+ * append) dans `OrigamAlert`. Une icone `prependIcon`/`appendIcon`/`icon`
+ * deja fournie par le consommateur passe toujours avant l'icone de statut.
  ********************************************************/
 export declare function useStatus(props: IStatusProps & IAdjacentProps, name?: string): {
     icon: import("vue").ComputedRef<import("../../types").TIcon | undefined>;

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

@@ -1,5 +1,5 @@
 import { STATUS_POSITION } from "../../enums/index.js";
-import { getCurrentInstanceName } from "../../utils/index.js";
+import { getCurrentInstanceName } from "../../utils/Commons/getCurrentInstance.util.js";
 import { computed } from "vue";
 const STATUS_TO_INTENT = {
   success: "success",