@ni/nimble-components 21.3.3 → 21.5.0

package/dist/all-components-bundle.js

@@ -12570,12 +12570,12 @@
    *
    * @internal
    */
-  class FormAssociatedSelect extends FormAssociated(_Select) {
+  let FormAssociatedSelect$1 = class FormAssociatedSelect extends FormAssociated(_Select) {
       constructor() {
           super(...arguments);
           this.proxy = document.createElement("select");
       }
-  }
+  };
 
   /**
    * A Select Custom HTML Element.
@@ -12596,7 +12596,7 @@
    *
    * @public
    */
-  let Select$1 = class Select extends FormAssociatedSelect {
+  let Select$2 = class Select extends FormAssociatedSelect$1 {
       constructor() {
           super(...arguments);
           /**
@@ -13031,22 +13031,22 @@
   };
   __decorate([
       attr({ attribute: "open", mode: "boolean" })
-  ], Select$1.prototype, "open", void 0);
+  ], Select$2.prototype, "open", void 0);
   __decorate([
       volatile
-  ], Select$1.prototype, "collapsible", null);
+  ], Select$2.prototype, "collapsible", null);
   __decorate([
       observable
-  ], Select$1.prototype, "control", void 0);
+  ], Select$2.prototype, "control", void 0);
   __decorate([
       attr({ attribute: "position" })
-  ], Select$1.prototype, "positionAttribute", void 0);
+  ], Select$2.prototype, "positionAttribute", void 0);
   __decorate([
       observable
-  ], Select$1.prototype, "position", void 0);
+  ], Select$2.prototype, "position", void 0);
   __decorate([
       observable
-  ], Select$1.prototype, "maxHeight", void 0);
+  ], Select$2.prototype, "maxHeight", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA select role.
    *
@@ -13058,7 +13058,7 @@
       observable
   ], DelegatesARIASelect.prototype, "ariaControls", void 0);
   applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
-  applyMixins(Select$1, StartEnd, DelegatesARIASelect);
+  applyMixins(Select$2, StartEnd, DelegatesARIASelect);
 
   class _Switch extends FoundationElement {
   }
@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 13 Feb 2024 21:07:13 GMT
+   * Generated on Thu, 15 Feb 2024 20:33:21 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -18576,10 +18576,15 @@
 
   const styles$P = css `
     :host {
-        contain: layout;
+        /* Avoid using the 'display' helper to customize hidden behavior */
         display: block;
+        contain: layout;
         z-index: ${ZIndexLevels.zIndex1000};
     }
+
+    :host([hidden]) {
+        visibility: hidden;
+    }
 `;
 
   // When the anchor element changes position on the page, it is the client's responsibility to update the position
@@ -19730,7 +19735,9 @@
       numericDecrementLabel: 'Decrement',
       errorIconLabel: 'Error',
       warningIconLabel: 'Warning',
-      informationIconLabel: 'Information'
+      informationIconLabel: 'Information',
+      filterSearchLabel: 'Search',
+      filterNoResultsLabel: 'No items found'
   };
 
   const popupDismissLabel = DesignToken.create({
@@ -19757,6 +19764,14 @@
       name: 'information-icon-label',
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.informationIconLabel);
+  const filterSearchLabel = DesignToken.create({
+      name: 'filter-search-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterSearchLabel);
+  const filterNoResultsLabel = DesignToken.create({
+      name: 'filter-no-results-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
 
   // prettier-ignore
   const template$x = html `
@@ -20643,10 +20658,6 @@
         border-bottom-color: ${failColor};
     }
 
-    .anchored-region[hidden] {
-        visibility: hidden;
-    }
-
     .listbox {
         box-sizing: border-box;
         display: inline-flex;
@@ -20793,6 +20804,19 @@
     }
 `;
 
+  /**
+   * Types of dropdown appearance.
+   * @public
+   */
+  /**
+   * Types of select filter mode.
+   * @public
+   */
+  const FilterMode = {
+      none: undefined,
+      standard: 'standard'
+  };
+
   const styles$D = css `
     ${styles$F}
     ${styles$E}
@@ -23135,6 +23159,7 @@
       }
   }
   registerIcon('icon-magnifying-glass', IconMagnifyingGlass);
+  const iconMagnifyingGlassTag = 'nimble-icon-magnifying-glass';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -23920,7 +23945,9 @@
       numericIncrement: numericIncrementLabel,
       errorIcon: errorIconLabel,
       warningIcon: warningIconLabel,
-      informationIcon: informationIconLabel
+      informationIcon: informationIconLabel,
+      filterSearch: filterSearchLabel,
+      filterNoResults: filterNoResultsLabel
   };
   /**
    * Core label provider for Nimble
@@ -23949,6 +23976,12 @@
   __decorate$1([
       attr({ attribute: 'information-icon' })
   ], LabelProviderCore.prototype, "informationIcon", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-search' })
+  ], LabelProviderCore.prototype, "filterSearch", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-no-results' })
+  ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core'
   });
@@ -23969,7 +24002,8 @@
       tableSelectAllLabel: 'Select all rows',
       tableGroupSelectAllLabel: 'Select all rows in group',
       tableRowSelectLabel: 'Select row',
-      tableRowOperationColumnLabel: 'Row operations'
+      tableRowOperationColumnLabel: 'Row operations',
+      tableRowLoadingLabel: 'Loading'
   };
 
   const tableGroupCollapseLabel = DesignToken.create({
@@ -24024,6 +24058,10 @@
       name: 'table-row-operation-column-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableRowOperationColumnLabel);
+  const tableRowLoadingLabel = DesignToken.create({
+      name: 'table-row-loading-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowLoadingLabel);
 
   const supportedLabels = {
       groupCollapse: tableGroupCollapseLabel,
@@ -24038,7 +24076,8 @@
       selectAll: tableSelectAllLabel,
       groupSelectAll: tableGroupSelectAllLabel,
       rowSelect: tableRowSelectLabel,
-      rowOperationColumn: tableRowOperationColumnLabel
+      rowOperationColumn: tableRowOperationColumnLabel,
+      rowLoading: tableRowLoadingLabel
   };
   /**
    * Label provider for the Nimble table (and its sub-components and columns)
@@ -24088,6 +24127,9 @@
   __decorate$1([
       attr({ attribute: 'row-operation-column' })
   ], LabelProviderTable.prototype, "rowOperationColumn", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-loading' })
+  ], LabelProviderTable.prototype, "rowLoading", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table'
   });
@@ -30335,10 +30377,10 @@
       // Back up preferredDepth to cover defining textblocks directly
       // above it, possibly skipping a non-defining textblock.
       for (let d = preferredDepth - 1; d >= 0; d--) {
-          let type = leftNodes[d].type, def = definesContent(type);
-          if (def && $from.node(preferredTargetIndex).type != type)
+          let leftNode = leftNodes[d], def = definesContent(leftNode.type);
+          if (def && !leftNode.sameMarkup($from.node(Math.abs(preferredTarget) - 1)))
               preferredDepth = d;
-          else if (def || !type.isTextblock)
+          else if (def || !leftNode.type.isTextblock)
               break;
       }
       for (let j = slice.openStart; j >= 0; j--) {
@@ -30480,6 +30522,51 @@
       }
   }
   Step.jsonID("attr", AttrStep);
+  /**
+  Update an attribute in the doc node.
+  */
+  class DocAttrStep extends Step {
+      /**
+      Construct an attribute step.
+      */
+      constructor(
+      /**
+      The attribute to set.
+      */
+      attr, 
+      // The attribute's new value.
+      value) {
+          super();
+          this.attr = attr;
+          this.value = value;
+      }
+      apply(doc) {
+          let attrs = Object.create(null);
+          for (let name in doc.attrs)
+              attrs[name] = doc.attrs[name];
+          attrs[this.attr] = this.value;
+          let updated = doc.type.create(attrs, doc.content, doc.marks);
+          return StepResult.ok(updated);
+      }
+      getMap() {
+          return StepMap.empty;
+      }
+      invert(doc) {
+          return new DocAttrStep(this.attr, doc.attrs[this.attr]);
+      }
+      map(mapping) {
+          return this;
+      }
+      toJSON() {
+          return { stepType: "docAttr", attr: this.attr, value: this.value };
+      }
+      static fromJSON(schema, json) {
+          if (typeof json.attr != "string")
+              throw new RangeError("Invalid input for DocAttrStep.fromJSON");
+          return new DocAttrStep(json.attr, json.value);
+      }
+  }
+  Step.jsonID("docAttr", DocAttrStep);
 
   /**
   @internal
@@ -30684,12 +30771,21 @@
       }
       /**
       Set a single attribute on a given node to a new value.
+      The `pos` addresses the document content. Use `setDocAttribute`
+      to set attributes on the document itself.
       */
       setNodeAttribute(pos, attr, value) {
           this.step(new AttrStep(pos, attr, value));
           return this;
       }
       /**
+      Set a single attribute on the document to a new value.
+      */
+      setDocAttribute(attr, value) {
+          this.step(new DocAttrStep(attr, value));
+          return this;
+      }
+      /**
       Add a mark to the node at position `pos`.
       */
       addNodeMark(pos, mark) {
@@ -32175,6 +32271,11 @@
                       offset++;
               }
           }
+          let prev;
+          // When clicking above the right side of an uneditable node, Chrome will report a cursor position after that node.
+          if (webkit && offset && node.nodeType == 1 && (prev = node.childNodes[offset - 1]).nodeType == 1 &&
+              prev.contentEditable == "false" && prev.getBoundingClientRect().top >= coords.top)
+              offset--;
           // Suspiciously specific kludge to work around caret*FromPoint
           // never returning a position at the end of the document
           if (node == view.dom && offset == node.childNodes.length - 1 && node.lastChild.nodeType == 1 &&
@@ -33559,9 +33660,11 @@
                   }
                   else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
                       this.top.children[this.index] = updated;
-                      updated.dirty = CONTENT_DIRTY;
-                      updated.updateChildren(view, pos + 1);
-                      updated.dirty = NOT_DIRTY;
+                      if (updated.contentDOM) {
+                          updated.dirty = CONTENT_DIRTY;
+                          updated.updateChildren(view, pos + 1);
+                          updated.dirty = NOT_DIRTY;
+                      }
                       this.changed = true;
                       this.index++;
                       return true;
@@ -33578,13 +33681,13 @@
               !next.node.content.eq(node.content))
               return null;
           let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
-          if (!wrapper.contentDOM)
-              return null;
-          wrapper.children = next.children;
-          next.children = [];
+          if (wrapper.contentDOM) {
+              wrapper.children = next.children;
+              next.children = [];
+              for (let ch of wrapper.children)
+                  ch.parent = wrapper;
+          }
           next.destroy();
-          for (let ch of wrapper.children)
-              ch.parent = wrapper;
           return wrapper;
       }
       // Insert the node as a newly created node desc.
