origam 2.16.0 → 2.17.1

package/dist/src/composables/Parallax/transform.composable.js

@@ -1,8 +1,14 @@
+import {
+  PARALLAX_ELEMENT_DEFAULT_STRENGTH,
+  PARALLAX_ELEMENT_DEPTH_TRANSLATE_FACTOR,
+  PARALLAX_ELEMENT_MOVEMENT_BASE,
+  PARALLAX_ELEMENT_MOVEMENT_DIVISOR
+} from "../../consts/Parallax/parallax-element.const.js";
 import { AXIS, PARALLAX_ELEMENT_TYPE } from "../../enums/index.js";
 import { computed } from "vue";
 export function useParallaxTransform(props) {
   const strength = computed(() => {
-    const str = props.strength ?? 10;
+    const str = props.strength ?? PARALLAX_ELEMENT_DEFAULT_STRENGTH;
     return props.type === PARALLAX_ELEMENT_TYPE.DEPTH || props.type === PARALLAX_ELEMENT_TYPE.DEPTH_INV ? Math.abs(str) : str;
   });
   const transformStyles = (x, y) => {
@@ -28,30 +34,40 @@ export function useParallaxTransform(props) {
     }
     return transform;
   };
+  const toMovement = (offset) => {
+    return strength.value * offset / PARALLAX_ELEMENT_MOVEMENT_DIVISOR + PARALLAX_ELEMENT_MOVEMENT_BASE;
+  };
   const translateMovement = (x, y) => {
-    const movementX = strength.value * x / 10 + 1;
-    const movementY = strength.value * y / 10 + 1;
+    const movementX = toMovement(x);
+    const movementY = toMovement(y);
     return `translate3d(${-movementX}px, ${-movementY}px, 0)`;
   };
   const rotateMovement = (x, y) => {
     let movement = 0;
     if (!props.axis) {
-      movement = strength.value * (x + y) / 10 + 1;
+      movement = toMovement(x + y);
     } else if (props.axis === AXIS.X) {
-      movement = strength.value * x / 10 + 1;
+      movement = toMovement(x);
     } else if (props.axis === AXIS.Y) {
-      movement = strength.value * y / 10 + 1;
+      movement = toMovement(y);
     }
     return `rotate3d(0,0,1,${movement}deg)`;
   };
   const depthMovement = (x, y) => {
-    return `rotateX(${-y}deg) rotateY(${x}deg) translate3d(0,0,${strength.value * 2}px)`;
+    const depth = strength.value * PARALLAX_ELEMENT_DEPTH_TRANSLATE_FACTOR;
+    return `rotateX(${-y}deg) rotateY(${x}deg) translate3d(0,0,${depth}px)`;
   };
   const scaleMovement = (x, y) => {
-    const movement = strength.value * (Math.abs(x) + Math.abs(y)) / 10 + 1;
+    const movement = toMovement(Math.abs(x) + Math.abs(y));
     return `scale3d(${props.type === PARALLAX_ELEMENT_TYPE.SCALE_X || props.type === PARALLAX_ELEMENT_TYPE.SCALE ? movement : 1},
             ${props.type === PARALLAX_ELEMENT_TYPE.SCALE_Y || props.type === PARALLAX_ELEMENT_TYPE.SCALE ? movement : 1},
             1)`;
   };
-  return { transformStyles, strength };
+  const customMovement = (x, y) => {
+    return {
+      x: toMovement(x),
+      y: toMovement(y)
+    };
+  };
+  return { transformStyles, strength, customMovement };
 }

package/dist/src/composables/PasswordField/passwordStrength.composable.cjs

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DEFAULT_PASSWORD_REQUIREMENTS", {
   enumerable: true,
   get: function () {
-    return _consts.DEFAULT_PASSWORD_REQUIREMENTS;
+    return _passwordField.DEFAULT_PASSWORD_REQUIREMENTS;
   }
 });
 exports.computeStrength = computeStrength;
+var _passwordField = require("../../consts/PasswordField/password-field.const.cjs");
 var _enums = require("../../enums/index.cjs");
