@ni/nimble-components 35.5.2 → 35.5.3

package/dist/all-components-bundle.js

@@ -17712,13 +17712,14 @@
             background-color: transparent;
             cursor: pointer;
             outline: none;
-            --ni-private-step-icon-background-full-size: 100% 100%;
-            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
-            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
-            --ni-private-step-icon-background-none-size: 0% 0%;
+            --ni-private-step-icon-background-full-size: scale(1,1);
+            ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}
+            --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);
+            --ni-private-step-icon-background-none-size: scale(0,0);
 
             --ni-private-step-icon-color: ${buttonLabelFontColor};
             --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-border-width: 1px;
             --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -17821,6 +17822,20 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        .icon-background {
+            grid-area: icon;
+            display: inline-block;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone};
+            background-color:  var(--ni-private-step-icon-background-color);
+            transform: var(--ni-private-step-icon-background-size);
+            border: none;
+            border-radius: 100%;
+            transition:
+                transform ${smallDelay} ease-in-out;
+        }
+
         .icon {
             grid-area: icon;
             display: inline-flex;
@@ -17833,31 +17848,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             font: ${buttonLabelFont};
             color: var(--ni-private-step-icon-color);
             ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
-            border-style: solid;
+            border: none;
             border-radius: 100%;
-            border-color: var(--ni-private-step-icon-border-color);
-            border-width: 1px;
-            background-image: radial-gradient(
-                closest-side,
-                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
-        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
-    */}
-                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
-                transparent 100%
-            );
-            background-origin: border-box;
-            background-size: var(--ni-private-step-icon-background-size);
-            background-repeat: no-repeat;
-            background-position: center center;
+            box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);
             position: relative;
             transition:
-                border-color ${smallDelay} ease-in-out,
-                border-width ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-out;
+                box-shadow ${smallDelay} ease-in-out;
         }
 
         :host([selected]) .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .icon::before {
@@ -17870,10 +17870,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-style: solid;
             outline-width: 0px;
             outline-offset: 0px;
-            border: 1px solid transparent;
+            border: none;
             border-radius: 100%;
             color: transparent;
-            background-clip: border-box;
             transition:
                 outline-color ${smallDelay} ease-in-out,
                 outline-width ${smallDelay} ease-in-out,
@@ -18025,7 +18024,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:hover .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:hover .line {
@@ -18076,12 +18075,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control${focusVisible} .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
-            outline-offset: -2px;
+            ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
+            outline-offset: -4px;
         }
 
         .control${focusVisible} .line {
@@ -18128,7 +18128,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:active .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:active .icon::before {
@@ -19462,6 +19462,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -40791,8 +40792,13 @@ so this becomes the fallback color for the slot */ ''}
               for (let node of added)
                   if (node.nodeName == "BR" && node.parentNode) {
                       let after = node.nextSibling;
-                      if (after && after.nodeType == 1 && after.contentEditable == "false")
-                          node.parentNode.removeChild(node);
+                      while (after && after.nodeType == 1) {
+                          if (after.contentEditable == "false") {
+                              node.parentNode.removeChild(node);
+                              break;
+                          }
+                          after = after.firstChild;
+                      }
                   }
           }
           else if (gecko && added.length) {
@@ -41630,12 +41636,12 @@ so this becomes the fallback color for the slot */ ''}
       }
       updateDraggedNode(dragging, prev) {
           let sel = dragging.node, found = -1;
-          if (this.state.doc.nodeAt(sel.from) == sel.node) {
+          if (sel.from < this.state.doc.content.size && this.state.doc.nodeAt(sel.from) == sel.node) {
               found = sel.from;
           }
           else {
               let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
-              let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
+              let moved = movedPos > 0 && movedPos < this.state.doc.content.size && this.state.doc.nodeAt(movedPos);
               if (moved == sel.node)
                   found = movedPos;
           }
@@ -43507,6 +43513,67 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // src/utilities/mergeAttributes.ts
+  function splitStyleDeclarations(styles) {
+    const result = [];
+    let current = "";
+    let inSingleQuote = false;
+    let inDoubleQuote = false;
+    let parenDepth = 0;
+    const length = styles.length;
+    for (let i = 0; i < length; i += 1) {
+      const char = styles[i];
+      if (char === "'" && !inDoubleQuote) {
+        inSingleQuote = !inSingleQuote;
+        current += char;
+        continue;
+      }
+      if (char === '"' && !inSingleQuote) {
+        inDoubleQuote = !inDoubleQuote;
+        current += char;
+        continue;
+      }
+      if (!inSingleQuote && !inDoubleQuote) {
+        if (char === "(") {
+          parenDepth += 1;
+          current += char;
+          continue;
+        }
+        if (char === ")" && parenDepth > 0) {
+          parenDepth -= 1;
+          current += char;
+          continue;
+        }
+        if (char === ";" && parenDepth === 0) {
+          result.push(current);
+          current = "";
+          continue;
+        }
+      }
+      current += char;
+    }
+    if (current) {
+      result.push(current);
+    }
+    return result;
+  }
+  function parseStyleEntries(styles) {
+    const pairs = [];
+    const declarations = splitStyleDeclarations(styles || "");
+    const numDeclarations = declarations.length;
+    for (let i = 0; i < numDeclarations; i += 1) {
+      const declaration = declarations[i];
+      const firstColonIndex = declaration.indexOf(":");
+      if (firstColonIndex === -1) {
+        continue;
+      }
+      const property = declaration.slice(0, firstColonIndex).trim();
+      const value = declaration.slice(firstColonIndex + 1).trim();
+      if (property && value) {
+        pairs.push([property, value]);
+      }
+    }
+    return pairs;
+  }
   function mergeAttributes(...objects) {
     return objects.filter((item) => !!item).reduce((items, item) => {
       const mergedAttributes = { ...items };
@@ -43522,17 +43589,7 @@ so this becomes the fallback color for the slot */ ''}
           const insertClasses = valueClasses.filter((valueClass) => !existingClasses.includes(valueClass));
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(" ");
         } else if (key === "style") {
-          const newStyles = value ? value.split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-          const existingStyles = mergedAttributes[key] ? mergedAttributes[key].split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-          const styleMap = /* @__PURE__ */ new Map();
-          existingStyles.forEach((style2) => {
-            const [property, val] = style2.split(":").map((part) => part.trim());
-            styleMap.set(property, val);
-          });
-          newStyles.forEach((style2) => {
-            const [property, val] = style2.split(":").map((part) => part.trim());
-            styleMap.set(property, val);
-          });
+          const styleMap = new Map([...parseStyleEntries(mergedAttributes[key]), ...parseStyleEntries(value)]);
           mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join("; ");
         } else {
           mergedAttributes[key] = value;
@@ -44119,7 +44176,7 @@ so this becomes the fallback color for the slot */ ''}
         return true;
       }
       if (node.isText) {
-        return /^\s*$/m.test((_a = node.text) != null ? _a : "");
+        return !/\S/.test((_a = node.text) != null ? _a : "");
       }
     }
     if (node.isText) {
@@ -47504,17 +47561,21 @@ ${renderedContent}
     const prefix = typeof prefixOrGenerator === "function" ? prefixOrGenerator(ctx) : prefixOrGenerator;
     const [content, ...children] = node.content;
     const mainContent = h2.renderChildren([content]);
-    const output = [`${prefix}${mainContent}`];
+    let output = `${prefix}${mainContent}`;
     if (children && children.length > 0) {
-      children.forEach((child) => {
-        const childContent = h2.renderChildren([child]);
-        if (childContent) {
-          const indentedChild = childContent.split("\n").map((line) => line ? h2.indent(line) : "").join("\n");
-          output.push(indentedChild);
+      children.forEach((child, index) => {
+        var _a, _b;
+        const childContent = (_b = (_a = h2.renderChild) == null ? void 0 : _a.call(h2, child, index + 1)) != null ? _b : h2.renderChildren([child]);
+        if (childContent !== void 0 && childContent !== null) {
+          const indentedChild = childContent.split("\n").map((line) => line ? h2.indent(line) : h2.indent("")).join("\n");
+          output += child.type === "paragraph" ? `
+
+${indentedChild}` : `
+${indentedChild}`;
         }
       });
     }
-    return output.join("\n");
+    return output;
   }
 
   // src/MarkView.ts
@@ -58371,6 +58432,12 @@ ${renderedContent}
     parseMarkdown: (token, helpers) => {
       return helpers.applyMark("bold", helpers.parseInline(token.tokens || []));
     },
+    markdownOptions: {
+      htmlReopen: {
+        open: "<strong>",
+        close: "</strong>"
+      }
+    },
     renderMarkdown: (node, h) => {
       return `**${h.renderChildren(node)}**`;
     },
@@ -58488,6 +58555,12 @@ ${renderedContent}
     parseMarkdown: (token, helpers) => {
       return helpers.applyMark("italic", helpers.parseInline(token.tokens || []));
     },
+    markdownOptions: {
+      htmlReopen: {
+        open: "<em>",
+        close: "</em>"
+      }
+    },
     renderMarkdown: (node, h) => {
       return `*${h.renderChildren(node)}*`;
     },
@@ -60794,14 +60867,16 @@ ${renderedContent}
     },
     markdownTokenName: "list_item",
     parseMarkdown: (token, helpers) => {
+      var _a;
       if (token.type !== "list_item") {
         return [];
       }
+      const parseBlockChildren = (_a = helpers.parseBlockChildren) != null ? _a : helpers.parseChildren;
       let content = [];
       if (token.tokens && token.tokens.length > 0) {
         const hasParagraphTokens = token.tokens.some((t) => t.type === "paragraph");
         if (hasParagraphTokens) {
-          content = helpers.parseChildren(token.tokens);
+          content = parseBlockChildren(token.tokens);
         } else {
           const firstToken = token.tokens[0];
           if (firstToken && firstToken.type === "text" && firstToken.tokens && firstToken.tokens.length > 0) {
@@ -60814,11 +60889,11 @@ ${renderedContent}
             ];
             if (token.tokens.length > 1) {
               const remainingTokens = token.tokens.slice(1);
-              const additionalContent = helpers.parseChildren(remainingTokens);
+              const additionalContent = parseBlockChildren(remainingTokens);
               content.push(...additionalContent);
             }
           } else {
-            content = helpers.parseChildren(token.tokens);
+            content = parseBlockChildren(token.tokens);
           }
         }
       }
@@ -62327,13 +62402,16 @@ ${nextLine.slice(indentLevel + 2)}`;
       }
       return helpers.createNode("paragraph", void 0, content);
     },
-    renderMarkdown: (node, h) => {
+    renderMarkdown: (node, h, ctx) => {
+      var _a, _b;
       if (!node) {
         return "";
       }
       const content = Array.isArray(node.content) ? node.content : [];
       if (content.length === 0) {
-        return EMPTY_PARAGRAPH_MARKDOWN;
+        const previousContent = Array.isArray((_a = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _a.content) ? ctx.previousNode.content : [];
+        const previousNodeIsEmptyParagraph = ((_b = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _b.type) === "paragraph" && previousContent.length === 0;
+        return previousNodeIsEmptyParagraph ? EMPTY_PARAGRAPH_MARKDOWN : "";
       }
       return h.renderChildren(content);
     },
@@ -62551,7 +62629,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       */
       static valid($pos) {
           let parent = $pos.parent;
-          if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos))
+          if (parent.inlineContent || !closedBefore($pos) || !closedAfter($pos))
               return false;
           let override = parent.type.spec.allowGapCursor;
           if (override != null)
@@ -63580,6 +63658,9 @@ ${nextLine.slice(indentLevel + 2)}`;
               doc.descendants((node, pos) => {
                 const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
                 const isEmpty = !node.isLeaf && isNodeEmpty(node);
+                if (!node.type.isTextblock) {
+                  return this.options.includeChildren;
+                }
                 if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                   const classes = [this.options.emptyNodeClass];
                   if (isEmptyDoc) {
@@ -66371,6 +66452,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -66469,28 +66551,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  /**
-   * Observable class to subscribe to changes in the page's device pixel ratio
-   * Based on: https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/#the-less-code-and-more-flexible-js-solution
-   */
-  class DevicePixelRatio {
-      constructor() {
-          const update = () => {
-              this.current = window.devicePixelRatio;
-              window
-                  .matchMedia(`(resolution: ${this.current}x)`)
-                  .addEventListener('change', update, { once: true });
-          };
-          update();
-      }
-  }
-  __decorate([
-      observable
-  ], DevicePixelRatio.prototype, "current", void 0);
-  const devicePixelRatio = new DevicePixelRatio();
-
   const template$n = html `<ol><slot
-        style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
         name="step"
         ${slotted('steps')}
     ></slot></ol>`;
@@ -72380,7 +72441,7 @@ focus outline in that case.
       this.scrollElement = null;
       this.targetWindow = null;
       this.isScrolling = false;
-      this.currentScrollToIndex = null;
+      this.scrollState = null;
       this.measurementsCache = [];
       this.itemSizeCache = /* @__PURE__ */ new Map();
       this.laneAssignments = /* @__PURE__ */ new Map();
@@ -72393,6 +72454,10 @@ focus outline in that case.
       this.scrollDirection = null;
       this.scrollAdjustments = 0;
       this.elementsCache = /* @__PURE__ */ new Map();
+      this.now = () => {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
+      };
       this.observer = /* @__PURE__ */ (() => {
         let _ro = null;
         const get = () => {
@@ -72405,7 +72470,18 @@ focus outline in that case.
           return _ro = new this.targetWindow.ResizeObserver((entries) => {
             entries.forEach((entry) => {
               const run = () => {
-                this._measureElement(entry.target, entry);
+                const node = entry.target;
+                const index = this.indexFromElement(node);
+                if (!node.isConnected) {
+                  this.observer.unobserve(node);
+                  return;
+                }
+                if (this.shouldMeasureDuringScroll(index)) {
+                  this.resizeItem(
+                    index,
+                    this.options.measureElement(node, entry, this)
+                  );
+                }
               };
               this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
             });
@@ -72490,6 +72566,11 @@ focus outline in that case.
         this.unsubs.filter(Boolean).forEach((d) => d());
         this.unsubs = [];
         this.observer.disconnect();
+        if (this.rafId != null && this.targetWindow) {
+          this.targetWindow.cancelAnimationFrame(this.rafId);
+          this.rafId = null;
+        }
+        this.scrollState = null;
         this.scrollElement = null;
         this.targetWindow = null;
       };
@@ -72528,6 +72609,9 @@ focus outline in that case.
               this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
               this.scrollOffset = offset;
               this.isScrolling = isScrolling;
+              if (this.scrollState) {
+                this.scheduleScrollReconcile();
+              }
               this.maybeNotify();
             })
           );
@@ -72537,6 +72621,7 @@ focus outline in that case.
           });
         }
       };
+      this.rafId = null;
       this.getSize = () => {
         if (!this.options.enabled) {
           this.scrollRect = null;
@@ -72755,13 +72840,38 @@ focus outline in that case.
         }
         return parseInt(indexStr, 10);
       };
-      this._measureElement = (node, entry) => {
-        const index = this.indexFromElement(node);
-        const item = this.measurementsCache[index];
-        if (!item) {
+      this.shouldMeasureDuringScroll = (index) => {
+        var _a;
+        if (!this.scrollState || this.scrollState.behavior !== "smooth") {
+          return true;
+        }
+        const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
+        if (scrollIndex !== void 0 && this.range) {
+          const bufferSize = Math.max(
+            this.options.overscan,
+            Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
+          );
+          const minIndex = Math.max(0, scrollIndex - bufferSize);
+          const maxIndex = Math.min(
+            this.options.count - 1,
+            scrollIndex + bufferSize
+          );
+          return index >= minIndex && index <= maxIndex;
+        }
+        return true;
+      };
+      this.measureElement = (node) => {
+        if (!node) {
+          this.elementsCache.forEach((cached, key2) => {
+            if (!cached.isConnected) {
+              this.observer.unobserve(cached);
+              this.elementsCache.delete(key2);
+            }
+          });
           return;
         }
-        const key = item.key;
+        const index = this.indexFromElement(node);
+        const key = this.options.getItemKey(index);
         const prevNode = this.elementsCache.get(key);
         if (prevNode !== node) {
           if (prevNode) {
@@ -72770,19 +72880,18 @@ focus outline in that case.
           this.observer.observe(node);
           this.elementsCache.set(key, node);
         }
-        if (node.isConnected) {
-          this.resizeItem(index, this.options.measureElement(node, entry, this));
+        if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) {
+          this.resizeItem(index, this.options.measureElement(node, void 0, this));
         }
       };
       this.resizeItem = (index, size) => {
+        var _a;
         const item = this.measurementsCache[index];
-        if (!item) {
-          return;
-        }
+        if (!item) return;
         const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
         const delta = size - itemSize;
         if (delta !== 0) {
-          if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
+          if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
             if (this.options.debug) {
               console.info("correction", delta);
             }
@@ -72796,18 +72905,6 @@ focus outline in that case.
           this.notify(false);
         }
       };
-      this.measureElement = (node) => {
-        if (!node) {
-          this.elementsCache.forEach((cached, key) => {
-            if (!cached.isConnected) {
-              this.observer.unobserve(cached);
-              this.elementsCache.delete(key);
-            }
-          });
-          return;
-        }
-        this._measureElement(node, void 0);
-      };
       this.getVirtualItems = memo(
         () => [this.getVirtualIndexes(), this.getMeasurements()],
         (indexes, measurements) => {
@@ -72864,12 +72961,10 @@ focus outline in that case.
       };
       this.getOffsetForIndex = (index, align = "auto") => {
         index = Math.max(0, Math.min(index, this.options.count - 1));
-        const item = this.measurementsCache[index];
-        if (!item) {
-          return void 0;
-        }
         const size = this.getSize();
         const scrollOffset = this.getScrollOffset();
+        const item = this.measurementsCache[index];
+        if (!item) return;
         if (align === "auto") {
           if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
             align = "end";
@@ -72888,85 +72983,55 @@ focus outline in that case.
           align
         ];
       };
-      this.isDynamicMode = () => this.elementsCache.size > 0;
-      this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
-        this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-          adjustments: void 0,
-          behavior
-        });
+      this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
+        const offset = this.getOffsetForAlignment(toOffset, align);
+        const now = this.now();
+        this.scrollState = {
+          index: null,
+          align,
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
+        };
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
-      this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
+      this.scrollToIndex = (index, {
+        align: initialAlign = "auto",
+        behavior = "auto"
+      } = {}) => {
         index = Math.max(0, Math.min(index, this.options.count - 1));
-        this.currentScrollToIndex = index;
-        let attempts = 0;
-        const maxAttempts = 10;
-        const tryScroll = (currentAlign) => {
-          if (!this.targetWindow) return;
-          const offsetInfo = this.getOffsetForIndex(index, currentAlign);
-          if (!offsetInfo) {
-            console.warn("Failed to get offset for index:", index);
-            return;
-          }
-          const [offset, align] = offsetInfo;
-          this._scrollToOffset(offset, { adjustments: void 0, behavior });
-          this.targetWindow.requestAnimationFrame(() => {
-            if (!this.targetWindow) return;
-            const verify = () => {
-              if (this.currentScrollToIndex !== index) return;
-              const currentOffset = this.getScrollOffset();
-              const afterInfo = this.getOffsetForIndex(index, align);
-              if (!afterInfo) {
-                console.warn("Failed to get offset for index:", index);
-                return;
-              }
-              if (!approxEqual(afterInfo[0], currentOffset)) {
-                scheduleRetry(align);
-              }
-            };
-            if (this.isDynamicMode()) {
-              this.targetWindow.requestAnimationFrame(verify);
-            } else {
-              verify();
-            }
-          });
-        };
-        const scheduleRetry = (align) => {
-          if (!this.targetWindow) return;
-          if (this.currentScrollToIndex !== index) return;
-          attempts++;
-          if (attempts < maxAttempts) {
-            if (this.options.debug) {
-              console.info("Schedule retry", attempts, maxAttempts);
-            }
-            this.targetWindow.requestAnimationFrame(() => tryScroll(align));
-          } else {
-            console.warn(
-              `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
-            );
-          }
+        const offsetInfo = this.getOffsetForIndex(index, initialAlign);
+        if (!offsetInfo) {
+          return;
+        }
+        const [offset, align] = offsetInfo;
+        const now = this.now();
+        this.scrollState = {
+          index,
+          align,
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
         };
-        tryScroll(initialAlign);
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
-      this.scrollBy = (delta, { behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
-        this._scrollToOffset(this.getScrollOffset() + delta, {
-          adjustments: void 0,
-          behavior
-        });
+      this.scrollBy = (delta, { behavior = "auto" } = {}) => {
+        const offset = this.getScrollOffset() + delta;
+        const now = this.now();
+        this.scrollState = {
+          index: null,
+          align: "start",
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
+        };
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
       this.getTotalSize = () => {
         var _a;
@@ -73006,6 +73071,49 @@ focus outline in that case.
       };
       this.setOptions(opts);
     }
+    scheduleScrollReconcile() {
+      if (!this.targetWindow) {
+        this.scrollState = null;
+        return;
+      }
+      if (this.rafId != null) return;
+      this.rafId = this.targetWindow.requestAnimationFrame(() => {
+        this.rafId = null;
+        this.reconcileScroll();
+      });
+    }
+    reconcileScroll() {
+      if (!this.scrollState) return;
+      const el = this.scrollElement;
+      if (!el) return;
+      const MAX_RECONCILE_MS = 5e3;
+      if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
+        this.scrollState = null;
+        return;
+      }
+      const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
+      const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
+      const STABLE_FRAMES = 1;
+      const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
+      if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
+        this.scrollState.stableFrames++;
+        if (this.scrollState.stableFrames >= STABLE_FRAMES) {
+          this.scrollState = null;
+          return;
+        }
+      } else {
+        this.scrollState.stableFrames = 0;
+        if (targetChanged) {
+          this.scrollState.lastTargetOffset = targetOffset;
+          this.scrollState.behavior = "auto";
+          this._scrollToOffset(targetOffset, {
+            adjustments: void 0,
+            behavior: "auto"
+          });
+        }
+      }
+      this.scheduleScrollReconcile();
+    }
   };
   const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
     while (low <= high) {