@ni/nimble-components 35.5.2 → 35.5.4

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>
@@ -32800,7 +32801,8 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(this.from, this.from + this.slice.size, doc.slice(this.from, this.to));
       }
       map(mapping) {
-          let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
+          let to = mapping.mapResult(this.to, -1);
+          let from = this.from == this.to && ReplaceStep.MAP_BIAS < 0 ? to : mapping.mapResult(this.from, 1);
           if (from.deletedAcross && to.deletedAcross)
               return null;
           return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
@@ -32839,6 +32841,15 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
+  /**
+  By default, for backwards compatibility, an inserting step
+  mapped over an insertion at that same position fill move after
+  the inserted content. In a collaborative editing situation, that
+  can make redone insertions appear in unexpected places. You can
+  set this to -1 to make such mapping keep the step before the
+  insertion instead.
+  */
+  ReplaceStep.MAP_BIAS = 1;
   Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
@@ -33825,6 +33836,26 @@ so this becomes the fallback color for the slot */ ''}
   }
   function deleteRange$1(tr, from, to) {
       let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
+      // When the deleted range spans from the start of one textblock to
+      // the start of another one, move out of the start of both blocks.
+      if ($from.parent.isTextblock && $to.parent.isTextblock && $from.start() != $to.start() &&
+          $from.parentOffset == 0 && $to.parentOffset == 0) {
+          let shared = $from.sharedDepth(to), isolated = false;
+          for (let d = $from.depth; d > shared; d--)
+              if ($from.node(d).type.spec.isolating)
+                  isolated = true;
+          for (let d = $to.depth; d > shared; d--)
+              if ($to.node(d).type.spec.isolating)
+                  isolated = true;
+          if (!isolated) {
+              for (let d = $from.depth; d > 0 && from == $from.start(d); d--)
+                  from = $from.before(d);
+              for (let d = $to.depth; d > 0 && to == $to.start(d); d--)
+                  to = $to.before(d);
+              $from = tr.doc.resolve(from);
+              $to = tr.doc.resolve(to);
+          }
+      }
       let covered = coveredDepths($from, $to);
       for (let i = 0; i < covered.length; i++) {
           let depth = covered[i], last = i == covered.length - 1;
@@ -40791,8 +40822,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 +41666,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;
           }
@@ -42568,7 +42604,6 @@ so this becomes the fallback color for the slot */ ''}
     return !!findMarkInSet(marks, type, attributes);
   }
   function getMarkRange($pos, type, attributes) {
-    var _a;
     if (!$pos || !type) {
       return;
     }
@@ -42579,7 +42614,12 @@ so this becomes the fallback color for the slot */ ''}
     if (!start.node || !start.node.marks.some((mark2) => mark2.type === type)) {
       return;
     }
-    attributes = attributes || ((_a = start.node.marks[0]) == null ? void 0 : _a.attrs);
+    if (!attributes) {
+      const firstMark = start.node.marks.find((mark2) => mark2.type === type);
+      if (firstMark) {
+        attributes = firstMark.attrs;
+      }
+    }
     const mark = findMarkInSet([...start.node.marks], type, attributes);
     if (!mark) {
       return;
@@ -42614,7 +42654,7 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // src/commands/extendMarkRange.ts
-  var extendMarkRange = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+  var extendMarkRange = (typeOrName, attributes) => ({ tr, state, dispatch }) => {
     const type = getMarkType(typeOrName, state.schema);
     const { doc, selection } = tr;
     const { $from, from, to } = selection;
@@ -43507,6 +43547,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 +43623,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 +44210,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) {
@@ -45818,7 +45909,7 @@ so this becomes the fallback color for the slot */ ''}
             const newEnd = mapping.slice(index).map(step.to);
             const oldStart = mapping.invert().map(newStart, -1);
             const oldEnd = mapping.invert().map(newEnd);
-            const foundBeforeMark = (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark));
+            const foundBeforeMark = newStart > 0 ? (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark)) : false;
             const foundAfterMark = (_b3 = nextTransaction.doc.nodeAt(newEnd)) == null ? void 0 : _b3.marks.some((mark) => mark.eq(step.mark));
             this.editor.emit("delete", {
               type: "mark",
@@ -47504,17 +47595,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 +58466,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 +58589,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 +60901,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 +60923,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);
           }
         }
       }
