@vertexvis/ui 0.1.0-testing.7 → 0.1.0

package/dist/esm/{search-bar-cb59da12.js → search-bar-8d18626e.js}

@@ -53,11 +53,23 @@ const getWindowSelection = () => {
   }
   return undefined;
 };
+const nodeHasChildNodes = (node) => {
+  return node.hasChildNodes();
+};
 const createDocumentRange = () => {
   return document.createRange();
 };
 const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+  return new Text(text);
+};
+const createBreak = () => {
+  return document.createElement('br');
+};
+const isHtmlElement = (node) => {
+  return node instanceof HTMLElement;
+};
+const isBrElement = (node) => {
+  return node instanceof HTMLBRElement;
 };
 
 const createResultUri = (result) => {
@@ -69,16 +81,69 @@ const createSearchResultReplacement = (result, before, after) => {
     before: createTextNode(before),
     beforeSpace: createTextNode(createHairSpace()),
     result: createTextNode(urn),
-    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    afterSpace: after != null
+      ? createTextNode(createNoBreakSpace())
+      : createTextNode(createHairSpace()),
     after: after != null ? createTextNode(after) : undefined,
   };
 };
-const getNodesForSearchResultReplacement = (replacement) => {
+/**
+ * Newline characters and spaces are represented slightly differently within a
+ * content editable element between browsers. This method standardizes the
+ * representation of those characters to avoid having to write branching logic
+ * to support each individual browser.
+ */
+const standardizeNewlinesAndSpaces = (node) => {
+  const content = node.textContent;
+  if (content === '\n') {
+    return [createBreak()];
+  }
+  else if (content != null && content.includes('\n')) {
+    const split = content.split('\n');
+    return split.reduce((res, substr, i) => {
+      const previous = split[i - 1];
+      // Ignore the empty string if the prior element was converted
+      // to a breaking element to prevent duplication of newlines.
+      if (substr === '' && previous !== '') {
+        return res;
+      }
+      return [
+        ...res,
+        // Standard spaces are not always respected with in `Text`
+        // elements when appended to a contenteditable element. This
+        // conversion preserves that spacing.
+        createTextNode(substr.replace(/ /g, createNoBreakSpace())),
+        createBreak(),
+      ];
+    }, []);
+  }
+  return [node];
+};
+const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
   const keys = Object.keys(replacement);
-  return keys
+  const replacementElements = keys
     .map((key) => replacement[key])
     .filter((node) => node != null);
+  // If the element is intended to replace a breaking element such
+  // as a `<div>` wrapper, a newline is required alongside the standard
+  // replacement elements.
+  if (isBreaking) {
+    return [createTextNode('\n'), ...replacementElements];
+  }
+  return replacementElements;
 };
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 const trimNonstandardSpaces = (text) => {
   return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
@@ -89,7 +154,7 @@ const createNoBreakSpace = () => {
   return String.fromCharCode(160);
 };
 
-const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;border:1px solid var(--vertex-ui-neutral-600);border-radius:0.5rem}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
+const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);font-size:0.875rem;line-height:1.4}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.content-input.sc-vertex-search-bar:focus{outline:none}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
 
 const SearchBar = class {
   constructor(hostRef) {
@@ -100,42 +165,73 @@ const SearchBar = class {
     this.inputFocus = createEvent(this, "inputFocus", 7);
     this.inputBlur = createEvent(this, "inputBlur", 7);
     this.rawElements = [];
+    this.attemptReplaceElement = (child, other, replacement, isBreaking = false) => {
+      // In the case that the child we're evaluating has its own children
+      // (often a wrapper `<div>`), we want to evaluate whether any of its
+      // children is the target to replace.
+      if (nodeHasChildNodes(child) &&
+        Array.from(child.childNodes).some((c) => nodeHasChildNodes(c) || this.isIdenticalElement(c, other))) {
+        return Array.from(child.childNodes).reduce((res, c) => [
+          ...res,
+          ...this.attemptReplaceElement(c, other, replacement, 
+          // If the element we're evaluating is a wrapper, we want to
+          // consider it a breaking element and add a newline to the
+          // replaced element only if the previous node is a `Text` node.
+          !isHtmlElement(child.previousSibling)),
+        ], []);
+      }
+      else {
+        return this.isIdenticalElement(child, other)
+          ? getNodesForSearchResultReplacement(replacement, isBreaking)
+          : [child];
+      }
+    };
     this.isIdenticalElement = (child, other) => {
       return (child === this.triggeredElement ||
         this.getTextContent(child) === this.getTextContent(other));
     };
     this.getTextContent = (node) => {
       var _a;
-      if (node instanceof HTMLElement) {
+      if (isHtmlElement(node)) {
         return node.innerText;
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
     };
+    /**
+     * Inspects the cursor position for the following conditions:
+     *
+     * 1. The cursor has moved to text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event and display the results.
+     *
+     * 2. The cursor has moved within text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event to update the currently displayed results.
+     *
+     * 3. The cursor has moved to text that does not contain a valid
+     * string and trigger character, indicating we need to hide any
+     * displayed search results.
+     */
     this.handleCursorPositionUpdate = () => {
-      var _a, _b, _c;
+      var _a, _b;
       const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
       if (windowRange != null) {
-        if (!this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.hasTriggered = true;
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
+        const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+        if (!this.hasTriggered && triggerText != null) {
+          this.hasTriggered = true;
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
         }
-        else if (this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_c = windowRange.commonAncestorContainer.textContent) !== null && _c !== void 0 ? _c : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
-          else {
-            this.hasTriggered = false;
-            this.triggeredRange = undefined;
-            this.triggeredElement = undefined;
-          }
+        else if (this.hasTriggered && triggerText != null) {
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else {
+          this.hasTriggered = false;
+          this.triggeredRange = undefined;
+          this.triggeredElement = undefined;
         }
       }
       this.cursorPosition = this.getCursorPosition();
@@ -173,21 +269,54 @@ const SearchBar = class {
         selection.addRange(range);
       }
     };
-    this.getContentAsString = () => {
-      if (this.contentEl != null) {
-        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+    this.getContentAsString = (element) => {
+      if (element != null) {
+        const res = trimNonstandardSpaces(Array.from(element.childNodes).reduce((res, n) => {
           var _a;
-          if (n instanceof HTMLElement &&
-            n.getAttribute('data-replaced') === 'true') {
+          const previousSiblingIsBlock = n.previousSibling == null || isHtmlElement(n.previousSibling);
+          if (isHtmlElement(n) && n.getAttribute('data-replaced') === 'true') {
+            /**
+             * If an element has been replaced visually, append the original
+             * value prior to being replaced.
+             */
             return `${res}${n.getAttribute('data-original')}`;
           }
-          else if (n instanceof HTMLElement) {
-            return `${res}${n.innerText}`;
+          else if (isHtmlElement(n) && n.childElementCount > 0) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * Additionally, we want to evaluate each of its children independently.
+             * Some browsers will conditionally wrap content in additional wrapper
+             * elements we need to unravel.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${this.getContentAsString(n)}`;
+          }
+          else if (isBrElement(n)) {
+            /**
+             * If an element is a `<br>` element, we want to simply represent
+             * it as a newline in the returned string.
+             */
+            return `${res}\n`;
+          }
+          else if (isHtmlElement(n)) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * If the prior element is also to be treated as a block format, we
+             * will omit the newline before the content to avoid duplicating the
+             * behavior.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${n.innerText}\n`;
           }
           else {
+            /**
+             * If a node is simply a `Text` node, we just want to append the text
+             * if defined.
+             */
             return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
           }
         }, ''));
+        return res;
       }
       return '';
     };
@@ -218,7 +347,7 @@ const SearchBar = class {
     this.placeholder = undefined;
     this.replacements = [];
     this.replacementUriType = 'user';
-    this.cursorPosition = { x: 0, y: 0 };
+    this.cursorPosition = undefined;
     this.displayedElements = [];
     this.hasTriggered = false;
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -263,12 +392,13 @@ const SearchBar = class {
               replacement.before,
               replacement.beforeSpace,
               replacement.result,
+              replacement.afterSpace,
             ];
           }
           return res;
         }, [])
         : [];
-      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.rawElements = [...parts, createTextNode(nextSubstr)].reduce((res, p) => [...res, ...standardizeNewlinesAndSpaces(p)], []);
       this.updateContent(this.replacements);
     }
   }
@@ -276,9 +406,8 @@ const SearchBar = class {
     if (this.contentEl != null && !fastDeepEqual(newValue, oldValue)) {
       this.contentEl.innerHTML = '';
       this.displayedElements = this.rawElements.map((el) => {
-        const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
+        const raw = isHtmlElement(el) ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
-        console.log(raw);
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
           return replacementElement;
@@ -292,7 +421,7 @@ const SearchBar = class {
       if (this.lastReplacedSpace != null) {
         this.moveCursorToNodeEnd(this.lastReplacedSpace);
       }
-      this.inputChanged.emit(this.getContentAsString());
+      this.inputChanged.emit(this.getContentAsString(this.contentEl));
     }
   }
   render() {
@@ -304,7 +433,7 @@ const SearchBar = class {
       blank: this.variant === 'blank',
       disabled: this.disabled,
     });
-    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleCursorPositionUpdate, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
+    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
         this.resultItems != null &&
         this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
   }
@@ -320,13 +449,13 @@ const SearchBar = class {
     this.cursorPosition = this.getCursorPosition();
   }
   async handleInput() {
-    this.inputChanged.emit(this.getContentAsString());
+    this.inputChanged.emit(this.getContentAsString(this.contentEl));
   }
   handleClick() {
     this.handleCursorPositionUpdate();
   }
   handleWindowClick(event) {
-    if (event.target instanceof HTMLElement &&
+    if (isHtmlElement(event.target) &&
       event.target.getAttribute('data-replaced') === 'true' &&
       event.target.nextSibling != null) {
       this.moveCursorToNodeEnd(event.target.nextSibling, true);
@@ -343,7 +472,7 @@ const SearchBar = class {
     var _a;
     const triggeredRange = this.triggeredRange;
     const triggeredElement = this.triggeredElement;
-    const value = triggeredElement instanceof HTMLElement
+    const value = isHtmlElement(triggeredElement)
       ? triggeredElement.innerText
       : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
     if (this.contentEl != null &&
@@ -357,20 +486,17 @@ const SearchBar = class {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        // TODO: see if we can do anything about the collapse to single line in safari
-        if (this.isIdenticalElement(e, triggeredElement)) {
-          return [...re, ...getNodesForSearchResultReplacement(replacement)];
-        }
-        else {
-          return [...re, e];
-        }
+        return [
+          ...re,
+          ...this.attemptReplaceElement(e, triggeredElement, replacement),
+        ];
       }, []);
       this.hasTriggered = false;
+      this.resultReplaced.emit(event.detail);
       this.replacements = [
         ...this.replacements.filter((r) => r.id !== event.detail.id),
         event.detail,
       ];
-      this.resultReplaced.emit(event.detail);
     }
   }
   getCursorPosition() {

package/dist/esm/{select-d4e135b7.js → select-78aeff96.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, e as createEvent, h, c as readTask, g as getElement } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
 
-const selectCss = ":host{--select-width:100%;--select-option-white-space:normal}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected=\"true\"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
+const selectCss = ":host{--select-width:100%;--select-option-white-space:normal;--max-dropdown-height:80vh}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);max-height:var(--max-dropdown-height);overflow-y:auto}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected=\"true\"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
 
 const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
 const Select = class {

package/dist/esm/{slider-dcdb388f.js → slider-3d8545e3.js}

@@ -1,5 +1,6 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
+import { b as blurElement } from './dom-9d0f7bf4.js';
 
 const sliderCss = ":host{display:flex;--vertex-slider-track-color:var(--vertex-ui-neutral-400);--vertex-slider-thumb-color:var(--vertex-ui-blue-700)}:host([size=\"sm\"]){height:12px}:host([size=\"md\"]){height:14px}:host([size=\"lg\"]){height:16px}.input{-webkit-appearance:none;width:100%;height:100%;background:transparent;margin:0}.input:not(.disabled){cursor:pointer}.input.sm{height:12px}.input.md{height:14px}.input.lg{height:16px}.input.disabled{opacity:0.5}.tooltip{width:100%}.input::-webkit-slider-runnable-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-moz-range-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-ms-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input:not(.disabled)::-webkit-slider-runnable-track{cursor:pointer}.input:not(.disabled)::-moz-range-track{cursor:pointer}.input:not(.disabled)::-ms-track{cursor:pointer}.input.sm::-webkit-slider-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-moz-range-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-ms-thumb{height:12px;width:12px;margin-top:-5px}.input.md::-webkit-slider-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-moz-range-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-ms-thumb{height:14px;width:14px;margin-top:-6px}.input.lg::-webkit-slider-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-moz-range-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-ms-thumb{height:16px;width:16px;margin-top:-7px}.input::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-moz-range-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-ms-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input:not(.disabled)::-webkit-slider-thumb{cursor:grab}.input:not(.disabled)::-moz-range-thumb{cursor:grab}.input:not(.disabled)::-ms-thumb{cursor:grab}.input::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-moz-range-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-ms-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}";
 
@@ -25,11 +26,16 @@ const Slider = class {
     this.disabled = false;
   }
   render() {
-    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classnames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput })));
+    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classnames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput, onPointerUp: () => {
+        // Blur the slider on pointerup to prevent an issue where pressing
+        // any key on the keyboard would result in a focus state.
+        blurElement(this.hostEl);
+      } })));
   }
   updateValueFromEvent(event) {
     this.value = event.target.valueAsNumber;
   }
+  get hostEl() { return getElement(this); }
 };
 Slider.style = sliderCss;
 

package/dist/esm/tab-c76332b0.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.js';
+
+const tabCss = ":host{position:relative;width:100%;height:100%}.content{display:none;height:0px}.content.active{display:flex;width:100%;height:100%}";
+
+const Tab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabClick = createEvent(this, "tabClick", 7);
+    this.handleClick = () => {
+      this.tabClick.emit(this.label);
+    };
+    this.label = undefined;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('content', {
+        active: this.active,
+      }) }, h("slot", null))));
+  }
+};
+Tab.style = tabCss;
+
+export { Tab as T };

