@ni/ok-components 0.3.3 → 0.3.5

package/dist/all-components-bundle.js

@@ -16487,7 +16487,7 @@
   createThemeColorToken(tokenNames.headerBackgroundColor, tokenValues.headerBackgroundColor);
   createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
   const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
-  createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
+  const dividerBackgroundColor = createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
   createThemeColorToken(tokenNames.dividerBackgroundDynamicColor, tokenValues.dividerBackgroundDynamicColor);
   const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
   const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
@@ -40793,8 +40793,13 @@ so this becomes the fallback color for the slot */ ''}
               for (let node of added)
                   if (node.nodeName == "BR" && node.parentNode) {
                       let after = node.nextSibling;
-                      if (after && after.nodeType == 1 && after.contentEditable == "false")
-                          node.parentNode.removeChild(node);
+                      while (after && after.nodeType == 1) {
+                          if (after.contentEditable == "false") {
+                              node.parentNode.removeChild(node);
+                              break;
+                          }
+                          after = after.firstChild;
+                      }
                   }
           }
           else if (gecko && added.length) {
@@ -41632,12 +41637,12 @@ so this becomes the fallback color for the slot */ ''}
       }
       updateDraggedNode(dragging, prev) {
           let sel = dragging.node, found = -1;
-          if (this.state.doc.nodeAt(sel.from) == sel.node) {
+          if (sel.from < this.state.doc.content.size && this.state.doc.nodeAt(sel.from) == sel.node) {
               found = sel.from;
           }
           else {
               let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
-              let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
+              let moved = movedPos > 0 && movedPos < this.state.doc.content.size && this.state.doc.nodeAt(movedPos);
               if (moved == sel.node)
                   found = movedPos;
           }
@@ -43509,6 +43514,67 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // src/utilities/mergeAttributes.ts
+  function splitStyleDeclarations(styles) {
+    const result = [];
+    let current = "";
+    let inSingleQuote = false;
+    let inDoubleQuote = false;
+    let parenDepth = 0;
+    const length = styles.length;
+    for (let i = 0; i < length; i += 1) {
+      const char = styles[i];
+      if (char === "'" && !inDoubleQuote) {
+        inSingleQuote = !inSingleQuote;
+        current += char;
+        continue;
+      }
+      if (char === '"' && !inSingleQuote) {
+        inDoubleQuote = !inDoubleQuote;
+        current += char;
+        continue;
+      }
+      if (!inSingleQuote && !inDoubleQuote) {
+        if (char === "(") {
+          parenDepth += 1;
+          current += char;
+          continue;
+        }
+        if (char === ")" && parenDepth > 0) {
+          parenDepth -= 1;
+          current += char;
+          continue;
+        }
+        if (char === ";" && parenDepth === 0) {
+          result.push(current);
+          current = "";
+          continue;
+        }
+      }
+      current += char;
+    }
+    if (current) {
+      result.push(current);
+    }
+    return result;
+  }
+  function parseStyleEntries(styles) {
+    const pairs = [];
+    const declarations = splitStyleDeclarations(styles || "");
+    const numDeclarations = declarations.length;
+    for (let i = 0; i < numDeclarations; i += 1) {
+      const declaration = declarations[i];
+      const firstColonIndex = declaration.indexOf(":");
+      if (firstColonIndex === -1) {
+        continue;
+      }
+      const property = declaration.slice(0, firstColonIndex).trim();
+      const value = declaration.slice(firstColonIndex + 1).trim();
+      if (property && value) {
+        pairs.push([property, value]);
+      }
+    }
+    return pairs;
+  }
   function mergeAttributes(...objects) {
     return objects.filter((item) => !!item).reduce((items, item) => {
       const mergedAttributes = { ...items };
@@ -43524,17 +43590,7 @@ so this becomes the fallback color for the slot */ ''}
           const insertClasses = valueClasses.filter((valueClass) => !existingClasses.includes(valueClass));
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(" ");
         } else if (key === "style") {
-          const newStyles = value ? value.split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-          const existingStyles = mergedAttributes[key] ? mergedAttributes[key].split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-          const styleMap = /* @__PURE__ */ new Map();
-          existingStyles.forEach((style2) => {
-            const [property, val] = style2.split(":").map((part) => part.trim());
-            styleMap.set(property, val);
-          });
-          newStyles.forEach((style2) => {
-            const [property, val] = style2.split(":").map((part) => part.trim());
-            styleMap.set(property, val);
-          });
+          const styleMap = new Map([...parseStyleEntries(mergedAttributes[key]), ...parseStyleEntries(value)]);
           mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join("; ");
         } else {
           mergedAttributes[key] = value;
@@ -44121,7 +44177,7 @@ so this becomes the fallback color for the slot */ ''}
         return true;
       }
       if (node.isText) {
-        return /^\s*$/m.test((_a = node.text) != null ? _a : "");
+        return !/\S/.test((_a = node.text) != null ? _a : "");
       }
     }
     if (node.isText) {
@@ -47506,17 +47562,21 @@ ${renderedContent}
     const prefix = typeof prefixOrGenerator === "function" ? prefixOrGenerator(ctx) : prefixOrGenerator;
     const [content, ...children] = node.content;
     const mainContent = h2.renderChildren([content]);
-    const output = [`${prefix}${mainContent}`];
+    let output = `${prefix}${mainContent}`;
     if (children && children.length > 0) {
-      children.forEach((child) => {
-        const childContent = h2.renderChildren([child]);
-        if (childContent) {
-          const indentedChild = childContent.split("\n").map((line) => line ? h2.indent(line) : "").join("\n");
-          output.push(indentedChild);
+      children.forEach((child, index) => {
+        var _a, _b;
+        const childContent = (_b = (_a = h2.renderChild) == null ? void 0 : _a.call(h2, child, index + 1)) != null ? _b : h2.renderChildren([child]);
+        if (childContent !== void 0 && childContent !== null) {
+          const indentedChild = childContent.split("\n").map((line) => line ? h2.indent(line) : h2.indent("")).join("\n");
+          output += child.type === "paragraph" ? `
+
+${indentedChild}` : `
+${indentedChild}`;
         }
       });
     }
-    return output.join("\n");
+    return output;
   }
 
   // src/MarkView.ts
@@ -58373,6 +58433,12 @@ ${renderedContent}
     parseMarkdown: (token, helpers) => {
       return helpers.applyMark("bold", helpers.parseInline(token.tokens || []));
     },
+    markdownOptions: {
+      htmlReopen: {
+        open: "<strong>",
+        close: "</strong>"
+      }
+    },
     renderMarkdown: (node, h) => {
       return `**${h.renderChildren(node)}**`;
     },
@@ -58490,6 +58556,12 @@ ${renderedContent}
     parseMarkdown: (token, helpers) => {
       return helpers.applyMark("italic", helpers.parseInline(token.tokens || []));
     },
+    markdownOptions: {
+      htmlReopen: {
+        open: "<em>",
+        close: "</em>"
+      }
+    },
     renderMarkdown: (node, h) => {
       return `*${h.renderChildren(node)}*`;
     },
@@ -60796,14 +60868,16 @@ ${renderedContent}
     },
     markdownTokenName: "list_item",
     parseMarkdown: (token, helpers) => {
+      var _a;
       if (token.type !== "list_item") {
         return [];
       }
+      const parseBlockChildren = (_a = helpers.parseBlockChildren) != null ? _a : helpers.parseChildren;
       let content = [];
       if (token.tokens && token.tokens.length > 0) {
         const hasParagraphTokens = token.tokens.some((t) => t.type === "paragraph");
         if (hasParagraphTokens) {
-          content = helpers.parseChildren(token.tokens);
+          content = parseBlockChildren(token.tokens);
         } else {
           const firstToken = token.tokens[0];
           if (firstToken && firstToken.type === "text" && firstToken.tokens && firstToken.tokens.length > 0) {
@@ -60816,11 +60890,11 @@ ${renderedContent}
             ];
             if (token.tokens.length > 1) {
               const remainingTokens = token.tokens.slice(1);
-              const additionalContent = helpers.parseChildren(remainingTokens);
+              const additionalContent = parseBlockChildren(remainingTokens);
               content.push(...additionalContent);
             }
           } else {
-            content = helpers.parseChildren(token.tokens);
+            content = parseBlockChildren(token.tokens);
           }
         }
       }
@@ -62329,13 +62403,16 @@ ${nextLine.slice(indentLevel + 2)}`;
       }
       return helpers.createNode("paragraph", void 0, content);
     },
-    renderMarkdown: (node, h) => {
+    renderMarkdown: (node, h, ctx) => {
+      var _a, _b;
       if (!node) {
         return "";
       }
       const content = Array.isArray(node.content) ? node.content : [];
       if (content.length === 0) {
-        return EMPTY_PARAGRAPH_MARKDOWN;
+        const previousContent = Array.isArray((_a = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _a.content) ? ctx.previousNode.content : [];
+        const previousNodeIsEmptyParagraph = ((_b = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _b.type) === "paragraph" && previousContent.length === 0;
+        return previousNodeIsEmptyParagraph ? EMPTY_PARAGRAPH_MARKDOWN : "";
       }
       return h.renderChildren(content);
     },
@@ -62553,7 +62630,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       */
       static valid($pos) {
           let parent = $pos.parent;
-          if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos))
+          if (parent.inlineContent || !closedBefore($pos) || !closedAfter($pos))
               return false;
           let override = parent.type.spec.allowGapCursor;
           if (override != null)
@@ -63582,6 +63659,9 @@ ${nextLine.slice(indentLevel + 2)}`;
               doc.descendants((node, pos) => {
                 const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
                 const isEmpty = !node.isLeaf && isNodeEmpty(node);
+                if (!node.type.isTextblock) {
+                  return this.options.includeChildren;
+                }
                 if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                   const classes = [this.options.emptyNodeClass];
                   if (isEmptyDoc) {
@@ -72382,7 +72462,7 @@ focus outline in that case.
       this.scrollElement = null;
       this.targetWindow = null;
       this.isScrolling = false;
-      this.currentScrollToIndex = null;
+      this.scrollState = null;
       this.measurementsCache = [];
       this.itemSizeCache = /* @__PURE__ */ new Map();
       this.laneAssignments = /* @__PURE__ */ new Map();
@@ -72395,6 +72475,10 @@ focus outline in that case.
       this.scrollDirection = null;
       this.scrollAdjustments = 0;
       this.elementsCache = /* @__PURE__ */ new Map();
+      this.now = () => {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
+      };
       this.observer = /* @__PURE__ */ (() => {
         let _ro = null;
         const get = () => {
@@ -72407,7 +72491,18 @@ focus outline in that case.
           return _ro = new this.targetWindow.ResizeObserver((entries) => {
             entries.forEach((entry) => {
               const run = () => {
-                this._measureElement(entry.target, entry);
+                const node = entry.target;
+                const index = this.indexFromElement(node);
+                if (!node.isConnected) {
+                  this.observer.unobserve(node);
+                  return;
+                }
+                if (this.shouldMeasureDuringScroll(index)) {
+                  this.resizeItem(
+                    index,
+                    this.options.measureElement(node, entry, this)
+                  );
+                }
               };
               this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
             });
@@ -72492,6 +72587,11 @@ focus outline in that case.
         this.unsubs.filter(Boolean).forEach((d) => d());
         this.unsubs = [];
         this.observer.disconnect();
+        if (this.rafId != null && this.targetWindow) {
+          this.targetWindow.cancelAnimationFrame(this.rafId);
+          this.rafId = null;
+        }
+        this.scrollState = null;
         this.scrollElement = null;
         this.targetWindow = null;
       };
@@ -72530,6 +72630,9 @@ focus outline in that case.
               this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
               this.scrollOffset = offset;
               this.isScrolling = isScrolling;
+              if (this.scrollState) {
+                this.scheduleScrollReconcile();
+              }
               this.maybeNotify();
             })
           );
@@ -72539,6 +72642,7 @@ focus outline in that case.
           });
         }
       };
+      this.rafId = null;
       this.getSize = () => {
         if (!this.options.enabled) {
           this.scrollRect = null;
@@ -72757,13 +72861,38 @@ focus outline in that case.
         }
         return parseInt(indexStr, 10);
       };
-      this._measureElement = (node, entry) => {
-        const index = this.indexFromElement(node);
-        const item = this.measurementsCache[index];
-        if (!item) {
+      this.shouldMeasureDuringScroll = (index) => {
+        var _a;
+        if (!this.scrollState || this.scrollState.behavior !== "smooth") {
+          return true;
+        }
+        const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
+        if (scrollIndex !== void 0 && this.range) {
+          const bufferSize = Math.max(
+            this.options.overscan,
+            Math.ceil((this.range.endIndex - this.range.startIndex) / 2)
+          );
+          const minIndex = Math.max(0, scrollIndex - bufferSize);
+          const maxIndex = Math.min(
+            this.options.count - 1,
+            scrollIndex + bufferSize
+          );
+          return index >= minIndex && index <= maxIndex;
+        }
+        return true;
+      };
+      this.measureElement = (node) => {
+        if (!node) {
+          this.elementsCache.forEach((cached, key2) => {
+            if (!cached.isConnected) {
+              this.observer.unobserve(cached);
+              this.elementsCache.delete(key2);
+            }
+          });
           return;
         }
-        const key = item.key;
+        const index = this.indexFromElement(node);
+        const key = this.options.getItemKey(index);
         const prevNode = this.elementsCache.get(key);
         if (prevNode !== node) {
           if (prevNode) {
@@ -72772,19 +72901,18 @@ focus outline in that case.
           this.observer.observe(node);
           this.elementsCache.set(key, node);
         }
-        if (node.isConnected) {
-          this.resizeItem(index, this.options.measureElement(node, entry, this));
+        if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) {
+          this.resizeItem(index, this.options.measureElement(node, void 0, this));
         }
       };
       this.resizeItem = (index, size) => {
+        var _a;
         const item = this.measurementsCache[index];
-        if (!item) {
-          return;
-        }
+        if (!item) return;
         const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
         const delta = size - itemSize;
         if (delta !== 0) {
-          if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
+          if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
             if (this.options.debug) {
               console.info("correction", delta);
             }
@@ -72798,18 +72926,6 @@ focus outline in that case.
           this.notify(false);
         }
       };
-      this.measureElement = (node) => {
-        if (!node) {
-          this.elementsCache.forEach((cached, key) => {
-            if (!cached.isConnected) {
-              this.observer.unobserve(cached);
-              this.elementsCache.delete(key);
-            }
-          });
-          return;
-        }
-        this._measureElement(node, void 0);
-      };
       this.getVirtualItems = memo(
         () => [this.getVirtualIndexes(), this.getMeasurements()],
         (indexes, measurements) => {
@@ -72866,12 +72982,10 @@ focus outline in that case.
       };
       this.getOffsetForIndex = (index, align = "auto") => {
         index = Math.max(0, Math.min(index, this.options.count - 1));
-        const item = this.measurementsCache[index];
-        if (!item) {
-          return void 0;
-        }
         const size = this.getSize();
         const scrollOffset = this.getScrollOffset();
+        const item = this.measurementsCache[index];
+        if (!item) return;
         if (align === "auto") {
           if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
             align = "end";
@@ -72890,85 +73004,55 @@ focus outline in that case.
           align
         ];
       };
-      this.isDynamicMode = () => this.elementsCache.size > 0;
-      this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
-        this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
-          adjustments: void 0,
-          behavior
-        });
+      this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
+        const offset = this.getOffsetForAlignment(toOffset, align);
+        const now = this.now();
+        this.scrollState = {
+          index: null,
+          align,
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
+        };
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
-      this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
+      this.scrollToIndex = (index, {
+        align: initialAlign = "auto",
+        behavior = "auto"
+      } = {}) => {
         index = Math.max(0, Math.min(index, this.options.count - 1));
-        this.currentScrollToIndex = index;
-        let attempts = 0;
-        const maxAttempts = 10;
-        const tryScroll = (currentAlign) => {
-          if (!this.targetWindow) return;
-          const offsetInfo = this.getOffsetForIndex(index, currentAlign);
-          if (!offsetInfo) {
-            console.warn("Failed to get offset for index:", index);
-            return;
-          }
-          const [offset, align] = offsetInfo;
-          this._scrollToOffset(offset, { adjustments: void 0, behavior });
-          this.targetWindow.requestAnimationFrame(() => {
-            if (!this.targetWindow) return;
-            const verify = () => {
-              if (this.currentScrollToIndex !== index) return;
-              const currentOffset = this.getScrollOffset();
-              const afterInfo = this.getOffsetForIndex(index, align);
-              if (!afterInfo) {
-                console.warn("Failed to get offset for index:", index);
-                return;
-              }
-              if (!approxEqual(afterInfo[0], currentOffset)) {
-                scheduleRetry(align);
-              }
-            };
-            if (this.isDynamicMode()) {
-              this.targetWindow.requestAnimationFrame(verify);
-            } else {
-              verify();
-            }
-          });
-        };
-        const scheduleRetry = (align) => {
-          if (!this.targetWindow) return;
-          if (this.currentScrollToIndex !== index) return;
-          attempts++;
-          if (attempts < maxAttempts) {
-            if (this.options.debug) {
-              console.info("Schedule retry", attempts, maxAttempts);
-            }
-            this.targetWindow.requestAnimationFrame(() => tryScroll(align));
-          } else {
-            console.warn(
-              `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
-            );
-          }
+        const offsetInfo = this.getOffsetForIndex(index, initialAlign);
+        if (!offsetInfo) {
+          return;
+        }
+        const [offset, align] = offsetInfo;
+        const now = this.now();
+        this.scrollState = {
+          index,
+          align,
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
         };
-        tryScroll(initialAlign);
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
-      this.scrollBy = (delta, { behavior } = {}) => {
-        if (behavior === "smooth" && this.isDynamicMode()) {
-          console.warn(
-            "The `smooth` scroll behavior is not fully supported with dynamic size."
-          );
-        }
-        this._scrollToOffset(this.getScrollOffset() + delta, {
-          adjustments: void 0,
-          behavior
-        });
+      this.scrollBy = (delta, { behavior = "auto" } = {}) => {
+        const offset = this.getScrollOffset() + delta;
+        const now = this.now();
+        this.scrollState = {
+          index: null,
+          align: "start",
+          behavior,
+          startedAt: now,
+          lastTargetOffset: offset,
+          stableFrames: 0
+        };
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.scheduleScrollReconcile();
       };
       this.getTotalSize = () => {
         var _a;
@@ -73008,6 +73092,49 @@ focus outline in that case.
       };
       this.setOptions(opts);
     }
+    scheduleScrollReconcile() {
+      if (!this.targetWindow) {
+        this.scrollState = null;
+        return;
+      }
+      if (this.rafId != null) return;
+      this.rafId = this.targetWindow.requestAnimationFrame(() => {
+        this.rafId = null;
+        this.reconcileScroll();
+      });
+    }
+    reconcileScroll() {
+      if (!this.scrollState) return;
+      const el = this.scrollElement;
+      if (!el) return;
+      const MAX_RECONCILE_MS = 5e3;
+      if (this.now() - this.scrollState.startedAt > MAX_RECONCILE_MS) {
+        this.scrollState = null;
+        return;
+      }
+      const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
+      const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
+      const STABLE_FRAMES = 1;
+      const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
+      if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
+        this.scrollState.stableFrames++;
+        if (this.scrollState.stableFrames >= STABLE_FRAMES) {
+          this.scrollState = null;
+          return;
+        }
+      } else {
+        this.scrollState.stableFrames = 0;
+        if (targetChanged) {
+          this.scrollState.lastTargetOffset = targetOffset;
+          this.scrollState.behavior = "auto";
+          this._scrollToOffset(targetOffset, {
+            adjustments: void 0,
+            behavior: "auto"
+          });
+        }
+      }
+      this.scheduleScrollReconcile();
+    }
   };
   const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
     while (low <= high) {
@@ -97944,6 +98071,25 @@ focus outline in that case.
         display: none;
     }
 
+    .end {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        padding: 2px ${standardPadding};
+        border-top: ${borderWidth} solid ${dividerBackgroundColor};
+    }
+
+    .end.end-empty {
+        display: none;
+    }
+
+    ::slotted([slot="end"]) {
+        color: ${placeholderFontColor};
+        font: ${controlLabelFont};
+        ${linkFont.cssCustomProperty}: ${controlLabelFont};
+        ${linkFontColor.cssCustomProperty}: ${placeholderFontColor};
+    }
+
     .messages {
         flex: 1;
         display: flex;
@@ -97982,6 +98128,9 @@ focus outline in that case.
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
     </slot>
 </div>
+<div class="end ${x => (x.endEmpty ? 'end-empty' : '')}">
+    <slot name="end" ${slotted({ property: 'slottedEndElements' })}></slot>
+</div>
 `;
 
   /**
@@ -98004,6 +98153,8 @@ focus outline in that case.
           this.toolbarEmpty = true;
           /** @internal */
           this.startEmpty = true;
+          /** @internal */
+          this.endEmpty = true;
       }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
@@ -98014,6 +98165,9 @@ focus outline in that case.
       slottedStartElementsChanged(_prev, next) {
           this.startEmpty = next === undefined || next.length === 0;
       }
+      slottedEndElementsChanged(_prev, next) {
+          this.endEmpty = next === undefined || next.length === 0;
+      }
   }
   __decorate([
       attr
@@ -98036,6 +98190,12 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatConversation.prototype, "slottedStartElements", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "endEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$8,
@@ -98222,6 +98382,7 @@ focus outline in that case.
       textAreaInputHandler() {
           this.value = this.textArea.value;
           this.isInputEmpty = this.shouldDisableSendButton();
+          this.adjustTextAreaHeight();
           this.queueUpdateScrollbarWidth();
       }
       // If a property can affect whether a scrollbar is visible, we need to
@@ -98243,6 +98404,7 @@ focus outline in that case.
           if (this.textArea) {
               this.textArea.value = this.value;
               this.isInputEmpty = this.shouldDisableSendButton();
+              this.adjustTextAreaHeight();
               this.queueUpdateScrollbarWidth();
           }
       }
@@ -98253,6 +98415,7 @@ focus outline in that case.
           super.connectedCallback();
           this.textArea.value = this.value;
           this.isInputEmpty = this.shouldDisableSendButton();
+          this.adjustTextAreaHeight();
           this.resizeObserver = new ResizeObserver(() => this.onResize());
           this.resizeObserver.observe(this);
       }
@@ -98294,10 +98457,12 @@ focus outline in that case.
           this.isInputEmpty = true;
           if (this.textArea) {
               this.textArea.value = '';
+              this.adjustTextAreaHeight();
               this.textArea.focus();
           }
       }
       onResize() {
+          this.adjustTextAreaHeight();
           this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
       }
       queueUpdateScrollbarWidth() {
@@ -98309,11 +98474,22 @@ focus outline in that case.
               DOM.queueUpdate(() => this.updateScrollbarWidth());
           }
       }
+      // Workaround for browsers that do not support the CSS property `field-sizing: content`
+      // See https://github.com/ni/nimble/issues/2902
+      adjustTextAreaHeight() {
+          if (ChatInput.fieldSizingSupported || !this.textArea) {
+              return;
+          }
+          const textArea = this.textArea;
+          textArea.style.height = 'auto';
+          textArea.style.height = `${textArea.scrollHeight}px`;
+      }
       updateScrollbarWidth() {
           this.updateScrollbarWidthQueued = false;
           this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
       }
   }
+  ChatInput.fieldSizingSupported = CSS.supports('field-sizing', 'content');
   __decorate([
       attr
   ], ChatInput.prototype, "placeholder", void 0);