@@ -33712,10 +33815,17 @@
       }
       let decoIndex = 0, active = [], restNode = null;
       for (let parentIndex = 0;;) {
-          if (decoIndex < locals.length && locals[decoIndex].to == offset) {
-              let widget = locals[decoIndex++], widgets;
-              while (decoIndex < locals.length && locals[decoIndex].to == offset)
-                  (widgets || (widgets = [widget])).push(locals[decoIndex++]);
+          let widget, widgets;
+          while (decoIndex < locals.length && locals[decoIndex].to == offset) {
+              let next = locals[decoIndex++];
+              if (next.widget) {
+                  if (!widget)
+                      widget = next;
+                  else
+                      (widgets || (widgets = [widget])).push(next);
+              }
+          }
+          if (widget) {
               if (widgets) {
                   widgets.sort(compareSide);
                   for (let i = 0; i < widgets.length; i++)
@@ -33758,6 +33868,10 @@
                   index = -1;
               }
           }
+          else {
+              while (decoIndex < locals.length && locals[decoIndex].to < end)
+                  decoIndex++;
+          }
           let outerDeco = child.isInline && !child.isLeaf ? active.filter(d => !d.inline) : active.slice();
           onNode(child, outerDeco, deco.forChild(offset, child), index);
           offset = end;
@@ -33808,6 +33922,8 @@
               str += next.text;
           }
           if (pos >= from) {
+              if (pos >= to && str.slice(to - text.length - childStart, to - childStart) == text)
+                  return to - text.length;
               let found = childStart < to ? str.lastIndexOf(text, to - childStart - 1) : -1;
               if (found >= 0 && found + text.length + childStart >= from)
                   return childStart + found;
@@ -34061,7 +34177,14 @@
   function selectHorizontally(view, dir, mods) {
       let sel = view.state.selection;
       if (sel instanceof TextSelection) {
-          if (!sel.empty || mods.indexOf("s") > -1) {
+          if (mods.indexOf("s") > -1) {
+              let { $head } = sel, node = $head.textOffset ? null : dir < 0 ? $head.nodeBefore : $head.nodeAfter;
+              if (!node || node.isText || !node.isLeaf)
+                  return false;
+              let $newHead = view.state.doc.resolve($head.pos + node.nodeSize * (dir < 0 ? -1 : 1));
+              return apply(view, new TextSelection(sel.$anchor, $newHead));
+          }
+          else if (!sel.empty) {
               return false;
           }
           else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) {
@@ -34104,11 +34227,9 @@
   function nodeLen(node) {
       return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
   }
-  function isIgnorable(dom) {
-      if (dom.contentEditable == "false")
-          return true;
+  function isIgnorable(dom, dir) {
       let desc = dom.pmViewDesc;
-      return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR");
+      return desc && desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR");
   }
   function skipIgnoredNodes(view, dir) {
       return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
@@ -34124,7 +34245,7 @@
       // Gecko will do odd things when the selection is directly in front
       // of a non-editable node, so in that case, move it into the next
       // node if possible. Issue prosemirror/prosemirror#832.
-      if (gecko && node.nodeType == 1 && offset < nodeLen(node) && isIgnorable(node.childNodes[offset]))
+      if (gecko && node.nodeType == 1 && offset < nodeLen(node) && isIgnorable(node.childNodes[offset], -1))
           force = true;
       for (;;) {
           if (offset > 0) {
@@ -34133,7 +34254,7 @@
               }
               else {
                   let before = node.childNodes[offset - 1];
-                  if (isIgnorable(before)) {
+                  if (isIgnorable(before, -1)) {
                       moveNode = node;
                       moveOffset = --offset;
                   }
@@ -34150,7 +34271,7 @@
           }
           else {
               let prev = node.previousSibling;
-              while (prev && isIgnorable(prev)) {
+              while (prev && isIgnorable(prev, -1)) {
                   moveNode = node.parentNode;
                   moveOffset = domIndex(prev);
                   prev = prev.previousSibling;
@@ -34186,7 +34307,7 @@
               if (node.nodeType != 1)
                   break;
               let after = node.childNodes[offset];
-              if (isIgnorable(after)) {
+              if (isIgnorable(after, 1)) {
                   moveNode = node;
                   moveOffset = ++offset;
               }
@@ -34198,7 +34319,7 @@
           }
           else {
               let next = node.nextSibling;
-              while (next && isIgnorable(next)) {
+              while (next && isIgnorable(next, 1)) {
                   moveNode = next.parentNode;
                   moveOffset = domIndex(next) + 1;
                   next = next.nextSibling;
@@ -34229,9 +34350,12 @@
           node = node.parentNode;
       }
       while (node && offset < node.childNodes.length) {
-          node = node.childNodes[offset];
-          if (node.nodeType == 3)
-              return node;
+          let next = node.childNodes[offset];
+          if (next.nodeType == 3)
+              return next;
+          if (next.nodeType == 1 && next.contentEditable == "false")
+              break;
+          node = next;
           offset = 0;
       }
   }
@@ -34241,9 +34365,12 @@
           node = node.parentNode;
       }
       while (node && offset) {
-          node = node.childNodes[offset - 1];
-          if (node.nodeType == 3)
-              return node;
+          let next = node.childNodes[offset - 1];
+          if (next.nodeType == 3)
+              return next;
+          if (next.nodeType == 1 && next.contentEditable == "false")
+              break;
+          node = next;
           offset = node.childNodes.length;
       }
   }
@@ -34405,7 +34532,7 @@
           return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1);
       }
       else if (code == 40 || (mac$2 && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
-          return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesAfter(view);
+          return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodes(view, 1);
       }
       else if (mods == (mac$2 ? "m" : "c") &&
           (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz]
@@ -35244,6 +35371,13 @@
       view.dispatch(tr.scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste"));
       return true;
   }
+  function getText$1(clipboardData) {
+      let text = clipboardData.getData("text/plain") || clipboardData.getData("Text");
+      if (text)
+          return text;
+      let uris = clipboardData.getData("text/uri-list");
+      return uris ? uris.replace(/\r?\n/g, " ") : "";
+  }
   editHandlers.paste = (view, _event) => {
       let event = _event;
       // Handling paste from JavaScript during composition is very poorly
@@ -35254,15 +35388,16 @@
           return;
       let data = brokenClipboardAPI ? null : event.clipboardData;
       let plain = view.input.shiftKey && view.input.lastKeyCode != 45;
-      if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), plain, event))
+      if (data && doPaste(view, getText$1(data), data.getData("text/html"), plain, event))
           event.preventDefault();
       else
           capturePaste(view, event);
   };
   class Dragging {
-      constructor(slice, move) {
+      constructor(slice, move, node) {
           this.slice = slice;
           this.move = move;
+          this.node = node;
       }
   }
   const dragCopyModifier = mac$2 ? "altKey" : "ctrlKey";
@@ -35275,23 +35410,24 @@
           return;
       let sel = view.state.selection;
       let pos = sel.empty ? null : view.posAtCoords(eventCoords(event));
+      let node;
       if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof NodeSelection ? sel.to - 1 : sel.to)) ;
       else if (mouseDown && mouseDown.mightDrag) {
-          view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)));
+          node = NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos);
       }
       else if (event.target && event.target.nodeType == 1) {
           let desc = view.docView.nearestDesc(event.target, true);
           if (desc && desc.node.type.spec.draggable && desc != view.docView)
-              view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore)));
+              node = NodeSelection.create(view.state.doc, desc.posBefore);
       }
-      let slice = view.state.selection.content(), { dom, text } = serializeForClipboard(view, slice);
+      let slice = (node || view.state.selection).content(), { dom, text } = serializeForClipboard(view, slice);
       event.dataTransfer.clearData();
       event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
       // See https://github.com/ProseMirror/prosemirror/issues/1156
       event.dataTransfer.effectAllowed = "copyMove";
       if (!brokenClipboardAPI)
           event.dataTransfer.setData("text/plain", text);
-      view.dragging = new Dragging(slice, !event[dragCopyModifier]);
+      view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
   };
   handlers.dragend = view => {
       let dragging = view.dragging;
@@ -35316,7 +35452,7 @@
           view.someProp("transformPasted", f => { slice = f(slice, view); });
       }
       else {
-          slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
+          slice = parseFromClipboard(view, getText$1(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
       }
       let move = !!(dragging && !event[dragCopyModifier]);
       if (view.someProp("handleDrop", f => f(view, event, slice || Slice.empty, move))) {
@@ -35330,8 +35466,13 @@
       if (insertPos == null)
           insertPos = $mouse.pos;
       let tr = view.state.tr;
-      if (move)
-          tr.deleteSelection();
+      if (move) {
+          let { node } = dragging;
+          if (node)
+              node.replace(tr);
+          else
+              tr.deleteSelection();
+      }
       let pos = tr.mapping.map(insertPos);
       let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
       let beforeInsert = tr.doc;
@@ -35563,6 +35704,10 @@
       @internal
       */
       get inline() { return this.type instanceof InlineType; }
+      /**
+      @internal
+      */
+      get widget() { return this.type instanceof WidgetType; }
   }
   const none$1 = [], noSpec = {};
   /**
@@ -35581,7 +35726,8 @@
       }
       /**
       Create a set of decorations, using the structure of the given
-      document.
+      document. This will consume (modify) the `decorations` array, so
+      you must make a copy if you want need to preserve that.
       */
       static create(doc, decorations) {
           return decorations.length ? buildTree(decorations, doc, 0, noSpec) : empty$1;
@@ -35640,8 +35786,9 @@
       }
       /**
       Add the given array of decorations to the ones in the set,
-      producing a new set. Needs access to the current document to
-      create the appropriate tree structure.
+      producing a new set. Consumes the `decorations` array. Needs
+      access to the current document to create the appropriate tree
+      structure.
       */
       add(doc, decorations) {
           if (!decorations.length)
@@ -35883,7 +36030,7 @@
                   if (oldEnd >= start) {
                       children[i + 1] = oldStart <= start ? -2 : -1;
                   }
-                  else if (newStart >= offset && dSize) {
+                  else if (oldStart >= baseOffset && dSize) {
                       children[i] += dSize;
                       children[i + 1] += dSize;
                   }
@@ -36734,17 +36881,27 @@
       if (endA < start && a.size < b.size) {
           let move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
           start -= move;
+          if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1)))
+              start += move ? 1 : -1;
           endB = start + (endB - endA);
           endA = start;
       }
       else if (endB < start) {
           let move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
           start -= move;
+          if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1)))
+              start += move ? 1 : -1;
           endA = start + (endA - endB);
           endB = start;
       }
       return { start, endA, endB };
   }
