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

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],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"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"],"resizeObserverFactory":[16],"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],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"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-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["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"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]]], options);
   });
 };
 

package/dist/esm/tab-c76332b0.js

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

package/dist/esm/tabs-8e5353ba.js

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

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

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

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon_button } from './icon-button-b0992730.js';
+export { I as vertex_icon_button } from './icon-button-4820c5f8.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-cf9f8ca1.js';
+import './icon-helper-091fab53.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-c48d1e4c.js';
+export { I as vertex_icon } from './icon-788d26c9.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-cf9f8ca1.js';
+import './icon-helper-091fab53.js';

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

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

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

@@ -0,0 +1,4 @@
+export { T as vertex_tabs } from './tabs-8e5353ba.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';
+import './dom-613e2677.js';

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

@@ -1,5 +1,6 @@
-export { T as vertex_tooltip } from './tooltip-933da261.js';
+export { T as vertex_tooltip } from './tooltip-29278ea4.js';
 import './index-72f28b71.js';
 import './tslib.es6-99cd0de8.js';
 import './index-9c609209.js';
+import './dom-613e2677.js';
 import './slots-fbb5afb3.js';

package/dist/types/components/icon/icons/pmi.d.ts

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

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

@@ -32,6 +32,8 @@ export * from './search-bar/search-bar';
 export * from './select/select';
 export * from './slider/slider';
 export * from './spinner/spinner';
+export * from './tab/tab';
+export * from './tabs/tabs';
 export * from './text-field/text-field';
 export * from './toast/toast';
 export * from './toggle/toggle';

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

@@ -0,0 +1,11 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tab {
+  /**
+   * The label to include in tab list.
+   */
+  label: string;
+  active: boolean;
+  tabClick: EventEmitter<string>;
+  render(): h.JSX.IntrinsicElements;
+  private handleClick;
+}

package/dist/types/components/tab/util.d.ts

@@ -0,0 +1 @@
+export declare function isTabElement(element: Element): element is HTMLVertexTabElement;

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

@@ -0,0 +1,23 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tabs {
+  active?: string;
+  private labels;
+  private activeBounds?;
+  private activeButtonEl?;
+  private hostEl;
+  /**
+   * An event that is emitted whenever the selected tab changes
+   * and contains the label of the newly selected tab.
+   */
+  selectedTabChanged: EventEmitter<string>;
+  private indicatorInitialized;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  protected componentDidUpdate(): void;
+  protected handleActiveButtonChange(): void;
+  render(): h.JSX.IntrinsicElements;
+  private handleLabelClick;
+  private updateActiveOnTab;
+  private findTabByLabel;
+  private updateTabLabels;
+}

package/dist/types/components.d.ts

@@ -675,6 +675,16 @@ export namespace Components {
          */
         "size": SpinnerSize;
     }
+    interface VertexTab {
+        "active": boolean;
+        /**
+          * The label to include in tab list.
+         */
+        "label": string;
+    }
+    interface VertexTabs {
+        "active"?: string;
+    }
     interface VertexTextfield {
         /**
           * Sets autoComplete attribute on <input>
@@ -883,6 +893,14 @@ export interface VertexSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVertexSliderElement;
 }
+export interface VertexTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVertexTabElement;
+}
+export interface VertexTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVertexTabsElement;
+}
 export interface VertexTextfieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVertexTextfieldElement;
@@ -1100,6 +1118,18 @@ declare global {
         prototype: HTMLVertexSpinnerElement;
         new (): HTMLVertexSpinnerElement;
     };
+    interface HTMLVertexTabElement extends Components.VertexTab, HTMLStencilElement {
+    }
+    var HTMLVertexTabElement: {
+        prototype: HTMLVertexTabElement;
+        new (): HTMLVertexTabElement;
+    };
+    interface HTMLVertexTabsElement extends Components.VertexTabs, HTMLStencilElement {
+    }
+    var HTMLVertexTabsElement: {
+        prototype: HTMLVertexTabsElement;
+        new (): HTMLVertexTabsElement;
+    };
     interface HTMLVertexTextfieldElement extends Components.VertexTextfield, HTMLStencilElement {
     }
     var HTMLVertexTextfieldElement: {
@@ -1159,6 +1189,8 @@ declare global {
         "vertex-select": HTMLVertexSelectElement;
         "vertex-slider": HTMLVertexSliderElement;
         "vertex-spinner": HTMLVertexSpinnerElement;
+        "vertex-tab": HTMLVertexTabElement;
+        "vertex-tabs": HTMLVertexTabsElement;
         "vertex-textfield": HTMLVertexTextfieldElement;
         "vertex-toast": HTMLVertexToastElement;
         "vertex-toggle": HTMLVertexToggleElement;
@@ -1937,6 +1969,21 @@ declare namespace LocalJSX {
          */
         "size"?: SpinnerSize;
     }
