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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const select = require('./select-0eb7203f.js');
+const select = require('./select-5f8aecfe.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const textField = require('./text-field-0397fb34.js');
+const textField = require('./text-field-bccbde1f.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const tooltip = require('./tooltip-31b596f5.js');
+const tooltip = require('./tooltip-e9f63631.js');
 require('./index-6a92256c.js');
 require('./tslib.es6-838fd860.js');
 require('./index-e1b40fa6.js');

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "./components/avatar/avatar.js",
+    "./components/badge/badge.js",
     "./components/button/button.js",
     "./components/card/card.js",
     "./components/chip/chip.js",

package/dist/collection/components/badge/badge.css

@@ -0,0 +1,18 @@
+.string-overlay {
+  width: 100%;
+  line-height: 1.0rem;
+  margin-left: 5px;
+  margin-right: 5px;
+  border-radius: 10px;
+  font-size: var(--vertex-ui-text-xxs);
+}
+
+.string-overlay.primary {
+  color: var(--vertex-ui-white);
+  background-color: var(--vertex-ui-blue-600)
+}
+
+.string-overlay.secondary {
+  color: var(--vertex-ui-black);
+  background-color: var(--vertex-ui-neutral-300)
+}

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,69 @@
+import { h, Host } from '@stencil/core';
+import classNames from 'classnames';
+export class Badge {
+  constructor() {
+    this.badgeText = undefined;
+    this.badgeColor = 'primary';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classNames('string-overlay', {
+        primary: this.badgeColor === 'primary',
+        secondary: this.badgeColor === 'secondary',
+      }) }, this.badgeText)));
+  }
+  static get is() { return "vertex-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badge.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "badgeText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The string to show in the badge."
+        },
+        "attribute": "badge-text",
+        "reflect": false
+      },
+      "badgeColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BadgeIconColor",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "BadgeIconColor": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The color of the badge displayed in this <vertex-badge>.\nCan be \"primary\" or \"secondary\", and defaults to \"primary.\""
+        },
+        "attribute": "badge-color",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+}

package/dist/collection/components/icon/icon-helper.js

@@ -37,6 +37,7 @@ import { CloseCircleFill } from './icons/close-circle-fill';
 import { CollapseAll } from './icons/collapse-all';
 import { Columns } from './icons/columns';
 import { CommentAdd } from './icons/comment-add';
+import { CommentFilled } from './icons/comment-filled';
 import { CommentReopen } from './icons/comment-reopen';
 import { CommentResolve } from './icons/comment-resolve';
 import { CommentShow } from './icons/comment-show';
@@ -183,6 +184,8 @@ export function getSvg(name) {
       return h(Columns, null);
     case 'comment-add':
       return h(CommentAdd, null);
+    case 'comment-filled':
+      return h(CommentFilled, null);
     case 'comment-reopen':
       return h(CommentReopen, null);
     case 'comment-resolve':

package/dist/collection/components/icon/icon.js

@@ -33,7 +33,7 @@ export class Icon {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/icon/icons/comment-filled.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const CommentFilled = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "comment-filled" }, h("path", { d: "M2.5 2A1.5 1.5 0 0 0 1 3.5v7A1.5 1.5 0 0 0 2.5 12h5.79l2.86 2.85a.47.47 0 0 0 .54.11.5.5 0 0 0 .31-.46V12h1.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 13.5 2Zm0 1h11a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-2a.51.51 0 0 0-.5.5v1.79l-2.15-2.14A.47.47 0 0 0 8.5 11h-6a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5Z" }), h("path", { d: "M11.306 14.941c-.085-.042-.422-.367-1.55-1.497L8.314 12H5.431c-1.806 0-2.955-.009-3.075-.022a1.49 1.49 0 0 1-1.257-.98l-.07-.18-.005-3.756c-.006-4.202-.018-3.888.152-4.233a1.18 1.18 0 0 1 .276-.369c.204-.204.374-.307.651-.393l.163-.05h11.468l.163.05c.271.085.448.19.64.383s.288.34.375.578l.058.159v7.631l-.069.18c-.168.436-.495.76-.911.905-.225.078-.465.097-1.269.097h-.73l-.007 1.319-.006 1.319-.065.106c-.135.217-.394.301-.607.197zm-.223-3.68a.527.527 0 0 1 .31-.235c.056-.015.46-.023 1.155-.023 1.178 0 1.157.002 1.303-.137a.616.616 0 0 0 .113-.156c.039-.083.04-.227.04-3.708l.001-3.622-.057-.115a.476.476 0 0 0-.335-.26c-.152-.033-11.074-.033-11.226 0a.476.476 0 0 0-.335.26l-.057.115v3.617c0 3.994-.011 3.697.136 3.85.15.158-.147.144 3.343.156 3.026.01 3.147.012 3.22.051.042.023.578.54 1.192 1.15l1.117 1.108.01-.976.011-.976z", stroke: "currentColor", "stroke-width": ".0216802" }), h("path", { d: "M9.888 12.26c-.799-.783-1.159-1.121-1.23-1.156l-.103-.05-3.264-.01-3.265-.011-.106-.062a.477.477 0 0 1-.17-.166l-.062-.104V3.238l.068-.096a.722.722 0 0 1 .179-.162l.11-.067h11.729l.093.049a.58.58 0 0 1 .25.266c.024.058.03.714.03 3.75v3.68l-.058.114a.527.527 0 0 1-.247.24c-.025.011-.58.025-1.231.031-1.167.011-1.188.012-1.279.06a.697.697 0 0 0-.265.27c-.018.04-.03.35-.038 1.026l-.011.968z", stroke: "currentColor", "stroke-width": "2.36182", "stroke-miterlimit": "4", "stroke-dasharray": "none" })));

