origam 2.17.1 → 2.18.1

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,

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

@@ -76,21 +76,21 @@ export function useGroup(props, injectKey) {
     if (props.multiple) 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,

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

@@ -5,16 +5,27 @@ import { IHotkeyOptions } from '../../interfaces/Commons/hotkey.interface';
  *
  * @description
  * Enregistre un raccourci clavier global (`window.addEventListener`) pour
- * `keys` (une combinaison `"ctrl+k"` ou une SEQUENCE `"g g"` separee par
- * espace, avec un `sequenceTimeout` entre chaque groupe). Traduit `cmd`/`meta`
- * selon la plateforme detectee (`navigator.userAgent`) : `ctrl` attendu sur
- * non-Mac, `meta` attendu sur Mac. Ignore l'evenement quand un champ de
- * saisie a le focus, sauf `options.inputs`.
+ * `keys` (une combinaison `"ctrl+k"`, ou une SEQUENCE de groupes separes
+ * par un TIRET `"g-g"`, avec un `sequenceTimeout` entre chaque groupe).
+ * Traduit `cmd`/`meta` selon la plateforme detectee (`navigator.userAgent`) :
+ * `ctrl` attendu sur non-Mac, `meta` attendu sur Mac. Ignore l'evenement
+ * quand un champ de saisie a le focus, sauf `options.inputs`.
+ *
+ * @description
+ * ⛔ Le separateur de SEQUENCE est le TIRET, pas l'espace — cette banniere
+ * a annonce `"g g"` pendant des mois et c'est faux. Mesure :
+ * `splitKeySequence('g-g')` rend `['g','g']` (deux groupes), tandis que
+ * `splitKeySequence('g g')` rend `['g g']` — un seul groupe dont la
+ * `actualKey` est la chaine `"g g"`, qu'aucun `e.key` n'egale jamais. Le
+ * raccourci est donc silencieusement MORT : deux `keydown` sur `g` ne
+ * declenchent rien du tout, sans avertissement. Les specs du depot
+ * utilisent la forme correcte (`a-b`).
  *
  * @description
  * ⛔ En dehors d'un contexte `setup()` Vue, AUCUN nettoyage automatique
- * n'est enregistre (pas de `onBeforeUnmount` possible) — un
- * `console.warn` (`HOTKEY_NO_AUTO_CLEANUP_WARNING`) le signale, et
+ * n'est enregistre (pas de `onBeforeUnmount` possible) — un avertissement
+ * (`HOTKEY_NO_AUTO_CLEANUP_WARNING`, via `consoleWarn`, donc rendu par le
+ * `warn()` de Vue : `[Vue warn]: Origam: Can't cleanup`) le signale, et
  * l'appelant DOIT invoquer lui-meme la fonction `cleanup` retournee.
  * Hors navigateur (`!IN_BROWSER`), la fonction est un no-op immediat, y
  * compris pour le retour (fonction vide, pas d'erreur).

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

@@ -11,5 +11,13 @@
  * jamais ete creee en mode SSR (`ssr` falsy), le Ref demarre directement a
  * `true` — pas de delai artificiel dans une app 100% client. Hors
  * navigateur (`!IN_BROWSER`), retourne un Ref fige a `false`.
+ *
+ * @description
+ * ⛔ Dans un navigateur, ce composable DEPEND de `createOrigam()` : il
+ * appelle `useDisplay()`, dont l'injection n'existe que si le plugin est
+ * installe. Mesure, montage d'un composant sans `createOrigam()` :
+ * `useHydration()` LEVE `Could not find Origam display injection`. Ce
+ * n'est donc pas un utilitaire autonome, contrairement a `useSsrBoot` qui
+ * n'injecte rien.
  ********************************************************/
 export declare function useHydration(): import("vue").ShallowRef<boolean, boolean>;

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

@@ -10,5 +10,25 @@ import type { ILink, ILinkProps } from '../../interfaces/Commons/router.interfac
  * Depends on `useRoute` for the exact-match `isActive` derivation —
  * kept in its own file since it is a consumer of `useRoute`, not a
  * variant of it.
+ *
+ * @description
+ * ⚠️ DEUX FORMES DE RETOUR. Quand `resolveDynamicComponent('RouterLink')`
+ * ne resout pas un composant (pas de vue-router installe), la fonction
+ * sort tot et ne rend QUE `{ tag, isLink, isClickable, href }` — mesure,
+ * `Object.keys(...)` sur un montage sans routeur rend exactement ces
+ * quatre clefs. `route`, `navigate` et `isActive` sont ABSENTS, pas
+ * `undefined` : un consommateur qui les deballe doit rester optionnel.
+ *
+ * @description
+ * ⛔ ADR-005, angle mort residuel : `tag` a bien ete rendu paresseux (voir
+ * la banniere « TAG IS RESOLVED LAZILY » plus bas), mais `props.to` est
+ * ENCORE lu avidement dans le corps de `setup()`, a la ligne
+ * `const link = props.to ? RouterLink.useLink(...) : undefined`. Le
+ * detecteur `packages/ds/scripts/guards/lib/setup-reads.mjs` le compte
+ * toujours parmi ses deux lectures eager restantes (`useLink [to]`,
+ * `useNested [opened]`). Consequence : un theme qui nomme `to` sur Btn /
+ * Card / Chip / ListItem / BreadcrumbItem n'est jamais vu, puisque la
+ * decision « composant routeur ou pas » est prise une fois pour toutes
+ * avant `beforeCreate`.
  ********************************************************/
 export declare function useLink(props: ILinkProps & ITagProps, attrs: SetupContext['attrs']): ILink;

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

@@ -8,6 +8,23 @@ import type { ILocationStrategyData, ILocationStrategyProps } from '../../interf
  * and on strategy change, inside a disposable toggle scope.
  * Independent from `useLocation` — no shared state or call
  * dependency.
+ *
+ * @description
+ * ⛔ `locationStrategy="static"` NE POSITIONNE RIEN. `staticLocationStrategy`
+ * (utils/Commons/location.util.ts) a un corps reduit a `// TODO` : elle rend
+ * `undefined`, donc `updateLocation` reste `undefined` et `contentStyles`
+ * reste `{}`. Mesure, contenu et cible reels attaches au document :
+ * `static` → `contentStyles = {}` / `updateLocation = undefined` ;
+ * `connected` → `contentStyles` rempli (`top`, `left`, `transformOrigin`,
+ * `maxHeight`…) / `updateLocation = function`. Seules la strategie
+ * `connected` et une fonction personnalisee font quelque chose.
+ *
+ * @description
+ * Cycle de vie : tout le cablage vit dans un `useToggleScope` arme sur
+ * `data.isActive && props.locationStrategy`. L'ecouteur `resize` est pose a
+ * l'entree du scope et retire par son `onScopeDispose` ; un changement de
+ * `props.locationStrategy` appelle le `reset` du scope, qui le rejoue en
+ * entier. Hors navigateur (`!IN_BROWSER`), aucun scope n'est cree du tout.
  ********************************************************/
 export declare function useLocationStrategies(props: ILocationStrategyProps, data: ILocationStrategyData): {
     contentStyles: import("vue").Ref<{}, {}>;

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

@@ -4,11 +4,25 @@ import type { IMessageProps } from '../../interfaces/Commons/message.interface';
  * useMessage
  *
  * @description
- * Resout les messages a afficher sous un champ (Field, TextField…) par
- * ordre de priorite : `props.errorMessages`/`otherMessages` (erreurs
- * externes, ex. validation) d'abord, sinon `props.hint`, sinon
- * `props.messages`. `hasMessages` vaut vrai des qu'une SOURCE existe —
- * y compris le slot `#message`, meme si les props textuelles sont vides.
+ * Resout les messages a afficher sous un conteneur de champ par ordre de
+ * priorite : `props.errorMessages`/`otherMessages` (erreurs externes, ex.
+ * validation) d'abord, sinon `props.hint`, sinon `props.messages`.
+ * `hasMessages` vaut vrai des qu'une SOURCE existe — y compris le slot
+ * `#message`, meme si les props textuelles sont vides.
+ *
+ * @description
+ * ⛔ Un seul consommateur reel dans `packages/ds/src` : `OrigamForm`
+ * (verifie par import, pas par grep de nom). La famille Field affiche ses
+ * messages par un autre chemin — ne pas ecrire que ce composable est
+ * celui de `OrigamTextField`.
+ *
+ * @description
+ * ⛔ La branche prioritaire rend `otherMessages.value`, PAS
+ * `props.errorMessages`. Mesure : avec `errorMessages: ['boum']` et le
+ * `otherMessages` par defaut (`ref([])`), `hasMessages` vaut `true` et
+ * `messages` vaut `[]` — la zone de message s'ouvre VIDE. La prop n'est
+ * donc qu'un DECLENCHEUR de priorite ; c'est a l'appelant de reinjecter
+ * ses erreurs par le second argument (ce que fait `OrigamForm`).
  *
  * @description
  * `otherMessages` (typiquement les erreurs de `useValidation`) est un

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

@@ -8,12 +8,23 @@ import type { IPositionProps } from '../../interfaces/Commons/position.interface
  * inline par cote present parmi `top`/`bottom`/`left`/`right`.
  *
  * @description
- * ⛔ Contrairement a `useDimension`, AUCUNE conversion via `convertToUnit`
- * n'est appliquee sur `top`/`bottom`/`left`/`right` : bien que
- * `IPositionProps` les type `number | string`, un nombre est interpole
- * TEL QUEL (`"top: 8"`, pas `"top: 8px"`) — declaration CSS invalide.
- * Passer une chaine unitee (`"8px"`) est le seul usage sur qui marche
- * aujourd'hui.
+ * `top`/`bottom`/`left`/`right` passent par `convertToUnit`, comme les six
+ * props de `useDimension` : `top={8}` emet `top: 8px`, `top="8px"` reste
+ * verbatim. ⚠️ Cette banniere a longtemps annonce l'INVERSE (« AUCUNE
+ * conversion n'est appliquee ») — c'etait vrai jusqu'au correctif #557
+ * (`b357f7eba`), qui a change le code sans la mettre a jour.
+ *
+ * @description
+ * ⛔ La garde d'emission est une garde de VERACITE (`if (props[layer])`),
+ * pas un test de presence : un cote a `0` est donc silencieusement omis.
+ * `top={0}` n'emet rien — mesure. Ecrire `top="0px"` pour un cote colle au
+ * bord. Meme forme que `useDimension`, meme consequence.
+ *
+ * @description
+ * `positionClasses` renvoie une CHAINE (ou `undefined`), pas un tableau —
+ * seul composable de l'axe dimension/espacement/forme dans ce cas ; tous
+ * ses voisins (`densityClasses`, `roundedClasses`, …) renvoient un
+ * `Array<string>`.
  ********************************************************/
 export declare function usePosition(props: IPositionProps, name?: string): {
     positionClasses: import("vue").ComputedRef<string | undefined>;

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

@@ -9,11 +9,17 @@ import type { Ref } from 'vue';
  * stable.
  *
  * @description
- * Le tableau est REINITIALISE a vide a chaque `onBeforeUpdate` : c'est ce
- * qui evite d'accumuler des references perimees quand la liste retrecit
- * (sans ce reset, un index au-dela de la nouvelle longueur garderait
- * l'ancien element). Vue re-remplit ensuite les index via `updateRef`
- * pendant le re-render qui suit.
+ * Le tableau est REINITIALISE a vide a chaque `onBeforeUpdate`, puis Vue
+ * re-remplit les index via `updateRef` pendant le re-render qui suit.
+ *
+ * @description
+ * ⛔ Le tableau ne RETRECIT PAS pour autant. Mesure, liste de 3 items
+ * ramenee a 1 : `refs.value` vaut `[<li>, null, null]` et `refs.value.length`
+ * vaut toujours `3` — Vue rappelle la fonction `ref` des vnodes demontes
+ * avec `null`, donc les emplacements liberes sont REMIS A `null` (pas
+ * d'element perime conserve) mais restent presents. Un consommateur doit
+ * filtrer les trous et ne jamais deduire la longueur de la liste de
+ * `refs.value.length`.
  ********************************************************/
 export declare function useRefs<T extends object>(): {
     refs: Ref<(T | null | undefined)[], (T | null | undefined)[]>;

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

@@ -19,9 +19,19 @@ import type { TRounded } from '../../types/Commons/rounded.type';
  *   2. per-corner `roundedTopLeft` / `roundedTopRight` /
  *      `roundedBottomLeft` / `roundedBottomRight`
  *
- * So `roundedTopLeft="0"` beats `rounded="lg"` for the top-left corner
+ * So `roundedTopLeft="0px"` beats `rounded="lg"` for the top-left corner
  * only; the other three keep the `lg` rung.
  *
+ * ⚠️ This example used to read `roundedTopLeft="0"`, and that form does
+ * NOT work — measured: `{rounded:'lg', roundedTopLeft:'0'}` emits the
+ * shorthand declaration ALONE. The bare string `"0"` is neither a utility
+ * rung, nor a named variant, nor a match for `CUSTOM_BORDER_RADIUS_REGEX`
+ * (which requires a unit), so `resolveRoundedCornerValue` returns `null`
+ * and the corner is silently skipped. `0` (the NUMBER) and `"0px"` both
+ * resolve to `0px`. In a template `roundedTopLeft="0"` is a string, which
+ * is exactly the failing form — bind `:rounded-top-left="0"` or write
+ * `"0px"`.
+ *
  * ⚠️ The per-corner props are only reachable through the PROPS-OBJECT
  * overload. The `Ref` overload carries a single scalar — the `rounded`
  * shorthand — by construction, so a caller that needs the corners must

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScrolling = useScrolling;
 var _vue = require("vue");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 function useScrolling(listRef, textFieldRef) {
   const isScrolling = (0, _vue.shallowRef)(false);
   let scrollTimeout;
@@ -17,6 +18,10 @@ function useScrolling(listRef, textFieldRef) {
       });
     });
   };
+  (0, _commons.tryOnScopeDispose)(() => {
+    cancelAnimationFrame(scrollTimeout);
+    isScrolling.value = false;
+  });
   const finishScrolling = async () => {
     await new Promise(resolve => requestAnimationFrame(resolve));
     await new Promise(resolve => requestAnimationFrame(resolve));
@@ -30,6 +35,14 @@ function useScrolling(listRef, textFieldRef) {
       } else resolve();
     });
   };
+  const focusFirstMatch = (children, matches) => {
+    for (const child of children) {
+      if (matches(child.getBoundingClientRect())) {
+        child.focus();
+        break;
+      }
+    }
+  };
   const onListKeydown = async e => {
     if (e.key === "Tab") {
       textFieldRef.value?.focus();
@@ -47,20 +60,10 @@ function useScrolling(listRef, textFieldRef) {
     const children = el.querySelectorAll(":scope > :not(.origam-virtual-scroll__spacer)");
     if (e.key === "PageDown" || e.key === "Home") {
       const top = el.getBoundingClientRect().top;
-      for (const child of children) {
-        if (child.getBoundingClientRect().top >= top) {
-          child.focus();
-          break;
-        }
-      }
+      focusFirstMatch(children, rect => rect.top >= top);
     } else {
       const bottom = el.getBoundingClientRect().bottom;
-      for (const child of [...children].reverse()) {
-        if (child.getBoundingClientRect().bottom <= bottom) {
-          child.focus();
-          break;
-        }
-      }
+      focusFirstMatch([...children].reverse(), rect => rect.bottom <= bottom);
     }
   };
   return {

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

@@ -1,4 +1,5 @@
 import { shallowRef, watch } from "vue";
+import { tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 export function useScrolling(listRef, textFieldRef) {
   const isScrolling = shallowRef(false);
   let scrollTimeout;
@@ -11,6 +12,10 @@ export function useScrolling(listRef, textFieldRef) {
       });
     });
   };
+  tryOnScopeDispose(() => {
+    cancelAnimationFrame(scrollTimeout);
+    isScrolling.value = false;
+  });
   const finishScrolling = async () => {
     await new Promise((resolve) => requestAnimationFrame(resolve));
     await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -24,6 +29,14 @@ export function useScrolling(listRef, textFieldRef) {
       } else resolve();
     });
   };
+  const focusFirstMatch = (children, matches) => {
+    for (const child of children) {
+      if (matches(child.getBoundingClientRect())) {
+        child.focus();
+        break;
+      }
+    }
+  };
   const onListKeydown = async (e) => {
     if (e.key === "Tab") {
       textFieldRef.value?.focus();
@@ -41,20 +54,10 @@ export function useScrolling(listRef, textFieldRef) {
     const children = el.querySelectorAll(":scope > :not(.origam-virtual-scroll__spacer)");
     if (e.key === "PageDown" || e.key === "Home") {
       const top = el.getBoundingClientRect().top;
-      for (const child of children) {
-        if (child.getBoundingClientRect().top >= top) {
-          child.focus();
-          break;
-        }
-      }
+      focusFirstMatch(children, (rect) => rect.top >= top);
     } else {
       const bottom = el.getBoundingClientRect().bottom;
-      for (const child of [...children].reverse()) {
-        if (child.getBoundingClientRect().bottom <= bottom) {
-          child.focus();
-          break;
-        }
-      }
+      focusFirstMatch([...children].reverse(), (rect) => rect.bottom <= bottom);
     }
   };
   return { onListScroll, onListKeydown };

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

@@ -17,6 +17,21 @@ import type { ISizeProps } from '../../interfaces/Commons/size.interface';
  * 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.
+ *
+ * @description
+ * ⛔ SURFACE ASYMETRIQUE — `sizeClasses` deballe un `Ref` (`isRef(props)
+ * ? props.value : props.size`), `sizeStyles` lit `props.size` directement.
+ * La signature ne type que `ISizeProps`, donc passer un `Ref` est
+ * hors-contrat ; mais le premier canal l'accepte a moitie et le second
+ * l'ignore. Mesure : `useSize(ref(24))` rend `{classes: [], styles: []}`
+ * — inerte des deux cotes — quand `useSize({size: 24})` rend bien
+ * `["width: 24px", "height: 24px"]`. Passer l'objet de props.
+ *
+ * @description
+ * ⚠️ Aucune validation de la valeur custom : `size="zzz"` ne figure pas
+ * dans `SIZES_ARRAY`, prend donc la branche inline et emet
+ * `width: zzz` / `height: zzz` — deux declarations invalides, sans
+ * avertissement. Meme absence de liste blanche que `useVariant`.
  ********************************************************/
 export declare function useSize(props: ISizeProps, name?: string): {
     sizeStyles: import("vue").ComputedRef<string[]>;

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

@@ -7,11 +7,19 @@ exports.useSsrBoot = useSsrBoot;
 var _vue = require("vue");
 function useSsrBoot() {
   const isBooted = (0, _vue.shallowRef)(false);
+  let frame = -1;
   (0, _vue.onMounted)(() => {
-    window.requestAnimationFrame(() => {
+    frame = window.requestAnimationFrame(() => {
+      frame = -1;
       isBooted.value = true;
     });
   });
+  (0, _vue.onScopeDispose)(() => {
+    if (frame !== -1) {
+      window.cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const ssrBootStyles = (0, _vue.computed)(() => !isBooted.value ? {
     transition: "none !important"
   } : []);

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

@@ -1,11 +1,19 @@
-import { computed, onMounted, readonly, shallowRef } from "vue";
+import { computed, onMounted, onScopeDispose, readonly, shallowRef } from "vue";
 export function useSsrBoot() {
   const isBooted = shallowRef(false);
+  let frame = -1;
   onMounted(() => {
-    window.requestAnimationFrame(() => {
+    frame = window.requestAnimationFrame(() => {
+      frame = -1;
       isBooted.value = true;
     });
   });
+  onScopeDispose(() => {
+    if (frame !== -1) {
+      window.cancelAnimationFrame(frame);
+      frame = -1;
+    }
+  });
   const ssrBootStyles = computed(() => !isBooted.value ? {
     transition: "none !important"
   } : []);