+    interface VertexTab {
+        "active"?: boolean;
+        /**
+          * The label to include in tab list.
+         */
+        "label": string;
+        "onTabClick"?: (event: VertexTabCustomEvent<string>) => void;
+    }
+    interface VertexTabs {
+        "active"?: string;
+        /**
+          * An event that is emitted whenever the selected tab changes and contains the label of the newly selected tab.
+         */
+        "onSelectedTabChanged"?: (event: VertexTabsCustomEvent<string>) => void;
+    }
     interface VertexTextfield {
         /**
           * Sets autoComplete attribute on <input>
@@ -2118,6 +2165,8 @@ declare namespace LocalJSX {
         "vertex-select": VertexSelect;
         "vertex-slider": VertexSlider;
         "vertex-spinner": VertexSpinner;
+        "vertex-tab": VertexTab;
+        "vertex-tabs": VertexTabs;
         "vertex-textfield": VertexTextfield;
         "vertex-toast": VertexToast;
         "vertex-toggle": VertexToggle;
@@ -2162,6 +2211,8 @@ declare module "@stencil/core" {
             "vertex-select": LocalJSX.VertexSelect & JSXBase.HTMLAttributes<HTMLVertexSelectElement>;
             "vertex-slider": LocalJSX.VertexSlider & JSXBase.HTMLAttributes<HTMLVertexSliderElement>;
             "vertex-spinner": LocalJSX.VertexSpinner & JSXBase.HTMLAttributes<HTMLVertexSpinnerElement>;
+            "vertex-tab": LocalJSX.VertexTab & JSXBase.HTMLAttributes<HTMLVertexTabElement>;
+            "vertex-tabs": LocalJSX.VertexTabs & JSXBase.HTMLAttributes<HTMLVertexTabsElement>;
             "vertex-textfield": LocalJSX.VertexTextfield & JSXBase.HTMLAttributes<HTMLVertexTextfieldElement>;
             "vertex-toast": LocalJSX.VertexToast & JSXBase.HTMLAttributes<HTMLVertexToastElement>;
             "vertex-toggle": LocalJSX.VertexToggle & JSXBase.HTMLAttributes<HTMLVertexToggleElement>;

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

@@ -88,6 +88,7 @@ export declare enum IconNames {
   'pin-text-fill' = "pin-text-fill",
   'pin-text-square' = "pin-text-square",
   'plus' = "plus",
+  'pmi' = "pmi",
   'precise-measurement' = "precise-measurement",
   'rabbit' = "rabbit",
   'reset' = "reset",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.11",
+  "version": "0.1.0-canary.13",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.21.0",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "bd38057f445e078df48f0888b3a247884620d13b"
+  "gitHead": "53757193daeb9741ba4bbd83f922c2f1b2952a86"
 }

package/dist/components/p-0b1cdc8a.entry.js

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

package/dist/components/p-90a530df.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon}from"./p-91811c21.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-f007c274.js";

package/dist/components/p-92930f2a.js

@@ -1 +0,0 @@
-import{r as t,h as n,H as r,g as e}from"./p-6834631c.js";import{_ as i,a as o}from"./p-59032668.js";import{c as u}from"./p-fe062eb0.js";import{a as s}from"./p-b2c7b113.js";var a;a=Error,i((function t(n){var r=a.call(this,"Validation error mapping object.")||this;return r.errors=n,Object.setPrototypeOf(r,t.prototype),r}),a);var c,f="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},h={exports:{}};!function(t,n){var r="__lodash_hash_undefined__",e=9007199254740991,i="[object Arguments]",o="[object Array]",u="[object Boolean]",s="[object Date]",a="[object Error]",c="[object Function]",h="[object Map]",l="[object Number]",v="[object Object]",d="[object Promise]",p="[object RegExp]",b="[object Set]",y="[object String]",g="[object WeakMap]",m="[object ArrayBuffer]",j="[object DataView]",w=/^\[object .+?Constructor\]$/,x=/^(?:0|[1-9]\d*)$/,_={};_["[object Float32Array]"]=_["[object Float64Array]"]=_["[object Int8Array]"]=_["[object Int16Array]"]=_["[object Int32Array]"]=_["[object Uint8Array]"]=_["[object Uint8ClampedArray]"]=_["[object Uint16Array]"]=_["[object Uint32Array]"]=!0,_[i]=_[o]=_[m]=_[u]=_[j]=_[s]=_[a]=_[c]=_[h]=_[l]=_[v]=_[p]=_[b]=_[y]=_[g]=!1;var B="object"==typeof f&&f&&f.Object===Object&&f,I="object"==typeof self&&self&&self.Object===Object&&self,C=B||I||Function("return this")(),O=n&&!n.nodeType&&n,E=O&&t&&!t.nodeType&&t,A=E&&E.exports===O,P=A&&B.process,S=function(){try{return P&&P.binding&&P.binding("util")}catch(t){}}(),$=S&&S.isTypedArray;function k(t,n){for(var r=-1,e=null==t?0:t.length;++r<e;)if(n(t[r],r,t))return!0;return!1}function T(t){var n=-1,r=Array(t.size);return t.forEach((function(t,e){r[++n]=[e,t]})),r}function D(t){var n=-1,r=Array(t.size);return t.forEach((function(t){r[++n]=t})),r}var M,U,F,L=Array.prototype,V=Object.prototype,R=C["__core-js_shared__"],N=Function.prototype.toString,W=V.hasOwnProperty,z=(M=/[^.]+$/.exec(R&&R.keys&&R.keys.IE_PROTO||""))?"Symbol(src)_1."+M:"",G=V.toString,H=RegExp("^"+N.call(W).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),q=A?C.Buffer:void 0,J=C.Symbol,K=C.Uint8Array,Q=V.propertyIsEnumerable,X=L.splice,Y=J?J.toStringTag:void 0,Z=Object.getOwnPropertySymbols,tt=q?q.isBuffer:void 0,nt=(U=Object.keys,F=Object,function(t){return U(F(t))}),rt=Ot(C,"DataView"),et=Ot(C,"Map"),it=Ot(C,"Promise"),ot=Ot(C,"Set"),ut=Ot(C,"WeakMap"),st=Ot(Object,"create"),at=St(rt),ct=St(et),ft=St(it),ht=St(ot),lt=St(ut),vt=J?J.prototype:void 0,dt=vt?vt.valueOf:void 0;function pt(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var e=t[n];this.set(e[0],e[1])}}function bt(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var e=t[n];this.set(e[0],e[1])}}function yt(t){var n=-1,r=null==t?0:t.length;for(this.clear();++n<r;){var e=t[n];this.set(e[0],e[1])}}function gt(t){var n=-1,r=null==t?0:t.length;for(this.__data__=new yt;++n<r;)this.add(t[n])}function mt(t){var n=this.__data__=new bt(t);this.size=n.size}function jt(t,n){for(var r=t.length;r--;)if($t(t[r][0],n))return r;return-1}function wt(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":Y&&Y in Object(t)?function(t){var n=W.call(t,Y),r=t[Y];try{t[Y]=void 0;var e=!0}catch(t){}var i=G.call(t);return e&&(n?t[Y]=r:delete t[Y]),i}(t):function(t){return G.call(t)}(t)}function xt(t){return Lt(t)&&wt(t)==i}function _t(t,n,r,e,c){return t===n||(null==t||null==n||!Lt(t)&&!Lt(n)?t!=t&&n!=n:function(t,n,r,e,c,f){var d=Tt(t),g=Tt(n),w=d?o:At(t),x=g?o:At(n),_=(w=w==i?v:w)==v,B=(x=x==i?v:x)==v,I=w==x;if(I&&Dt(t)){if(!Dt(n))return!1;d=!0,_=!1}if(I&&!_)return f||(f=new mt),d||Vt(t)?Bt(t,n,r,e,c,f):function(t,n,r,e,i,o,c){switch(r){case j:if(t.byteLength!=n.byteLength||t.byteOffset!=n.byteOffset)return!1;t=t.buffer,n=n.buffer;case m:return!(t.byteLength!=n.byteLength||!o(new K(t),new K(n)));case u:case s:case l:return $t(+t,+n);case a:return t.name==n.name&&t.message==n.message;case p:case y:return t==n+"";case h:var f=T;case b:if(f||(f=D),t.size!=n.size&&!(1&e))return!1;var v=c.get(t);if(v)return v==n;e|=2,c.set(t,n);var d=Bt(f(t),f(n),e,i,o,c);return c.delete(t),d;case"[object Symbol]":if(dt)return dt.call(t)==dt.call(n)}return!1}(t,n,w,r,e,c,f);if(!(1&r)){var C=_&&W.call(t,"__wrapped__"),O=B&&W.call(n,"__wrapped__");if(C||O){var E=C?t.value():t,A=O?n.value():n;return f||(f=new mt),c(E,A,r,e,f)}}return!!I&&(f||(f=new mt),function(t,n,r,e,i,o){var u=1&r,s=It(t),a=s.length;if(a!=It(n).length&&!u)return!1;for(var c=a;c--;){var f=s[c];if(!(u?f in n:W.call(n,f)))return!1}var h=o.get(t);if(h&&o.get(n))return h==n;var l=!0;o.set(t,n),o.set(n,t);for(var v=u;++c<a;){var d=t[f=s[c]],p=n[f];if(e)var b=u?e(p,d,f,n,t,o):e(d,p,f,t,n,o);if(!(void 0===b?d===p||i(d,p,r,e,o):b)){l=!1;break}v||(v="constructor"==f)}if(l&&!v){var y=t.constructor,g=n.constructor;y==g||!("constructor"in t)||!("constructor"in n)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(l=!1)}return o.delete(t),o.delete(n),l}(t,n,r,e,c,f))}(t,n,r,e,_t,c))}function Bt(t,n,r,e,i,o){var u=1&r,s=t.length,a=n.length;if(s!=a&&!(u&&a>s))return!1;var c=o.get(t);if(c&&o.get(n))return c==n;var f=-1,h=!0,l=2&r?new gt:void 0;for(o.set(t,n),o.set(n,t);++f<s;){var v=t[f],d=n[f];if(e)var p=u?e(d,v,f,n,t,o):e(v,d,f,t,n,o);if(void 0!==p){if(p)continue;h=!1;break}if(l){if(!k(n,(function(t,n){if(!l.has(n)&&(v===t||i(v,t,r,e,o)))return l.push(n)}))){h=!1;break}}else if(v!==d&&!i(v,d,r,e,o)){h=!1;break}}return o.delete(t),o.delete(n),h}function It(t){return function(t,n,r){var e=n(t);return Tt(t)?e:function(t,n){for(var r=-1,e=n.length,i=t.length;++r<e;)t[i+r]=n[r];return t}(e,r(t))}(t,Rt,Et)}function Ct(t,n){var r,e,i=t.__data__;return("string"==(e=typeof(r=n))||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==r:null===r)?i["string"==typeof n?"string":"hash"]:i.map}function Ot(t,n){var r=function(t,n){return null==t?void 0:t[n]}(t,n);return function(t){return!(!Ft(t)||function(t){return!!z&&z in t}(t))&&(Mt(t)?H:w).test(St(t))}(r)?r:void 0}pt.prototype.clear=function(){this.__data__=st?st(null):{},this.size=0},pt.prototype.delete=function(t){var n=this.has(t)&&delete this.__data__[t];return this.size-=n?1:0,n},pt.prototype.get=function(t){var n=this.__data__;if(st){var e=n[t];return e===r?void 0:e}return W.call(n,t)?n[t]:void 0},pt.prototype.has=function(t){var n=this.__data__;return st?void 0!==n[t]:W.call(n,t)},pt.prototype.set=function(t,n){var e=this.__data__;return this.size+=this.has(t)?0:1,e[t]=st&&void 0===n?r:n,this},bt.prototype.clear=function(){this.__data__=[],this.size=0},bt.prototype.delete=function(t){var n=this.__data__,r=jt(n,t);return!(r<0||(r==n.length-1?n.pop():X.call(n,r,1),--this.size,0))},bt.prototype.get=function(t){var n=this.__data__,r=jt(n,t);return r<0?void 0:n[r][1]},bt.prototype.has=function(t){return jt(this.__data__,t)>-1},bt.prototype.set=function(t,n){var r=this.__data__,e=jt(r,t);return e<0?(++this.size,r.push([t,n])):r[e][1]=n,this},yt.prototype.clear=function(){this.size=0,this.__data__={hash:new pt,map:new(et||bt),string:new pt}},yt.prototype.delete=function(t){var n=Ct(this,t).delete(t);return this.size-=n?1:0,n},yt.prototype.get=function(t){return Ct(this,t).get(t)},yt.prototype.has=function(t){return Ct(this,t).has(t)},yt.prototype.set=function(t,n){var r=Ct(this,t),e=r.size;return r.set(t,n),this.size+=r.size==e?0:1,this},gt.prototype.add=gt.prototype.push=function(t){return this.__data__.set(t,r),this},gt.prototype.has=function(t){return this.__data__.has(t)},mt.prototype.clear=function(){this.__data__=new bt,this.size=0},mt.prototype.delete=function(t){var n=this.__data__,r=n.delete(t);return this.size=n.size,r},mt.prototype.get=function(t){return this.__data__.get(t)},mt.prototype.has=function(t){return this.__data__.has(t)},mt.prototype.set=function(t,n){var r=this.__data__;if(r instanceof bt){var e=r.__data__;if(!et||e.length<199)return e.push([t,n]),this.size=++r.size,this;r=this.__data__=new yt(e)}return r.set(t,n),this.size=r.size,this};var Et=Z?function(t){return null==t?[]:(t=Object(t),function(n){for(var r=-1,e=null==n?0:n.length,i=0,o=[];++r<e;){var u=n[r];Q.call(t,u)&&(o[i++]=u)}return o}(Z(t)))}:function(){return[]},At=wt;function Pt(t,n){return!!(n=null==n?e:n)&&("number"==typeof t||x.test(t))&&t>-1&&t%1==0&&t<n}function St(t){if(null!=t){try{return N.call(t)}catch(t){}try{return t+""}catch(t){}}return""}function $t(t,n){return t===n||t!=t&&n!=n}(rt&&At(new rt(new ArrayBuffer(1)))!=j||et&&At(new et)!=h||it&&At(it.resolve())!=d||ot&&At(new ot)!=b||ut&&At(new ut)!=g)&&(At=function(t){var n=wt(t),r=n==v?t.constructor:void 0,e=r?St(r):"";if(e)switch(e){case at:return j;case ct:return h;case ft:return d;case ht:return b;case lt:return g}return n});var kt=xt(function(){return arguments}())?xt:function(t){return Lt(t)&&W.call(t,"callee")&&!Q.call(t,"callee")},Tt=Array.isArray,Dt=tt||function(){return!1};function Mt(t){if(!Ft(t))return!1;var n=wt(t);return n==c||"[object GeneratorFunction]"==n||"[object AsyncFunction]"==n||"[object Proxy]"==n}function Ut(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=e}function Ft(t){var n=typeof t;return null!=t&&("object"==n||"function"==n)}function Lt(t){return null!=t&&"object"==typeof t}var Vt=$?function(t){return function(n){return t(n)}}($):function(t){return Lt(t)&&Ut(t.length)&&!!_[wt(t)]};function Rt(t){return null!=(n=t)&&Ut(n.length)&&!Mt(n)?function(t,n){var r=Tt(t),e=!r&&kt(t),i=!r&&!e&&Dt(t),o=!r&&!e&&!i&&Vt(t),u=r||e||i||o,s=u?function(t,n){for(var r=-1,e=Array(t);++r<t;)e[r]=n(r);return e}(t.length,String):[],a=s.length;for(var c in t)!n&&!W.call(t,c)||u&&("length"==c||i&&("offset"==c||"parent"==c)||o&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||Pt(c,a))||s.push(c);return s}(t):function(t){if((n=t)!==("function"==typeof(r=n&&n.constructor)&&r.prototype||V))return nt(t);var n,r,e=[];for(var i in Object(t))W.call(t,i)&&"constructor"!=i&&e.push(i);return e}(t);var n}t.exports=function(t,n){return _t(t,n)}}(h,h.exports);var l=new Uint8Array(16);function v(){if(!c&&!(c="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return c(l)}var d=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function p(t){return"string"==typeof t&&d.test(t)}for(var b=[],y=0;y<256;++y)b.push((y+256).toString(16).substr(1));function g(t,n,r){var e=(t=t||{}).random||(t.rng||v)();if(e[6]=15&e[6]|64,e[8]=63&e[8]|128,n){r=r||0;for(var i=0;i<16;++i)n[r+i]=e[i];return n}return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=(b[t[n+0]]+b[t[n+1]]+b[t[n+2]]+b[t[n+3]]+"-"+b[t[n+4]]+b[t[n+5]]+"-"+b[t[n+6]]+b[t[n+7]]+"-"+b[t[n+8]]+b[t[n+9]]+"-"+b[t[n+10]]+b[t[n+11]]+b[t[n+12]]+b[t[n+13]]+b[t[n+14]]+b[t[n+15]]).toLowerCase();if(!p(r))throw TypeError("Stringified UUID is invalid");return r}(e)}var m=Object.freeze({__proto__:null,create:function(){return g()},fromMsbLsb:function(t,n){function r(t,n){var r=BigInt(1)<<n*BigInt(4);return(r|t&r-BigInt(1)).toString(16).substring(1)}var e="string"==typeof t?BigInt(t):t,i="string"==typeof n?BigInt(n):n,o=r(e>>BigInt(32),BigInt(8)),u=r(e>>BigInt(16),BigInt(4)),s=r(e,BigInt(4)),a=r(i>>BigInt(48),BigInt(4)),c=r(i,BigInt(12));return"".concat(o,"-").concat(u,"-").concat(s,"-").concat(a,"-").concat(c)},toMsbLsb:function(t){var n=o(t.split("-"),5),r=n[0],e=n[1],i=n[2],u=n[3],s=n[4];if(null==r||null==e||null==i||null==u||null==s)throw new Error("Invalid UUID string ".concat(t));var a=BigInt.asIntN(64,BigInt("0x".concat(r+e+i))),c=BigInt.asIntN(64,BigInt("0x".concat(u+s)));return{msb:a.toString(),lsb:c.toString()}}});const j=class{constructor(n){t(this,n),this.pointerEntered=!1,this.content=void 0,this.disabled=void 0,this.placement="bottom",this.delay=500,this.animated=!0,this.open=!1,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-${m.create()}`}disconnectedCallback(){this.removeElement(),this.clearOpenTimeout(),this.pointerEntered=!1}handleContentChange(){null!=this.internalContentElement&&this.updateContentElementChildren(this.internalContentElement)}handleDisabledChange(){null!=this.internalContentElement&&this.updateContentElementClass(this.internalContentElement),!this.disabled&&this.pointerEntered&&this.handlePointerEnter()}render(){return n(r,null,n("div",{class:"target",ref:t=>{this.targetElement=t},onPointerEnter:this.handlePointerEnter,onPointerLeave:this.handlePointerLeave},n("slot",null)),n("div",{class:"content-hidden",ref:t=>{this.contentElement=t}},n("slot",{name:"content",onSlotchange:this.handleContentChange})))}addElement(){if(null!=this.targetElement){const t=this.createPopoverElement(this.targetElement),n=this.createContentElement();this.updateContentElementChildren(n),t.appendChild(n),this.hostElement.ownerDocument.body.appendChild(t)}}removeElement(){const t=this.hostElement.ownerDocument.getElementById(this.tooltipId);null!=t&&t.remove(),this.internalContentElement=void 0}createPopoverElement(t){const n=this.hostElement.ownerDocument.createElement("vertex-popover");return n.id=this.tooltipId,n.setAttribute("class","vertex-tooltip-popover"),n.open=this.open,n.resizeBehavior="fixed",n.backdrop=!1,n.placement=this.placement,n.animated=this.animated,n.anchorBounds=t.getBoundingClientRect(),n}createContentElement(){return this.internalContentElement=this.hostElement.ownerDocument.createElement("div"),this.internalContentElement.setAttribute("class",u("vertex-tooltip-content",{hidden:!this.open||this.disabled})),this.internalContentElement}updateContentElementClass(t){t.setAttribute("class",u("vertex-tooltip-content",{hidden:!this.open||this.disabled}))}updateContentElementChildren(t){var n;this.displayedSlottedContent=null!==(n=s(this.contentElement))&&void 0!==n?n:this.displayedSlottedContent,null!=this.content?t.innerText=this.content:null!=this.displayedSlottedContent&&t.appendChild(this.displayedSlottedContent)}handlePointerEnter(){null!=this.openTimeout||this.disabled?null==this.openTimeout&&(this.pointerEntered=!0):this.createOpenTimeout()}handlePointerLeave(){this.clearOpenTimeout(),this.removeElement(),this.open=!1,this.pointerEntered=!1}createOpenTimeout(){this.openTimeout=setTimeout((()=>{this.open=!0,this.openTimeout=void 0,this.addElement()}),this.delay),this.pointerEntered=!1}clearOpenTimeout(){null!=this.openTimeout&&(clearTimeout(this.openTimeout),this.openTimeout=void 0)}get hostElement(){return e(this)}static get watchers(){return{content:["handleContentChange"],disabled:["handleDisabledChange"]}}};j.style=":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";export{j as T}

package/dist/components/p-9340952f.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon_button}from"./p-08f0434e.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-f007c274.js";