+  function isSurrogatePair(str) {
+      if (str.length != 2)
+          return false;
+      let a = str.charCodeAt(0), b = str.charCodeAt(1);
+      return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF;
+  }
   /**
   An editor view manages the DOM structure that represents an
   editable document. Its state and behavior are determined by its
@@ -36878,6 +37035,7 @@
           this.updateStateInner(state, this._props);
       }
       updateStateInner(state, prevProps) {
+          var _a;
           let prev = this.state, redraw = false, updateSel = false;
           // When stored marks are added, stop composition, so that they can
           // be displayed.
@@ -36945,6 +37103,8 @@
               this.domObserver.start();
           }
           this.updatePluginViews(prev);
+          if (((_a = this.dragging) === null || _a === void 0 ? void 0 : _a.node) && !prev.doc.eq(state.doc))
+              this.updateDraggedNode(this.dragging, prev);
           if (scroll == "reset") {
               this.dom.scrollTop = 0;
           }
@@ -36999,6 +37159,19 @@
               }
           }
       }
+      updateDraggedNode(dragging, prev) {
+          let sel = dragging.node, found = -1;
+          if (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);
+              if (moved == sel.node)
+                  found = movedPos;
+          }
+          this.dragging = new Dragging(dragging.slice, dragging.move, found < 0 ? undefined : NodeSelection.create(this.state.doc, found));
+      }
       someProp(propName, f) {
           let prop = this._props && this._props[propName], value;
           if (prop != null && (value = f ? f(prop) : prop))
@@ -37069,6 +37242,13 @@
           return cached || document;
       }
       /**
+      When an existing editor view is moved to a new document or
+      shadow tree, call this to make it recompute its root.
+      */
+      updateRoot() {
+          this._root = null;
+      }
+      /**
       Given a pair of viewport coordinates, return the document
       position that corresponds to them. May return null if the given
       coordinates aren't inside of the editor. When an object is
@@ -53881,9 +54061,9 @@ img.ProseMirror-separator {
   // THIS FILE IS AUTOMATICALLY GENERATED DO NOT EDIT DIRECTLY
   // See update-tlds.js for encoding/decoding format
   // https://data.iana.org/TLD/tlds-alpha-by-domain.txt
-  const encodedTlds = 'aaa1rp3barth4b0ott3vie4c1le2ogado5udhabi7c0ademy5centure6ountant0s9o1tor4d0s1ult4e0g1ro2tna4f0l1rica5g0akhan5ency5i0g1rbus3force5tel5kdn3l0faromeo7ibaba4pay4lfinanz6state5y2sace3tom5m0azon4ericanexpress7family11x2fam3ica3sterdam8nalytics7droid5quan4z2o0l2partments8p0le4q0uarelle8r0ab1mco4chi3my2pa2t0e3s0da2ia2sociates9t0hleta5torney7u0ction5di0ble3o3spost5thor3o0s4vianca6w0s2x0a2z0ure5ba0by2idu3namex3narepublic11d1k2r0celona5laycard4s5efoot5gains6seball5ketball8uhaus5yern5b0c1t1va3cg1n2d1e0ats2uty4er2ntley5rlin4st0buy5t2f1g1h0arti5i0ble3d1ke2ng0o3o1z2j1lack0friday9ockbuster8g1omberg7ue3m0s1w2n0pparibas9o0ats3ehringer8fa2m1nd2o0k0ing5sch2tik2on4t1utique6x2r0adesco6idgestone9oadway5ker3ther5ussels7s1t1uild0ers6siness6y1zz3v1w1y1z0h3ca0b1fe2l0l1vinklein9m0era3p2non3petown5ital0one8r0avan4ds2e0er0s4s2sa1e1h1ino4t0ering5holic7ba1n1re2s2c1d1enter4o1rn3f0a1d2g1h0anel2nel4rity4se2t2eap3intai5ristmas6ome4urch5i0priani6rcle4sco3tadel4i0c2y0eats7k1l0aims4eaning6ick2nic1que6othing5ud3ub0med6m1n1o0ach3des3ffee4llege4ogne5m0cast4mbank4unity6pany2re3uter5sec4ndos3struction8ulting7tact3ractors9oking0channel11l1p2rsica5untry4pon0s4rses6pa2r0edit0card4union9icket5own3s1uise0s6u0isinella9v1w1x1y0mru3ou3z2dabur3d1nce3ta1e1ing3sun4y2clk3ds2e0al0er2s3gree4livery5l1oitte5ta3mocrat6ntal2ist5si0gn4v2hl2iamonds6et2gital5rect0ory7scount3ver5h2y2j1k1m1np2o0cs1tor4g1mains5t1wnload7rive4tv2ubai3nlop4pont4rban5vag2r2z2earth3t2c0o2deka3u0cation8e1g1mail3erck5nergy4gineer0ing9terprises10pson4quipment8r0icsson6ni3s0q1tate5t0isalat7u0rovision8s2vents5xchange6pert3osed4ress5traspace10fage2il1rwinds6th3mily4n0s2rm0ers5shion4t3edex3edback6rrari3ero6i0at2delity5o2lm2nal1nce1ial7re0stone6mdale6sh0ing5t0ness6j1k1lickr3ghts4r2orist4wers5y2m1o0o0d0network8tball6rd1ex2sale4um3undation8x2r0ee1senius7l1ogans4ntdoor4ier7tr2ujitsu5n0d2rniture7tbol5yi3ga0l0lery3o1up4me0s3p1rden4y2b0iz3d0n2e0a1nt0ing5orge5f1g0ee3h1i0ft0s3ves2ing5l0ass3e1obal2o4m0ail3bh2o1x2n1odaddy5ld0point6f2o0dyear5g0le4p1t1v2p1q1r0ainger5phics5tis4een3ipe3ocery4up4s1t1u0ardian6cci3ge2ide2tars5ru3w1y2hair2mburg5ngout5us3bo2dfc0bank7ealth0care8lp1sinki6re1mes5gtv3iphop4samitsu7tachi5v2k0t2m1n1ockey4ldings5iday5medepot5goods5s0ense7nda3rse3spital5t0ing5t0eles2s3mail5use3w2r1sbc3t1u0ghes5yatt3undai7ibm2cbc2e1u2d1e0ee3fm2kano4l1m0amat4db2mo0bilien9n0c1dustries8finiti5o2g1k1stitute6urance4e4t0ernational10uit4vestments10o1piranga7q1r0ish4s0maili5t0anbul7t0au2v3jaguar4va3cb2e0ep2tzt3welry6io2ll2m0p2nj2o0bs1urg4t1y2p0morgan6rs3uegos4niper7kaufen5ddi3e0rryhotels6logistics9properties14fh2g1h1i0a1ds2m1nder2le4tchen5wi3m1n1oeln3matsu5sher5p0mg2n2r0d1ed3uokgroup8w1y0oto4z2la0caixa5mborghini8er3ncaster5ia3d0rover6xess5salle5t0ino3robe5w0yer5b1c1ds2ease3clerc5frak4gal2o2xus4gbt3i0dl2fe0insurance9style7ghting6ke2lly3mited4o2ncoln4de2k2psy3ve1ing5k1lc1p2oan0s3cker3us3l1ndon4tte1o3ve3pl0financial11r1s1t0d0a3u0ndbeck6xe1ury5v1y2ma0cys3drid4if1son4keup4n0agement7go3p1rket0ing3s4riott5shalls7serati6ttel5ba2c0kinsey7d1e0d0ia3et2lbourne7me1orial6n0u2rckmsd7g1h1iami3crosoft7l1ni1t2t0subishi9k1l0b1s2m0a2n1o0bi0le4da2e1i1m1nash3ey2ster5rmon3tgage6scow4to0rcycles9v0ie4p1q1r1s0d2t0n1r2u0seum3ic3tual5v1w1x1y1z2na0b1goya4me2tura4vy3ba2c1e0c1t0bank4flix4work5ustar5w0s2xt0direct7us4f0l2g0o2hk2i0co2ke1on3nja3ssan1y5l1o0kia3rthwesternmutual14on4w0ruz3tv4p1r0a1w2tt2u1yc2z2obi1server7ffice5kinawa6layan0group9dnavy5lo3m0ega4ne1g1l0ine5oo2pen3racle3nge4g0anic5igins6saka4tsuka4t2vh3pa0ge2nasonic7ris2s1tners4s1y3ssagens7y2ccw3e0t2f0izer5g1h0armacy6d1ilips5one2to0graphy6s4ysio5ics1tet2ures6d1n0g1k2oneer5zza4k1l0ace2y0station9umbing5s3m1n0c2ohl2ker3litie5rn2st3r0america6xi3ess3ime3o0d0uctions8f1gressive8mo2perties3y5tection8u0dential9s1t1ub2w0c2y2qa1pon3uebec3st5racing4dio4e0ad1lestate6tor2y4cipes5d0stone5umbrella9hab3ise0n3t2liance6n0t0als5pair3ort3ublican8st0aurant8view0s5xroth6ich0ardli6oh3l1o1p2o0cher3ks3deo3gers4om3s0vp3u0gby3hr2n2w0e2yukyu6sa0arland6fe0ty4kura4le1on3msclub4ung5ndvik0coromant12ofi4p1rl2s1ve2xo3b0i1s2c0a1b1haeffler7midt4olarships8ol3ule3warz5ience5ot3d1e0arch3t2cure1ity6ek2lect4ner3rvices6ven3w1x0y3fr2g1h0angrila6rp2w2ell3ia1ksha5oes2p0ping5uji3w0time7i0lk2na1gles5te3j1k0i0n2y0pe4l0ing4m0art3ile4n0cf3o0ccer3ial4ftbank4ware6hu2lar2utions7ng1y2y2pa0ce3ort2t3r0l2s1t0ada2ples4r1tebank4farm7c0group6ockholm6rage3e3ream4udio2y3yle4u0cks3pplies3y2ort5rf1gery5zuki5v1watch4iss4x1y0dney4stems6z2tab1ipei4lk2obao4rget4tamotors6r2too4x0i3c0i2d0k2eam2ch0nology8l1masek5nnis4va3f1g1h0d1eater2re6iaa2ckets5enda4ffany5ps2res2ol4j0maxx4x2k0maxx5l1m0all4n1o0day3kyo3ols3p1ray3shiba5tal3urs3wn2yota3s3r0ade1ing4ining5vel0channel7ers0insurance16ust3v2t1ube2i1nes3shu4v0s2w1z2ua1bank3s2g1k1nicom3versity8o2ol2ps2s1y1z2va0cations7na1guard7c1e0gas3ntures6risign5mögensberater2ung14sicherung10t2g1i0ajes4deo3g1king4llas4n1p1rgin4sa1ion4va1o3laanderen9n1odka3lkswagen7vo3te1ing3o2yage5u0elos6wales2mart4ter4ng0gou5tch0es6eather0channel12bcam3er2site5d0ding5ibo2r3f1hoswho6ien2ki2lliamhill9n0dows4e1ners6me2olterskluwer11odside6rk0s2ld3w2s1tc1f3xbox3erox4finity6ihuan4n2xx2yz3yachts4hoo3maxun5ndex5e1odobashi7ga2kohama6u0tube6t1un3za0ppos4ra3ero3ip2m1one3uerich6w2';
+  const encodedTlds = 'aaa1rp3bb0ott3vie4c1le2ogado5udhabi7c0ademy5centure6ountant0s9o1tor4d0s1ult4e0g1ro2tna4f0l1rica5g0akhan5ency5i0g1rbus3force5tel5kdn3l0ibaba4pay4lfinanz6state5y2sace3tom5m0azon4ericanexpress7family11x2fam3ica3sterdam8nalytics7droid5quan4z2o0l2partments8p0le4q0uarelle8r0ab1mco4chi3my2pa2t0e3s0da2ia2sociates9t0hleta5torney7u0ction5di0ble3o3spost5thor3o0s4vianca6w0s2x0a2z0ure5ba0by2idu3namex3narepublic11d1k2r0celona5laycard4s5efoot5gains6seball5ketball8uhaus5yern5b0c1t1va3cg1n2d1e0ats2uty4er2ntley5rlin4st0buy5t2f1g1h0arti5i0ble3d1ke2ng0o3o1z2j1lack0friday9ockbuster8g1omberg7ue3m0s1w2n0pparibas9o0ats3ehringer8fa2m1nd2o0k0ing5sch2tik2on4t1utique6x2r0adesco6idgestone9oadway5ker3ther5ussels7s1t1uild0ers6siness6y1zz3v1w1y1z0h3ca0b1fe2l0l1vinklein9m0era3p2non3petown5ital0one8r0avan4ds2e0er0s4s2sa1e1h1ino4t0ering5holic7ba1n1re3c1d1enter4o1rn3f0a1d2g1h0anel2nel4rity4se2t2eap3intai5ristmas6ome4urch5i0priani6rcle4sco3tadel4i0c2y3k1l0aims4eaning6ick2nic1que6othing5ud3ub0med6m1n1o0ach3des3ffee4llege4ogne5m0cast4mbank4unity6pany2re3uter5sec4ndos3struction8ulting7tact3ractors9oking4l1p2rsica5untry4pon0s4rses6pa2r0edit0card4union9icket5own3s1uise0s6u0isinella9v1w1x1y0mru3ou3z2dabur3d1nce3ta1e1ing3sun4y2clk3ds2e0al0er2s3gree4livery5l1oitte5ta3mocrat6ntal2ist5si0gn4v2hl2iamonds6et2gital5rect0ory7scount3ver5h2y2j1k1m1np2o0cs1tor4g1mains5t1wnload7rive4tv2ubai3nlop4pont4rban5vag2r2z2earth3t2c0o2deka3u0cation8e1g1mail3erck5nergy4gineer0ing9terprises10pson4quipment8r0icsson6ni3s0q1tate5t1u0rovision8s2vents5xchange6pert3osed4ress5traspace10fage2il1rwinds6th3mily4n0s2rm0ers5shion4t3edex3edback6rrari3ero6i0delity5o2lm2nal1nce1ial7re0stone6mdale6sh0ing5t0ness6j1k1lickr3ghts4r2orist4wers5y2m1o0o0d1tball6rd1ex2sale4um3undation8x2r0ee1senius7l1ogans4ntier7tr2ujitsu5n0d2rniture7tbol5yi3ga0l0lery3o1up4me0s3p1rden4y2b0iz3d0n2e0a1nt0ing5orge5f1g0ee3h1i0ft0s3ves2ing5l0ass3e1obal2o4m0ail3bh2o1x2n1odaddy5ld0point6f2o0dyear5g0le4p1t1v2p1q1r0ainger5phics5tis4een3ipe3ocery4up4s1t1u0ardian6cci3ge2ide2tars5ru3w1y2hair2mburg5ngout5us3bo2dfc0bank7ealth0care8lp1sinki6re1mes5iphop4samitsu7tachi5v2k0t2m1n1ockey4ldings5iday5medepot5goods5s0ense7nda3rse3spital5t0ing5t0els3mail5use3w2r1sbc3t1u0ghes5yatt3undai7ibm2cbc2e1u2d1e0ee3fm2kano4l1m0amat4db2mo0bilien9n0c1dustries8finiti5o2g1k1stitute6urance4e4t0ernational10uit4vestments10o1piranga7q1r0ish4s0maili5t0anbul7t0au2v3jaguar4va3cb2e0ep2tzt3welry6io2ll2m0p2nj2o0bs1urg4t1y2p0morgan6rs3uegos4niper7kaufen5ddi3e0rryhotels6logistics9properties14fh2g1h1i0a1ds2m1ndle4tchen5wi3m1n1oeln3matsu5sher5p0mg2n2r0d1ed3uokgroup8w1y0oto4z2la0caixa5mborghini8er3ncaster6d0rover6xess5salle5t0ino3robe5w0yer5b1c1ds2ease3clerc5frak4gal2o2xus4gbt3i0dl2fe0insurance9style7ghting6ke2lly3mited4o2ncoln4k2psy3ve1ing5k1lc1p2oan0s3cker3us3l1ndon4tte1o3ve3pl0financial11r1s1t0d0a3u0ndbeck6xe1ury5v1y2ma0drid4if1son4keup4n0agement7go3p1rket0ing3s4riott5shalls7ttel5ba2c0kinsey7d1e0d0ia3et2lbourne7me1orial6n0u2rckmsd7g1h1iami3crosoft7l1ni1t2t0subishi9k1l0b1s2m0a2n1o0bi0le4da2e1i1m1nash3ey2ster5rmon3tgage6scow4to0rcycles9v0ie4p1q1r1s0d2t0n1r2u0seum3ic4v1w1x1y1z2na0b1goya4me2tura4vy3ba2c1e0c1t0bank4flix4work5ustar5w0s2xt0direct7us4f0l2g0o2hk2i0co2ke1on3nja3ssan1y5l1o0kia3rton4w0ruz3tv4p1r0a1w2tt2u1yc2z2obi1server7ffice5kinawa6layan0group9dnavy5lo3m0ega4ne1g1l0ine5oo2pen3racle3nge4g0anic5igins6saka4tsuka4t2vh3pa0ge2nasonic7ris2s1tners4s1y3y2ccw3e0t2f0izer5g1h0armacy6d1ilips5one2to0graphy6s4ysio5ics1tet2ures6d1n0g1k2oneer5zza4k1l0ace2y0station9umbing5s3m1n0c2ohl2ker3litie5rn2st3r0america6xi3ess3ime3o0d0uctions8f1gressive8mo2perties3y5tection8u0dential9s1t1ub2w0c2y2qa1pon3uebec3st5racing4dio4e0ad1lestate6tor2y4cipes5d0stone5umbrella9hab3ise0n3t2liance6n0t0als5pair3ort3ublican8st0aurant8view0s5xroth6ich0ardli6oh3l1o1p2o0cks3deo3gers4om3s0vp3u0gby3hr2n2w0e2yukyu6sa0arland6fe0ty4kura4le1on3msclub4ung5ndvik0coromant12ofi4p1rl2s1ve2xo3b0i1s2c0a1b1haeffler7midt4olarships8ol3ule3warz5ience5ot3d1e0arch3t2cure1ity6ek2lect4ner3rvices6ven3w1x0y3fr2g1h0angrila6rp2w2ell3ia1ksha5oes2p0ping5uji3w3i0lk2na1gles5te3j1k0i0n2y0pe4l0ing4m0art3ile4n0cf3o0ccer3ial4ftbank4ware6hu2lar2utions7ng1y2y2pa0ce3ort2t3r0l2s1t0ada2ples4r1tebank4farm7c0group6ockholm6rage3e3ream4udio2y3yle4u0cks3pplies3y2ort5rf1gery5zuki5v1watch4iss4x1y0dney4stems6z2tab1ipei4lk2obao4rget4tamotors6r2too4x0i3c0i2d0k2eam2ch0nology8l1masek5nnis4va3f1g1h0d1eater2re6iaa2ckets5enda4ps2res2ol4j0maxx4x2k0maxx5l1m0all4n1o0day3kyo3ols3p1ray3shiba5tal3urs3wn2yota3s3r0ade1ing4ining5vel0ers0insurance16ust3v2t1ube2i1nes3shu4v0s2w1z2ua1bank3s2g1k1nicom3versity8o2ol2ps2s1y1z2va0cations7na1guard7c1e0gas3ntures6risign5mögensberater2ung14sicherung10t2g1i0ajes4deo3g1king4llas4n1p1rgin4sa1ion4va1o3laanderen9n1odka3lvo3te1ing3o2yage5u2wales2mart4ter4ng0gou5tch0es6eather0channel12bcam3er2site5d0ding5ibo2r3f1hoswho6ien2ki2lliamhill9n0dows4e1ners6me2olterskluwer11odside6rk0s2ld3w2s1tc1f3xbox3erox4finity6ihuan4n2xx2yz3yachts4hoo3maxun5ndex5e1odobashi7ga2kohama6u0tube6t1un3za0ppos4ra3ero3ip2m1one3uerich6w2';
   // Internationalized domain names containing non-ASCII
-  const encodedUtlds = 'ελ1υ2бг1ел3дети4ею2католик6ом3мкд2он1сква6онлайн5рг3рус2ф2сайт3рб3укр3қаз3հայ3ישראל5קום3ابوظبي5تصالات6رامكو5لاردن4بحرين5جزائر5سعودية6عليان5مغرب5مارات5یران5بارت2زار4يتك3ھارت5تونس4سودان3رية5شبكة4عراق2ب2مان4فلسطين6قطر3كاثوليك6وم3مصر2ليسيا5وريتانيا7قع4همراه5پاکستان7ڀارت4कॉम3नेट3भारत0म्3ोत5संगठन5বাংলা5ভারত2ৰত4ਭਾਰਤ4ભારત4ଭାରତ4இந்தியா6லங்கை6சிங்கப்பூர்11భారత్5ಭಾರತ4ഭാരതം5ලංකා4คอม3ไทย3ລາວ3გე2みんな3アマゾン4クラウド4グーグル4コム2ストア3セール3ファッション6ポイント4世界2中信1国1國1文网3亚马逊3企业2佛山2信息2健康2八卦2公司1益2台湾1灣2商城1店1标2嘉里0大酒店5在线2大拿2天主教3娱乐2家電2广东2微博2慈善2我爱你3手机2招聘2政务1府2新加坡2闻2时尚2書籍2机构2淡马锡3游戏2澳門2点看2移动2组织机构4网址1店1站1络2联通2谷歌2购物2通販2集团2電訊盈科4飞利浦3食品2餐厅2香格里拉3港2닷넷1컴2삼성2한국2';
+  const encodedUtlds = 'ελ1υ2бг1ел3дети4ею2католик6ом3мкд2он1сква6онлайн5рг3рус2ф2сайт3рб3укр3қаз3հայ3ישראל5קום3ابوظبي5رامكو5لاردن4بحرين5جزائر5سعودية6عليان5مغرب5مارات5یران5بارت2زار4يتك3ھارت5تونس4سودان3رية5شبكة4عراق2ب2مان4فلسطين6قطر3كاثوليك6وم3مصر2ليسيا5وريتانيا7قع4همراه5پاکستان7ڀارت4कॉम3नेट3भारत0म्3ोत5संगठन5বাংলা5ভারত2ৰত4ਭਾਰਤ4ભારત4ଭାରତ4இந்தியா6லங்கை6சிங்கப்பூர்11భారత్5ಭಾರತ4ഭാരതം5ලංකා4คอม3ไทย3ລາວ3გე2みんな3アマゾン4クラウド4グーグル4コム2ストア3セール3ファッション6ポイント4世界2中信1国1國1文网3亚马逊3企业2佛山2信息2健康2八卦2公司1益2台湾1灣2商城1店1标2嘉里0大酒店5在线2大拿2天主教3娱乐2家電2广东2微博2慈善2我爱你3手机2招聘2政务1府2新加坡2闻2时尚2書籍2机构2淡马锡3游戏2澳門2点看2移动2组织机构4网址1店1站1络2联通2谷歌2购物2通販2集团2電訊盈科4飞利浦3食品2餐厅2香格里拉3港2닷넷1컴2삼성2한국2';
 
   /**
    * @template A
@@ -54271,14 +54451,24 @@ img.ProseMirror-separator {
   const NL$1 = 'NL'; // \n
 
   // Opening/closing bracket classes
+  // TODO: Rename OPEN -> LEFT and CLOSE -> RIGHT in v5 to fit with Unicode names
+  // Also rename angle brackes to LESSTHAN and GREATER THAN
   const OPENBRACE = 'OPENBRACE'; // {
-  const OPENBRACKET = 'OPENBRACKET'; // [
-  const OPENANGLEBRACKET = 'OPENANGLEBRACKET'; // <
-  const OPENPAREN = 'OPENPAREN'; // (
   const CLOSEBRACE = 'CLOSEBRACE'; // }
+  const OPENBRACKET = 'OPENBRACKET'; // [
   const CLOSEBRACKET = 'CLOSEBRACKET'; // ]
-  const CLOSEANGLEBRACKET = 'CLOSEANGLEBRACKET'; // >
+  const OPENPAREN = 'OPENPAREN'; // (
   const CLOSEPAREN = 'CLOSEPAREN'; // )
+  const OPENANGLEBRACKET = 'OPENANGLEBRACKET'; // <
+  const CLOSEANGLEBRACKET = 'CLOSEANGLEBRACKET'; // >
+  const FULLWIDTHLEFTPAREN = 'FULLWIDTHLEFTPAREN'; // （
+  const FULLWIDTHRIGHTPAREN = 'FULLWIDTHRIGHTPAREN'; // ）
+  const LEFTCORNERBRACKET = 'LEFTCORNERBRACKET'; // 「
+  const RIGHTCORNERBRACKET = 'RIGHTCORNERBRACKET'; // 」
+  const LEFTWHITECORNERBRACKET = 'LEFTWHITECORNERBRACKET'; // 『
+  const RIGHTWHITECORNERBRACKET = 'RIGHTWHITECORNERBRACKET'; // 』
+  const FULLWIDTHLESSTHAN = 'FULLWIDTHLESSTHAN'; // ＜
+  const FULLWIDTHGREATERTHAN = 'FULLWIDTHGREATERTHAN'; // ＞
 
   // Various symbols
   const AMPERSAND = 'AMPERSAND'; // &
@@ -54326,13 +54516,21 @@ img.ProseMirror-separator {
   	WS: WS,
   	NL: NL$1,
   	OPENBRACE: OPENBRACE,
-  	OPENBRACKET: OPENBRACKET,
-  	OPENANGLEBRACKET: OPENANGLEBRACKET,
-  	OPENPAREN: OPENPAREN,
   	CLOSEBRACE: CLOSEBRACE,
+  	OPENBRACKET: OPENBRACKET,
   	CLOSEBRACKET: CLOSEBRACKET,
-  	CLOSEANGLEBRACKET: CLOSEANGLEBRACKET,
+  	OPENPAREN: OPENPAREN,
   	CLOSEPAREN: CLOSEPAREN,
+  	OPENANGLEBRACKET: OPENANGLEBRACKET,
+  	CLOSEANGLEBRACKET: CLOSEANGLEBRACKET,
+  	FULLWIDTHLEFTPAREN: FULLWIDTHLEFTPAREN,
+  	FULLWIDTHRIGHTPAREN: FULLWIDTHRIGHTPAREN,
+  	LEFTCORNERBRACKET: LEFTCORNERBRACKET,
+  	RIGHTCORNERBRACKET: RIGHTCORNERBRACKET,
+  	LEFTWHITECORNERBRACKET: LEFTWHITECORNERBRACKET,
+  	RIGHTWHITECORNERBRACKET: RIGHTWHITECORNERBRACKET,
+  	FULLWIDTHLESSTHAN: FULLWIDTHLESSTHAN,
+  	FULLWIDTHGREATERTHAN: FULLWIDTHGREATERTHAN,
   	AMPERSAND: AMPERSAND,
   	APOSTROPHE: APOSTROPHE,
   	ASTERISK: ASTERISK,
@@ -54420,13 +54618,21 @@ img.ProseMirror-separator {
     // States for special URL symbols that accept immediately after start
     tt(Start, "'", APOSTROPHE);
     tt(Start, '{', OPENBRACE);
-    tt(Start, '[', OPENBRACKET);
-    tt(Start, '<', OPENANGLEBRACKET);
-    tt(Start, '(', OPENPAREN);
     tt(Start, '}', CLOSEBRACE);
+    tt(Start, '[', OPENBRACKET);
     tt(Start, ']', CLOSEBRACKET);
-    tt(Start, '>', CLOSEANGLEBRACKET);
+    tt(Start, '(', OPENPAREN);
     tt(Start, ')', CLOSEPAREN);
+    tt(Start, '<', OPENANGLEBRACKET);
+    tt(Start, '>', CLOSEANGLEBRACKET);
+    tt(Start, '（', FULLWIDTHLEFTPAREN);
+    tt(Start, '）', FULLWIDTHRIGHTPAREN);
+    tt(Start, '「', LEFTCORNERBRACKET);
+    tt(Start, '」', RIGHTCORNERBRACKET);
+    tt(Start, '『', LEFTWHITECORNERBRACKET);
+    tt(Start, '』', RIGHTWHITECORNERBRACKET);
+    tt(Start, '＜', FULLWIDTHLESSTHAN);
+    tt(Start, '＞', FULLWIDTHGREATERTHAN);
     tt(Start, '&', AMPERSAND);
     tt(Start, '*', ASTERISK);
     tt(Start, '@', AT);
@@ -55197,11 +55403,11 @@ img.ProseMirror-separator {
     // Types of tokens that can follow a URL and be part of the query string
     // but cannot be the very last characters
     // Characters that cannot appear in the URL at all should be excluded
-    const qsNonAccepting = [APOSTROPHE, CLOSEANGLEBRACKET, CLOSEBRACE, CLOSEBRACKET, CLOSEPAREN, COLON, COMMA, DOT, EXCLAMATION, OPENANGLEBRACKET, OPENBRACE, OPENBRACKET, OPENPAREN, QUERY, QUOTE, SEMI];
+    const qsNonAccepting = [APOSTROPHE, COLON, COMMA, DOT, EXCLAMATION, QUERY, QUOTE, SEMI, OPENANGLEBRACKET, CLOSEANGLEBRACKET, OPENBRACE, CLOSEBRACE, CLOSEBRACKET, OPENBRACKET, OPENPAREN, CLOSEPAREN, FULLWIDTHLEFTPAREN, FULLWIDTHRIGHTPAREN, LEFTCORNERBRACKET, RIGHTCORNERBRACKET, LEFTWHITECORNERBRACKET, RIGHTWHITECORNERBRACKET, FULLWIDTHLESSTHAN, FULLWIDTHGREATERTHAN];
 
     // For addresses without the mailto prefix
     // Tokens allowed in the localpart of the email
-    const localpartAccepting = [AMPERSAND, APOSTROPHE, ASTERISK, BACKSLASH, BACKTICK, CARET, CLOSEBRACE, DOLLAR, EQUALS, HYPHEN, OPENBRACE, PERCENT, PIPE, PLUS, POUND, QUERY, SLASH, SYM, TILDE, UNDERSCORE];
+    const localpartAccepting = [AMPERSAND, APOSTROPHE, ASTERISK, BACKSLASH, BACKTICK, CARET, DOLLAR, EQUALS, HYPHEN, OPENBRACE, CLOSEBRACE, PERCENT, PIPE, PLUS, POUND, QUERY, SLASH, SYM, TILDE, UNDERSCORE];
 
     // The universal starting state.
     /**
@@ -55250,7 +55456,7 @@ img.ProseMirror-separator {
     // Final possible email states
     const EmailColon = tt(Email$1, COLON); // URL followed by colon (potential port number here)
     /*const EmailColonPort = */
