@vertexvis/ui 0.1.0-testing.4 → 0.1.0-testing.5

package/dist/esm/search-bar-6fad2f2e.js

@@ -0,0 +1,351 @@
+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 { g as generateInstanceFromTemplate } from './templates-797420bf.js';
+
+const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+const createDocumentRange = () => {
+  return document.createRange();
+};
+const createTextNode = (text) => {
+  return new Text(text != null && text !== '' ? text : ' ');
+};
+
+const createResultUrn = (result) => {
+  return `${result.type}:${result.id}`;
+};
+const createSearchResultReplacement = (result, before, after) => {
+  const urn = createResultUrn(result);
+  return {
+    before: createTextNode(before),
+    beforeSpace: createTextNode(createHairSpace()),
+    result: createTextNode(urn),
+    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    after: after != null ? createTextNode(after) : undefined,
+  };
+};
+const getNodesForSearchResultReplacement = (replacement) => {
+  const keys = Object.keys(replacement);
+  return keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
+};
+const trimNonstandardSpaces = (text) => {
+  return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
+};
+const createHairSpace = () => {
+  return String.fromCharCode(8202);
+};
+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 SearchBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.searchChanged = createEvent(this, "searchChanged", 7);
+    this.inputChanged = createEvent(this, "inputChanged", 7);
+    this.resultReplaced = createEvent(this, "resultReplaced", 7);
+    this.inputFocus = createEvent(this, "inputFocus", 7);
+    this.inputBlur = createEvent(this, "inputBlur", 7);
+    this.rawElements = [];
+    this.isIdenticalElement = (child, other) => {
+      return (child === this.triggeredElement ||
+        this.getTextContent(child) === this.getTextContent(other));
+    };
+    this.getTextContent = (node) => {
+      var _a;
+      if (node instanceof HTMLElement) {
+        return node.innerText;
+      }
+      return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+    };
+    this.handleCursorPositionUpdate = () => {
+      var _a, _b, _c;
+      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, ''));
+          }
+        }
+        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;
+          }
+        }
+      }
+      this.cursorPosition = this.getCursorPosition();
+    };
+    this.readTriggerValue = (value, fromIndex) => {
+      const adjustedValue = value.replace(String.fromCharCode(160), ' ');
+      const beforeSubstr = adjustedValue.substring(0, fromIndex);
+      const afterSubstr = adjustedValue.substring(fromIndex);
+      const adjustedBeforeSubstr = beforeSubstr.includes(this.triggerCharacter)
+        ? beforeSubstr.substring(beforeSubstr.lastIndexOf(this.triggerCharacter))
+        : '';
+      const adjustedAfterSubstr = afterSubstr.substring(0, this.firstIndexOfBreakCharacter(afterSubstr));
+      const result = `${adjustedBeforeSubstr}${adjustedAfterSubstr}`;
+      return result.includes(this.triggerCharacter) &&
+        !this.includesBreakCharacter(result)
+        ? result
+        : undefined;
+    };
+    this.includesBreakCharacter = (value) => {
+      return this.breakCharacters.some((bc) => value.includes(bc));
+    };
+    this.firstIndexOfBreakCharacter = (value) => {
+      const indices = this.breakCharacters
+        .map((bc) => value.indexOf(bc))
+        .filter((i) => i >= 0);
+      return indices.length > 0 ? Math.min(...indices) : value.length;
+    };
+    this.moveCursorToNodeEnd = (node, collapseToStart = false) => {
+      const selection = getWindowSelection();
+      if (selection != null) {
+        const range = createDocumentRange();
+        range.selectNodeContents(node);
+        range.collapse(collapseToStart);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    };
+    this.getContentAsString = () => {
+      if (this.contentEl != null) {
+        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+          var _a;
+          if (n instanceof HTMLElement &&
+            n.getAttribute('data-replaced') === 'true') {
+            return `${res}${n.getAttribute('data-original')}`;
+          }
+          else if (n instanceof HTMLElement) {
+            return `${res}${n.innerText}`;
+          }
+          else {
+            return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
+          }
+        }, ''));
+      }
+      return '';
+    };
+    this.createReplacedElement = (original, data) => {
+      const template = this.hostEl.querySelector('template[slot="replaced"]');
+      if (template != null) {
+        const instance = generateInstanceFromTemplate(template);
+        instance.bindings.bind(data);
+        instance.element.id = data.id;
+        instance.element.style.display = 'inline-block';
+        instance.element.contentEditable = 'false';
+        instance.element.tabIndex = -1;
+        instance.element.setAttribute('data-replaced', 'true');
+        instance.element.setAttribute('data-original', original);
+        return instance.element;
+      }
+      else {
+        throw new Error('Replaced template not defined.');
+      }
+    };
+    this.variant = 'standard';
+    this.disabled = false;
+    this.triggerCharacter = '@';
+    this.breakCharacters = [' ', '\n'];
+    this.resultItems = undefined;
+    this.placement = 'bottom-start';
+    this.value = undefined;
+    this.placeholder = undefined;
+    this.replacements = [];
+    this.cursorPosition = { x: 0, y: 0 };
+    this.displayedElements = [];
+    this.hasTriggered = false;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleWindowClick = this.handleWindowClick.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleCursorPositionUpdate =
+      this.handleCursorPositionUpdate.bind(this);
+    this.updateContent = this.updateContent.bind(this);
+    this.replaceContent = this.replaceContent.bind(this);
+  }
+  componentDidLoad() {
+    this.replaceContent(this.value);
+  }
+  connectedCallback() {
+    window.addEventListener('click', this.handleWindowClick);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('click', this.handleWindowClick);
+  }
+  replaceContent(newValue, oldValue) {
+    if (newValue != null && newValue !== oldValue) {
+      const matches = newValue.match(/[a-z]*:[0-9a-z-]{36}/g);
+      const replacementsMap = this.replacements.reduce((map, r) => (Object.assign(Object.assign({}, map), { [createResultUrn(r)]: r })), {});
+      let nextSubstr = newValue;
+      const parts = matches != null
+        ? matches === null || matches === void 0 ? void 0 : matches.reduce((res, m) => {
+          if (replacementsMap[m] != null) {
+            const urn = createResultUrn(replacementsMap[m]);
+            const index = nextSubstr.indexOf(urn);
+            const before = nextSubstr.substring(0, index);
+            const after = nextSubstr.substring(index + urn.length);
+            const replacement = createSearchResultReplacement(replacementsMap[m], before);
+            nextSubstr = after;
+            return [
+              ...res,
+              replacement.before,
+              replacement.beforeSpace,
+              replacement.result,
+            ];
+          }
+          return res;
+        }, [])
+        : [];
+      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.updateContent();
+    }
+  }
+  updateContent() {
+    if (this.contentEl != null) {
+      this.contentEl.innerHTML = '';
+      this.displayedElements = this.rawElements.map((el) => {
+        const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
+        const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(r.id));
+        if (raw != null && replacement != null) {
+          const replacementElement = this.createReplacedElement(raw, replacement);
+          return replacementElement;
+        }
+        return el;
+      });
+      this.displayedElements.forEach((el) => {
+        var _a;
+        (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.appendChild(typeof el === 'string' ? createTextNode(el) : el);
+      });
+      if (this.lastReplacedSpace != null) {
+        this.moveCursorToNodeEnd(this.lastReplacedSpace);
+      }
+      this.inputChanged.emit(this.getContentAsString());
+    }
+  }
+  render() {
+    var _a;
+    const classes = classnames('wrapper', {
+      standard: this.variant === 'standard',
+      filled: this.variant === 'filled',
+      underlined: this.variant === 'underlined',
+      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 &&
+        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" })));
+  }
+  handleKeyDown(event) {
+    if (this.hasTriggered && this.breakCharacters.includes(event.key)) {
+      this.hasTriggered = false;
+      this.triggeredRange = undefined;
+      this.triggeredElement = undefined;
+    }
+  }
+  handleKeyUp(event) {
+    this.handleCursorPositionUpdate();
+    this.cursorPosition = this.getCursorPosition();
+  }
+  async handleInput() {
+    this.inputChanged.emit(this.getContentAsString());
+  }
+  handleClick() {
+    this.handleCursorPositionUpdate();
+  }
+  handleWindowClick(event) {
+    if (event.target instanceof HTMLElement &&
+      event.target.getAttribute('data-replaced') === 'true' &&
+      event.target.nextSibling != null) {
+      this.moveCursorToNodeEnd(event.target.nextSibling, true);
+    }
+  }
+  handleFocus(event) {
+    this.inputFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.hasTriggered = false;
+    this.inputBlur.emit(event);
+  }
+  handleResultClick(event) {
+    var _a;
+    const triggeredRange = this.triggeredRange;
+    const triggeredElement = this.triggeredElement;
+    const value = triggeredElement instanceof HTMLElement
+      ? triggeredElement.innerText
+      : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
+    if (this.contentEl != null &&
+      triggeredRange != null &&
+      triggeredElement != null &&
+      value != null) {
+      const triggeredValue = (_a = this.readTriggerValue(value, triggeredRange.startOffset)) !== null && _a !== void 0 ? _a : '';
+      const split = value.split(triggeredValue);
+      const before = split[0];
+      const after = split[1];
+      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];
+        }
+      }, []);
+      this.hasTriggered = false;
+      this.replacements = [
+        ...this.replacements.filter((r) => r.id !== event.detail.id),
+        event.detail,
+      ];
+      this.resultReplaced.emit(event.detail);
+    }
+  }
+  getCursorPosition() {
+    var _a;
+    const selection = getWindowSelection();
+    if (selection != null && selection.rangeCount > 0) {
+      const cursorBounds = selection.getRangeAt(0).getBoundingClientRect();
+      const contentBounds = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const cursorBottom = cursorBounds.bottom || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.bottom) || 0;
+      const cursorTop = cursorBounds.top || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.top) || 0;
+      return {
+        x: cursorBounds.left || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.left) || 0,
+        y: this.placement.includes('top') ? cursorTop : cursorBottom,
+      };
+    }
+    throw new Error('Unable to retrieve window selection.');
+  }
+  get hostEl() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["replaceContent"],
+    "replacements": ["updateContent"]
+  }; }
+};
+SearchBar.style = searchBarCss;
+
+export { SearchBar as S };