-var _consts = require("../../consts/index.cjs");
 function computeStrength(value) {
   const v = (value ?? "").toString();
   if (v.length === 0) {
@@ -21,16 +21,14 @@ function computeStrength(value) {
     };
   }
   let raw = 0;
-  if (v.length >= 8) raw += 1;
-  if (v.length >= 12) raw += 1;
-  if (/\d/.test(v)) raw += 1;
-  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) raw += 1;
-  if (/[^A-Za-z0-9]/.test(v)) raw += 1;
-  const score = raw > 4 ? 4 : raw;
-  let level;
-  if (score <= 1) level = _enums.PASSWORD_STRENGTH_LEVEL.WEAK;else if (score === 2) level = _enums.PASSWORD_STRENGTH_LEVEL.FAIR;else if (score === 3) level = _enums.PASSWORD_STRENGTH_LEVEL.GOOD;else level = _enums.PASSWORD_STRENGTH_LEVEL.STRONG;
+  if (v.length >= _passwordField.PASSWORD_MIN_LENGTH) raw += 1;
+  if (v.length >= _passwordField.PASSWORD_STRONG_LENGTH) raw += 1;
+  if (_passwordField.PASSWORD_PATTERN_DIGIT.test(v)) raw += 1;
+  if (_passwordField.PASSWORD_PATTERN_LOWERCASE.test(v) && _passwordField.PASSWORD_PATTERN_UPPERCASE.test(v)) raw += 1;
+  if (_passwordField.PASSWORD_PATTERN_SPECIAL.test(v)) raw += 1;
+  const score = raw > _passwordField.PASSWORD_STRENGTH_MAX_SCORE ? _passwordField.PASSWORD_STRENGTH_MAX_SCORE : raw;
   return {
     score,
-    level
+    level: _passwordField.PASSWORD_STRENGTH_LEVEL_BY_SCORE[score]
   };
 }

package/dist/src/composables/PasswordField/passwordStrength.composable.d.ts

@@ -22,7 +22,7 @@
  * fill, the level drives the colour token (`--origam-password-field
  * __strength---bg-{level}`).
  */
-import type { IPasswordStrength } from '../../interfaces';
+import type { IPasswordStrength } from '../../interfaces/PasswordField/password-strength.interface';
 /**
  * Compute the strength of a password string. Pure — no side effects,
  * safe to call inside a `computed()` block.
@@ -30,5 +30,24 @@ import type { IPasswordStrength } from '../../interfaces';
 /*********************************************************
  * computeStrength
  ********************************************************/
+/*********************************************************
+ * computeStrength
+ *
+ * @description
+ * Fonction PURE — pas un composable malgre son emplacement. Note un mot de
+ * passe et retourne `{ score, level }`, ou `level` est une valeur de
+ * `PASSWORD_STRENGTH_LEVEL`.
+ *
+ * @description
+ * Le score additionne des criteres independants : longueur minimale, longueur
+ * forte, presence de chiffres, melange de casse. Une chaine vide, `null` ou
+ * `undefined` donnent 0 et `WEAK` — l'appelant n'a donc jamais a garder la
+ * valeur avant d'appeler.
+ *
+ * @description
+ * ⛔ Ce n'est pas une mesure d'entropie et ca ne pretend pas en etre une :
+ * c'est un indicateur d'interface, a ne pas confondre avec une politique de
+ * securite cote serveur.
+ ********************************************************/
 export declare function computeStrength(value: string | null | undefined): IPasswordStrength;
-export { DEFAULT_PASSWORD_REQUIREMENTS } from '../../consts';
+export { DEFAULT_PASSWORD_REQUIREMENTS } from '../../consts/PasswordField/password-field.const';

package/dist/src/composables/PasswordField/passwordStrength.composable.js

