origam 2.17.1 → 2.18.1

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

@@ -14,13 +14,32 @@ import type { IAdjacentInnerProps } from '../../interfaces/Commons/adjacent.inte
  * `click:appendInner` only ever fired from a literal DOM click inside
  * the zone, never from a keyboard activation of an ancestor. See the
  * long comment on `useAdjacent` for the full reasoning; mirrored here
- * for the inner zone. `isClearClickable` stays permanently true when
- * `hasClear` is — the clear zone only renders (`v-show="dirty"`) when
- * there is something to clear, so it is unconditionally actionable
- * whenever visible, unlike prependInner/appendInner whose
- * actionability depends on whether the consumer wired a listener.
+ * for the inner zone.
+ *
+ * @description
+ * ⛔ Cette banniere a longtemps decrit un `isClearClickable` — il
+ * n'existe NULLE PART dans le code, ni ici ni ailleurs dans
+ * `packages/ds/src` (verifie par recherche : la seule occurrence du depot
+ * etait cette phrase). Le generateur de `packages/docs/composables/Commons.md`
+ * recopie les bannieres, donc la doc publiee nommait un symbole
+ * inexistant — le defaut #493 exactement. La zone « clear » n'expose que
+ * `hasClear` et le handler `clickClear` ; elle ne passe par
+ * `useAccessibleCommand` ni par aucun test de clicabilite, parce qu'elle
+ * ne rend (`v-show="dirty"`) que lorsqu'il y a quelque chose a effacer.
+ *
+ * @description
+ * ⚠️ `hasPrependInner` / `hasAppendInner` / `hasClear` ne sont PAS des
+ * booleens : ils rendent la FONCTION de slot quand le slot correspondant
+ * existe (`slots.prependInner || …`), sinon le booleen du media, et
+ * `hasClear` rend `undefined` quand ni `clearable` ni le slot `clear` ne
+ * sont fournis. Les trois sont a consommer en verite/faussete, jamais en
+ * comparaison stricte a `true`/`false`. `useAdjacent`, lui, normalise
+ * (`!!slots.prepend || …`) et rend de vrais booleens — les deux jumeaux
+ * ne se comportent pas pareil sur ce point.
  ********************************************************/
 export declare function useAdjacentInner(props: IAdjacentInnerProps): {
+    prependInnerCommandAttrs: import("vue").ComputedRef<Record<string, unknown>>;
+    appendInnerCommandAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     hasPrependInnerMedia: import("vue").ComputedRef<boolean>;
     hasPrependInner: import("vue").ComputedRef<boolean | import("vue").Slot<any>>;
     hasAppendInnerMedia: import("vue").ComputedRef<boolean>;

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

@@ -1,6 +1,7 @@
 import { computed, useSlots } from "vue";
 import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum.js";
 import { hasEvent } from "../../utils/Commons/commons.util.js";
+import { useAccessibleCommand } from "./accessibleCommand.composable.js";
 import { getCurrentInstance } from "../../utils/Commons/getCurrentInstance.util.js";
 export function useAdjacentInner(props) {
   const vm = getCurrentInstance("OrigamAdjacentInner");
@@ -35,19 +36,38 @@ export function useAdjacentInner(props) {
   const isAppendInnerClickable = computed(() => {
     return hasEvent(vm.attrs, "click:appendInner") || hasEvent(vm.vnode.props ?? {}, "click:appendInner");
   });
+  const ownsKey = (e) => e.target === e.currentTarget;
   const onKeydownPrependInner = (e) => {
     if (!isPrependInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickPrependInner(e);
   };
   const onKeydownAppendInner = (e) => {
     if (!isAppendInnerClickable.value) return;
+    if (!ownsKey(e)) return;
     if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
     e.preventDefault();
     onClickAppendInner(e);
   };
+  const prependInnerCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "prependInner",
+    prop: "prependInnerAriaLabel",
+    active: isPrependInnerClickable,
+    label: () => props.prependInnerAriaLabel
+  });
+  const appendInnerCommandAttrs = useAccessibleCommand({
+    component: vm.type?.__name ?? "Origam",
+    zone: "appendInner",
+    prop: "appendInnerAriaLabel",
+    active: isAppendInnerClickable,
+    label: () => props.appendInnerAriaLabel
+  });
   return {
+    prependInnerCommandAttrs,
+    appendInnerCommandAttrs,
     hasPrependInnerMedia,
     hasPrependInner,
     hasAppendInnerMedia,

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

@@ -6,18 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAudio = useAudio;
 var _vue = require("vue");
 var _audio = require("../../consts/Audio/audio.const.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 function useAudio(props) {
   const analyser = (0, _vue.ref)(null);
   const audioArray = (0, _vue.shallowRef)(null);
   const audioRef = (0, _vue.ref)();
   const wasPlayed = (0, _vue.ref)(false);
   const isPlaying = (0, _vue.ref)(false);
+  let frame = -1;
+  let disposed = false;
   const getSongData = () => {
+    if (disposed) return;
     if (isPlaying.value && audioArray.value) {
       analyser.value?.getByteFrequencyData(audioArray.value);
-      requestAnimationFrame(getSongData);
+      frame = requestAnimationFrame(getSongData);
+    } else {
+      frame = -1;
     }
   };
+  (0, _commons.tryOnScopeDispose)(() => {
+    disposed = true;
+    if (frame !== -1) {
+      cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const onPlay = () => {
     if (!wasPlayed.value) {
       onAudio();

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

@@ -1,17 +1,30 @@
 import { ref, shallowRef, watch } from "vue";
 import { AUDIO_ANALYSER_FFT_SIZE } from "../../consts/Audio/audio.const.js";
+import { tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 export function useAudio(props) {
   const analyser = ref(null);
   const audioArray = shallowRef(null);
   const audioRef = ref();
   const wasPlayed = ref(false);
   const isPlaying = ref(false);
+  let frame = -1;
+  let disposed = false;
   const getSongData = () => {
+    if (disposed) return;
     if (isPlaying.value && audioArray.value) {
       analyser.value?.getByteFrequencyData(audioArray.value);
-      requestAnimationFrame(getSongData);
+      frame = requestAnimationFrame(getSongData);
+    } else {
+      frame = -1;
     }
   };
+  tryOnScopeDispose(() => {
+    disposed = true;
+    if (frame !== -1) {
+      cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const onPlay = () => {
     if (!wasPlayed.value) {
       onAudio();

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

@@ -11,6 +11,7 @@ function useBackButton(router, cb) {
   let popped = false;
   let removeBefore;
   let removeAfter;
+  let poppedReset;
   if (_commons.IN_BROWSER) {
     (0, _vue.nextTick)(() => {
       window.addEventListener("popstate", onPopstate);
@@ -42,11 +43,12 @@ function useBackButton(router, cb) {
       window.removeEventListener("popstate", onPopstate);
       removeBefore?.();
       removeAfter?.();
+      clearTimeout(poppedReset);
     });
   }
   const onPopstate = e => {
     if (e.state?.replaced) return;
     popped = true;
-    setTimeout(() => popped = false);
+    poppedReset = setTimeout(() => popped = false);
   };
 }

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

@@ -5,6 +5,7 @@ export function useBackButton(router, cb) {
   let popped = false;
   let removeBefore;
   let removeAfter;
+  let poppedReset;
   if (IN_BROWSER) {
     nextTick(() => {
       window.addEventListener("popstate", onPopstate);
@@ -36,11 +37,12 @@ export function useBackButton(router, cb) {
       window.removeEventListener("popstate", onPopstate);
       removeBefore?.();
       removeAfter?.();
+      clearTimeout(poppedReset);
     });
   }
   const onPopstate = (e) => {
     if (e.state?.replaced) return;
     popped = true;
-    setTimeout(() => popped = false);
+    poppedReset = setTimeout(() => popped = false);
   };
 }

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

@@ -53,6 +53,19 @@ import { TDirectionBoth } from '../../types/Commons/anchor.type';
  * variables.
  *
  * @description
+ * ⛔ LA FORME TABLEAU (`:border="['top', 'bottom']"`) N'EST QU'A MOITIE
+ * IMPLEMENTEE. Elle est portee par le type du parametre `Ref` et traversee
+ * par `borderClasses`, mais `borderStyles` ne la teste nulle part : ni
+ * `isUtilityBorder`, ni `isDirectionBorder`, ni `typeof === 'string'`, ni
+ * `typeof === 'number'` ne matchent un tableau. Mesure —
+ * `useBorder({border: ['top','bottom']})` rend
+ * `classes: ['{name}--border', '{name}--border-top,bottom']` et
+ * `styles: []` : la classe est interpolee depuis le tableau, donc porte la
+ * VIRGULE du `Array.prototype.toString`, et aucune feuille ne la declare.
+ * Aucune largeur n'est emise. Documente ici, non corrige : voir le lot de
+ * doc #600.
+ *
+ * @description
  * WHEN #514 IS SETTLED, THIS INLINE PATH IS THE THING TO REMOVE. If the DS
  * adopts `@layer` (measured in `packages/tests/e2e/btn-cascade-layer-probe.spec.ts`),
  * the utility wins on its own and these `styles.push` calls become dead.

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

@@ -7,6 +7,60 @@ exports.useColorEffect = useColorEffect;
 var _vue = require("vue");
 var _color = require("../../utils/Commons/color.util.cjs");
 var _gradient = require("../../utils/Commons/gradient.util.cjs");
+function trackReactiveDependency(_value) {}
+function resolveBackground(bgColorValue, bgRole) {
+  if (bgColorValue && (0, _gradient.isGradient)(bgColorValue)) {
+    const grad = (0, _gradient.resolveGradient)(bgColorValue);
+    if (grad) return [`background-image: ${grad}`, null, true];
+    return [null, null, false];
+  }
+  if (bgColorValue && (0, _color.isIntent)(bgColorValue)) {
+    const m = (0, _color.tokenStylesForIntent)(bgColorValue, bgRole);
+    return [`background-color: ${m["background-color"]}`, (0, _color.tokenStylesForIntent)(bgColorValue, "default").color, false];
+  }
+  if (bgColorValue === "transparent") {
+    return [`background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`, null, false];
+  }
+  if (bgColorValue && typeof bgColorValue === "string" && (0, _color.isCssColor)(bgColorValue)) {
+    (0, _color.warnLegacyColor)("bgColor", bgColorValue);
+    return [`background-color: ${(0, _color.rawBgExprWithState)(bgColorValue, bgRole)}`, null, false];
+  }
+  return [null, null, false];
+}
+function isSameIntentOnBothAxes(colorValue, bgColorValue, bgIntentFg) {
+  return Boolean(bgIntentFg && bgColorValue && (0, _color.isIntent)(bgColorValue) && colorValue === bgColorValue);
+}
+function resolveAutoContrastForeground(bgColorValue, bgIntentFg, bgIsGradient) {
+  if (bgIsGradient) return null;
+  if (bgIntentFg) return `color: ${bgIntentFg}`;
+  if (bgColorValue && typeof bgColorValue === "string" && bgColorValue !== "transparent" && (0, _color.isParsableColor)(bgColorValue)) {
+    const parsed = (0, _color.parseColor)(bgColorValue);
+    if (parsed.a == null || parsed.a === 1) return `color: ${(0, _color.getForeground)(parsed)}`;
+  }
+  return null;
+}
+function resolveForeground(colorValue, bgColorValue, bgIntentFg, bgIsGradient) {
+  if (colorValue && (0, _gradient.isGradient)(colorValue)) {
+    const grad = (0, _gradient.resolveGradient)(colorValue);
+    if (grad) return ["color: transparent", `background-image: ${grad}`, true];
+    return [null, null, false];
+  }
+  if (colorValue && (0, _color.isIntent)(colorValue)) {
+    if (isSameIntentOnBothAxes(colorValue, bgColorValue, bgIntentFg)) {
+      return [`color: ${bgIntentFg}`, null, false];
+    }
+    return [`color: ${(0, _color.tokenForegroundForIntent)(colorValue)}`, null, false];
+  }
+  if (colorValue && typeof colorValue === "string" && (0, _color.isCssColor)(colorValue)) {
+    if (colorValue !== "transparent") (0, _color.warnLegacyColor)("color", colorValue);
+    return [`color: ${colorValue}`, null, false];
+  }
+  if (!colorValue) {
+    const autoFg = resolveAutoContrastForeground(bgColorValue, bgIntentFg, bgIsGradient);
+    if (autoFg) return [autoFg, null, false];
+  }
+  return [null, null, false];
+}
 function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _vue.ref)(false), isDisabled = (0, _vue.ref)(false)) {
   const color = (0, _vue.computed)(() => props.color);
   const bgColor = (0, _vue.computed)(() => props.bgColor);
@@ -24,53 +78,11 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
-    void isDisabled.value;
+    trackReactiveDependency(isDisabled.value);
     const bgRole = isHover.value ? "hover" : isActive.value ? "active" : "default";
-    let bgDecl = null;
-    let fgDecl = null;
-    let bgIntentFg = null;
-    let bgIsGradient = false;
-    let clipText = false;
-    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, _color.isIntent)(bgColor.value)) {
-      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
-      bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
-    } else if (bgColor.value === "transparent") {
-      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, _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, _color.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
-        fgDecl = `color: ${bgIntentFg}`;
-      } else {
-        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(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, _color.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _color.parseColor)(bgColor.value);
-      if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
-      }
-    }
+    const [bgDeclBase, bgIntentFg, bgIsGradient] = resolveBackground(bgColor.value, bgRole);
+    const [fgDecl, bgDeclOverride, clipText] = resolveForeground(color.value, bgColor.value, bgIntentFg, bgIsGradient);
+    const bgDecl = bgDeclOverride ?? bgDeclBase;
     const styles = [];
     if (bgDecl) styles.push(bgDecl);
     if (fgDecl) styles.push(fgDecl);

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

@@ -1,5 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
 import type { IBgColorProps, IColorProps } from '../../interfaces/Commons/color.interface';
+import type { TColor } from '../../types/Commons/color.type';
 /*********************************************************
  * useColorEffect
  *
@@ -11,9 +12,13 @@ import type { IBgColorProps, IColorProps } from '../../interfaces/Commons/color.
  * legacy static resolver, not a variant of it — kept in its own file
  * rather than forced to share a base.
  *
- * Returns the same shape as before — `{ colorStyles, color, bgColor }` —
- * so existing callers (`OrigamAudio`, `OrigamVideo`) keep working
- * without changes.
+ * Returns `{ colorClasses, colorStyles, color, bgColor }`. `color` and
+ * `bgColor` are pass-through computeds over the raw props, not resolved
+ * declarations. The two real callers are `OrigamAudio` and `OrigamVideo`.
+ *
+ * `colorClasses` is EMPTY as soon as `isHover` / `isActive` / `isDisabled`
+ * is true: utility classes are static, and the resolved token is no longer
+ * the resting one `.origam--bg-{intent}` names.
  *
  * `colorStyles` is an array of CSS declarations like
  * `'background-color: …'`, either pointing to a token
@@ -34,6 +39,6 @@ import type { IBgColorProps, IColorProps } from '../../interfaces/Commons/color.
 export declare function useColorEffect(props: IColorProps & IBgColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
-    color: ComputedRef<import("../../types").TColor>;
-    bgColor: ComputedRef<import("../../types").TColor>;
+    color: ComputedRef<TColor>;
+    bgColor: ComputedRef<TColor>;
 };

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

@@ -12,6 +12,67 @@ import {
   warnLegacyColor
 } from "../../utils/Commons/color.util.js";
 import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.js";
+function trackReactiveDependency(_value) {
+}
+function resolveBackground(bgColorValue, bgRole) {
+  if (bgColorValue && isGradient(bgColorValue)) {
+    const grad = resolveGradient(bgColorValue);
+    if (grad) return [`background-image: ${grad}`, null, true];
+    return [null, null, false];
+  }
+  if (bgColorValue && isIntent(bgColorValue)) {
+    const m = tokenStylesForIntent(bgColorValue, bgRole);
+    return [
+      `background-color: ${m["background-color"]}`,
+      tokenStylesForIntent(bgColorValue, "default").color,
+      false
+    ];
+  }
+  if (bgColorValue === "transparent") {
+    return [`background-color: ${rawBgExprWithState("transparent", bgRole)}`, null, false];
+  }
+  if (bgColorValue && typeof bgColorValue === "string" && isCssColor(bgColorValue)) {
+    warnLegacyColor("bgColor", bgColorValue);
+    return [`background-color: ${rawBgExprWithState(bgColorValue, bgRole)}`, null, false];
+  }
+  return [null, null, false];
+}
+function isSameIntentOnBothAxes(colorValue, bgColorValue, bgIntentFg) {
+  return Boolean(
+    bgIntentFg && bgColorValue && isIntent(bgColorValue) && colorValue === bgColorValue
+  );
+}
+function resolveAutoContrastForeground(bgColorValue, bgIntentFg, bgIsGradient) {
+  if (bgIsGradient) return null;
+  if (bgIntentFg) return `color: ${bgIntentFg}`;
+  if (bgColorValue && typeof bgColorValue === "string" && bgColorValue !== "transparent" && isParsableColor(bgColorValue)) {
+    const parsed = parseColor(bgColorValue);
+    if (parsed.a == null || parsed.a === 1) return `color: ${getForeground(parsed)}`;
+  }
+  return null;
+}
+function resolveForeground(colorValue, bgColorValue, bgIntentFg, bgIsGradient) {
+  if (colorValue && isGradient(colorValue)) {
+    const grad = resolveGradient(colorValue);
+    if (grad) return ["color: transparent", `background-image: ${grad}`, true];
+    return [null, null, false];
+  }
+  if (colorValue && isIntent(colorValue)) {
+    if (isSameIntentOnBothAxes(colorValue, bgColorValue, bgIntentFg)) {
+      return [`color: ${bgIntentFg}`, null, false];
+    }
+    return [`color: ${tokenForegroundForIntent(colorValue)}`, null, false];
+  }
+  if (colorValue && typeof colorValue === "string" && isCssColor(colorValue)) {
+    if (colorValue !== "transparent") warnLegacyColor("color", colorValue);
+    return [`color: ${colorValue}`, null, false];
+  }
+  if (!colorValue) {
+    const autoFg = resolveAutoContrastForeground(bgColorValue, bgIntentFg, bgIsGradient);
+    if (autoFg) return [autoFg, null, false];
+  }
+  return [null, null, false];
+}
 export function useColorEffect(props, isHover = ref(false), isActive = ref(false), isDisabled = ref(false)) {
   const color = computed(() => props.color);
   const bgColor = computed(() => props.bgColor);
@@ -30,53 +91,16 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     return classes;
   });
   const colorStyles = computed(() => {
-    void isDisabled.value;
+    trackReactiveDependency(isDisabled.value);
     const bgRole = isHover.value ? "hover" : isActive.value ? "active" : "default";
-    let bgDecl = null;
-    let fgDecl = null;
-    let bgIntentFg = null;
-    let bgIsGradient = false;
-    let clipText = false;
-    if (bgColor.value && isGradient(bgColor.value)) {
-      const grad = resolveGradient(bgColor.value);
-      if (grad) {
-        bgDecl = `background-image: ${grad}`;
-        bgIsGradient = true;
-      }
-    } else if (bgColor.value && isIntent(bgColor.value)) {
-      const m = tokenStylesForIntent(bgColor.value, bgRole);
-      bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = tokenStylesForIntent(bgColor.value, "default").color;
-    } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${rawBgExprWithState("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && isCssColor(bgColor.value)) {
-      warnLegacyColor("bgColor", bgColor.value);
-      bgDecl = `background-color: ${rawBgExprWithState(bgColor.value, bgRole)}`;
-    }
-    if (color.value && isGradient(color.value)) {
-      const grad = resolveGradient(color.value);
-      if (grad) {
-        fgDecl = "color: transparent";
-        bgDecl = `background-image: ${grad}`;
-        clipText = true;
-      }
-    } else if (color.value && isIntent(color.value)) {
-      if (bgIntentFg && bgColor.value && isIntent(bgColor.value) && color.value === bgColor.value) {
-        fgDecl = `color: ${bgIntentFg}`;
-      } else {
-        fgDecl = `color: ${tokenForegroundForIntent(color.value)}`;
-      }
-    } else if (color.value && typeof color.value === "string" && isCssColor(color.value)) {
-      if (color.value !== "transparent") 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" && isParsableColor(bgColor.value)) {
-      const parsed = parseColor(bgColor.value);
-      if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${getForeground(parsed)}`;
-      }
-    }
+    const [bgDeclBase, bgIntentFg, bgIsGradient] = resolveBackground(bgColor.value, bgRole);
+    const [fgDecl, bgDeclOverride, clipText] = resolveForeground(
+      color.value,
+      bgColor.value,
+      bgIntentFg,
+      bgIsGradient
+    );
+    const bgDecl = bgDeclOverride ?? bgDeclBase;
     const styles = [];
     if (bgDecl) styles.push(bgDecl);
     if (fgDecl) styles.push(fgDecl);

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

@@ -141,19 +141,33 @@ function useCreateLayout(props) {
       if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);else registered.value.push(id);
       const index = (0, _vue.computed)(() => items.value.findIndex(i => i.id === id));
       const zIndex = (0, _vue.computed)(() => rootZIndex.value + layers.value.length * _layout.LAYOUT_ITEM_ZINDEX_STEP - index.value * _layout.LAYOUT_ITEM_ZINDEX_STEP);
-      const layoutItemStyles = (0, _vue.computed)(() => {
-        const isHorizontal = position.value === "left" || position.value === "right";
-        const isOppositeHorizontal = position.value === "right";
-        const isOppositeVertical = position.value === "bottom";
-        const styles = {
+      const isHorizontalPosition = () => position.value === "left" || position.value === "right";
+      const baseItemStyles = () => {
+        const isOpposite = position.value === "right" || position.value === "bottom";
+        return {
           [position.value]: 0,
           "z-index": zIndex.value,
-          "transform": `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : _layout.LAYOUT_ITEM_HIDDEN_OFFSET) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
+          "transform": `translate${isHorizontalPosition() ? "X" : "Y"}(${(active.value ? 0 : _layout.LAYOUT_ITEM_HIDDEN_OFFSET) * (isOpposite ? -1 : 1)}%)`,
           "position": absolute.value || rootZIndex.value !== _layout.ROOT_ZINDEX ? "absolute" : "fixed",
           ...(transitionsEnabled.value ? void 0 : {
             "transition": "none"
           })
         };
+      };
+      const itemOffsetStyles = item => {
+        const isHorizontal = isHorizontalPosition();
+        const isOppositeHorizontal = position.value === "right";
+        return {
+          "height": isHorizontal ? `calc(100% - ${(0, _commons.convertToUnit)(item.top)} - ${(0, _commons.convertToUnit)(item.bottom)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0,
+          left: isOppositeHorizontal ? void 0 : (0, _commons.convertToUnit)(item.left),
+          right: isOppositeHorizontal ? (0, _commons.convertToUnit)(item.right) : void 0,
+          top: position.value !== "bottom" ? (0, _commons.convertToUnit)(item.top) : void 0,
+          bottom: position.value !== "top" ? (0, _commons.convertToUnit)(item.bottom) : void 0,
+          "width": !isHorizontal ? `calc(100% - ${(0, _commons.convertToUnit)(item.left)} - ${(0, _commons.convertToUnit)(item.right)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0
+        };
+      };
+      const layoutItemStyles = (0, _vue.computed)(() => {
+        const styles = baseItemStyles();
         if (!isMounted.value) return styles;
         const item = items.value[index.value];
         if (!item) return styles;
@@ -163,12 +177,7 @@ function useCreateLayout(props) {
         }
         return {
           ...styles,
-          "height": isHorizontal ? `calc(100% - ${(0, _commons.convertToUnit)(item.top)} - ${(0, _commons.convertToUnit)(item.bottom)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0,
-          left: isOppositeHorizontal ? void 0 : (0, _commons.convertToUnit)(item.left),
-          right: isOppositeHorizontal ? (0, _commons.convertToUnit)(item.right) : void 0,
-          top: position.value !== "bottom" ? (0, _commons.convertToUnit)(item.top) : void 0,
-          bottom: position.value !== "top" ? (0, _commons.convertToUnit)(item.bottom) : void 0,
-          "width": !isHorizontal ? `calc(100% - ${(0, _commons.convertToUnit)(item.left)} - ${(0, _commons.convertToUnit)(item.right)})` : elementSize.value ? `${(0, _commons.convertToUnit)(elementSize.value)}` : void 0
+          ...itemOffsetStyles(item)
         };
       });
       const layoutItemScrimStyles = (0, _vue.computed)(() => ({

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

@@ -136,17 +136,31 @@ export function useCreateLayout(props) {
       else registered.value.push(id);
       const index = computed(() => items.value.findIndex((i) => i.id === id));
       const zIndex = computed(() => rootZIndex.value + layers.value.length * LAYOUT_ITEM_ZINDEX_STEP - index.value * LAYOUT_ITEM_ZINDEX_STEP);
-      const layoutItemStyles = computed(() => {
-        const isHorizontal = position.value === "left" || position.value === "right";
-        const isOppositeHorizontal = position.value === "right";
-        const isOppositeVertical = position.value === "bottom";
-        const styles = {
+      const isHorizontalPosition = () => position.value === "left" || position.value === "right";
+      const baseItemStyles = () => {
+        const isOpposite = position.value === "right" || position.value === "bottom";
+        return {
           [position.value]: 0,
           "z-index": zIndex.value,
-          "transform": `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : LAYOUT_ITEM_HIDDEN_OFFSET) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
+          "transform": `translate${isHorizontalPosition() ? "X" : "Y"}(${(active.value ? 0 : LAYOUT_ITEM_HIDDEN_OFFSET) * (isOpposite ? -1 : 1)}%)`,
           "position": absolute.value || rootZIndex.value !== ROOT_ZINDEX ? "absolute" : "fixed",
           ...transitionsEnabled.value ? void 0 : { "transition": "none" }
         };
+      };
+      const itemOffsetStyles = (item) => {
+        const isHorizontal = isHorizontalPosition();
+        const isOppositeHorizontal = position.value === "right";
+        return {
+          "height": isHorizontal ? `calc(100% - ${convertToUnit(item.top)} - ${convertToUnit(item.bottom)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0,
+          left: isOppositeHorizontal ? void 0 : convertToUnit(item.left),
+          right: isOppositeHorizontal ? convertToUnit(item.right) : void 0,
+          top: position.value !== "bottom" ? convertToUnit(item.top) : void 0,
+          bottom: position.value !== "top" ? convertToUnit(item.bottom) : void 0,
+          "width": !isHorizontal ? `calc(100% - ${convertToUnit(item.left)} - ${convertToUnit(item.right)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0
+        };
+      };
+      const layoutItemStyles = computed(() => {
+        const styles = baseItemStyles();
         if (!isMounted.value) return styles;
         const item = items.value[index.value];
         if (!item) return styles;
@@ -156,12 +170,7 @@ export function useCreateLayout(props) {
         }
         return {
           ...styles,
-          "height": isHorizontal ? `calc(100% - ${convertToUnit(item.top)} - ${convertToUnit(item.bottom)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0,
-          left: isOppositeHorizontal ? void 0 : convertToUnit(item.left),
-          right: isOppositeHorizontal ? convertToUnit(item.right) : void 0,
-          top: position.value !== "bottom" ? convertToUnit(item.top) : void 0,
-          bottom: position.value !== "top" ? convertToUnit(item.bottom) : void 0,
-          "width": !isHorizontal ? `calc(100% - ${convertToUnit(item.left)} - ${convertToUnit(item.right)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0
+          ...itemOffsetStyles(item)
         };
       });
       const layoutItemScrimStyles = computed(() => ({

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

@@ -14,6 +14,22 @@ import type { IDelayProps } from '../../interfaces/Commons/delay.interface';
  * (`cancelRef.current()`) avant d'en programmer un nouveau — un
  * enter/leave rapide (survol qui repasse) ne declenche donc jamais les
  * deux callbacks empiles, seul le dernier delai programme aboutit.
+ *
+ * @description
+ * ⛔ `0` et « absent » ne se comportent PAS pareil, parce que `defer` teste
+ * `timeout === 0` : avec `openDelay: 0`, `cb` est appele SYNCHRONEMENT
+ * pendant `runOpenDelay()` et le « canceller » rendu est un no-op — donc
+ * `clearDelay()` ne peut plus rien annuler. Avec la prop ABSENTE,
+ * `Number(undefined)` vaut `NaN`, le test `=== 0` echoue et on passe par
+ * `setTimeout(cb, NaN)`, que le navigateur traite comme 0 ms : le callback
+ * part au tick suivant, et reste annulable. Mesure : delai 0 → callback vu
+ * avant le retour de `runOpenDelay()` ; delai absent → rien a 0 ms, vu
+ * apres 1 ms.
+ *
+ * @description
+ * Aucun nettoyage automatique n'est enregistre : un delai arme juste avant
+ * le demontage n'est pas annule par ce composable. `useActivator`, son seul
+ * consommateur, ne l'annule pas non plus a la destruction du scope.
  ********************************************************/
 export declare function useDelay(props: IDelayProps, cb?: (value: boolean) => void): {
     clearDelay: () => void;

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

@@ -16,6 +16,17 @@ import type { IDimensionProps } from '../../interfaces/Commons/dimension.interfa
  * inline, jamais de classe utilitaire — c'est le composable de reference a
  * `extends`-er (cf. CLAUDE.md racine) plutot que de parser `height`/`width`
  * a la main dans un nouveau composant.
+ *
+ * @description
+ * ⛔ La garde d'emission est `if (props[dimension])` — une garde de
+ * VERACITE, pas un test de presence. Toute valeur falsy est donc omise
+ * SILENCIEUSEMENT, y compris celles que `convertToUnit` sait pourtant
+ * traduire : mesure — `height={0}` n'emet RIEN (alors que
+ * `convertToUnit(0)` rend `"0px"`), et `height={NaN}` non plus. Pour une
+ * dimension nulle, passer la chaine `"0px"`. Symetriquement, `Infinity`
+ * est truthy et traverse la garde : `convertToUnit` rend `undefined` et la
+ * declaration emise est la chaine `"height: undefined"` — invalide, donc
+ * ignoree par le navigateur.
  ********************************************************/
 export declare function useDimension(props: IDimensionProps): {
     dimensionStyles: import("vue").ComputedRef<string[]>;