@vertexvis/ui 0.1.0-canary.1 → 0.1.0-canary.11

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-f868bf06.js');
+const iconButton = require('./icon-button-e2dbc8b2.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-caf2699e.js');
+require('./icon-helper-c24d6e6b.js');
 
 
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-53d62a46.js');
+const icon = require('./icon-c40f74ca.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-caf2699e.js');
+require('./icon-helper-c24d6e6b.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const popover = require('./popover-d9ec8e10.js');
+const popover = require('./popover-942209b8.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const resultList = require('./result-list-1e592c3c.js');
+const resultList = require('./result-list-241ffe8d.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-bb40cfa7.js');
+const searchBar = require('./search-bar-91cbcd07.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

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-80a7b722.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",
@@ -11,7 +12,6 @@
     "./components/icon-button/icon-button.js",
     "./components/radio/radio.js",
     "./components/resizable/resizable.js",
-    "./components/result-list/result-list.js",
     "./components/search-bar/search-bar.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
@@ -35,6 +35,7 @@
     "./components/menu-divider/menu-divider.js",
     "./components/menu-item/menu-item.js",
     "./components/radio-group/radio-group.js",
+    "./components/result-list/result-list.js",
     "./components/select/select.js",
     "./components/tooltip/tooltip.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,9 +37,11 @@ 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';
+import { Compare } from './icons/compare';
 import { Copy } from './icons/copy';
 import { CrossSection } from './icons/cross-section';
 import { CubeOrthographic } from './icons/cube-orthographic';
@@ -84,6 +86,7 @@ import { PinFill } from './icons/pin-fill';
 import { PinLine } from './icons/pin-line';
 import { PinText } from './icons/pin-text';
 import { PinTextFill } from './icons/pin-text-fill';
+import { PinTextSquare } from './icons/pin-text-square';
 import { Plus } from './icons/plus';
 import { PreciseMeasurement } from './icons/precise-measurement';
 import { Rabbit } from './icons/rabbit';
@@ -183,12 +186,16 @@ 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':
       return h(CommentResolve, null);
     case 'comment-show':
       return h(CommentShow, null);
+    case 'compare':
+      return h(Compare, null);
     case 'copy':
       return h(Copy, null);
     case 'cross-section':
@@ -277,6 +284,8 @@ export function getSvg(name) {
       return h(PinText, null);
     case 'pin-text-fill':
       return h(PinTextFill, null);
+    case 'pin-text-square':
+      return h(PinTextSquare, null);
     case 'plus':
       return h(Plus, null);
     case 'precise-measurement':

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": "\"compare\" | \"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\" | \"pin-text-square\" | \"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/icons/compare.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Compare = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "compare" }, h("path", { d: "M8.27 9.94 5.89 7.56c-.11-.11-.23-.17-.36-.17s-.25.06-.36.17c-.11.11-.16.23-.15.37 0 .13.06.25.15.34l1.74 1.74H1.5c-.14 0-.26.05-.36.14-.1.1-.14.21-.14.36s.05.26.14.36c.1.1.21.14.36.14h5.42l-1.74 1.74c-.11.11-.16.23-.16.35 0 .13.06.24.16.35.11.11.23.16.36.16.13 0 .25-.06.34-.15l2.39-2.39c.09-.09.15-.18.18-.27.04-.09.05-.19.05-.3s-.02-.21-.05-.3c-.04-.09-.1-.18-.18-.27Zm6.59-4.79c-.1-.1-.21-.14-.36-.14H9.11l1.74-1.74c.11-.11.16-.23.16-.35 0-.13-.06-.24-.16-.35a.495.495 0 0 0-.36-.16c-.13 0-.25.06-.34.15L7.76 4.95c-.09.09-.15.18-.18.27-.04.09-.05.19-.05.3s.02.21.05.3c.04.09.1.18.18.27l2.38 2.38c.11.11.23.17.36.17s.25-.06.36-.17c.11-.11.16-.23.15-.37 0-.13-.06-.25-.15-.34L9.12 6.02h5.39c.14 0 .26-.05.36-.14.1-.1.14-.21.14-.36s-.05-.26-.14-.36Z" })));

package/dist/collection/components/icon/icons/pin-text-square.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const PinTextSquare = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "pin-text-square" }, h("path", { d: "M13.51 14.97H2.5c-.83 0-1.5-.67-1.5-1.5V2.5C1 1.67 1.67 1 2.5 1h11.01c.83 0 1.5.67 1.5 1.5v10.97c0 .83-.67 1.5-1.5 1.5ZM2.5 2c-.28 0-.5.22-.5.5v10.97c0 .28.22.5.5.5h11.01c.28 0 .5-.22.5-.5V2.5c0-.28-.22-.5-.5-.5H2.5Z" }), h("path", { d: "m3.98 11.97 3.3-8h1.37l3.37 8h-1.04l-.88-2.01H5.9l-.91 2.01H3.98Zm4.02-7-1.76 4h3.42L8 4.97Z" })));

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": "\"compare\" | \"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\" | \"pin-text-square\" | \"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) {
@@ -188,7 +213,8 @@ export class ResultList {
           "resolved": "Result[]",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         },
@@ -377,10 +403,31 @@ export class ResultList {
         },
         "complexType": {
           "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+          "references": {
+            "Result": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "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"
+              "location": "import",
+              "path": "./types"
             }
           }
         }

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

@@ -0,0 +1 @@
+export {};

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);
+};