@@ -1,3 +1,13 @@
+import {
+  PASSWORD_MIN_LENGTH,
+  PASSWORD_PATTERN_DIGIT,
+  PASSWORD_PATTERN_LOWERCASE,
+  PASSWORD_PATTERN_SPECIAL,
+  PASSWORD_PATTERN_UPPERCASE,
+  PASSWORD_STRENGTH_LEVEL_BY_SCORE,
+  PASSWORD_STRENGTH_MAX_SCORE,
+  PASSWORD_STRONG_LENGTH
+} from "../../consts/PasswordField/password-field.const.js";
 import { PASSWORD_STRENGTH_LEVEL } from "../../enums/index.js";
 export function computeStrength(value) {
   const v = (value ?? "").toString();
@@ -5,17 +15,12 @@ export function computeStrength(value) {
     return { score: 0, level: PASSWORD_STRENGTH_LEVEL.WEAK };
   }
   let raw = 0;
-  if (v.length >= 8) raw += 1;
-  if (v.length >= 12) raw += 1;
-  if (/\d/.test(v)) raw += 1;
-  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) raw += 1;
-  if (/[^A-Za-z0-9]/.test(v)) raw += 1;
-  const score = raw > 4 ? 4 : raw;
-  let level;
-  if (score <= 1) level = PASSWORD_STRENGTH_LEVEL.WEAK;
-  else if (score === 2) level = PASSWORD_STRENGTH_LEVEL.FAIR;
-  else if (score === 3) level = PASSWORD_STRENGTH_LEVEL.GOOD;
-  else level = PASSWORD_STRENGTH_LEVEL.STRONG;
-  return { score, level };
+  if (v.length >= PASSWORD_MIN_LENGTH) raw += 1;
+  if (v.length >= PASSWORD_STRONG_LENGTH) raw += 1;
+  if (PASSWORD_PATTERN_DIGIT.test(v)) raw += 1;
+  if (PASSWORD_PATTERN_LOWERCASE.test(v) && PASSWORD_PATTERN_UPPERCASE.test(v)) raw += 1;
+  if (PASSWORD_PATTERN_SPECIAL.test(v)) raw += 1;
+  const score = raw > PASSWORD_STRENGTH_MAX_SCORE ? PASSWORD_STRENGTH_MAX_SCORE : raw;
+  return { score, level: PASSWORD_STRENGTH_LEVEL_BY_SCORE[score] };
 }
-export { DEFAULT_PASSWORD_REQUIREMENTS } from "../../consts/index.js";
+export { DEFAULT_PASSWORD_REQUIREMENTS } from "../../consts/PasswordField/password-field.const.js";

package/dist/src/composables/Progress/progress.composable.cjs

@@ -4,27 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useProgress = useProgress;
-var _composables = require("../../composables/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _intersectionObserver = require("../Commons/intersectionObserver.composable.cjs");
+var _margin = require("../Commons/margin.composable.cjs");
+var _padding = require("../Commons/padding.composable.cjs");
+var _vModel = require("../Commons/vModel.composable.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 var _vue = require("vue");
 function useProgress(props) {
-  const progress = (0, _composables.useVModel)(props, "modelValue");
+  const progress = (0, _vModel.useVModel)(props, "modelValue");
   const slots = (0, _vue.useSlots)();
   const {
     isIntersecting
-  } = (0, _composables.useIntersectionObserver)();
+  } = (0, _intersectionObserver.useIntersectionObserver)();
   const {
     paddingClasses,
     paddingStyles
-  } = (0, _composables.usePadding)(props);
+  } = (0, _padding.usePadding)(props);
   const {
     marginClasses,
     marginStyles
-  } = (0, _composables.useMargin)(props);
+  } = (0, _margin.useMargin)(props);
   const thickness = (0, _vue.computed)(() => {
     return Number(props.thickness);
   });
-  const max = (0, _vue.computed)(() => (0, _utils.int)(props.max));
+  const max = (0, _vue.computed)(() => (0, _commons.int)(props.max));
   const normalizedValue = (0, _vue.computed)(() => {
     return parseFloat(progress.value) / max.value * 100;
   });

package/dist/src/composables/Progress/progress.composable.d.ts

