@vertexvis/ui 0.1.0-canary.2 → 0.1.0-canary.21

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/{text-field-e542da25.js → text-field-32ac877e.js}

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

package/dist/esm/{tooltip-97c1b3ec.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,16 +2051,13 @@ 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;
 const Tooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.pointerEntered = false;
     this.content = undefined;
     this.disabled = undefined;
     this.placement = 'bottom';
@@ -2068,32 +2066,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 +2109,7 @@ const Tooltip = class {
     if (popover != null) {
       popover.remove();
     }
+    this.internalContentElement = undefined;
   }
   createPopoverElement(anchorElement) {
     const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
@@ -2117,25 +2124,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 content;
+    return this.internalContentElement;
+  }
+  updateContentElementClass(element) {
+    element.setAttribute('class', classnames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+  }
+  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 +2176,10 @@ const Tooltip = class {
     }
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "content": ["handleContentChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Tooltip.style = tooltipCss;
 

package/dist/esm/vertex-color-circle-picker.entry.js

@@ -1,3 +1,3 @@
-export { C as vertex_color_circle_picker } from './color-circle-picker-998a7e9c.js';
+export { C as vertex_color_circle_picker } from './color-circle-picker-e2a2cfb5.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-color-picker.entry.js

@@ -1,3 +1,4 @@
-export { C as vertex_color_picker } from './color-picker-2e3b51fa.js';
+export { C as vertex_color_picker } from './color-picker-1d67effe.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
+import './lib-73fbca8b.js';

package/dist/esm/vertex-color-swatch.entry.js

@@ -0,0 +1,4 @@
+export { C as vertex_color_swatch } from './color-swatch-0e62d13d.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';
+import './lib-73fbca8b.js';

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

@@ -1,3 +1,3 @@
-export { D as vertex_dialog } from './dialog-e3f49527.js';
+export { D as vertex_dialog } from './dialog-1cef715c.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-aad3c0e7.js';
+export { I as vertex_icon_button } from './icon-button-e6c72aec.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-83f10f73.js';
+import './icon-helper-67de1067.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-d37150b4.js';
+export { I as vertex_icon } from './icon-55b22de7.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-83f10f73.js';
+import './icon-helper-67de1067.js';

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

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

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

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

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

@@ -1,4 +1,4 @@
-export { S as vertex_search_bar } from './search-bar-59cc151d.js';
+export { S as vertex_search_bar } from './search-bar-8d18626e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

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

@@ -1,3 +1,3 @@
-export { S as vertex_select } from './select-75ed5653.js';
+export { S as vertex_select } from './select-78aeff96.js';
 import './index-72f28b71.js';
 import './index-9c609209.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-textfield.entry.js

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

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

@@ -1,5 +1,6 @@
-export { T as vertex_tooltip } from './tooltip-97c1b3ec.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/color-circle-picker/color-circle-picker.d.ts

@@ -8,12 +8,12 @@ export declare class ColorCirclePicker {
   /**
    * The colors to show in this `vertex-color-circle-picker`.
    * These values will map to the `color` property of the underlying
-   * `vertex-color-circle`.
+   * `vertex-color-swatch`.
    */
   colors: string[] | string;
   /**
    * Optional supplemental colors that will be provided to the
-   * underlying `vertex-color-circle` elements for associated
+   * underlying `vertex-color-swatch` elements for associated
    * indices in the `colors` array.
    */
   supplementalColors: string[] | string;
@@ -22,29 +22,29 @@ export declare class ColorCirclePicker {
    * Can be either `light` or `dark`, and defaults to `dark`.
    *
    * With the `dark` theme, the provided `colors` will be used
-   * as the background-colors for `vertex-color-circle` elements,
+   * as the background-colors for `vertex-color-swatch` elements,
    * and a `darkened` color will be used for the border-colors.
    *
    * With the `light` theme, the provided `colors` will be used
-   * as the background-colors for `vertex-color-circle` elements,
+   * as the background-colors for `vertex-color-swatch` elements,
    * and a `lightened` color will be used for the border-colors.
    */
   theme: 'light' | 'dark';
   /**
    * The percentage lighter color to use to compute the `lightened`
-   * color for the underlying `vertex-color-circle`. This will be
+   * color for the underlying `vertex-color-swatch`. This will be
    * used when the `theme` is set to `light`.
    */
   lightenPercentage: number;
   /**
    * The percentage darker color to use to compute the `darkened`
-   * color for the underlying `vertex-color-circle`. This will be
+   * color for the underlying `vertex-color-swatch`. This will be
    * used when the `theme` is set to `dark`.
    */
   darkenPercentage: number;
   /**
    * An optional selected color. This will also be updated internally
-   * by the component when individual `vertex-color-circle` elements
+   * by the component when individual `vertex-color-swatch` elements
    * are clicked.
    */
   selected?: string;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -1,10 +1,28 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
+import { ColorSwatchSize } from '../color-swatch/color-swatch';
+export type ColorPickerVariant = 'full' | 'swatch';
 export declare class ColorPicker {
   /**
    * Optional value property to set the initial
    * value of this input.
    */
   value?: string;
+  /**
+   * The size of the swatch displayed for this color picker. Can be `sm`, `md`,
+   * `lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value
+   * will also increase the size of the associated hexadecimal value.
+   */
+  size: ColorSwatchSize;
+  /**
+   * The variant of this color picker. Can be `full` or `swatch`,
+   * and defaults to `full`.
+   *
+   * `full` will display both the visual color swatch and the hexadecimal
+   * representation of the color.
+   *
+   * `swatch` will display only the visual color swatch.
+   */
+  variant: ColorPickerVariant;
   /**
    * Whether this color picker is disabled.
    */
@@ -21,4 +39,5 @@ export declare class ColorPicker {
   render(): h.JSX.IntrinsicElements;
   private handleInput;
   private handleChange;
+  private getDisplayedValue;
 }

package/dist/types/components/{color-circle/color-circle.d.ts → color-swatch/color-swatch.d.ts}

@@ -1,7 +1,20 @@
 import { h } from '../../stencil-public-runtime';
-export declare class ColorCircle {
+export type ColorSwatchVariant = 'circle' | 'square';
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+export type ColorSwatchTheme = 'none' | 'light' | 'dark';
+export declare class ColorSwatch {
   /**
-   * The primary color of this `vertex-color-circle`.
+   * The variant of this color swatch. Can be either `circle` or `square`,
+   * and defaults to `circle`.
+   */
+  variant: ColorSwatchVariant;
+  /**
+   * The size of this color swatch. Can be `sm`, `md`, or `lg`,
+   * and defaults to `md`.
+   */
+  size: ColorSwatchSize;
+  /**
+   * The primary color of this `vertex-color-swatch` in hexadecimal format.
    * For `dark` theme, this will be the background-color.
    * For `light` theme, this will be the border-color.
    */
@@ -13,8 +26,11 @@ export declare class ColorCircle {
    */
   supplementalColor?: string;
   /**
-   * The theme to use for this `vertex-color-circle`.
-   * Can be either `light` or `dark`, and defaults to `dark`.
+   * The theme to use for this `vertex-color-swatch`.
+   * Can be `none`, `light`, or `dark`, and defaults to `none`.
+   *
+   * With no theme (`none`), the provided `color` will be used
+   * as the background-color, and the border will be a neutral color.
    *
    * With the `dark` theme, the provided `color` will be used
    * as the background-color, and the `darkened` color will be
@@ -24,7 +40,7 @@ export declare class ColorCircle {
    * as the border-color, and the `lightened` color will be used
    * for the background-color.
    */
-  theme: 'light' | 'dark';
+  theme: ColorSwatchTheme;
   /**
    * The percentage lighter color to use to compute the `lightened`
    * color. This will be used when the `theme` is set to `light`.
@@ -51,6 +67,8 @@ export declare class ColorCircle {
   protected handleLightenPercentageChanged(newPercentage: number): void;
   protected handleDarkenPercentageChanged(newPercentage: number): void;
   render(): h.JSX.IntrinsicElements;
+  private getThemeColors;
+  private getSupplementalColor;
   private adjustColor;
   private adjustComponent;
   private padHexComponent;

package/dist/types/components/color-swatch/lib.d.ts

@@ -0,0 +1 @@
+export declare function isValidHexColor(color: string): boolean;

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

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

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

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

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

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

package/dist/types/components/icon/icons/cube-stack.d.ts

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

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

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

package/dist/types/components/icon/icons/pin-text-square.d.ts

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

package/dist/types/components/icon/icons/plus-with-arrow.d.ts

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

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/icon/icons/square-dot-outline.d.ts

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

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

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

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

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

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

@@ -8,9 +8,9 @@ export * from './card-group/card-group';
 export * from './chip/chip';
 export * from './click-to-edit-text-field/click-to-edit-text-field';
 export * from './collapsible/collapsible';
-export * from './color-circle/color-circle';
 export * from './color-circle-picker/color-circle-picker';
 export * from './color-picker/color-picker';
+export * from './color-swatch/color-swatch';
 export * from './context-menu/context-menu';
 export * from './dialog/dialog';
 export * from './draggable-popover/draggable-popover';
@@ -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/popover/popover.d.ts

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

package/dist/types/components/result-list/result-list.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 import { PopoverPlacement } from '../popover/popover';
-export type Result = Record<string, unknown>;
+import { Result } from './types';
 export declare class ResultList {
   items: Result[];
   itemsJson?: string;
@@ -20,9 +20,11 @@ export declare class ResultList {
   private lastFocusedIndex;
   private stateMap;
   private hostEl;
+  private resultClick;
   private resizeObserver;
   private computedResultHeight?;
   private resultsScrollEl?;
+  constructor();
   handleResultsChanged(results: Array<Result> | string | undefined): void;
   handleOpenChanged(): void;
   protected componentWillLoad(): void;
@@ -35,7 +37,10 @@ export declare class ResultList {
   private ensureTemplateDefined;
   private createResultPool;
   private createResultInstance;
+  private createResultHandlers;
   private layoutResults;
+  private handlePointerDown;
+  private handleResultClick;
   private computeViewportResults;
   private getListHeight;
   private handleScroll;