@@ -61781,6 +61890,19 @@ ${nextLine.slice(indentLevel + 2)}`;
   }
 
   // src/suggestion.ts
+  function hasInsertedWhitespace(transaction) {
+    if (!transaction.docChanged) {
+      return false;
+    }
+    return transaction.steps.some((step) => {
+      const slice = step.slice;
+      if (!(slice == null ? void 0 : slice.content)) {
+        return false;
+      }
+      const inserted = slice.content.textBetween(0, slice.content.size, "\n");
+      return /\s/.test(inserted);
+    });
+  }
   var SuggestionPluginKey = new PluginKey("suggestion");
   function Suggestion({
     pluginKey = SuggestionPluginKey,
@@ -61799,10 +61921,12 @@ ${nextLine.slice(indentLevel + 2)}`;
     render = () => ({}),
     allow = () => true,
     findSuggestionMatch: findSuggestionMatch2 = findSuggestionMatch,
-    shouldShow
+    shouldShow,
+    shouldResetDismissed
   }) {
     let props;
     const renderer = render == null ? void 0 : render();
+    const effectiveAllowSpaces = allowSpaces && !allowToIncludeChar;
     const getAnchorClientRect = () => {
       const pos = editor.state.selection.$anchor.pos;
       const coords = editor.view.coordsAtPos(pos);
@@ -61824,6 +61948,27 @@ ${nextLine.slice(indentLevel + 2)}`;
         return (currentDecorationNode == null ? void 0 : currentDecorationNode.getBoundingClientRect()) || null;
       };
     };
+    const shouldKeepDismissed = ({
+      match,
+      dismissedRange,
+      state,
+      transaction
+    }) => {
+      if (shouldResetDismissed == null ? void 0 : shouldResetDismissed({
+        editor,
+        state,
+        range: dismissedRange,
+        match,
+        transaction,
+        allowSpaces: effectiveAllowSpaces
+      })) {
+        return false;
+      }
+      if (effectiveAllowSpaces) {
+        return match.range.from === dismissedRange.from;
+      }
+      return match.range.from === dismissedRange.from && !hasInsertedWhitespace(transaction);
+    };
     function dispatchExit(view, pluginKeyRef) {
       var _a;
       try {
@@ -61926,7 +62071,8 @@ ${nextLine.slice(indentLevel + 2)}`;
             },
             query: null,
             text: null,
-            composing: false
+            composing: false,
+            dismissedRange: null
           };
           return state;
         },