@@ -1,7 +1,28 @@
-import type { IProgressTypeProps } from '../../interfaces';
+import type { IProgressTypeProps } from '../../interfaces/Progress/progress.interface';
 /*********************************************************
  * useProgress
  ********************************************************/
+/*********************************************************
+ * useProgress
+ *
+ * @description
+ * Socle partage par `<origam-progress-linear>` et
+ * `<origam-progress-circular>` : normalise la valeur, resout l'epaisseur et
+ * le maximum, et compose les classes et styles de la racine. Retourne
+ * `{ progressClasses, progressStyles, normalizedValue, thickness, max,
+ * progress, hasContent }`.
+ *
+ * @description
+ * `normalizedValue` ramene toujours a un POURCENTAGE (`value / max * 100`),
+ * quel que soit le `max` du consommateur — les deux implementations
+ * raisonnent ensuite sur la meme echelle, l'une en largeur, l'autre en arc.
+ *
+ * @description
+ * ⛔ La classe `--visible` est pilotee par un `IntersectionObserver`, pas par
+ * une prop : une barre hors de l'ecran n'anime pas. Consequence a connaitre
+ * en test — hors d'un vrai navigateur l'observateur ne se declenche pas, donc
+ * la classe reste absente et ce n'est pas un defaut du composant.
+ ********************************************************/
 export declare function useProgress(props: IProgressTypeProps): {
     progressClasses: import("vue").ComputedRef<(string | string[] | {
         'origam-progress--indeterminate': boolean | undefined;

package/dist/src/composables/Progress/progress.composable.js

@@ -1,5 +1,8 @@
-import { useIntersectionObserver, useMargin, usePadding, useVModel } from "../../composables/index.js";
-import { int } from "../../utils/index.js";
+import { useIntersectionObserver } from "../Commons/intersectionObserver.composable.js";
+import { useMargin } from "../Commons/margin.composable.js";
+import { usePadding } from "../Commons/padding.composable.js";
+import { useVModel } from "../Commons/vModel.composable.js";
+import { int } from "../../utils/Commons/commons.util.js";
 import { computed, useSlots } from "vue";
 export function useProgress(props) {
   const progress = useVModel(props, "modelValue");

package/dist/src/composables/QrCode/qr-code.composable.cjs

@@ -58,16 +58,16 @@ function buildSvg(matrix, options) {
       }
     }
   }
-  const backgroundRect = bg && bg !== "transparent" ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
+  const backgroundRect = bg && bg !== _qrCode.QR_CODE_DEFAULT_BACKGROUND ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
   let logoMarkup = "";
   if (options.logo && options.logo.src) {
     const ratio = options.logo.size ?? _qrCode.QR_CODE_DEFAULT_LOGO_SIZE;
     const padding = options.logo.padding ?? _qrCode.QR_CODE_DEFAULT_LOGO_PADDING;
-    const logoBg = options.logo.background ?? (bg && bg !== "transparent" ? bg : "#ffffff");
+    const logoBg = options.logo.background ?? (bg && bg !== _qrCode.QR_CODE_DEFAULT_BACKGROUND ? bg : _qrCode.QR_CODE_DEFAULT_LOGO_BACKGROUND);
     const logoBoxSize = count * ratio;
     const logoX = options.margin + (count - logoBoxSize) / 2;
     const logoY = options.margin + (count - logoBoxSize) / 2;
-    const paddingUnits = padding / 16;
+    const paddingUnits = padding / _qrCode.QR_CODE_LOGO_PADDING_PX_PER_MODULE;
     const bdX = logoX - paddingUnits;
     const bdY = logoY - paddingUnits;
     const bdSize = logoBoxSize + paddingUnits * 2;
@@ -93,10 +93,10 @@ function useQrCode(value, options = {}) {
     }
     return {
       errorCorrectionLevel: opts.errorCorrectionLevel ?? _qrCode.QR_CODE_DEFAULT_ECC,
-      foreground: opts.foreground ?? "currentColor",
-      background: opts.background ?? "transparent",
+      foreground: opts.foreground ?? _qrCode.QR_CODE_DEFAULT_FOREGROUND,
+      background: opts.background ?? _qrCode.QR_CODE_DEFAULT_BACKGROUND,
       margin: typeof opts.margin === "number" ? opts.margin : _qrCode.QR_CODE_DEFAULT_MARGIN,
-      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : 0,
+      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : _qrCode.QR_CODE_DEFAULT_CORNER_RADIUS,
       logo: opts.logo
     };
   });

package/dist/src/composables/QrCode/qr-code.composable.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { IUseQrCodeOptions } from '../../interfaces';
+import type { IUseQrCodeOptions } from '../../interfaces/QrCode/qr-code.interface';
 /**
  * Test helper — clears the module-level matrix LRU. Exposed for the
  * unit-test suite and not advertised publicly.

package/dist/src/composables/QrCode/qr-code.composable.js

@@ -5,10 +5,15 @@ import {
   toValue
 } from "vue";
 import {
+  QR_CODE_DEFAULT_BACKGROUND,
+  QR_CODE_DEFAULT_CORNER_RADIUS,
   QR_CODE_DEFAULT_ECC,
+  QR_CODE_DEFAULT_FOREGROUND,
+  QR_CODE_DEFAULT_LOGO_BACKGROUND,
   QR_CODE_DEFAULT_LOGO_PADDING,
   QR_CODE_DEFAULT_LOGO_SIZE,
   QR_CODE_DEFAULT_MARGIN,
+  QR_CODE_LOGO_PADDING_PX_PER_MODULE,
   QR_CODE_LRU_CAPACITY,
   QR_CODE_OVERLAY_MAX_RATIO
 } from "../../consts/QrCode/qr-code.const.js";
@@ -61,16 +66,16 @@ function buildSvg(matrix, options) {
       }
     }
   }
-  const backgroundRect = bg && bg !== "transparent" ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
+  const backgroundRect = bg && bg !== QR_CODE_DEFAULT_BACKGROUND ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
   let logoMarkup = "";
   if (options.logo && options.logo.src) {
     const ratio = options.logo.size ?? QR_CODE_DEFAULT_LOGO_SIZE;
     const padding = options.logo.padding ?? QR_CODE_DEFAULT_LOGO_PADDING;
-    const logoBg = options.logo.background ?? (bg && bg !== "transparent" ? bg : "#ffffff");
+    const logoBg = options.logo.background ?? (bg && bg !== QR_CODE_DEFAULT_BACKGROUND ? bg : QR_CODE_DEFAULT_LOGO_BACKGROUND);
     const logoBoxSize = count * ratio;
     const logoX = options.margin + (count - logoBoxSize) / 2;
     const logoY = options.margin + (count - logoBoxSize) / 2;
-    const paddingUnits = padding / 16;
+    const paddingUnits = padding / QR_CODE_LOGO_PADDING_PX_PER_MODULE;
     const bdX = logoX - paddingUnits;
     const bdY = logoY - paddingUnits;
     const bdSize = logoBoxSize + paddingUnits * 2;
@@ -98,10 +103,10 @@ export function useQrCode(value, options = {}) {
     }
     return {
       errorCorrectionLevel: opts.errorCorrectionLevel ?? QR_CODE_DEFAULT_ECC,
-      foreground: opts.foreground ?? "currentColor",
-      background: opts.background ?? "transparent",
+      foreground: opts.foreground ?? QR_CODE_DEFAULT_FOREGROUND,
+      background: opts.background ?? QR_CODE_DEFAULT_BACKGROUND,
       margin: typeof opts.margin === "number" ? opts.margin : QR_CODE_DEFAULT_MARGIN,
-      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : 0,
+      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : QR_CODE_DEFAULT_CORNER_RADIUS,
       logo: opts.logo
     };
   });

package/dist/src/composables/Responsive/aspect.composable.cjs

@@ -5,30 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAspectRatio = useAspectRatio;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
+const isUsableRatio = value => Number.isFinite(value) && value > 0;
 function useAspectRatio(props) {
-  const aspectStyles = (0, _vue.computed)(() => {
-    const aspectRatio = [];
-    let ratio;
+  const ratio = (0, _vue.computed)(() => {
     if (props.aspectRatio) {
       const raw = String(props.aspectRatio).trim();
       const slash = raw.indexOf("/");
       if (slash !== -1) {
         const w = Number(raw.slice(0, slash));
         const h = Number(raw.slice(slash + 1));
-        ratio = h ? w / h : NaN;
-      } else {
-        ratio = Number(raw);
+        if (!isUsableRatio(w) || !isUsableRatio(h)) return void 0;
+        return `${w} / ${h}`;
       }
-    } else if (_consts.IN_BROWSER) {
-      ratio = window.innerWidth / window.innerHeight;
-    } else {
-      return aspectRatio;
-    }
-    if (ratio) {
-      aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);
+      const value = Number(raw);
+      return isUsableRatio(value) ? String(value) : void 0;
     }
-    return aspectRatio;
+    if (!_commons.IN_BROWSER) return void 0;
+    const viewport = window.innerWidth / window.innerHeight;
+    return isUsableRatio(viewport) ? String(viewport) : void 0;
+  });
+  const aspectStyles = (0, _vue.computed)(() => {
+    return ratio.value !== void 0 ? [`aspect-ratio: ${ratio.value}`] : [];
   });
   return {
     aspectStyles

package/dist/src/composables/Responsive/aspect.composable.d.ts

@@ -1,15 +1,60 @@
 /*********************************************************
  * useAspectRatio
  *
+ * Emits the native CSS `aspect-ratio` declaration for the root box.
+ *
+ * #709 — this used to be the classic padding-percentage hack: an empty
+ * `__sizer` child carried `padding-block-end: ${1 / ratio * 100}%` and
+ * `__content` was pulled back over it with the exact opposite
+ * `margin-block-start: -${…}%` (#454). Because `.origam-responsive` is
+ * `display: flex; flex-direction: column`, those two values cancelled
+ * ARITHMETICALLY: the root height resolved to
+ * `sizer(p) + margin(-p) + content` = the content's own height. Measured on
+ * `develop`, Chromium: `<OrigamResponsive aspect-ratio="16/9" max-width=480>`
+ * rendered 480 x 23 instead of 480 x 270, and 16/9 vs 4/3 rendered the SAME
+ * height — the ratio was decorative.
+ *
+ * The cancellation only fired when the DEFAULT slot was filled, since
+ * `__content` is `v-if="slots.default"`. That is why `OrigamImg` looked
+ * healthy throughout: it renders into `#additional`, never `#default`, so no
+ * pull-back margin was ever emitted and the sizer's height survived.
+ *
+ * `aspect-ratio` has no counterpart to cancel — the root sizes itself, the
+ * sizer and the pull-back are gone, and the two bugs above cannot recur.
+ * CLAUDE.md's CSS-first table lists `aspect-ratio: 16 / 9` as the first
+ * choice and the padding-bottom hack as the fallback; this is that migration.
+ *
+ * Browser support is not gated. `aspect-ratio` is Baseline Widely Available
+ * (Chrome 88 / Edge 88 / Firefox 89 / Safari 15, all shipped 2021), which is
+ * comfortably below this DS's floor, so there is no branch to take and
+ * nothing to declare in `FEATURE_QUERIES`.
+ *
  * SSR safety
  * ──────────
- * During SSR (`!IN_BROWSER`) we cannot read `window.innerWidth/Height`.
- * When the consumer passes an explicit `aspectRatio` prop the ratio is
- * derived from it (no DOM needed). Otherwise we return an empty styles
- * array — the layout collapses to its natural box on the server, then
- * the first browser-side computed access fills in the padding-bottom
- * value. The component's intrinsic height takes over after hydration,
- * so the difference is invisible to the user.
+ * During SSR (`!IN_BROWSER`) we cannot read `window.innerWidth/Height`. When
+ * the consumer passes an explicit `aspectRatio` the ratio is derived from it
+ * with no DOM access. Otherwise we return an empty styles array — the layout
+ * collapses to its natural box on the server and the first browser-side
+ * computed access fills the declaration in. The value is a literal inline
+ * style, not a custom property: it is derived purely from `aspectRatio` at
+ * runtime, never a design-time default a theme would override, so there is
+ * nothing for the token pipeline to carry.
+ *
+ * Guarding the value
+ * ──────────────────
+ * The returned ratio rejects NaN, 0, negatives and Infinity. Any of them
+ * would emit an invalid declaration, which CSS drops silently — the property
+ * would appear to be set while doing nothing at all.
+ *
+ * Fraction strings stay fractions
+ * ───────────────────────────────
+ * `'16/9'` is emitted as `aspect-ratio: 16 / 9`, not as the float
+ * `1.7777777777777777`. CSS divides at full precision, the computed value
+ * stays readable, and it matches what consumers actually write —
+ * `OrigamVideo` feeds the literal string `'16/9'` by default. Only the two
+ * NUMBERS parsed out of the input are re-emitted, never the raw text, so a
+ * malformed prop cannot inject anything into the declaration. A numeric prop
+ * has no fraction to preserve and is emitted as the number it is.
  ********************************************************/
 export declare function useAspectRatio(props: {
     aspectRatio?: string | number;

package/dist/src/composables/Responsive/aspect.composable.js

@@ -1,28 +1,26 @@
 import { computed } from "vue";
-import { IN_BROWSER } from "../../consts/index.js";
+import { IN_BROWSER } from "../../consts/Commons/commons.const.js";
+const isUsableRatio = (value) => Number.isFinite(value) && value > 0;
 export function useAspectRatio(props) {
-  const aspectStyles = computed(() => {
-    const aspectRatio = [];
-    let ratio;
+  const ratio = computed(() => {
     if (props.aspectRatio) {
       const raw = String(props.aspectRatio).trim();
       const slash = raw.indexOf("/");
       if (slash !== -1) {
         const w = Number(raw.slice(0, slash));
         const h = Number(raw.slice(slash + 1));
-        ratio = h ? w / h : NaN;
-      } else {
-        ratio = Number(raw);
+        if (!isUsableRatio(w) || !isUsableRatio(h)) return void 0;
+        return `${w} / ${h}`;
       }
-    } else if (IN_BROWSER) {
-      ratio = window.innerWidth / window.innerHeight;
-    } else {
-      return aspectRatio;
-    }
-    if (ratio) {
-      aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);
+      const value = Number(raw);
+      return isUsableRatio(value) ? String(value) : void 0;
     }
-    return aspectRatio;
+    if (!IN_BROWSER) return void 0;
+    const viewport = window.innerWidth / window.innerHeight;
+    return isUsableRatio(viewport) ? String(viewport) : void 0;
+  });
+  const aspectStyles = computed(() => {
+    return ratio.value !== void 0 ? [`aspect-ratio: ${ratio.value}`] : [];
   });
   return { aspectStyles };
 }

package/dist/src/composables/Sheet/sheetSwipe.composable.cjs

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "DEFAULT_SHEET_SNAP_POINTS", {
     return _sheet.DEFAULT_SHEET_SNAP_POINTS;
   }
 });
+exports.resolveHeightPx = resolveHeightPx;
 exports.useSheetSwipe = useSheetSwipe;
 var _vue = require("vue");
 var _sheet = require("../../consts/Sheet/sheet.const.cjs");

package/dist/src/composables/Sheet/sheetSwipe.composable.d.ts

@@ -1,5 +1,19 @@
-import type { ISheetSwipeOptions, ISheetSwipeReturn } from '../../interfaces';
+import type { ISheetSwipeOptions } from '../../interfaces/Sheet/sheet-swipe-options.interface';
+import type { ISheetSwipeReturn } from '../../interfaces/Sheet/sheet-swipe-return.interface';
 export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts/Sheet/sheet.const';
+/**
+ * Resolve a height token (number → px, string → CSS length) to absolute
+ * pixels at the current viewport. SSR-safe: when `window` is missing we
+ * fall back to a 0/static interpretation since the DOM cannot be read
+ * anyway.
+ *
+ * Exported so `OrigamSheet.vue` can share this exact resolution logic
+ * (capping the live drag height, and ordering snap points for the
+ * keyboard path on the drag handle) instead of re-implementing a second,
+ * slightly different regex — see the "Reuse existing composables/utils"
+ * rule in the project CLAUDE.md.
+ */
+export declare function resolveHeightPx(height: number | string): number;
 /**
  * Bottom-sheet swipe gesture composable.
  *
@@ -23,4 +37,22 @@ export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts/Sheet/sheet.const';
 /*********************************************************
  * useSheetSwipe
  ********************************************************/
+/*********************************************************
+ * useSheetSwipe
+ *
+ * @description
+ * Geste de glissement d'un `<origam-sheet>` : suit le doigt sur l'element ou
+ * sur sa poignee, puis s'aimante au point d'accroche le plus proche a la
+ * relache.
+ *
+ * @description
+ * Les points d'accroche sont TRIES PAR HAUTEUR CROISSANTE avant usage. C'est
+ * ce qui permet aux recherches d'index (`snaps[i+1]`, `snaps[i-1]`) de
+ * designer les voisins visuels ; sur une liste non triee, glisser vers le haut
+ * pourrait aimanter vers le bas.
+ *
+ * @description
+ * `persistent` empeche la fermeture par glissement — le dernier cran reste le
+ * plus bas point d'accroche au lieu d'etre l'etat ferme.
+ ********************************************************/
 export declare function useSheetSwipe(options: ISheetSwipeOptions): ISheetSwipeReturn;

package/dist/src/composables/Sheet/sheetSwipe.composable.js

@@ -8,7 +8,7 @@ import {
 } from "vue";
 import { DEFAULT_SHEET_SNAP_POINTS, SHEET_FAST_FLICK_THRESHOLD as FAST_FLICK_THRESHOLD } from "../../consts/Sheet/sheet.const.js";
 export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet.const.js";
-function resolveHeightPx(height) {
+export function resolveHeightPx(height) {
   if (typeof height === "number") return height;
   if (typeof window === "undefined") return 0;
   const value = String(height).trim();

package/dist/src/composables/SliderField/slider-field.composable.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSteps = useSteps;
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 var _vue = require("vue");
 function useSteps(props) {
   const min = (0, _vue.computed)(() => {
@@ -18,12 +18,12 @@ function useSteps(props) {
     return +step2 > 0 ? parseFloat(step2) : 0;
   });
   const decimals = (0, _vue.computed)(() => {
-    return Math.max((0, _utils.getDecimals)(step.value), (0, _utils.getDecimals)(min.value));
+    return Math.max((0, _commons.getDecimals)(step.value), (0, _commons.getDecimals)(min.value));
   });
   const roundValue = value => {
     value = parseFloat(value);
     if (step.value <= 0) return value;
-    const clamped = (0, _utils.clamp)(value, min.value, max.value);
+    const clamped = (0, _commons.clamp)(value, min.value, max.value);
     const offset = min.value % step.value;
     const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
     return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));

package/dist/src/composables/SliderField/slider-field.composable.d.ts

@@ -1,4 +1,4 @@
-import type { ISliderFieldProps } from '../../interfaces';
+import type { ISliderFieldProps } from '../../interfaces/SliderField/slider-field.interface';
 /*********************************************************
  * useSteps
  *

package/dist/src/composables/SliderField/slider-field.composable.js

@@ -1,4 +1,4 @@
-import { clamp, getDecimals } from "../../utils/index.js";
+import { clamp, getDecimals } from "../../utils/Commons/commons.util.js";
 import { computed } from "vue";
 export function useSteps(props) {
   const min = computed(() => {