origam 2.17.1 → 2.18.1

package/dist/src/components/DataList/OrigamDataTitle.vue

@@ -9,8 +9,7 @@
 		    v-if="hasPrepend"
 		    key="prepend"
 		    class="origam-data-title__prepend"
-		    :role="isPrependClickable ? 'button' : undefined"
-		    :tabindex="isPrependClickable ? 0 : undefined"
+		    v-bind="prependCommandAttrs"
 		    @click="handleClickPrepend"
 		    @keydown="handleKeydownPrepend"
     >
@@ -46,8 +45,7 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-data-title__append"
-				:role="isAppendClickable ? 'button' : undefined"
-				:tabindex="isAppendClickable ? 0 : undefined"
+				v-bind="appendCommandAttrs"
 				@click="handleClickAppend"
 				@keydown="handleKeydownAppend"
 		>
@@ -90,6 +88,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   density: { type: null, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
@@ -119,8 +119,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -106,7 +106,7 @@ const getFixedStyles = (column, y) => {
   return {
     position: "sticky",
     left: column.fixed ? convertToUnit(column.fixedOffset) : void 0,
-    top: props.sticky ? `calc(var(--origam-table-header-height) * ${y})` : void 0
+    top: props.sticky ? `calc(var(--origam-table__header-cell---height, 44px) * ${y})` : void 0
   };
 };
 const hasColumn = (name) => {

package/dist/src/components/DataTable/OrigamDataTableHeadersCell.vue

@@ -77,7 +77,10 @@ const dataTableHeadersCellStyles = computed(() => {
   ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles, () => props.id);
-const headerRowId = (index) => props.id ? `${props.id}-row-${index}` : void 0;
+const headerRowId = (index) => {
+  if (!props.id) return void 0;
+  return index === 0 ? props.id : `${props.id}-row-${index}`;
+};
 defineExpose({
   filterProps,
   css,

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -213,6 +213,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   density: { type: null, required: false }
 });
 const emits = defineEmits(["update:month", "update:year", "update:viewMode", "update:modelValue"]);

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -12,8 +12,7 @@
 			<div
 					key="prepend"
 					class="origam-date-picker-header__prepend"
-					:role="isPrependClickable ? 'button' : undefined"
-					:tabindex="isPrependClickable ? 0 : undefined"
+					v-bind="prependCommandAttrs"
 					@click="handleClickPrepend"
 					@keydown="handleKeydownPrepend"
 			>
@@ -54,8 +53,7 @@
 			<div
 					key="append"
 					class="origam-date-picker-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -102,6 +100,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   density: { type: null, required: false }
 });
 const emits = defineEmits(["click"]);
@@ -117,8 +117,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -16,6 +16,7 @@
 			@blur="handleBlur"
 			@change="handleChange"
 			@click:clear="handleClear"
+			@input="handleInput"
 			@mousedown:control="handleMousedownControl"
 	>
 		<template
@@ -244,6 +245,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -312,6 +315,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
 defineEmits(["update:menu", "update:modelValue"]);
@@ -373,6 +378,17 @@ const isMultiple = computed(() => {
 const isRange = computed(() => {
   return props.range && model.value.length > 1;
 });
+const commitTypedDate = (raw) => {
+  if (props.multiple || props.range) return;
+  if (raw === "") {
+    model.value = [];
+    return;
+  }
+  const parsed = adapter.date(raw);
+  if (!parsed || !adapter.isValid(parsed)) return;
+  if (adapter.format(parsed, "keyboardDate") !== raw) return;
+  model.value = [adapter.toISO(parsed)];
+};
 const isFocused = shallowRef(false);
 const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
@@ -419,8 +435,12 @@ const handleBlur = (e) => {
     isFocused.value = true;
   }
 };
-const handleChange = () => {
+const handleInput = (e) => {
+  commitTypedDate(e.target?.value ?? "");
+};
+const handleChange = (e) => {
   if (matchesSelector(origamTextFieldRef.value, ":autofill") || matchesSelector(origamTextFieldRef.value, ":-webkit-autofill")) {
+    commitTypedDate(e.target?.value ?? "");
   }
 };
 const handleAfterLeave = () => {

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -266,6 +266,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -398,6 +400,29 @@ defineExpose(forwardRefs({
 			border-radius: var(--origam-dialog---border-radius, 12px);
 			box-shadow: var(--origam-dialog---box-shadow);
 
+			// #563 — la boite qui porte le PLAFOND doit porter le DEFILEMENT.
+			//
+			// `.origam-overlay__content` est `position: absolute` et de hauteur
+			// AUTO : le `max-height: 100%` pose plus bas sur `.origam-card` se
+			// resout donc en `none` (pourcentage contre un parent sans hauteur
+			// definie). La carte grandit sans plafond, et cette boite la laissait
+			// deborder en `overflow: visible`. Mesure Chromium sur `develop`,
+			// dialogue Design + 900px injectes dans `#footer` :
+			//
+			//   .origam-card       overflow hidden  clientH 1047  scrollH 1047  -> ne defile pas
+			//   .origam-overlay__content  visible                               -> ne rogne pas
+			//   document                                                        -> bloque (scrollStrategy 'block')
+			//   => pied du dialogue 459px SOUS le viewport, aucun recours.
+			//
+			// Contrairement a ce que decrit le ticket, `.origam-card__content`
+			// ne defilait pas davantage : sans hauteur definie en amont il
+			// grandit lui aussi (clientH 1647 === scrollH 1647). AUCUNE boite du
+			// dialogue ne defilait.
+			//
+			// La branche `&--fullscreen` ci-dessous pose deja exactement cette
+			// declaration : ceci aligne le mode par defaut sur elle.
+			overflow-y: auto;
+
 			&,
 			> form {
 				> .origam-card {

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -3,6 +3,8 @@
 			:id="id"
 			ref="origamDialogRef"
 			v-model="isActive"
+			:class="rootClasses"
+			:style="rootStyles"
 			v-bind="dialogProps"
 			@is-read="handleIsRead"
 	>
@@ -240,6 +242,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   status: { type: null, required: false },
@@ -256,6 +260,8 @@ const origamDialogRef = ref();
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");
 const validatable = ref(false);
+const rootClasses = computed(() => [props.class]);
+const rootStyles = computed(() => props.style);
 const dialogProps = computed(() => {
   return origamDialogRef.value?.filterProps(props, ["class", "style", "id", "modelValue"]);
 });

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -175,6 +175,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -20,8 +20,7 @@
 		      v-if="hasPrepend"
 		      key="prepend"
 		      class="origam-expansion-panel-header__prepend"
-		      :role="isPrependClickable ? 'button' : undefined"
-		      :tabindex="isPrependClickable ? 0 : undefined"
+		      v-bind="prependCommandAttrs"
 		      @click="handleClickPrepend"
 		      @keydown="handleKeydownPrepend"
       >
@@ -65,8 +64,7 @@
 					v-if="hasAppend || !hideActions"
 					key="append"
 					class="origam-expansion-panel-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -163,6 +161,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
@@ -207,8 +207,8 @@ const hasTitle = computed(() => {
 const {
   hasAppend,
   hasPrepend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,

package/dist/src/components/Field/OrigamField.vue

@@ -40,8 +40,7 @@
 					v-if="hasPrependInner"
 					key="prependInner"
 					class="origam-field__prepend-inner"
-					:role="isPrependInnerClickable ? 'button' : undefined"
-					:tabindex="isPrependInnerClickable ? 0 : undefined"
+					v-bind="prependInnerCommandAttrs"
 					@click="handleClickPrependInner"
 					@keydown="handleKeydownPrependInner"
 			>
@@ -129,8 +128,7 @@
 					v-if="hasAppendInner"
 					key="appendInner"
 					class="origam-field__append-inner"
-					:role="isAppendInnerClickable ? 'button' : undefined"
-					:tabindex="isAppendInnerClickable ? 0 : undefined"
+					v-bind="appendInnerCommandAttrs"
 					@click="handleClickAppendInner"
 					@keydown="handleKeydownAppendInner"
 			>
@@ -174,7 +172,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamExpandX from "../Transition/OrigamExpandX.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
@@ -196,6 +194,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { DENSITY } from "../../enums/Commons/density.enum";
 import { EASING } from "../../enums/Transition/transition.enum";
@@ -233,6 +232,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -286,13 +287,13 @@ const slots = useSlots();
 const attrs = useAttrs();
 const { t } = useLocale();
 const {
+  prependInnerCommandAttrs,
+  appendInnerCommandAttrs,
   hasAppendInner,
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner,
   onKeydownAppendInner: handleKeydownAppendInner,
   onKeydownPrependInner: handleKeydownPrependInner,
-  isAppendInnerClickable,
-  isPrependInnerClickable,
   clickClear: handleClickClear,
   hasPrependInner,
   hasClear
@@ -401,6 +402,21 @@ const { isOn: active, config: activeState, toggle: handleActive } = useStateFlag
 const isActive = computed(() => {
   return props.dirty || active.value || hasPrefix.value || hasSuffix.value;
 });
+const labelFrames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleLabelFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = requestAnimationFrame(() => {
+    labelFrames.delete(id2);
+    cb();
+  });
+  labelFrames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of labelFrames) cancelAnimationFrame(id2);
+  labelFrames.clear();
+});
 onMounted(() => {
   watch(isFocused, (newVal, oldVal) => {
     if (newVal !== oldVal) {
@@ -411,7 +427,7 @@ onMounted(() => {
     if (hasLabel.value && newVal !== oldVal) {
       const el = origamLabelRef.value.$el;
       const targetEl = origamFloatingLabelRef.value.$el;
-      requestAnimationFrame(() => {
+      scheduleLabelFrame(() => {
         const rect = nullifyTransforms(el);
         const targetRect = targetEl.getBoundingClientRect();
         const x = targetRect.x - rect.x;
@@ -569,8 +585,23 @@ defineExpose({
 		// Floor the inline padding at the effective radius (capped at the control
 		// height for pills). Prepended fields opt out below — their prepend icon
 		// already fills the corner.
+		//
+		// ⛔ LE PLANCHER EST UN CANAL, PAS UNE EXPRESSION FIGEE (#800).
+		// Un champ dont le contenu est CENTRE et sans etiquette (OtpInputField)
+		// n'a aucun risque de collision avec le coin : le plancher n'y a pas
+		// lieu d'etre, et l'appliquer decentre le chiffre. Ce cas s'exprimait
+		// jusqu'ici par un `--origam-field---padding-start: 0` SANS UNITE, qui
+		// melange `<number>` et `<length>` dans le `max()` et fait JETER la
+		// declaration entiere au computed-value time. Le rendu voulu etait donc
+		// obtenu par une erreur CSS — mesure Chromium : mettre l'unite donne
+		// `padding-inline-start: 4px` avec `padding-inline-end: 0px`, soit un
+		// chiffre decentre de 2px. Un consommateur qui veut vraiment zero met
+		// desormais `--origam-field---corner-clearance: 0px` : c'est explicite,
+		// ca survit a un refactor du `max()`, et ca ne repose sur rien d'invalide.
+		--origam-field---corner-clearance:
+			min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px));
 		padding-inline:
-			max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)))
+			max(var(--origam-field---padding-start), var(--origam-field---corner-clearance))
 			var(--origam-field---padding-end);
 		backdrop-filter: var(--origam-field---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
@@ -614,7 +645,7 @@ defineExpose({
 			padding-bottom: var(--origam-field__input---padding-bottom);
 			position: relative;
 			width: 100%;
-			row-gap: calc(8px - var(--origam-input---density, 0));
+			row-gap: calc(8px - var(--origam-input---density, 0px));
 			border: none;
 			background: transparent;
 
@@ -746,9 +777,9 @@ defineExpose({
 		&__label {
 			contain: layout paint;
 			display: block;
-			margin-inline-start: var(--origam-field__input---padding-start, 0);
-			margin-inline-end: var(--origam-field__input---padding-end, 0);
-			max-width: calc(100% - var(--origam-field__input---padding-start, 0) - var(--origam-field__input---padding-end, 0));
+			margin-inline-start: var(--origam-field__input---padding-start, 0px);
+			margin-inline-end: var(--origam-field__input---padding-end, 0px);
+			max-width: calc(100% - var(--origam-field__input---padding-start, 0px) - var(--origam-field__input---padding-end, 0px));
 			pointer-events: none;
 			position: absolute;
 			top: calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px) - 8px);
@@ -778,7 +809,8 @@ defineExpose({
 
 			#{$this}__outline {
 				&--start {
-					flex: 0 0 max(var(--origam-field---padding-start), min(var(--origam-field---border-radius, 8px), var(--origam-input__control---height, 36px)));
+					// Meme plancher que le padding, meme canal — cf. #800.
+					flex: 0 0 max(var(--origam-field---padding-start), var(--origam-field---corner-clearance));
 				}
 
 				&--end {
@@ -1083,7 +1115,7 @@ defineExpose({
 						// label"). Keep the 4px on the inline-end for notch
 						// breathing room.
 						margin-block: 0;
-						margin-inline: var(--origam-field__input---padding-start, 0) 4px;
+						margin-inline: var(--origam-field__input---padding-start, 0px) 4px;
 					}
 				}
 

package/dist/src/components/FileField/OrigamFileField.vue

@@ -454,6 +454,8 @@ const props = defineProps({
   prependInnerIcon: { type: null, required: false, default: MDI_ICONS.PAPERCLIP },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false, default: true },
+  prependInnerAriaLabel: { type: String, required: false },
+  appendInnerAriaLabel: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -520,7 +522,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {

package/dist/src/components/Icon/OrigamSvgIcon.vue

@@ -6,7 +6,7 @@
 			:style="iconStyles"
 	>
 		<svg
-				aria-hidden="true"
+				:aria-hidden="ariaHidden"
 				class="origam-icon__svg"
 				focusable="false"
 				viewBox="0 0 24 24"
@@ -40,6 +40,7 @@ import { computed, StyleValue, toRef } from "vue";
 import { useBorder } from "../../composables/Commons/border.composable";
 import { useBothColor } from "../../composables/Commons/bothColor.composable";
 import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useIconAccessibility } from "../../composables/Icon/iconAccessibility.composable";
 import { useMargin } from "../../composables/Commons/margin.composable";
 import { usePadding } from "../../composables/Commons/padding.composable";
 import { useProps } from "../../composables/Commons/props.composable";
@@ -101,6 +102,7 @@ defineSlots();
 const isArray = (data) => {
   return Array.isArray(data);
 };
+const { ariaHidden } = useIconAccessibility();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Img/OrigamImg.vue

@@ -260,8 +260,11 @@ const getSrc = () => {
   if (img) currentSrc.value = img.currentSrc || img.src;
 };
 let timer = -1;
+const bootFrames = /* @__PURE__ */ new Set();
 onBeforeUnmount(() => {
   clearTimeout(timer);
+  for (const id2 of bootFrames) cancelAnimationFrame(id2);
+  bootFrames.clear();
 });
 const pollForSize = (img, timeout = 100) => {
   const poll = () => {
@@ -285,11 +288,15 @@ let stop = null;
 const markBooted = (val) => {
   if (val) {
     if (IN_BROWSER) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
+      const outer = requestAnimationFrame(() => {
+        bootFrames.delete(outer);
+        const inner = requestAnimationFrame(() => {
+          bootFrames.delete(inner);
           isBooted.value = true;
         });
+        bootFrames.add(inner);
       });
+      bootFrames.add(outer);
     }
     stop?.();
   }

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
 import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamInfiniteScrollIntersect from "./OrigamInfiniteScrollIntersect.vue";
 import OrigamProgress from "../Progress/OrigamProgress.vue";
@@ -125,6 +125,7 @@ import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
 import { INFINITE_SCROLL_MODE, INFINITE_SCROLL_SIDE, INFINITE_SCROLL_STATUS } from "../../enums/InfiniteScroll/infinite-scroll.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
@@ -213,25 +214,40 @@ const handleIntersect = ({ side, isIntersecting: _isIntersecting }) => {
     intersecting(side);
   }
 };
+const frames = /* @__PURE__ */ new Set();
+let disposed = false;
+const scheduleFrame = (cb) => {
+  if (disposed || !IN_BROWSER) return;
+  const id2 = window.requestAnimationFrame(() => {
+    frames.delete(id2);
+    cb();
+  });
+  frames.add(id2);
+};
+onBeforeUnmount(() => {
+  disposed = true;
+  for (const id2 of frames) window.cancelAnimationFrame(id2);
+  frames.clear();
+});
+const scheduleFrames = (count, cb) => {
+  scheduleFrame(count <= 1 ? cb : () => scheduleFrames(count - 1, cb));
+};
+const rearmIntersect = () => {
+  intersecting(currentSide.value);
+};
+const afterDoneTick = () => {
+  if (disposed) return;
+  if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
+  if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
+    setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+  }
+  if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
+    nextTick(() => scheduleFrames(3, rearmIntersect));
+  }
+};
 const done = (_status) => {
   status.value = _status;
-  nextTick(() => {
-    if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
-    if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
-      setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
-    }
-    if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
-      nextTick(() => {
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              intersecting(currentSide.value);
-            });
-          });
-        });
-      });
-    }
-  });
+  nextTick(afterDoneTick);
 };
 const intersecting = (side) => {
   if (props.mode !== "manual" && !isIntersecting.value) return;