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

package/dist/esm/icon-button-aad3c0e7.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.js';
+import { g as getSvg } from './icon-helper-83f10f73.js';
+
+const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.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{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
+
+const IconButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconName = undefined;
+    this.disabled = undefined;
+    this.variant = 'default';
+    this.iconColor = 'default';
+    this.iconSize = 'md';
+  }
+  render() {
+    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: classnames('container', {
+        disabled: this.disabled,
+        floating: this.variant === 'floating',
+        plain: this.variant === 'plain',
+        primary: this.iconColor === 'primary',
+        secondary: this.iconColor === 'secondary',
+      }) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
+        xs: this.iconSize === 'xs',
+        sm: this.iconSize === 'sm',
+        md: this.iconSize === 'md',
+        lg: this.iconSize === 'lg',
+      }) }, getSvg(this.iconName), h("div", { class: "badge" }, h("slot", { name: "badge" }))), h("slot", null))));
+  }
+  handleClick(event) {
+    var _a;
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
+  }
+};
+IconButton.style = iconButtonCss;
+
+export { IconButton as I };

package/dist/esm/{icon-2630793d.js → icon-d37150b4.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-10a99d95.js';
+import { g as getSvg } from './icon-helper-83f10f73.js';
 
 const iconCss = ".container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}svg{position:relative;width:100%}";
 

package/dist/esm/{icon-helper-10a99d95.js → icon-helper-83f10f73.js}

@@ -128,6 +128,11 @@ const Columns = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox:
 const CommentAdd = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "comment-add" },
   h("path", { d: "M10.5,6.7h-5c-.3,0-.5.2-.5.5s.2.5.5.5h5c.3,0,.5-.2.5-.5s-.2-.5-.5-.5ZM7.5,5v4.4c0,.3.2.5.5.5s.5-.2.5-.5v-4.4c0-.3-.2-.5-.5-.5s-.5.2-.5.5ZM13.5,2H2.5c-.8,0-1.5.7-1.5,1.5v7c0,.8.7,1.5,1.5,1.5h5.8l2.9,2.9c.1.1.4.2.5.1.2,0,.3-.3.3-.5v-2.5h1.5c.8,0,1.5-.7,1.5-1.5V3.5c0-.8-.7-1.5-1.5-1.5ZM14,10.5c0,.3-.2.5-.5.5h-2c-.3,0-.5.2-.5.5v1.8l-2.1-2.1s-.2-.2-.4-.1H2.5c-.3,0-.5-.2-.5-.5V3.5c0-.3.2-.5.5-.5h11c.3,0,.5.2.5.5v7Z" })));
 
+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" })));
+
 const CommentReopen = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "comment-reopen" },
   h("path", { d: "M13.5,2H11.81l.57,1H13.5a.5.5,0,0,1,.5.5v7a.5.5,0,0,1-.5.5h-2a.51.51,0,0,0-.5.5v1.79L8.85,11.15A.47.47,0,0,0,8.5,11h-6a.5.5,0,0,1-.5-.5v-7A.5.5,0,0,1,2.5,3H8.62l.57-1H2.5A1.5,1.5,0,0,0,1,3.5v7A1.5,1.5,0,0,0,2.5,12H8.29l2.86,2.85a.47.47,0,0,0,.54.11A.5.5,0,0,0,12,14.5V12h1.5A1.5,1.5,0,0,0,15,10.5v-7A1.5,1.5,0,0,0,13.5,2ZM7.11,5.21a.5.5,0,0,0,.22-.67.49.49,0,0,0-.67-.22A3,3,0,1,0,11,7V5.08h1.49l-2-3.45-2,3.45H10V7A2,2,0,1,1,7.11,5.21Z" })));
 
@@ -455,6 +460,8 @@ 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/esm/index.js

@@ -1,6 +1,7 @@
 export { A as AutoResizeTextArea } from './auto-resize-textarea-087fecdb.js';
 export { A as Avatar } from './avatar-775455a5.js';
 export { A as AvatarGroup } from './avatar-group-e5ca86bf.js';
+export { B as Badge } from './badge-6d27ca92.js';
 export { B as Button } from './button-547336b8.js';
 export { C as Card } from './card-1e8790aa.js';
 export { C as CardGroup } from './card-group-4e8e0421.js';
@@ -16,8 +17,8 @@ export { D as DraggablePopover } from './draggable-popover-8ef3aec6.js';
 export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
 export { E as Expandable } from './expandable-b487cb00.js';
 export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