-    ta(EmailColon, groups.numeric, Email); // URL followed by colon and port numner
+    ta(EmailColon, groups.numeric, Email); // URL followed by colon and port number
 
     // Account for dots and hyphens. Hyphens are usually parts of domain names
     // (but not TLDs)
@@ -55309,72 +55515,51 @@ img.ProseMirror-separator {
     ta(UriPrefix, groups.domain, Url$1);
     ta(UriPrefix, qsAccepting, Url$1);
     tt(UriPrefix, SLASH, Url$1);
+    const bracketPairs = [[OPENBRACE, CLOSEBRACE],
+    // {}
+    [OPENBRACKET, CLOSEBRACKET],
+    // []
+    [OPENPAREN, CLOSEPAREN],
+    // ()
+    [OPENANGLEBRACKET, CLOSEANGLEBRACKET],
+    // <>
+    [FULLWIDTHLEFTPAREN, FULLWIDTHRIGHTPAREN],
+    // （）
+    [LEFTCORNERBRACKET, RIGHTCORNERBRACKET],
+    // 「」
+    [LEFTWHITECORNERBRACKET, RIGHTWHITECORNERBRACKET],
+    // 『』
+    [FULLWIDTHLESSTHAN, FULLWIDTHGREATERTHAN] // ＜＞
+    ];
+
+    for (let i = 0; i < bracketPairs.length; i++) {
+      const [OPEN, CLOSE] = bracketPairs[i];
+      const UrlOpen = tt(Url$1, OPEN); // URL followed by open bracket
 
-    // URL, followed by an opening bracket
-    const UrlOpenbrace = tt(Url$1, OPENBRACE); // URL followed by {
-    const UrlOpenbracket = tt(Url$1, OPENBRACKET); // URL followed by [
-    const UrlOpenanglebracket = tt(Url$1, OPENANGLEBRACKET); // URL followed by <
-    const UrlOpenparen = tt(Url$1, OPENPAREN); // URL followed by (
-
-    tt(UrlNonaccept, OPENBRACE, UrlOpenbrace);
-    tt(UrlNonaccept, OPENBRACKET, UrlOpenbracket);
-    tt(UrlNonaccept, OPENANGLEBRACKET, UrlOpenanglebracket);
-    tt(UrlNonaccept, OPENPAREN, UrlOpenparen);
-
-    // Closing bracket component. This character WILL be included in the URL
-    tt(UrlOpenbrace, CLOSEBRACE, Url$1);
-    tt(UrlOpenbracket, CLOSEBRACKET, Url$1);
-    tt(UrlOpenanglebracket, CLOSEANGLEBRACKET, Url$1);
-    tt(UrlOpenparen, CLOSEPAREN, Url$1);
-    tt(UrlOpenbrace, CLOSEBRACE, Url$1);
-
-    // URL that beings with an opening bracket, followed by a symbols.
-    // Note that the final state can still be `UrlOpenbrace` (if the URL only
-    // has a single opening bracket for some reason).
-    const UrlOpenbraceQ = makeState(Url); // URL followed by { and some symbols that the URL can end it
-    const UrlOpenbracketQ = makeState(Url); // URL followed by [ and some symbols that the URL can end it
-    const UrlOpenanglebracketQ = makeState(Url); // URL followed by < and some symbols that the URL can end it
-    const UrlOpenparenQ = makeState(Url); // URL followed by ( and some symbols that the URL can end it
-    ta(UrlOpenbrace, qsAccepting, UrlOpenbraceQ);
-    ta(UrlOpenbracket, qsAccepting, UrlOpenbracketQ);
-    ta(UrlOpenanglebracket, qsAccepting, UrlOpenanglebracketQ);
-    ta(UrlOpenparen, qsAccepting, UrlOpenparenQ);
-    const UrlOpenbraceSyms = makeState(); // UrlOpenbrace followed by some symbols it cannot end it
-    const UrlOpenbracketSyms = makeState(); // UrlOpenbracketQ followed by some symbols it cannot end it
-    const UrlOpenanglebracketSyms = makeState(); // UrlOpenanglebracketQ followed by some symbols it cannot end it
-    const UrlOpenparenSyms = makeState(); // UrlOpenparenQ followed by some symbols it cannot end it
-    ta(UrlOpenbrace, qsNonAccepting);
-    ta(UrlOpenbracket, qsNonAccepting);
-    ta(UrlOpenanglebracket, qsNonAccepting);
-    ta(UrlOpenparen, qsNonAccepting);
-
-    // URL that begins with an opening bracket, followed by some symbols
-    ta(UrlOpenbraceQ, qsAccepting, UrlOpenbraceQ);
-    ta(UrlOpenbracketQ, qsAccepting, UrlOpenbracketQ);
-    ta(UrlOpenanglebracketQ, qsAccepting, UrlOpenanglebracketQ);
-    ta(UrlOpenparenQ, qsAccepting, UrlOpenparenQ);
-    ta(UrlOpenbraceQ, qsNonAccepting, UrlOpenbraceQ);
-    ta(UrlOpenbracketQ, qsNonAccepting, UrlOpenbracketQ);
-    ta(UrlOpenanglebracketQ, qsNonAccepting, UrlOpenanglebracketQ);
-    ta(UrlOpenparenQ, qsNonAccepting, UrlOpenparenQ);
-    ta(UrlOpenbraceSyms, qsAccepting, UrlOpenbraceSyms);
-    ta(UrlOpenbracketSyms, qsAccepting, UrlOpenbracketQ);
-    ta(UrlOpenanglebracketSyms, qsAccepting, UrlOpenanglebracketQ);
-    ta(UrlOpenparenSyms, qsAccepting, UrlOpenparenQ);
-    ta(UrlOpenbraceSyms, qsNonAccepting, UrlOpenbraceSyms);
-    ta(UrlOpenbracketSyms, qsNonAccepting, UrlOpenbracketSyms);
-    ta(UrlOpenanglebracketSyms, qsNonAccepting, UrlOpenanglebracketSyms);
-    ta(UrlOpenparenSyms, qsNonAccepting, UrlOpenparenSyms);
-
-    // Close brace/bracket to become regular URL
-    tt(UrlOpenbracketQ, CLOSEBRACKET, Url$1);
-    tt(UrlOpenanglebracketQ, CLOSEANGLEBRACKET, Url$1);
-    tt(UrlOpenparenQ, CLOSEPAREN, Url$1);
-    tt(UrlOpenbraceQ, CLOSEBRACE, Url$1);
-    tt(UrlOpenbracketSyms, CLOSEBRACKET, Url$1);
-    tt(UrlOpenanglebracketSyms, CLOSEANGLEBRACKET, Url$1);
-    tt(UrlOpenparenSyms, CLOSEPAREN, Url$1);
-    tt(UrlOpenbraceSyms, CLOSEPAREN, Url$1);
+      // Continue not accepting for open brackets
+      tt(UrlNonaccept, OPEN, UrlOpen);
+
+      // Closing bracket component. This character WILL be included in the URL
+      tt(UrlOpen, CLOSE, Url$1);
+
+      // URL that beings with an opening bracket, followed by a symbols.
+      // Note that the final state can still be `UrlOpen` (if the URL has a
+      // single opening bracket for some reason).
+      const UrlOpenQ = makeState(Url);
+      ta(UrlOpen, qsAccepting, UrlOpenQ);
+      const UrlOpenSyms = makeState(); // UrlOpen followed by some symbols it cannot end it
+      ta(UrlOpen, qsNonAccepting);
+
+      // URL that begins with an opening bracket, followed by some symbols
+      ta(UrlOpenQ, qsAccepting, UrlOpenQ);
+      ta(UrlOpenQ, qsNonAccepting, UrlOpenSyms);
+      ta(UrlOpenSyms, qsAccepting, UrlOpenQ);
+      ta(UrlOpenSyms, qsNonAccepting, UrlOpenSyms);
+
+      // Close brace/bracket to become regular URL
+      tt(UrlOpenQ, CLOSE, Url$1);
+      tt(UrlOpenSyms, CLOSE, Url$1);
+    }
     tt(Start, LOCALHOST, DomainDotTld); // localhost is a valid URL state
     tt(Start, NL$1, Nl); // single new line
 
@@ -55541,7 +55726,10 @@ img.ProseMirror-separator {
       warn(`linkifyjs: already initialized - will not register custom scheme "${scheme}" ${warnAdvice}`);
     }
     if (!/^[0-9a-z]+(-[0-9a-z]+)*$/.test(scheme)) {
-      throw new Error('linkifyjs: incorrect scheme format.\n 1. Must only contain digits, lowercase ASCII letters or "-"\n 2. Cannot start or end with "-"\n 3. "-" cannot repeat');
+      throw new Error(`linkifyjs: incorrect scheme format.
+1. Must only contain digits, lowercase ASCII letters or "-"
+2. Cannot start or end with "-"
+3. "-" cannot repeat`);
     }
     INIT.customSchemes.push([scheme, optionalSlashSlash]);
   }
