origam 2.17.0 → 2.18.0

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[]>;

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

@@ -19,6 +19,10 @@ function isOrigamRung(value) {
 function isUtilityRung(value) {
   return typeof value === "string" && _elevation.UTILITY_SHADOW_RUNGS.has(value);
 }
+function shadowVar(rung) {
+  const fallback = _elevation.SHADOW_RUNG_FALLBACK[rung];
+  return `var(${_elevation.SHADOW_TOKEN_PREFIX}${rung}${fallback ? `, ${fallback}` : ""})`;
+}
 const _bgWarned = /* @__PURE__ */new WeakSet();
 function warnBgColorUsage(bgColor) {
   if (typeof console === "undefined" || !bgColor) return;
@@ -56,7 +60,7 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
     const styles = [];
     if (elevation == null || flat.value) return styles;
     if (isOrigamRung(elevation)) {
-      styles.push(`box-shadow: var(${_elevation.SHADOW_TOKEN_PREFIX}${elevation})`);
+      styles.push(`box-shadow: ${shadowVar(elevation)}`);
       return styles;
     }
     if (typeof elevation === "string" && (0, _elevation2.isCustomBoxShadow)(elevation)) {
@@ -66,7 +70,7 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
     const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
     if (Number.isNaN(numeric)) return styles;
     const tokenName = elevationToToken(numeric);
-    styles.push(`box-shadow: var(${_elevation.SHADOW_TOKEN_PREFIX}${tokenName})`);
+    styles.push(`box-shadow: ${shadowVar(tokenName)}`);
     return styles;
   });
   return {

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

@@ -15,10 +15,46 @@ import { TElevation } from '../../types/Commons/elevation.type';
  * jamais l'un a la place de l'autre (strategie A, cf. CLAUDE.md racine).
  *
  * @description
+ * ⚠️ `2xl` et `3xl` RENDENT COMME `xl` — #813, corrige par un repli.
+ * `ORIGAM_SHADOW_RUNGS` declare huit echelons, les feuilles n'en declarent
+ * que six : `--origam-shadow---2xl` et `---3xl` n'existent dans aucune
+ * feuille du DS. On emettait la reference NUE, et un `var()` non resolu
+ * rend la declaration invalide AU COMPUTED-VALUE TIME : la propriete
+ * calcule `unset`, et `box-shadow` n'etant pas heritee, cela vaut `none`.
+ * La declaration gagnait pourtant la cascade : elle ne cedait donc pas la
+ * place a la regle scopee du composant, elle l'EFFACAIT. Mesure Chromium —
+ * regle du composant seule `rgba(0,0,0,.9) 0px 1px 2px 0px`, avec
+ * `elevation="2xl"` : `none`.
+ *
+ * @description
+ * Ces deux echelons passent desormais par `SHADOW_RUNG_FALLBACK`, comme
+ * `useRounded` le fait depuis toujours via `UTILITY_RADIUS_FALLBACK` — ce
+ * qui explique que le canal `rounded` n'ait jamais eu ce defaut. ⚠️ Ils
+ * rendent donc EXACTEMENT comme `xl` : ils cessent d'effacer, ils ne
+ * deviennent pas deux echelons de plus. Declarer de vrais tokens est une
+ * decision de DESIGN — `xl` est deja le sommet de l'echelle Material 0..24
+ * que ce composable mappe (`MATERIAL_ELEVATION_TOP_RUNG`), il n'y a aucun
+ * echelon au-dessus a emprunter. Le jour ou ces tokens existeront, le repli
+ * deviendra inerte tout seul.
+ *
+ * @description
+ * ⛔ Le garde `token-var-channels` ne voit toujours RIEN de tout ceci : la
+ * reference est concatenee en TypeScript, pas ecrite dans une feuille.
+ * C'est l'angle mort structurel suivi par #823 — 90 references `var()`
+ * emises depuis du TS, aucune couverte par un garde.
+ *
+ * @description
  * `bgColor` est accepte pour compatibilite mais IGNORE (n'affecte plus
  * ni `elevationClasses` ni `elevationStyles`) — passer une valeur autre
  * que `ELEVATION_LEGACY_BG_COLOR` declenche un `console.warn` de
- * depreciation une seule fois via `warnBgColorUsage`. La detection du
+ * depreciation. ⚠️ Cette banniere annoncait « une seule fois » : faux.
+ * Mesure — trois appels a `useElevation` avec un `bgColor` non defaut
+ * produisent TROIS avertissements. La deduplication de `warnBgColorUsage`
+ * est inerte : elle interroge un `WeakSet` avec un objet litteral
+ * reconstruit a chaque appel, donc `has()` rend toujours `false`. L'appel
+ * etant fait dans le corps de `useElevation` et non dans un `computed`,
+ * le plafond reste d'un avertissement par MONTAGE de composant, pas par
+ * rendu. La detection du
  * `box-shadow` custom passe AVANT le `parseInt` de secours : sans cet
  * ordre, `parseInt('0 4px 12px rgba(0,0,0,.24)', 10)` lirait `0` (chiffre
  * de tete) et resoudrait silencieusement vers l'echelon `none`, perdant

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

@@ -6,6 +6,7 @@ import {
   MATERIAL_ELEVATION_LADDER,
   MATERIAL_ELEVATION_TOP_RUNG,
   ORIGAM_SHADOW_RUNGS,
+  SHADOW_RUNG_FALLBACK,
   SHADOW_TOKEN_PREFIX,
   SHADOW_UTILITY_CLASS_PREFIX,
   UTILITY_SHADOW_RUNGS
@@ -21,6 +22,10 @@ function isOrigamRung(value) {
 function isUtilityRung(value) {
   return typeof value === "string" && UTILITY_SHADOW_RUNGS.has(value);
 }
+function shadowVar(rung) {
+  const fallback = SHADOW_RUNG_FALLBACK[rung];
+  return `var(${SHADOW_TOKEN_PREFIX}${rung}${fallback ? `, ${fallback}` : ""})`;
+}
 const _bgWarned = /* @__PURE__ */ new WeakSet();
 function warnBgColorUsage(bgColor) {
   if (typeof console === "undefined" || !bgColor) return;
@@ -56,7 +61,7 @@ export function useElevation(props, flat = ref(false), bgColor = ref(ELEVATION_L
     const styles = [];
     if (elevation == null || flat.value) return styles;
     if (isOrigamRung(elevation)) {
-      styles.push(`box-shadow: var(${SHADOW_TOKEN_PREFIX}${elevation})`);
+      styles.push(`box-shadow: ${shadowVar(elevation)}`);
       return styles;
     }
     if (typeof elevation === "string" && isCustomBoxShadow(elevation)) {
@@ -66,7 +71,7 @@ export function useElevation(props, flat = ref(false), bgColor = ref(ELEVATION_L
     const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
     if (Number.isNaN(numeric)) return styles;
     const tokenName = elevationToToken(numeric);
-    styles.push(`box-shadow: var(${SHADOW_TOKEN_PREFIX}${tokenName})`);
+    styles.push(`box-shadow: ${shadowVar(tokenName)}`);
     return styles;
   });
   return { elevationClasses, elevationStyles };

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

@@ -26,11 +26,13 @@ function useGoTo(_options = {}) {
     ...goToInstance,
     rtl: (0, _vue.computed)(() => goToInstance.rtl.value || isRtl.value)
   };
+  const controller = new AbortController();
+  (0, _commons.tryOnScopeDispose)(() => controller.abort());
   async function go(target, options) {
-    return (0, _goTo2.scrollTo)(target, (0, _commons.mergeDeep)(_options, options), false, goTo);
+    return (0, _goTo2.scrollTo)(target, (0, _commons.mergeDeep)(_options, options), false, goTo, controller.signal);
   }
   go.horizontal = async (target, options) => {
-    return (0, _goTo2.scrollTo)(target, (0, _commons.mergeDeep)(_options, options), true, goTo);
+    return (0, _goTo2.scrollTo)(target, (0, _commons.mergeDeep)(_options, options), true, goTo, controller.signal);
   };
   return go;
 }

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

@@ -1,7 +1,7 @@
 import { computed, inject } from "vue";
 import { useRtl } from "./rtl.composable.js";
 import { ORIGAM_GO_TO_KEY } from "../../consts/Commons/goTo.const.js";
-import { mergeDeep } from "../../utils/Commons/commons.util.js";
+import { mergeDeep, tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 import { genDefaults, scrollTo } from "../../utils/Commons/goTo.util.js";
 export function createGoTo(options, locale) {
   return {
@@ -17,11 +17,13 @@ export function useGoTo(_options = {}) {
     ...goToInstance,
     rtl: computed(() => goToInstance.rtl.value || isRtl.value)
   };
+  const controller = new AbortController();
+  tryOnScopeDispose(() => controller.abort());
   async function go(target, options) {
-    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+    return scrollTo(target, mergeDeep(_options, options), false, goTo, controller.signal);
   }
   go.horizontal = async (target, options) => {
-    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+    return scrollTo(target, mergeDeep(_options, options), true, goTo, controller.signal);
   };
   return go;
 }

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

@@ -75,21 +75,21 @@ function useGroup(props, injectKey) {
     if (props.multiple) (0, _console.consoleWarn)('This method is not supported when using "multiple" prop');
     if (!selected.value.length) {
       const item = items.find(item2 => !item2.disabled);
-      if (item) {
-        selected.value = [item.id];
-      }
-    } else {
-      const currentId = selected.value[0];
-      const currentIndex = items.findIndex(i => i.id === currentId);
-      let newIndex = (currentIndex + offset) % items.length;
-      let newItem = items[newIndex];
-      while (newItem.disabled && newIndex !== currentIndex) {
-        newIndex = (newIndex + offset) % items.length;
-        newItem = items[newIndex];
-      }
-      if (newItem.disabled) return;
-      selected.value = [items[newIndex].id];
+      if (!item) return void 0;
+      selected.value = [item.id];
+      return item.id;
+    }
+    const currentId = selected.value[0];
+    const currentIndex = items.findIndex(i => i.id === currentId);
+    let newIndex = (currentIndex + offset) % items.length;
+    let newItem = items[newIndex];
+    while (newItem.disabled && newIndex !== currentIndex) {
+      newIndex = (newIndex + offset) % items.length;
+      newItem = items[newIndex];
     }
+    if (newItem.disabled) return void 0;
+    selected.value = [items[newIndex].id];
+    return items[newIndex].id;
   };
   const state = {
     register,