-export { I as Icon } from './icon-2630793d.js';
-export { I as IconButton } from './icon-button-25edf617.js';
+export { I as Icon } from './icon-d37150b4.js';
+export { I as IconButton } from './icon-button-aad3c0e7.js';
 export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
 export { M as Menu } from './menu-daa7f9c9.js';
 export { M as MenuDivider } from './menu-divider-87c888cb.js';
@@ -34,10 +35,10 @@ export { S as Spinner } from './spinner-afccea51.js';
 export { T as TextField } from './text-field-e542da25.js';
 export { T as Toast } from './toast-255648ff.js';
 export { T as Toggle } from './toggle-1fe22e4f.js';
-export { T as Tooltip } from './tooltip-97c1b3ec.js';
+export { T as Tooltip } from './tooltip-933da261.js';
 import './index-72f28b71.js';
 import './slots-fbb5afb3.js';
 import './index-9c609209.js';
-import './icon-helper-10a99d95.js';
+import './icon-helper-83f10f73.js';
 import './templates-797420bf.js';
 import './tslib.es6-99cd0de8.js';

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placeholder":[1],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"opened":[32],"computedPlacement":[32]}]]]], options);
+  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placeholder":[1],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"opened":[32],"computedPlacement":[32]}]]]], options);
   });
 };
 

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

@@ -2060,6 +2060,7 @@ 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-badge.entry.js

@@ -0,0 +1,3 @@
+export { B as vertex_badge } from './badge-6d27ca92.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';

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

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

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

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

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

@@ -1,4 +1,4 @@
-export { T as vertex_tooltip } from './tooltip-97c1b3ec.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/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { h } from '../../stencil-public-runtime';
+export type BadgeIconColor = 'primary' | 'secondary';
+export declare class Badge {
+  /**
+   * The string to show in the badge.
+   */
+  badgeText?: string;
+  /**
+   * The color of the badge displayed in this <vertex-badge>.
+   * Can be "primary" or "secondary", and defaults to "primary."
+   */
+  badgeColor: BadgeIconColor;
+  render(): h.JSX.IntrinsicElements;
+}

package/dist/types/components/icon/icons/comment-filled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const CommentFilled: () => h.JSX.IntrinsicElements;

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

@@ -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/types/components/tooltip/tooltip.d.ts

@@ -40,18 +40,25 @@ export declare class Tooltip {
   hostElement: HTMLElement;
   private open;
   private tooltipId;
+  private pointerEntered;
   private openTimeout?;
   private targetElement?;
   private contentElement?;
   private displayedSlottedContent?;
+  private internalContentElement?;
   constructor();
   disconnectedCallback(): void;
+  protected handleContentChange(): void;
+  protected handleDisabledChange(): void;
   render(): h.JSX.IntrinsicElements;
   private addElement;
   private removeElement;
   private createPopoverElement;
   private createContentElement;
+  private updateContentElementClass;
+  private updateContentElementChildren;
   private handlePointerEnter;
   private handlePointerLeave;
+  private createOpenTimeout;
   private clearOpenTimeout;
 }

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AvatarVariant } from "./components/avatar/avatar";
+import { BadgeIconColor } from "./components/badge/badge";
 import { ButtonColor, ButtonExpand, ButtonSize, ButtonType, ButtonVariant } from "./components/button/button";
 import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
@@ -71,6 +72,16 @@ export namespace Components {
     }
     interface VertexAvatarGroup {
     }