@@ -61944,9 +62090,16 @@ ${nextLine.slice(indentLevel + 2)}`;
             next.range = { from: 0, to: 0 };
             next.query = null;
             next.text = null;
+            next.dismissedRange = prev.active ? { ...prev.range } : prev.dismissedRange;
             return next;
           }
           next.composing = composing;
+          if (transaction.docChanged && next.dismissedRange !== null) {
+            next.dismissedRange = {
+              from: transaction.mapping.map(next.dismissedRange.from),
+              to: transaction.mapping.map(next.dismissedRange.to)
+            };
+          }
           if (isEditable && (empty || editor.view.composing)) {
             if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
               next.active = false;
@@ -61972,12 +62125,27 @@ ${nextLine.slice(indentLevel + 2)}`;
               text: match.text,
               transaction
             }))) {
-              next.active = true;
-              next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
-              next.range = match.range;
-              next.query = match.query;
-              next.text = match.text;
+              if (next.dismissedRange !== null && !shouldKeepDismissed({
+                match,
+                dismissedRange: next.dismissedRange,
+                state,
+                transaction
+              })) {
+                next.dismissedRange = null;
+              }
+              if (next.dismissedRange === null) {
+                next.active = true;
+                next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+                next.range = match.range;
+                next.query = match.query;
+                next.text = match.text;
+              } else {
+                next.active = false;
+              }
             } else {
+              if (!match) {
+                next.dismissedRange = null;
+              }
               next.active = false;
             }
           } else {
@@ -61995,41 +62163,18 @@ ${nextLine.slice(indentLevel + 2)}`;
       props: {
         // Call the keydown hook if suggestion is active.
         handleKeyDown(view, event) {
-          var _a, _b, _c, _d;
+          var _a, _b;
           const { active, range } = plugin.getState(view.state);
           if (!active) {
             return false;
           }
           if (event.key === "Escape" || event.key === "Esc") {
             const state = plugin.getState(view.state);
-            const cachedNode = (_a = props == null ? void 0 : props.decorationNode) != null ? _a : null;
-            const decorationNode = cachedNode != null ? cachedNode : (state == null ? void 0 : state.decorationId) ? view.dom.querySelector(`[data-decoration-id="${state.decorationId}"]`) : null;
-            const handledByKeyDown = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range: state.range })) || false;
-            if (handledByKeyDown) {
-              return true;
-            }
-            const exitProps = {
-              editor,
-              range: state.range,
-              query: state.query,
-              text: state.text,
-              items: [],
-              command: (commandProps) => {
-                return command({ editor, range: state.range, props: commandProps });
-              },
-              decorationNode,
-              // If we have a cached decoration node, use it for the clientRect
-              // to avoid another DOM lookup. If not, leave clientRect null and
-              // let consumer decide if they want to query.
-              clientRect: decorationNode ? () => {
-                return decorationNode.getBoundingClientRect() || null;
-              } : null
-            };
-            (_c = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _c.call(renderer, exitProps);
+            (_a = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _a.call(renderer, { view, event, range: state.range });
             dispatchExit(view, pluginKey);
             return true;
           }
-          const handled = ((_d = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _d.call(renderer, { view, event, range })) || false;
+          const handled = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range })) || false;
           return handled;
         },
         // Setup decorator on the currently active suggestion.
@@ -62322,18 +62467,22 @@ ${nextLine.slice(indentLevel + 2)}`;
         return helpers.parseChildren([tokens[0]]);
       }
       const content = helpers.parseInline(tokens);
-      if (content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      const hasExplicitEmptyParagraphMarker = tokens.length === 1 && tokens[0].type === "text" && (tokens[0].raw === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].text === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].raw === NBSP_CHAR || tokens[0].text === NBSP_CHAR);
+      if (hasExplicitEmptyParagraphMarker && content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
         return helpers.createNode("paragraph", void 0, []);
       }
       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 +62700,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 +63729,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) {
@@ -63633,6 +63785,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       ];
     }
   });
+  var skipTrailingNodeMeta = "skipTrailingNode";
   function nodeEqualsType({ types, node }) {
     return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
   }
@@ -63652,11 +63805,14 @@ ${nextLine.slice(indentLevel + 2)}`;
       return [
         new Plugin({
           key: plugin,
-          appendTransaction: (_, __, state) => {
+          appendTransaction: (transactions, __, state) => {
             const { doc, tr, schema } = state;
             const shouldInsertNodeAtEnd = plugin.getState(state);
             const endPosition = doc.content.size;
             const type = schema.nodes[defaultNode];
+            if (transactions.some((transaction) => transaction.getMeta(skipTrailingNodeMeta))) {
+              return;
+            }
             if (!shouldInsertNodeAtEnd) {
               return;
             }
@@ -66371,6 +66527,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 +66626,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 +72516,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 +72529,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 +72545,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 +72641,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 +72684,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 +72696,7 @@ focus outline in that case.
           });
         }
       };
+      this.rafId = null;
       this.getSize = () => {
         if (!this.options.enabled) {
           this.scrollRect = null;
@@ -72755,13 +72915,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 +72955,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 +72980,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 +73036,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 +73058,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 +73146,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) {