package/dist/collection/components/icon-button/icon-button.css

@@ -44,9 +44,14 @@ button {
   --active-box-shadow: none;
   /*
   The box shadow of this button when focused.
-  Defaults to  0 0 0 1px var(--vertex-ui-neutral-900).
+  Defaults to 0 0 0 1px var(--vertex-ui-neutral-900).
   */
   --focus-box-shadow: 0 0 0 1px var(--vertex-ui-neutral-900);
+  /*
+  The margin around the icon.
+  Defaults to 0px.
+  */
+  --icon-margin: 0px;
 }
 
 .container {
@@ -66,6 +71,7 @@ button {
 
 .icon-button {
   display: flex;
+  position: relative;
   justify-content: center;
   align-items: center;
   fill: currentColor;
@@ -76,6 +82,15 @@ button {
 .icon-button svg {
   width: 100%;
   height: 100%;
+  margin: var(--icon-margin, 0px);
+}
+
+.badge {
+  position: absolute;
+  top: 0px;
+  right: 4px;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 .floating {

package/dist/collection/components/icon-button/icon-button.js

@@ -21,7 +21,7 @@ export class IconButton {
         sm: this.iconSize === 'sm',
         md: this.iconSize === 'md',
         lg: this.iconSize === 'lg',
-      }) }, getSvg(this.iconName)), h("slot", null))));
+      }) }, getSvg(this.iconName), h("div", { class: "badge" }, h("slot", { name: "badge" }))), h("slot", null))));
   }
   handleClick(event) {
     var _a;
@@ -50,7 +50,7 @@ export class IconButton {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/index.js

@@ -1,6 +1,7 @@
 export * from './auto-resize-textarea/auto-resize-textarea';
 export * from './avatar/avatar';
 export * from './avatar-group/avatar-group';
+export * from './badge/badge';
 export * from './button/button';
 export * from './card/card';
 export * from './card-group/card-group';

package/dist/collection/components/menu/menu.js

@@ -182,7 +182,7 @@ export class Menu {
         "mutable": false,
         "complexType": {
           "original": "Partial<Popover>",
-          "resolved": "undefined | ({ open?: boolean | undefined; placement?: Placement | undefined; position?: string | Point | undefined; anchorBounds?: Pick<DOMRect, \"height\" | \"width\" | \"x\" | \"y\"> | undefined; backdrop?: boolean | undefined; animated?: boolean | undefined; anchorSelector?: string | undefined; boundarySelector?: string | undefined; resizeBehavior?: PopoverResizeBehavior | undefined; overflowBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; } | undefined; flipBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; } | undefined; offsetBehavior?: OffsetOptions | undefined; updateOnResize?: boolean | undefined; dismissed?: EventEmitter<void> | undefined; connectedCallback?: (() => void) | undefined; componentDidUpdate?: (() => void) | undefined; componentDidLoad?: (() => void) | undefined; disconnectedCallback?: (() => void) | undefined; updatePosition?: ((position?: string | Point | undefined) => void) | undefined; updatePlacement?: (() => void) | undefined; updateOpened?: ((open?: boolean | undefined) => void) | undefined; updateAnimated?: (() => void) | undefined; updateMiddleware?: (() => void) | undefined; setWindow?: ((partialWindow: Pick<Window, \"innerHeight\" | \"innerWidth\">) => void) | undefined; render?: (() => IntrinsicElements) | undefined; })",
+          "resolved": "undefined | ({ open?: boolean | undefined; placement?: Placement | undefined; position?: string | Point | undefined; anchorBounds?: Pick<DOMRect, \"height\" | \"width\" | \"x\" | \"y\"> | undefined; backdrop?: boolean | undefined; animated?: boolean | undefined; anchorSelector?: string | undefined; boundarySelector?: string | undefined; resizeBehavior?: PopoverResizeBehavior | undefined; overflowBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; } | undefined; flipBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; } | undefined; offsetBehavior?: OffsetOptions | undefined; updateOnResize?: boolean | undefined; dismissed?: EventEmitter<void> | undefined; resizeObserverFactory?: ((cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver) | undefined; connectedCallback?: (() => void) | undefined; componentDidUpdate?: (() => void) | undefined; componentDidLoad?: (() => void) | undefined; disconnectedCallback?: (() => void) | undefined; updatePosition?: ((position?: string | Point | undefined) => void) | undefined; updatePlacement?: (() => void) | undefined; updateOpened?: ((open?: boolean | undefined) => void) | undefined; updateAnimated?: (() => void) | undefined; updateMiddleware?: (() => void) | undefined; updateResizeObserver?: (() => void) | undefined; setWindow?: ((partialWindow: Pick<Window, \"innerHeight\" | \"innerWidth\">) => void) | undefined; render?: (() => IntrinsicElements) | undefined; })",
           "references": {
             "Partial": {
               "location": "global"

package/dist/collection/components/popover/popover.js

@@ -24,13 +24,17 @@ export class Popover {
     this.updateOnResize = false;
     this.opened = false;
     this.computedPlacement = this.placement;
+    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
     this.updateListener = this.updateListener.bind(this);
     this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
     this.setWindow = this.setWindow.bind(this);
+    this.updateResizeObserver = this.updateResizeObserver.bind(this);
   }
   connectedCallback() {
     this.updatePosition(this.position);
+    this.updateResizeObserver();
   }
   componentDidUpdate() {
     if (this.shouldUpdatePosition) {
@@ -52,12 +56,14 @@ export class Popover {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.viewportWidth = undefined;
     this.viewportHeight = undefined;
     this.opened = false;
     if (this.resizeBehavior === 'dynamic') {
       window.removeEventListener('resize', this.handleResize);
     }
+    (_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   updatePosition(position) {
     if (position != null) {
@@ -81,6 +87,16 @@ export class Popover {
   updateMiddleware() {
     this.handleMiddlewareChange();
   }
+  updateResizeObserver() {
+    const observer = this.getOrCreateResizeObserver();
+    observer.disconnect();
+    if (this.boundarySelector != null) {
+      const element = document.querySelector(this.boundarySelector);
+      if (element != null) {
+        observer.observe(element);
+      }
+    }
+  }
   /**
    * @private Used for internals or testing.
    */
@@ -186,6 +202,12 @@ export class Popover {
     this.viewportWidth = this.partialWindow.innerWidth;
     this.viewportHeight = this.partialWindow.innerHeight;
   }
+  getOrCreateResizeObserver() {
+    if (this.boundaryResizeObserver == null) {
+      this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
+    }
+    return this.boundaryResizeObserver;
+  }
   getTransformClass() {
     if (this.animated) {
       switch (this.computedPlacement) {
@@ -485,6 +507,32 @@ export class Popover {
         "attribute": "update-on-resize",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "resizeObserverFactory": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
+          "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
+          "references": {
+            "ResizeObserverEntry": {
+              "location": "global"
+            },
+            "ResizeObserver": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "defaultValue": "(cb) => new ResizeObserver(cb)"
       }
     };
   }
@@ -538,6 +586,9 @@ export class Popover {
       }, {
         "propName": "offsetBehavior",
         "methodName": "updateMiddleware"
+      }, {
+        "propName": "boundarySelector",
+        "methodName": "updateResizeObserver"
       }];
   }
 }

package/dist/collection/components/result-list/result-list.js

@@ -1,6 +1,6 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
-import { ElementPool } from '../../util/templates/element-pool';
+import { ElementPool, } from '../../util/templates/element-pool';
 import { generateInstanceFromTemplate, } from '../../util/templates/templates';
 import { getResultListHeight, scrollToResult } from './lib';
 export class ResultList {
@@ -29,7 +29,7 @@ export class ResultList {
       }
     };
     this.createResultPool = () => {
-      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance());
+      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
     };
     this.createResultInstance = () => {
       if (this.stateMap.resultTemplate != null) {
@@ -41,6 +41,18 @@ export class ResultList {
         throw new Error('Result template not defined.');
       }
     };
+    this.createResultHandlers = () => {
+      return [
+        {
+          type: 'pointerdown',
+          handler: this.handlePointerDown,
+        },
+        {
+          type: 'click',
+          handler: this.handleResultClick,
+        },
+      ];
+    };
     this.layoutResults = () => {
       var _a, _b, _c, _d;
       const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
@@ -61,6 +73,7 @@ export class ResultList {
           el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
           el.style.width = '100%';
           el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
+          el.setAttribute('data-result-id', result.id);
           binding.bind(result);
         }
       });
@@ -103,6 +116,8 @@ export class ResultList {
     this.lastStartIndex = 0;
     this.lastFocusedIndex = 0;
     this.stateMap = {};
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
   }
   handleResultsChanged(results) {
     if (typeof results === 'string') {
@@ -148,6 +163,16 @@ export class ResultList {
         height: `${this.parsedResults.length * this.resultHeight}px`,
       } }, h("slot", null), h("slot", { name: "result" })))))));
   }
+  handlePointerDown(event) {
+    event.preventDefault();
+  }
+  handleResultClick(event) {
+    const closestIdElement = event.target.closest('[data-result-id]');
+    const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
+    if (result != null) {
+      this.resultClick.emit(result);
+    }
+  }
   computeViewportResults() {
     const viewportHeight = this.getListHeight();
     if (viewportHeight != null && this.resultHeight > 0) {
@@ -377,7 +402,26 @@ export class ResultList {
         },
         "complexType": {
           "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+          "references": {
+            "Result": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "resultClick",
+        "name": "resultClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Result",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
             "Result": {
               "location": "local"

package/dist/collection/components/search-bar/dom.js

@@ -0,0 +1,12 @@
+export const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+export const createDocumentRange = () => {
+  return document.createRange();
+};
+export const createTextNode = (text) => {
+  return new Text(text != null && text !== '' ? text : ' ');
+};

package/dist/collection/components/search-bar/lib.js

@@ -1,21 +1,29 @@
-export const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
+import { createTextNode } from './dom';
+export const createResultUrn = (result) => {
+  return `${result.type}:${result.id}`;
 };
-export const createDocumentRange = () => {
-  return document.createRange();
+export 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,
+  };
 };
-export const isTextNode = (node) => {
-  return node instanceof Text;
+export const getNodesForSearchResultReplacement = (replacement) => {
+  const keys = Object.keys(replacement);
+  return keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
 };
-export const isHtmlElement = (target) => {
-  return target instanceof HTMLElement;
+export const trimNonstandardSpaces = (text) => {
+  return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
-export const isReplacedElement = (el) => {
-  return (el === null || el === void 0 ? void 0 : el.getAttribute('data-replaced')) === 'true';
+const createHairSpace = () => {
+  return String.fromCharCode(8202);
 };
-export const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+const createNoBreakSpace = () => {
+  return String.fromCharCode(160);
 };

package/dist/collection/components/search-bar/search-bar.css

@@ -1,23 +1,7 @@
 .wrapper {
   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;
-}
-
-.test-mention {
-  display: inline-block;
-  color: blue;
-}
-
-.hidden {
-  visibility: hidden;
+  border: 1px solid var(--vertex-ui-neutral-600);
+  border-radius: 0.5rem;
 }
 
 .content-input {
@@ -33,17 +17,6 @@
   white-space: pre-line;
 }
 
-.textarea {
-  overflow: hidden;
-  outline: none;
-  box-shadow: none;
-  resize: none;
-}
-
-.content-input:focus {
-  outline: none;
-}
-
 /* standard */
 .standard {
   border-color: var(--vertex-ui-neutral-400);