package/dist/esm/{select-75ed5653.js → select-d4e135b7.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%}.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}.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)}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}.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 GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
 const Select = class {
@@ -14,6 +14,7 @@ const Select = class {
     this.placeholder = 'Select an option...';
     this.disabled = false;
     this.animated = true;
+    this.hideSelected = true;
     this.open = false;
     this.position = undefined;
     this.displayValue = undefined;
@@ -33,6 +34,9 @@ const Select = class {
     if (this.value != null) {
       this.handleUpdateValue(this.value);
     }
+    else {
+      this.handleUpdateDisplayValue();
+    }
   }
   connectedCallback() {
     window.addEventListener('resize', this.getBounds);
@@ -50,6 +54,13 @@ const Select = class {
     }
     this.controlled = value != null;
   }
+  handleUpdateDisplayValue() {
+    var _a;
+    this.clearSelectedOptionFlag();
+    if (this.hideSelected) {
+      (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
+    }
+  }
   render() {
     return (h("div", { class: classnames('root', {
         disabled: this.disabled,
@@ -58,7 +69,7 @@ const Select = class {
       }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classnames('target', {
         hidden: this.open,
         disabled: this.disabled,
-      }) }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classnames('options', {
+      }) }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classnames('options', {
         hidden: !this.open,
         visible: this.open,
         animated: this.animated,
@@ -66,7 +77,7 @@ const Select = class {
         minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
       } }, h("div", { class: classnames('selected-option', {
         disabled: this.disabled,
-      }), onClick: this.handleDismiss }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
+      }), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
   }
   handleOpen() {
     var _a, _b;
@@ -105,6 +116,15 @@ const Select = class {
     this.removeListeners.forEach((l) => l());
     this.removeListeners = [];
   }
+  clearSelectedOptionFlag() {
+    var _a, _b;
+    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
+  }
+  getSelectedOption() {
+    var _a, _b, _c;
+    const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
+    return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+  }
   getBounds() {
     if (this.getBoundsTimeout != null) {
       clearTimeout(this.getBoundsTimeout);
@@ -128,7 +148,10 @@ const Select = class {
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
-    "value": ["handleUpdateValue"]
+    "value": ["handleUpdateValue"],
+    "displayValue": ["handleUpdateDisplayValue"],
+    "hideSelected": ["handleUpdateDisplayValue"],
+    "placeholder": ["handleUpdateDisplayValue"]
   }; }
 };
 Select.style = selectCss;

package/dist/esm/{text-field-e542da25.js → text-field-32ac877e.js}

@@ -79,6 +79,7 @@ const TextField = class {
   render() {
     var _a;
     const classes = classnames('txt-wrapper', {
+      'txt-wrapper-border': !this.multiline,
       'txt-standard': this.variant === 'standard',
       'txt-filled': this.variant === 'filled',
       'txt-underlined': this.variant === 'underlined',

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

@@ -2054,12 +2054,13 @@ 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}.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 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;
 const Tooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.pointerEntered = false;
     this.content = undefined;
     this.disabled = undefined;
     this.placement = 'bottom';
@@ -2068,32 +2069,40 @@ const Tooltip = class {
     this.open = false;
     this.handlePointerEnter = this.handlePointerEnter.bind(this);
     this.handlePointerLeave = this.handlePointerLeave.bind(this);
+    this.handleContentChange = this.handleContentChange.bind(this);
+    this.handleDisabledChange = this.handleDisabledChange.bind(this);
     this.tooltipId = `vertex-tooltip-${uuid.create()}`;
   }
   disconnectedCallback() {
     this.removeElement();
     this.clearOpenTimeout();
+    this.pointerEntered = false;
+  }
+  handleContentChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementChildren(this.internalContentElement);
+    }
+  }
+  handleDisabledChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementClass(this.internalContentElement);
+    }
+    if (!this.disabled && this.pointerEntered) {
+      this.handlePointerEnter();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "target", ref: (el) => {
         this.targetElement = el;
       }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
         this.contentElement = el;
-      } }, h("slot", { name: "content" }))));
+      } }, h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
   }
   addElement() {
-    var _a;
     if (this.targetElement != null) {
       const popover = this.createPopoverElement(this.targetElement);
       const content = this.createContentElement();
-      this.displayedSlottedContent =
-        (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-      if (this.content != null) {
-        content.innerText = this.content;
-      }
-      else if (this.displayedSlottedContent != null) {
-        content.appendChild(this.displayedSlottedContent);
-      }
+      this.updateContentElementChildren(content);
       popover.appendChild(content);
       this.hostElement.ownerDocument.body.appendChild(popover);
     }
@@ -2103,6 +2112,7 @@ const Tooltip = class {
     if (popover != null) {
       popover.remove();
     }
+    this.internalContentElement = undefined;
   }
   createPopoverElement(anchorElement) {
     const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
@@ -2117,25 +2127,50 @@ const Tooltip = class {
     return popover;
   }
   createContentElement() {
-    const content = this.hostElement.ownerDocument.createElement('div');
-    content.setAttribute('class', classnames('vertex-tooltip-content', {
+    this.internalContentElement =
+      this.hostElement.ownerDocument.createElement('div');
+    this.internalContentElement.setAttribute('class', classnames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+    return this.internalContentElement;
+  }
+  updateContentElementClass(element) {
+    element.setAttribute('class', classnames('vertex-tooltip-content', {
       hidden: !this.open || this.disabled,
     }));
-    return content;
+  }
+  updateContentElementChildren(element) {
+    var _a;
+    this.displayedSlottedContent =
+      (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+    if (this.content != null) {
+      element.innerText = this.content;
+    }
+    else if (this.displayedSlottedContent != null) {
+      element.appendChild(this.displayedSlottedContent);
+    }
   }
   handlePointerEnter() {
     if (this.openTimeout == null && !this.disabled) {
-      this.openTimeout = setTimeout(() => {
-        this.open = true;
-        this.openTimeout = undefined;
-        this.addElement();
-      }, this.delay);
+      this.createOpenTimeout();
+    }
+    else if (this.openTimeout == null) {
+      this.pointerEntered = true;
     }
   }
   handlePointerLeave() {
     this.clearOpenTimeout();
     this.removeElement();
     this.open = false;
+    this.pointerEntered = false;
+  }
+  createOpenTimeout() {
+    this.openTimeout = setTimeout(() => {
+      this.open = true;
+      this.openTimeout = undefined;
+      this.addElement();
+    }, this.delay);
+    this.pointerEntered = false;
   }
   clearOpenTimeout() {
     if (this.openTimeout != null) {
@@ -2144,6 +2179,10 @@ const Tooltip = class {
     }
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "content": ["handleContentChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Tooltip.style = tooltipCss;
 

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

@@ -1,3 +1,3 @@
-export { P as vertex_popover } from './popover-67c88e4b.js';
+export { P as vertex_popover } from './popover-6e806354.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-result-list.entry.js

@@ -1,4 +1,4 @@
-export { R as vertex_result_list } from './result-list-36cfb08a.js';
+export { R as vertex_result_list } from './result-list-16c6afbd.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

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

@@ -1,4 +1,4 @@
-export { S as vertex_search_bar } from './search-bar-59cc151d.js';
+export { S as vertex_search_bar } from './search-bar-6fad2f2e.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-75ed5653.js';
+export { S as vertex_select } from './select-d4e135b7.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,3 +1,3 @@
-export { T as vertex_textfield } from './text-field-e542da25.js';
+export { T as vertex_textfield } from './text-field-32ac877e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,4 +1,4 @@
-export { T as vertex_tooltip } from './tooltip-b4d2a889.js';
+export { T as vertex_tooltip } from './tooltip-933da261.js';
 import './index-72f28b71.js';
 import './tslib.es6-99cd0de8.js';
 import './index-9c609209.js';

package/dist/types/components/popover/popover.d.ts

@@ -126,11 +126,16 @@ export declare class Popover {
   private viewportWidth?;
   private viewportHeight?;
   private resizeTimeout?;
+  private boundaryResizeObserver?;
   private shouldUpdatePosition;
   private updateDispose?;
   private middleware;
   private partialWindow;
   constructor();
+  /**
+   * @internal
+   */
+  resizeObserverFactory: (cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver;
   connectedCallback(): void;
   componentDidUpdate(): void;
   componentDidLoad(): void;
@@ -140,6 +145,7 @@ export declare class Popover {
   updateOpened(open?: boolean): void;
   updateAnimated(): void;
   updateMiddleware(): void;
+  updateResizeObserver(): void;
   /**
    * @private Used for internals or testing.
    */
@@ -152,5 +158,6 @@ export declare class Popover {
   private getAnchorBoundsVirtualElement;
   private handleResize;
   private updateViewport;
+  private getOrCreateResizeObserver;
   private getTransformClass;
 }