@@ -55589,7 +55777,7 @@ img.ProseMirror-separator {
    * links to find, e.g., 'url' or 'email'
    * @param {Opts} [opts] formatting options for final output. Cannot be specified
    * if opts already provided in `type` argument
-  */
+   */
   function find$1(str, type, opts) {
     if (type === void 0) {
       type = null;
@@ -55609,7 +55797,7 @@ img.ProseMirror-separator {
     const filtered = [];
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
-      if (token.isLink && (!type || token.t === type)) {
+      if (token.isLink && (!type || token.t === type) && options.check(token)) {
         filtered.push(token.toFormattedObject(options));
       }
     }
@@ -56235,7 +56423,7 @@ img.ProseMirror-separator {
   }
 
   const SuggestionPluginKey = new PluginKey('suggestion');
-  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, }) {
+  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch: findSuggestionMatch$1 = findSuggestionMatch, }) {
       let props;
       const renderer = render === null || render === void 0 ? void 0 : render();
       const plugin = new Plugin({
@@ -56349,7 +56537,7 @@ img.ProseMirror-separator {
                           next.active = false;
                       }
                       // Try to match against where our cursor currently is
-                      const match = findSuggestionMatch({
+                      const match = findSuggestionMatch$1({
                           char,
                           allowSpaces,
                           allowedPrefixes,
@@ -57569,13 +57757,97 @@ img.ProseMirror-separator {
     [part='end'] {
         display: contents;
     }
+
+    .listbox {
+        overflow-x: clip;
+    }
+
+    .listbox.empty slot {
+        display: none;
+    }
+
+    .listbox.above {
+        flex-flow: column-reverse;
+    }
+
+    .filter-field {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: ${controlHeight};
+        background: transparent;
+    }
+
+    .filter-field::before {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field.above::before {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-field::after {
+        content: '';
+        position: absolute;
+        height: 0px;
+        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;
+        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});
+    }
+
+    .filter-field:not(.above)::after {
+        width: calc(100% - (2 * ${borderWidth}));
+    }
+
+    .filter-icon {
+        padding-left: ${smallPadding};
+    }
+
+    .filter-input {
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        height: var(--ni-nimble-control-height);
+        padding: 0 ${smallPadding} 0 ${mediumPadding};
+        width: 100%;
+    }
+
+    .filter-input::placeholder {
+        color: ${placeholderFontColor};
+    }
+
+    .filter-input${focusVisible} {
+        outline: 0px;
+    }
+
+    .scrollable-region {
+        overflow: auto;
+    }
+
+    .no-results-label {
+        color: ${placeholderFontColor};
+        height: ${controlHeight};
+        display: inline-flex;
+        align-items: center;
+        padding: ${smallPadding} ${mediumPadding};
+    }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
             :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
+        `), themeBehavior(Theme.color, css `
+            .filter-field,
+            .no-results-label {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
         `));
 
+  /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$l = (context, definition) => html `
     <template
@@ -57584,11 +57856,9 @@ img.ProseMirror-separator {
     x.collapsible && x.open && 'open',
     x.disabled && 'disabled',
     x.collapsible && x.position,
-]
-    .filter(Boolean)
-    .join(' ')}"
-        aria-activedescendant="${x => x.ariaActiveDescendant}"
-        aria-controls="${x => x.ariaControls}"
+].filter(Boolean).join(' ')}"
+        aria-activedescendant="${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}"
+        aria-controls="${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}"
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
@@ -57597,34 +57867,36 @@ img.ProseMirror-separator {
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
+        @change="${x => x.changeValueHandler()}"
+        @contentchange="${x => x.updateDisplayValue()}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
         ${when(x => x.collapsible, html `
-                <div
-                    class="control"
-                    part="control"
-                    ?disabled="${x => x.disabled}"
-                    ${ref('control')}
-                >
-                    ${startSlotTemplate(context, definition)}
-                    <slot name="button-container">
-                        <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
-                            <slot name="selected-value">${x => x.displayValue}</slot>
-                        </div>
-                        <div aria-hidden="true" class="indicator" part="indicator">
-                            <slot name="indicator">
-                                ${definition.indicator || ''}
-                            </slot>
-                        </div>
-                    </slot>
-                    ${endSlotTemplate(context, definition)}
-                </div>
-                `)}
+            <div
+                class="control"
+                part="control"
+                ?disabled="${x => x.disabled}"
+                ${ref('control')}
+            >
+                ${startSlotTemplate(context, definition)}
+                <slot name="button-container">
+                    <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
+                        <slot name="selected-value">${x => x.displayValue}</slot>
+                    </div>
+                    <div aria-hidden="true" class="indicator" part="indicator">
+                        <slot name="indicator">
+                            ${definition.indicator || ''}
+                        </slot>
+                    </div>
+                </slot>
+                ${endSlotTemplate(context, definition)}
+            </div>
+            `)}
         <${anchoredRegionTag}
-            ${ref('region')}
+            ${ref('anchoredRegion')}
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
@@ -57633,93 +57905,766 @@ img.ProseMirror-separator {
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
+            @loaded="${x => x.regionLoadedHandler()}"
             ?hidden="${x => (x.collapsible ? !x.open : false)}">
-            <div
-                class="listbox"
-                id="${x => x.listboxId}"
-                part="listbox"
-                role="listbox"
-                ?disabled="${x => x.disabled}"
-                ${ref('listbox')}
-            >
-                <slot
-                    ${slotted({
+            <div class="listbox-background">
+                <div
+                    class="
+                        listbox 
+                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
+                        ${x => x.positionAttribute}
+                    "
+                    id="${x => x.listboxId}"
+                    part="listbox"
+                    role="listbox"
+                    ?disabled="${x => x.disabled}"
+                    ${ref('listbox')}
+                >
+                    ${when(x => x.filterMode !== FilterMode.none, html `
+                        <div class="filter-field ${x => x.positionAttribute}">
+                            <${iconMagnifyingGlassTag} class="filter-icon"></${iconMagnifyingGlassTag}>
+                            <input
+                                ${ref('filterInput')}
+                                class="filter-input"
+                                aria-controls="${x => x.ariaControls}"
+                                aria-activedescendant="${x => x.ariaActiveDescendant}"
+                                @input="${(x, c) => x.inputHandler(c.event)}"
+                                @click="${(x, c) => x.inputClickHandler(c.event)}"
+                                placeholder="${x => filterSearchLabel.getValueFor(x)}"
+                                value="${x => x.filter}"
+                            />
+                        </div>
+                    `)}
+                    <div ${ref('scrollableRegion')}
+                        class="scrollable-region">
+                        <slot
+                            ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
-                ></slot>
+                        ></slot>
+                    </div>
+                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html `
+                        <span class="no-results-label ${x => x.positionAttribute}">
+                            ${x => filterNoResultsLabel.getValueFor(x)}
+                        </span>
+                    `)}
+                </div>
             </div>
         </${anchoredRegionTag}>
     </template>
 `;
 
+  // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts
+  /* eslint-disable max-classes-per-file */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  let Select$1 = class Select extends ListboxElement {
+  };
+  /**
+   * A form-associated base class for the Select component. This was copied from the
+   * FAST FormAssociatedSelect (which is not exported by fast-foundation)
+   *
+   * @internal
+   */
+  class FormAssociatedSelect extends FormAssociated(Select$1) {
+      constructor() {
+          super(...arguments);
+          this.proxy = document.createElement('select');
+      }
+  }
+
   /**
-   * A nimble-styled HTML select
+   * A nimble-styled HTML select.
    */
-  class Select extends Select$1 {
+  class Select extends FormAssociatedSelect {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          this.filterMode = FilterMode.none;
+          /**
+           * @internal
+           */
+          this.open = false;
+          /**
+           * The unique id for the internal listbox element.
+           *
+           * @internal
+           */
+          this.listboxId = uniqueId('listbox-');
           /** @internal */
           this.hasOverflow = false;
+          /**
+           * @internal
+           */
+          this.filteredOptions = [];
+          /**
+           * @internal
+           */
+          this.filter = '';
+          /**
+           * @internal
+           */
+          this.committedSelectedOption = undefined;
+          /**
+           * The max height for the listbox when opened.
+           *
+           * @internal
+           */
+          this.maxHeight = 0;
+          this._value = '';
+          this.forcedPosition = false;
+      }
+      /**
+       * The component is collapsible when in single-selection mode with no size attribute.
+       *
+       * @internal
+       */
+      get collapsible() {
+          return !(this.multiple || typeof this.size === 'number');
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.forcedPosition = !!this.positionAttribute;
+          this.initializeOpenState();
+      }
+      /**
+       * The list of options. This mirrors FAST's override implementation for this
+       * member for the Combobox to support a filtered list in the dropdown.
+       *
+       * @public
+       * @remarks
+       * Overrides `Listbox.options`.
+       */
+      get options() {
+          Observable.track(this, 'options');
+          return this.filteredOptions?.length
+              ? this.filteredOptions
+              : this._options;
+      }
+      set options(value) {
+          this._options = value;
+          Observable.notify(this, 'options');
+      }
+      get value() {
+          Observable.track(this, 'value');
+          return this._value;
+      }
+      set value(next) {
+          const prev = this._value;
+          let newValue = next;
+          // use 'options' here instead of '_options' as 'selectedIndex' may be relative
+          // to filtered set
+          if (this.options?.length) {
+              const newValueIndex = this.options.findIndex(el => el.value === newValue);
+              const prevSelectedValue = this.options[this.selectedIndex]?.value ?? null;
+              const nextSelectedValue = this.options[newValueIndex]?.value ?? null;
+              if (newValueIndex === -1
+                  || prevSelectedValue !== nextSelectedValue) {
+                  newValue = '';
+                  this.selectedIndex = newValueIndex;
+              }
+              newValue = this.firstSelectedOption?.value ?? newValue;
+          }
+          if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+              this._value = newValue;
+              super.valueChanged(prev, newValue);
+              if (!this.open) {
+                  this.committedSelectedOption = this._options.find(o => o.value === newValue);
+              }
+              Observable.notify(this, 'value');
+              if (this.collapsible) {
+                  Observable.notify(this, 'displayValue');
+              }
+          }
+      }
+      /**
+       * @internal
+       */
+      get displayValue() {
+          Observable.track(this, 'displayValue');
+          return this.committedSelectedOption?.text ?? '';
+      }
+      /**
+       * @internal
+       */
+      anchoredRegionChanged(_prev, _next) {
+          if (this.anchoredRegion && this.control) {
+              this.anchoredRegion.anchorElement = this.control;
+          }
+      }
+      /**
+       * @internal
+       */
+      controlChanged(_prev, _next) {
+          if (this.anchoredRegion && this.control) {
+              this.anchoredRegion.anchorElement = this.control;
+          }
+      }
+      /**
+       * @internal
+       */
+      slottedOptionsChanged(prev, next) {
+          const value = this.value;
+          this._options.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.unsubscribe(this, 'value');
+          });
+          super.slottedOptionsChanged(prev, next);
+          this._options.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.subscribe(this, 'value');
+          });
+          this.setProxyOptions();
+          this.updateValue();
+          // We need to force an update to the filteredOptions observable
+          // (by calling 'filterOptions()) so that the template correctly updates.
+          this.filterOptions();
+          if (value) {
+              this.value = value;
+          }
+          this.committedSelectedOption = this.options[this.selectedIndex];
+      }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          // do nothing if the select is disabled
+          if (this.disabled) {
+              return;
+          }
+          if (this.open) {
+              const captured = e.target.closest('option,[role=option]');
+              if (!captured?.disabled) {
+                  this.updateSelectedIndexFromFilteredSet();
+              }
+              if (captured?.disabled) {
+                  return;
+              }
+          }
+          super.clickHandler(e);
+          this.open = this.collapsible && !this.open;
+          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+              this.updateValue(true);
+          }
+      }
+      /**
+       * Updates the value when an option's value changes.
+       *
+       * @param source - the source object
+       * @param propertyName - the property to evaluate
+       *
+       * @internal
+       * @override
+       */
+      handleChange(source, propertyName) {
+          super.handleChange(source, propertyName);
+          if (propertyName === 'value') {
+              this.updateValue();
+          }
+      }
+      /**
+       * Prevents focus when size is set and a scrollbar is clicked.
+       *
+       * @param e - the mouse event object
+       *
+       * @override
+       * @internal
+       */
+      mousedownHandler(e) {
+          if (e.offsetX >= 0 && e.offsetX <= this.listbox?.scrollWidth) {
+              return super.mousedownHandler(e);
+          }
+          return this.collapsible;
+      }
+      /**
+       * @internal
+       */
+      regionLoadedHandler() {
+          this.focusAndScrollOptionIntoView();
+      }
+      /**
+       * Sets the multiple property on the proxy element.
+       *
+       * @param prev - the previous multiple value
+       * @param next - the current multiple value
+       */
+      multipleChanged(prev, next) {
+          super.multipleChanged(prev, next);
+          if (this.proxy) {
+              this.proxy.multiple = next;
+          }
+      }
+      /**
+       * @internal
+       */
+      inputClickHandler(e) {
+          e.stopPropagation(); // clicking in filter input shouldn't close dropdown
+      }
+      /**
+       * @internal
+       */
+      changeValueHandler() {
+          this.committedSelectedOption = this.options.find(option => option.selected);
+      }
+      /**
+       * @internal
+       */
+      updateDisplayValue() {
+          if (this.collapsible) {
+              Observable.notify(this, 'displayValue');
+          }
+      }
+      /**
+       * Handle content changes on the control input.
+       *
+       * @param e - the input event
+       * @internal
+       */
+      inputHandler(e) {
+          this.filter = this.filterInput?.value ?? '';
+          if (!this.committedSelectedOption) {
+              this.committedSelectedOption = this._options.find(option => option.selected);
+          }
+          this.clearSelection();
+          this.filterOptions();
+          if (this.filteredOptions.length > 0
+              && this.committedSelectedOption
+              && !this.filteredOptions.includes(this.committedSelectedOption)) {
+              const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+              if (enabledOptions.length > 0) {
+                  enabledOptions[0].selected = true;
+              }
+              else {
+                  // only filtered option is disabled
+                  this.selectedOptions = [];
+                  this.selectedIndex = -1;
+              }
+          }
+          else if (this.committedSelectedOption) {
+              this.committedSelectedOption.selected = true;
+          }
+          if (e.inputType.includes('deleteContent') || !this.filter.length) {
+              return true;
+          }
+          e.stopPropagation();
+          return true;
+      }
+      /**
+       * @internal
+       */
+      focusoutHandler(e) {
+          this.updateSelectedIndexFromFilteredSet();
+          super.focusoutHandler(e);
+          if (!this.open) {
+              return true;
+          }
+          const focusTarget = e.relatedTarget;
+          if (this.isSameNode(focusTarget)) {
+              this.focus();
+              return true;
+          }
+          if (!this.options?.includes(focusTarget)) {
+              this.open = false;
+              if (this.indexWhenOpened !== this.selectedIndex) {
+                  this.updateValue(true);
+              }
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
+      keydownHandler(e) {
+          super.keydownHandler(e);
+          const key = e.key;
+          if (e.ctrlKey || e.shiftKey) {
+              return true;
+          }
+          switch (key) {
+              case keySpace: {
+                  // when dropdown is open allow user to enter a space for filter text
+                  if (this.open && this.filterMode !== FilterMode.none) {
+                      break;
+                  }
+                  e.preventDefault();
+                  if (this.collapsible && this.typeAheadExpired) {
+                      this.open = !this.open;
+                  }
+                  if (!this.open) {
+                      this.focus();
+                  }
+                  break;
+              }
+              case keyHome:
+              case keyEnd: {
+                  e.preventDefault();
+                  break;
+              }
+              case keyEnter: {
+                  e.preventDefault();
+                  if (this.filteredOptions.length === 0
+                      || this.filteredOptions.every(o => o.disabled)) {
+                      return false;
+                  }
+                  this.updateSelectedIndexFromFilteredSet();
+                  this.open = !this.open;
+                  if (!this.open) {
+                      this.focus();
+                  }
+                  break;
+              }
+              case keyEscape: {
+                  // clear filter as update to "selectedIndex" will result in processing
+                  // "options" and not "_options"
+                  this.filter = '';
+                  if (this.committedSelectedOption) {
+                      this.clearSelection();
+                      this.selectedIndex = this._options.indexOf(this.committedSelectedOption);
+                  }
+                  if (this.collapsible && this.open) {
+                      e.preventDefault();
+                      this.open = false;
+                  }
+                  // reset 'selected' state otherwise the selected state doesn't stick.
+                  const selectedOption = this._options[this.selectedIndex];
+                  if (selectedOption) {
+                      selectedOption.selected = true;
+                  }
+                  this.focus();
+                  break;
+              }
+              case keyTab: {
+                  if (this.collapsible && this.open) {
+                      e.preventDefault();
+                      this.open = false;
+                  }
+                  return true;
+              }
+          }
+          if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
+              this.updateValue(true);
+              this.indexWhenOpened = this.selectedIndex;
+          }
+          return !(key === keyArrowDown || key === keyArrowUp);
+      }
+      /**
+       * Updates the proxy value when the selected index changes.
+       *
+       * @param prev - the previous selected index
+       * @param next - the next selected index
+       *
+       * @internal
+       */
+      selectedIndexChanged(prev, next) {
+          super.selectedIndexChanged(prev, next);
+          this.updateValue();
+      }
+      /**
+       * Synchronize the `aria-disabled` property when the `disabled` property changes.
+       *
+       * @param prev - The previous disabled value
+       * @param next - The next disabled value
+       *
+       * @internal
+       */
+      disabledChanged(prev, next) {
+          if (super.disabledChanged) {
+              super.disabledChanged(prev, next);
+          }
+          this.ariaDisabled = this.disabled ? 'true' : 'false';
+      }
+      /**
+       * Reset the element to its first selectable option when its parent form is reset.
+       *
+       * @internal
+       */
+      formResetCallback() {
+          this.setProxyOptions();
+          // Call the base class's implementation setDefaultSelectedOption instead of the select's
+          // override, in order to reset the selectedIndex without using the value property.
+          super.setDefaultSelectedOption();
+          if (this.selectedIndex === -1) {
+              this.selectedIndex = 0;
+          }
+      }
+      // Prevents parent classes from resetting selectedIndex to a positive
+      // value while filtering, which can result in a disabled option being
+      // selected.
+      setSelectedOptions() {
+          if (this.open && this.selectedIndex === -1) {
+              return;
+          }
+          super.setSelectedOptions();
+      }
+      focusAndScrollOptionIntoView() {
+          super.focusAndScrollOptionIntoView();
+          if (this.open) {
+              window.requestAnimationFrame(() => {
+                  this.filterInput?.focus();
+              });
+          }
+      }
+      positionChanged(_, next) {
+          this.positionAttribute = next;
+          this.setPositioning();
+      }
+      /**
+       * Updates the proxy's size property when the size attribute changes.
+       *
+       * @param prev - the previous size
+       * @param next - the current size
+       *
+       * @override
+       * @internal
+       */
+      sizeChanged(prev, next) {
+          super.sizeChanged(prev, next);
+          if (this.proxy) {
+              this.proxy.size = next;
+          }
+      }
+      openChanged() {
+          if (!this.collapsible) {
+              return;
+          }
+          if (this.open) {
+              this.initializeOpenState();
+              this.indexWhenOpened = this.selectedIndex;
+              return;
+          }
+          this.filter = '';
+          if (this.filterInput) {
+              this.filterInput.value = '';
+          }
+          this.ariaControls = '';
+          this.ariaExpanded = 'false';
+      }
+      /**
+       * Updates the selectedness of each option when the list of selected options changes.
+       *
+       * @param prev - the previous list of selected options
+       * @param next - the current list of selected options
+       *
+       * @override
+       * @internal
+       */
+      selectedOptionsChanged(prev, next) {
+          super.selectedOptionsChanged(prev, next);
+          this.options?.forEach((o, i) => {
+              const proxyOption = this.proxy?.options.item(i);
+              if (proxyOption) {
+                  proxyOption.selected = o.selected;
+              }
+          });
+      }
+      /**
+       * Sets the selected index to match the first option with the selected attribute, or
+       * the first selectable option.
+       *
+       * @override
+       * @internal
+       */
+      setDefaultSelectedOption() {
+          const options = this.options
+              ?? Array.from(this.children).filter(o => Listbox$1.slottedOptionFilter(o));
+          const selectedIndex = options?.findIndex(el => el.hasAttribute('selected')
+              || el.selected
+              || el.value === this.value);
+          if (selectedIndex !== -1) {
+              this.selectedIndex = selectedIndex;
+              return;
+          }
+          this.selectedIndex = 0;
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5123
       setPositioning() {
           if (!this.$fastController.isConnected) {
               // Don't call setPositioning() until we're connected,
               // since this.forcedPosition isn't initialized yet.
               return;
           }
-          super.setPositioning();
+          const currentBox = this.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+          const availableBottom = viewportHeight - currentBox.bottom;
+          if (this.forcedPosition) {
+              this.position = this.positionAttribute;
+          }
+          else if (currentBox.top > availableBottom) {
+              this.position = SelectPosition.above;
+          }
+          else {
+              this.position = SelectPosition.below;
+          }
+          this.positionAttribute = this.forcedPosition
+              ? this.positionAttribute
+              : this.position;
+          this.maxHeight = this.position === SelectPosition.above
+              ? Math.trunc(currentBox.top)
+              : Math.trunc(availableBottom);
           this.updateListboxMaxHeightCssVariable();
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5773
-      slottedOptionsChanged(prev, next) {
-          const value = this.value;
-          super.slottedOptionsChanged(prev, next);
-          if (value) {
-              this.value = value;
+      /**
+       * Filter available options by text value.
+       *
+       * @public
+       */
+      filterOptions() {
+          const filter = this.filter.toLowerCase();
+          if (filter) {
+              this.filteredOptions = this._options.filter(option => {
+                  return diacriticInsensitiveStringNormalizer(option.text).includes(diacriticInsensitiveStringNormalizer(filter));
+              });
           }
+          else {
+              this.filteredOptions = this._options;
+          }
+          this._options.forEach(o => {
+              o.hidden = !this.filteredOptions.includes(o);
+          });
       }
-      regionChanged(_prev, _next) {
-          if (this.region && this.control) {
-              this.region.anchorElement = this.control;
+      /**
+       * Sets the value and display value to match the first selected option.
+       *
+       * @param shouldEmit - if true, the input and change events will be emitted
+       *
+       * @internal
+       */
+      updateValue(shouldEmit) {
+          if (this.$fastController.isConnected) {
+              this.value = this.firstSelectedOption?.value ?? '';
+          }
+          if (shouldEmit) {
+              this.$emit('input');
+              this.$emit('change', this, {
+                  bubbles: true,
+                  composed: undefined
+              });
           }
       }
-      controlChanged(_prev, _next) {
-          if (this.region && this.control) {
-              this.region.anchorElement = this.control;
+      /**
+       * Resets and fills the proxy to match the component's options.
+       *
+       * @internal
+       */
+      setProxyOptions() {
+          if (this.proxy instanceof HTMLSelectElement && this.options) {
+              this.proxy.options.length = 0;
+              this.options.forEach(option => {
+                  const proxyOption = option.proxy
+                      || (option instanceof HTMLOptionElement
+                          ? option.cloneNode()
+                          : null);
+                  if (proxyOption) {
+                      this.proxy.options.add(proxyOption);
+                  }
+              });
           }
       }
+      clearSelection() {
+          this.options.forEach(option => {
+              option.selected = false;
+          });
+      }
+      filterChanged() {
+          this.filterOptions();
+      }
       maxHeightChanged() {
           this.updateListboxMaxHeightCssVariable();
       }
+      initializeOpenState() {
+          if (!this.open) {
+              this.ariaExpanded = 'false';
+              this.ariaControls = '';
+              return;
+          }
+          this.committedSelectedOption = this._options[this.selectedIndex];
+          this.ariaControls = this.listboxId;
+          this.ariaExpanded = 'true';
+          this.setPositioning();
+          this.focusAndScrollOptionIntoView();
+      }
       updateListboxMaxHeightCssVariable() {
           if (this.listbox) {
               this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
           }
       }
+      updateSelectedIndexFromFilteredSet() {
+          const selectedItem = this.filteredOptions.length > 0
+              ? this.options[this.selectedIndex]
+                  ?? this.committedSelectedOption
+              : this.committedSelectedOption;
+          if (!selectedItem) {
+              return;
+          }
+          // Clear filter so any logic resolving against 'this.options' resolves against all options,
+          // since selectedIndex should be relative to entire set.
+          this.filter = '';
+          // translate selectedIndex for filtered list to selectedIndex for all items
+          this.selectedIndex = this._options.indexOf(selectedItem);
+          // force selected to true again if the selection hasn't actually changed
+          if (selectedItem === this.committedSelectedOption) {
+              selectedItem.selected = true;
+          }
+      }
   }
   __decorate$1([
       attr
   ], Select.prototype, "appearance", void 0);
+  __decorate$1([
+      attr({ attribute: 'position' })
+  ], Select.prototype, "positionAttribute", void 0);
   __decorate$1([
       attr({ attribute: 'error-text' })
   ], Select.prototype, "errorText", void 0);
   __decorate$1([
       attr({ attribute: 'error-visible', mode: 'boolean' })
   ], Select.prototype, "errorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'filter-mode' })
+  ], Select.prototype, "filterMode", void 0);
+  __decorate$1([
+      attr({ attribute: 'open', mode: 'boolean' })
+  ], Select.prototype, "open", void 0);
   __decorate$1([
       observable
-  ], Select.prototype, "region", void 0);
+  ], Select.prototype, "position", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "control", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "scrollableRegion", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filterInput", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "anchoredRegion", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filteredOptions", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "filter", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "committedSelectedOption", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "maxHeight", void 0);
+  __decorate$1([
+      volatile
+  ], Select.prototype, "collapsible", null);
   const nimbleSelect = Select.compose({
       baseName: 'select',
-      baseClass: Select$1,
+      baseClass: Select$2,
       template: template$l,
       styles: styles$o,
       indicator: arrowExpanderDown16X16.data,
@@ -57731,6 +58676,7 @@ img.ProseMirror-separator {
         ${errorTextTemplate}
     `
   });
+  applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
   const styles$n = css `
@@ -58889,7 +59835,7 @@ img.ProseMirror-separator {
         }
         return 0;
       };
-      header.getResizeHandler = () => {
+      header.getResizeHandler = _contextDocument => {
         const column = table.getColumn(header.column.id);
         const canResize = column == null ? void 0 : column.getCanResize();
         return e => {
@@ -58946,11 +59892,12 @@ img.ProseMirror-separator {
               columnSizingStart: []
             }));
           };
+          const contextDocument = _contextDocument || typeof document !== 'undefined' ? document : null;
           const mouseEvents = {
             moveHandler: e => onMove(e.clientX),
             upHandler: e => {
-              document.removeEventListener('mousemove', mouseEvents.moveHandler);
-              document.removeEventListener('mouseup', mouseEvents.upHandler);
+              contextDocument == null || contextDocument.removeEventListener('mousemove', mouseEvents.moveHandler);
+              contextDocument == null || contextDocument.removeEventListener('mouseup', mouseEvents.upHandler);
               onEnd(e.clientX);
             }
           };
@@ -58965,8 +59912,8 @@ img.ProseMirror-separator {
             },
             upHandler: e => {
               var _e$touches$;
-              document.removeEventListener('touchmove', touchEvents.moveHandler);
-              document.removeEventListener('touchend', touchEvents.upHandler);
+              contextDocument == null || contextDocument.removeEventListener('touchmove', touchEvents.moveHandler);
+              contextDocument == null || contextDocument.removeEventListener('touchend', touchEvents.upHandler);
               if (e.cancelable) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -58978,11 +59925,11 @@ img.ProseMirror-separator {
             passive: false
           } : false;
           if (isTouchStartEvent(e)) {
-            document.addEventListener('touchmove', touchEvents.moveHandler, passiveIfSupported);
-            document.addEventListener('touchend', touchEvents.upHandler, passiveIfSupported);
+            contextDocument == null || contextDocument.addEventListener('touchmove', touchEvents.moveHandler, passiveIfSupported);
+            contextDocument == null || contextDocument.addEventListener('touchend', touchEvents.upHandler, passiveIfSupported);
           } else {
-            document.addEventListener('mousemove', mouseEvents.moveHandler, passiveIfSupported);
-            document.addEventListener('mouseup', mouseEvents.upHandler, passiveIfSupported);
+            contextDocument == null || contextDocument.addEventListener('mousemove', mouseEvents.moveHandler, passiveIfSupported);
+            contextDocument == null || contextDocument.addEventListener('mouseup', mouseEvents.upHandler, passiveIfSupported);
           }
           table.setColumnSizingInfo(old => ({
             ...old,
@@ -61638,7 +62585,8 @@ img.ProseMirror-separator {
 
   const TableRecordDelayedHierarchyState = {
       none: undefined,
-      canLoadChildren: 'canLoadChildren'
+      canLoadChildren: 'canLoadChildren',
+      loadingChildren: 'loadingChildren'
   };
   /**
    * The possible directions a table column can be sorted in.
@@ -62482,6 +63430,21 @@ img.ProseMirror-separator {
     }
 
     .expand-collapse-button {
+        flex: 0 0 auto;
+        padding-left: calc(
+            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
+                ${controlHeight}
+        );
+    }
+
+    .spinner-container {
+        flex: 0 0 auto;
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+        align-self: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         padding-left: calc(
             ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
                 ${controlHeight}
@@ -62489,6 +63452,7 @@ img.ProseMirror-separator {
     }
 
     .row-operations-container {
+        flex: 0 0 auto;
         display: flex;
     }
 
@@ -62685,17 +63649,29 @@ img.ProseMirror-separator {
         `)}
         <span class="row-front-spacer ${x => (x.isTopLevelParentRow ? 'top-level-parent' : '')}"></span>
         ${when(x => x.isParentRow, html `
-            <${buttonTag}
-                appearance="${ButtonAppearance.ghost}"
-                content-hidden
-                class="expand-collapse-button"
-                tabindex="-1"
-                @click="${(x, c) => x.onRowExpandToggle(c.event)}"
-                title="${x => (x.expanded ? tableRowCollapseLabel.getValueFor(x) : tableRowExpandLabel.getValueFor(x))}"
-                aria-hidden="true"
-            >
-                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
-            </${buttonTag}>
+            ${when(x => x.loading, html `
+                <span class="spinner-container">
+                    <${spinnerTag}
+                        appearance="${SpinnerAppearance.accent}"
+                        aria-label="${x => tableRowLoadingLabel.getValueFor(x)}"
+                        title="${x => tableRowLoadingLabel.getValueFor(x)}"
+                    >
+                    <${spinnerTag}>
+                </span>
+            `)}
+            ${when(x => !x.loading, html `
+                <${buttonTag}
+                    appearance="${ButtonAppearance.ghost}"
+                    content-hidden
+                    class="expand-collapse-button"
+                    tabindex="-1"
+                    @click="${(x, c) => x.onRowExpandToggle(c.event)}"
+                    title="${x => (x.expanded ? tableRowCollapseLabel.getValueFor(x) : tableRowExpandLabel.getValueFor(x))}"
+                    aria-hidden="true"
+                >
+                    <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+                </${buttonTag}>
+            `)}
         `)}
 
         <span ${ref('cellContainer')} 
@@ -62750,6 +63726,7 @@ img.ProseMirror-separator {
           this.isParentRow = false;
           this.menuOpen = false;
           this.rowOperationGridCellHidden = false;
+          this.loading = false;
           /**
            * @internal
            * An array that parallels the `columns` array and contains the indent
@@ -62954,6 +63931,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })
   ], TableRow.prototype, "rowOperationGridCellHidden", void 0);
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], TableRow.prototype, "loading", void 0);
   __decorate$1([
       observable
   ], TableRow.prototype, "cellIndentLevels", void 0);
@@ -63325,6 +64305,7 @@ img.ProseMirror-separator {
                                         :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                         ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
+                                        ?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
@@ -63703,6 +64684,9 @@ img.ProseMirror-separator {
         }
       }
       return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
         return a.end - b.end;
       })[0] : undefined;
     };
@@ -63804,7 +64788,7 @@ img.ProseMirror-separator {
       var itemSize = (_this$itemSizeCache$g = _this.itemSizeCache.get(item.key)) != null ? _this$itemSizeCache$g : item.size;
       var delta = size - itemSize;
       if (delta !== 0) {
-        if (item.start < _this.scrollOffset) {
+        if (item.start < _this.scrollOffset + _this.scrollAdjustments) {
           if (_this.options.debug) {
             console.info('correction', delta);
           }
@@ -63962,8 +64946,19 @@ img.ProseMirror-separator {
       });
     };
     this.getTotalSize = function () {
-      var _this$getMeasurements;
-      return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) - _this.options.scrollMargin + _this.options.paddingEnd;
+      var measurements = _this.getMeasurements();
+      var end;
+      // If there are no measurements, set the end to paddingStart
+      if (measurements.length === 0) {
+        end = _this.options.paddingStart;
+      } else {
+        var _measurements$end, _measurements;
+        // If lanes is 1, use the last measurement's end, otherwise find the maximum end value among all measurements
+        end = _this.options.lanes === 1 ? (_measurements$end = (_measurements = measurements[measurements.length - 1]) == null ? void 0 : _measurements.end) != null ? _measurements$end : 0 : Math.max.apply(Math, measurements.slice(-_this.options.lanes).map(function (m) {
+          return m.end;
+        }));
+      }
+      return end - _this.options.scrollMargin + _this.options.paddingEnd;
     };
     this._scrollToOffset = function (offset, _ref8) {
       var adjustments = _ref8.adjustments,
@@ -65038,12 +66033,19 @@ img.ProseMirror-separator {
       setHierarchyEnabled(isHierarchyEnabled) {
           this.isHierarchyEnabled = isHierarchyEnabled;
       }
-      canLoadDelayedChildren(id) {
+      isLoadingChildren(id) {
           if (!this.isHierarchyEnabled) {
               return false;
           }
           return (this.hierarchyOptions.get(id)?.delayedHierarchyState
-              === TableRecordDelayedHierarchyState.canLoadChildren ?? false);
+              === TableRecordDelayedHierarchyState.loadingChildren ?? false);
+      }
+      canLoadDelayedChildren(id) {
+          if (!this.isHierarchyEnabled) {
+              return false;
+          }
+          const delayedHierarchyState = this.hierarchyOptions.get(id)?.delayedHierarchyState;
+          return delayedHierarchyState !== TableRecordDelayedHierarchyState.none;
       }
   }
 
@@ -65666,7 +66668,8 @@ img.ProseMirror-separator {
                       : row.depth,
                   isParentRow: isParent,
                   immediateChildCount: row.subRows.length,
-                  groupColumn: this.getGroupRowColumn(row)
+                  groupColumn: this.getGroupRowColumn(row),
+                  isLoadingChildren: this.expansionManager.isLoadingChildren(row.id)
               };
               hasDataHierarchy = hasDataHierarchy || isParent;
               return rowState;