+    interface VertexBadge {
+        /**
+          * The color of the badge displayed in this <vertex-badge>. Can be "primary" or "secondary", and defaults to "primary."
+         */
+        "badgeColor": BadgeIconColor;
+        /**
+          * The string to show in the badge.
+         */
+        "badgeText"?: string;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -869,6 +880,12 @@ declare global {
         prototype: HTMLVertexAvatarGroupElement;
         new (): HTMLVertexAvatarGroupElement;
     };
+    interface HTMLVertexBadgeElement extends Components.VertexBadge, HTMLStencilElement {
+    }
+    var HTMLVertexBadgeElement: {
+        prototype: HTMLVertexBadgeElement;
+        new (): HTMLVertexBadgeElement;
+    };
     interface HTMLVertexButtonElement extends Components.VertexButton, HTMLStencilElement {
     }
     var HTMLVertexButtonElement: {
@@ -1077,6 +1094,7 @@ declare global {
         "vertex-auto-resize-textarea": HTMLVertexAutoResizeTextareaElement;
         "vertex-avatar": HTMLVertexAvatarElement;
         "vertex-avatar-group": HTMLVertexAvatarGroupElement;
+        "vertex-badge": HTMLVertexBadgeElement;
         "vertex-button": HTMLVertexButtonElement;
         "vertex-card": HTMLVertexCardElement;
         "vertex-card-group": HTMLVertexCardGroupElement;
@@ -1156,6 +1174,16 @@ declare namespace LocalJSX {
     }
     interface VertexAvatarGroup {
     }
+    interface VertexBadge {
+        /**
+          * The color of the badge displayed in this <vertex-badge>. Can be "primary" or "secondary", and defaults to "primary."
+         */
+        "badgeColor"?: BadgeIconColor;
+        /**
+          * The string to show in the badge.
+         */
+        "badgeText"?: string;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -1987,6 +2015,7 @@ declare namespace LocalJSX {
         "vertex-auto-resize-textarea": VertexAutoResizeTextarea;
         "vertex-avatar": VertexAvatar;
         "vertex-avatar-group": VertexAvatarGroup;
+        "vertex-badge": VertexBadge;
         "vertex-button": VertexButton;
         "vertex-card": VertexCard;
         "vertex-card-group": VertexCardGroup;
@@ -2030,6 +2059,7 @@ declare module "@stencil/core" {
             "vertex-auto-resize-textarea": LocalJSX.VertexAutoResizeTextarea & JSXBase.HTMLAttributes<HTMLVertexAutoResizeTextareaElement>;
             "vertex-avatar": LocalJSX.VertexAvatar & JSXBase.HTMLAttributes<HTMLVertexAvatarElement>;
             "vertex-avatar-group": LocalJSX.VertexAvatarGroup & JSXBase.HTMLAttributes<HTMLVertexAvatarGroupElement>;
+            "vertex-badge": LocalJSX.VertexBadge & JSXBase.HTMLAttributes<HTMLVertexBadgeElement>;
             "vertex-button": LocalJSX.VertexButton & JSXBase.HTMLAttributes<HTMLVertexButtonElement>;
             "vertex-card": LocalJSX.VertexCard & JSXBase.HTMLAttributes<HTMLVertexCardElement>;
             "vertex-card-group": LocalJSX.VertexCardGroup & JSXBase.HTMLAttributes<HTMLVertexCardGroupElement>;

package/dist/types/types/icon.d.ts

@@ -37,6 +37,7 @@ export declare enum IconNames {
   'collapse-all' = "collapse-all",
   'columns' = "columns",
   'comment-add' = "comment-add",
+  'comment-filled' = "comment-filled",
   'comment-reopen' = "comment-reopen",
   'comment-resolve' = "comment-resolve",
   'comment-show' = "comment-show",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.1",
+  "version": "0.1.0-canary.3",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -86,5 +86,5 @@
     "@floating-ui/dom": "^1.6.5",
     "@vertexvis/utils": "^0.21.0"
   },
-  "gitHead": "fdcf32dc075ecc364ee9887342e417bd5b6386e5"
+  "gitHead": "74641a62e6a3ad23243503b3db1948a85effdfa1"
 }

package/dist/cjs/icon-button-f868bf06.js

@@ -1,43 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-caf2699e.js');
-
-const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
-
-const IconButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.iconName = undefined;
-    this.disabled = undefined;
-    this.variant = 'default';
-    this.iconColor = 'default';
-    this.iconSize = 'md';
-  }
-  render() {
-    return (index.h(index.Host, { onClick: (e) => this.handleClick(e) }, index.h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: index$1.classnames('container', {
-        disabled: this.disabled,
-        floating: this.variant === 'floating',
-        plain: this.variant === 'plain',
-        primary: this.iconColor === 'primary',
-        secondary: this.iconColor === 'secondary',
-      }) }, index.h("slot", { name: "left" }), index.h("div", { class: index$1.classnames('icon-button', {
-        xs: this.iconSize === 'xs',
-        sm: this.iconSize === 'sm',
-        md: this.iconSize === 'md',
-        lg: this.iconSize === 'lg',
-      }) }, iconHelper.getSvg(this.iconName)), index.h("slot", null))));
-  }
-  handleClick(event) {
-    var _a;
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-};
-IconButton.style = iconButtonCss;
-
-exports.IconButton = IconButton;

package/dist/components/p-1d6cb015.entry.js

@@ -1 +0,0 @@
-export{T as vertex_tooltip}from"./p-f49a7ffd.js";import"./p-6834631c.js";import"./p-59032668.js";import"./p-fe062eb0.js";import"./p-b2c7b113.js";

package/dist/components/p-79fd6fb6.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon}from"./p-17b97932.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-94168b92.js";