package/dist/esm/tabs-e9f6dcbe.js

@@ -0,0 +1,109 @@
+import { r as registerInstance, e as createEvent, h, H as Host, g as getElement } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.js';
+import { r as readDOM, g as getBoundingClientRect } from './dom-9d0f7bf4.js';
+
+function isTabElement(element) {
+  return element.tagName === 'VERTEX-TAB';
+}
+
+const tabsCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex;position:relative;width:100%;height:100%}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;width:100%}.labels{display:flex;position:relative;border-bottom:solid 1px var(--vertex-ui-neutral-300)}.indicator{position:absolute;bottom:0;height:3px;background-color:var(--vertex-ui-blue-700);transition:left 0.2s ease-in-out}.label{position:relative;cursor:pointer;color:var(--vertex-ui-neutral-700);white-space:nowrap;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-md);padding:0.75rem 1.25rem}.label:not(.active):hover{color:var(--vertex-ui-neutral-800)}.label.active{color:var(--vertex-ui-blue-700);font-weight:var(--vertex-ui-font-weight-bold)}.hidden-label-text{font-weight:bold;visibility:hidden;height:0px}.tab-content{display:flex;height:5%;flex-grow:1}";
+
+const Tabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedTabChanged = createEvent(this, "selectedTabChanged", 7);
+    this.indicatorInitialized = false;
+    this.handleLabelClick = (label) => {
+      if (this.active != null) {
+        this.updateActiveOnTab(this.active, false);
+      }
+      this.active = label;
+      this.updateActiveOnTab(this.active, true);
+      this.selectedTabChanged.emit(label);
+    };
+    this.updateActiveOnTab = (label, active) => {
+      const activeTab = this.findTabByLabel(label);
+      if (activeTab != null) {
+        activeTab.active = active;
+      }
+    };
+    this.findTabByLabel = (label) => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      return slotChildren != null
+        ? slotChildren.filter(isTabElement).find((el) => el.label === label)
+        : undefined;
+    };
+    this.updateTabLabels = () => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      this.labels =
+        slotChildren != null
+          ? slotChildren.filter(isTabElement).map((t) => t.label)
+          : [];
+    };
+    this.active = undefined;
+    this.labels = [];
+    this.activeBounds = undefined;
+    this.activeButtonEl = undefined;
+  }
+  componentWillLoad() {
+    this.updateTabLabels();
+  }
+  componentDidLoad() {
+    if (this.active != null) {
+      this.updateActiveOnTab(this.active, true);
+    }
+    this.indicatorInitialized = false;
+    this.handleActiveButtonChange();
+  }
+  componentDidUpdate() {
+    // Place the indicator if it hasn't been initialized yet
+    if (!this.indicatorInitialized) {
+      this.handleActiveButtonChange();
+    }
+  }
+  handleActiveButtonChange() {
+    const button = this.activeButtonEl;
+    if (button != null) {
+      readDOM(() => {
+        const hostElBounds = getBoundingClientRect(this.hostEl);
+        const activeBounds = getBoundingClientRect(button);
+        this.activeBounds = {
+          x: activeBounds.x - hostElBounds.x,
+          width: activeBounds.width,
+        };
+        if (this.activeBounds.width !== 0) {
+          this.indicatorInitialized = true;
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "wrapper" }, h("div", { class: "labels" }, this.labels.map((label) => (h("button", { class: classnames('label', {
+        active: this.active === label,
+      }), "data-label": label, ref: (el) => {
+        if (this.active === label) {
+          this.activeButtonEl = el;
+        }
+      }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
+        left: `${this.activeBounds.x}px`,
+        width: `${this.activeBounds.width}px`,
+      } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
+  }
+  get hostEl() { return getElement(this); }
+  static get watchers() { return {
+    "activeButtonEl": ["handleActiveButtonChange"]
+  }; }
+};
+Tabs.style = tabsCss;
+
+export { Tabs as T };

package/dist/esm/{tooltip-933da261.js → tooltip-db8ebd41.js}

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
 import { _ as __extends, a as __read } from './tslib.es6-99cd0de8.js';
 import { c as classnames } from './index-9c609209.js';
+import { g as getBoundingClientRect } from './dom-9d0f7bf4.js';
 import { a as getSlottedContent } from './slots-fbb5afb3.js';
 
 /**
@@ -2050,10 +2051,6 @@ var uuid = /*#__PURE__*/Object.freeze({
   toMsbLsb: toMsbLsb
 });
 
-function getBoundingClientRect(el) {
-  return el.getBoundingClientRect();
-}
-
 const tooltipCss = ":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";
 
 const TOOLTIP_OPEN_DELAY = 500;

package/dist/esm/vertex-color-circle-picker.entry.js

@@ -1,3 +1,3 @@
-export { C as vertex_color_circle_picker } from './color-circle-picker-998a7e9c.js';
+export { C as vertex_color_circle_picker } from './color-circle-picker-35ad3b3e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-color-picker.entry.js

@@ -1,3 +1,4 @@
-export { C as vertex_color_picker } from './color-picker-2e3b51fa.js';
+export { C as vertex_color_picker } from './color-picker-1d67effe.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
+import './lib-73fbca8b.js';

package/dist/esm/vertex-color-swatch.entry.js

@@ -0,0 +1,4 @@
+export { C as vertex_color_swatch } from './color-swatch-0e62d13d.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';
+import './lib-73fbca8b.js';

package/dist/esm/vertex-dialog.entry.js

@@ -1,3 +1,3 @@
-export { D as vertex_dialog } from './dialog-e3f49527.js';
+export { D as vertex_dialog } from './dialog-1cef715c.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-icon-button.entry.js

@@ -1,4 +1,4 @@
-export { I as vertex_icon_button } from './icon-button-aad3c0e7.js';
+export { I as vertex_icon_button } from './icon-button-a4bdeabc.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-83f10f73.js';
+import './icon-helper-94d45002.js';

package/dist/esm/vertex-icon.entry.js

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-d37150b4.js';
+export { I as vertex_icon } from './icon-bf8df898.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-83f10f73.js';
+import './icon-helper-94d45002.js';

package/dist/esm/vertex-search-bar.entry.js

@@ -1,4 +1,4 @@
-export { S as vertex_search_bar } from './search-bar-cb59da12.js';
+export { S as vertex_search_bar } from './search-bar-8d18626e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

package/dist/esm/vertex-select.entry.js

@@ -1,3 +1,3 @@
-export { S as vertex_select } from './select-d4e135b7.js';
+export { S as vertex_select } from './select-78aeff96.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-slider.entry.js

@@ -1,3 +1,4 @@
-export { S as vertex_slider } from './slider-dcdb388f.js';
+export { S as vertex_slider } from './slider-3d8545e3.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
+import './dom-9d0f7bf4.js';

package/dist/esm/vertex-tab.entry.js

@@ -0,0 +1,3 @@
+export { T as vertex_tab } from './tab-c76332b0.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';