@vertexvis/ui 0.1.0-testing.7 → 0.1.0

package/dist/types/components.d.ts

@@ -12,6 +12,9 @@ import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
 import { InputChangeEventDetail, TextSize } from "./components/text-field/text-field";
 import { SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
+import { ColorSwatchSize } from "./components/color-swatch/color-swatch";
+import { ColorPickerVariant } from "./components/color-picker/color-picker";
+import { ColorSwatchSize as ColorSwatchSize1, ColorSwatchTheme, ColorSwatchVariant } from "./components/color-swatch/color-swatch";
 import { Point } from "./types/point";
 import { Popover, PopoverPlacement } from "./components/popover/popover";
 import { VertexExpandableType } from "./components/expandable/expandable";
@@ -21,9 +24,8 @@ import { PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./
 import { DetectOverflowOptions, FlipOptions, OffsetOptions } from "@floating-ui/dom";
 import { RadioChangeEventDetail } from "./components/radio/radio";
 import { HorizontalDragDirection, ResizableBoundsUpdate, ResizeEventDetails, VerticalDragDirection } from "./components/resizable/resizable";
-import { Result } from "./components/result-list/result-list";
+import { Result } from "./components/result-list/types";
 import { SearchBarVariant } from "./components/search-bar/search-bar";
-import { Result as Result1 } from "./components/result-list/result-list";
 import { LabelDisplay, SliderChangeEventDetails, SliderSize } from "./components/slider/slider";
 import { SpinnerColor, SpinnerSize } from "./components/spinner/spinner";
 import { InputChangeEventDetail as InputChangeEventDetail1, TextFieldAutocomplete, TextFieldType, TextFieldVariant, TextSize as TextSize1 } from "./components/text-field/text-field";
@@ -198,75 +200,91 @@ export namespace Components {
          */
         "open": boolean;
     }
-    interface VertexColorCircle {
+    interface VertexColorCirclePicker {
         /**
-          * The primary color of this `vertex-color-circle`. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
+          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-swatch`.
          */
-        "color": string;
+        "colors": string[] | string;
         /**
-          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
+          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage": number;
         /**
-          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
+          * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
          */
-        "darkened": string;
+        "direction": 'vertical' | 'horizontal';
         /**
-          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage": number;
         /**
-          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
+          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
-        "lightened": string;
+        "selected"?: string;
         /**
-          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
+          * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
          */
-        "supplementalColor"?: string;
+        "supplementalColors": string[] | string;
         /**
-          * The theme to use for this `vertex-color-circle`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
+          * The theme to use for this `vertex-color-circle-picker`. 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-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-swatch` elements, and a `lightened` color will be used for the border-colors.
          */
         "theme": 'light' | 'dark';
     }
-    interface VertexColorCirclePicker {
+    interface VertexColorPicker {
         /**
-          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-circle`.
+          * Whether this color picker is disabled.
          */
-        "colors": string[] | string;
+        "disabled": boolean;
+        /**
+          * 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;
+        /**
+          * Optional value property to set the initial value of this input.
+         */
+        "value"?: string;
         /**
-          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `dark`.
+          * 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;
+    }
+    interface VertexColorSwatch {
+        /**
+          * 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.
+         */
+        "color": string;
+        /**
+          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage": number;
         /**
-          * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
+          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
          */
-        "direction": 'vertical' | 'horizontal';
+        "darkened": string;
         /**
-          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage": number;
         /**
-          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-circle` elements are clicked.
+          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
          */
-        "selected"?: string;
+        "lightened": string;
         /**
-          * Optional supplemental colors that will be provided to the underlying `vertex-color-circle` elements for associated indices in the `colors` array.
+          * The size of this color swatch. Can be `sm`, `md`, or `lg`, and defaults to `md`.
          */
-        "supplementalColors": string[] | string;
+        "size": ColorSwatchSize;
         /**
-          * The theme to use for this `vertex-color-circle-picker`. 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, 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, and a `lightened` color will be used for the border-colors.
+          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
          */
-        "theme": 'light' | 'dark';
-    }
-    interface VertexColorPicker {
+        "supplementalColor"?: string;
         /**
-          * Whether this color picker is disabled.
+          * 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 used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
          */
-        "disabled": boolean;
+        "theme": ColorSwatchTheme;
         /**
-          * Optional value property to set the initial value of this input.
+          * The variant of this color swatch. Can be either `circle` or `square`, and defaults to `circle`.
          */
-        "value"?: string;
+        "variant": ColorSwatchVariant;
     }
     interface VertexContextMenu {
         /**
@@ -596,11 +614,11 @@ export namespace Components {
         /**
           * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
          */
-        "replacements": Result1[];
+        "replacements": Result[];
         /**
           * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
          */
-        "resultItems"?: Result1[];
+        "resultItems"?: Result[];
         /**
           * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
          */
@@ -676,6 +694,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>
@@ -884,6 +912,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;
@@ -957,12 +993,6 @@ declare global {
         prototype: HTMLVertexCollapsibleElement;
         new (): HTMLVertexCollapsibleElement;
     };
-    interface HTMLVertexColorCircleElement extends Components.VertexColorCircle, HTMLStencilElement {
-    }
-    var HTMLVertexColorCircleElement: {
-        prototype: HTMLVertexColorCircleElement;
-        new (): HTMLVertexColorCircleElement;
-    };
     interface HTMLVertexColorCirclePickerElement extends Components.VertexColorCirclePicker, HTMLStencilElement {
     }
     var HTMLVertexColorCirclePickerElement: {
@@ -975,6 +1005,12 @@ declare global {
         prototype: HTMLVertexColorPickerElement;
         new (): HTMLVertexColorPickerElement;
     };
+    interface HTMLVertexColorSwatchElement extends Components.VertexColorSwatch, HTMLStencilElement {
+    }
+    var HTMLVertexColorSwatchElement: {
+        prototype: HTMLVertexColorSwatchElement;
+        new (): HTMLVertexColorSwatchElement;
+    };
     interface HTMLVertexContextMenuElement extends Components.VertexContextMenu, HTMLStencilElement {
     }
     var HTMLVertexContextMenuElement: {
@@ -1101,6 +1137,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: {
@@ -1136,9 +1184,9 @@ declare global {
         "vertex-chip": HTMLVertexChipElement;
         "vertex-click-to-edit-textfield": HTMLVertexClickToEditTextfieldElement;
         "vertex-collapsible": HTMLVertexCollapsibleElement;
-        "vertex-color-circle": HTMLVertexColorCircleElement;
         "vertex-color-circle-picker": HTMLVertexColorCirclePickerElement;
         "vertex-color-picker": HTMLVertexColorPickerElement;
+        "vertex-color-swatch": HTMLVertexColorSwatchElement;
         "vertex-context-menu": HTMLVertexContextMenuElement;
         "vertex-dialog": HTMLVertexDialogElement;
         "vertex-draggable-popover": HTMLVertexDraggablePopoverElement;
@@ -1160,6 +1208,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;
@@ -1359,43 +1409,13 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
-    interface VertexColorCircle {
-        /**
-          * The primary color of this `vertex-color-circle`. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
-         */
-        "color"?: string;
-        /**
-          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
-         */
-        "darkenPercentage"?: number;
-        /**
-          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
-         */
-        "darkened"?: string;
-        /**
-          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
-         */
-        "lightenPercentage"?: number;
-        /**
-          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
-         */
-        "lightened"?: string;
-        /**
-          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
-         */
-        "supplementalColor"?: string;
-        /**
-          * The theme to use for this `vertex-color-circle`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
-         */
-        "theme"?: 'light' | 'dark';
-    }
     interface VertexColorCirclePicker {
         /**
-          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-circle`.
+          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-swatch`.
          */
         "colors"?: string[] | string;
         /**
-          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `dark`.
+          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage"?: number;
         /**
@@ -1403,20 +1423,20 @@ declare namespace LocalJSX {
          */
         "direction"?: 'vertical' | 'horizontal';
         /**
-          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage"?: number;
         "onSelectionChanged"?: (event: VertexColorCirclePickerCustomEvent<SelectionChangedDetails>) => void;
         /**
-          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-circle` elements are clicked.
+          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
         "selected"?: string;
         /**
-          * Optional supplemental colors that will be provided to the underlying `vertex-color-circle` elements for associated indices in the `colors` array.
+          * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
          */
         "supplementalColors"?: string[] | string;
         /**
-          * The theme to use for this `vertex-color-circle-picker`. 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, 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, and a `lightened` color will be used for the border-colors.
+          * The theme to use for this `vertex-color-circle-picker`. 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-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-swatch` elements, and a `lightened` color will be used for the border-colors.
          */
         "theme"?: 'light' | 'dark';
     }
@@ -1433,10 +1453,56 @@ declare namespace LocalJSX {
           * Emitted when a new value is input.
          */
         "onValueInput"?: (event: VertexColorPickerCustomEvent<string>) => void;
+        /**
+          * 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;
         /**
           * Optional value property to set the initial value of this input.
          */
         "value"?: string;
+        /**
+          * 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;
+    }
+    interface VertexColorSwatch {
+        /**
+          * 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.
+         */
+        "color"?: string;
+        /**
+          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
+         */
+        "darkenPercentage"?: number;
+        /**
+          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
+         */
+        "darkened"?: string;
+        /**
+          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
+         */
+        "lightenPercentage"?: number;
+        /**
+          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
+         */
+        "lightened"?: string;
+        /**
+          * The size of this color swatch. Can be `sm`, `md`, or `lg`, and defaults to `md`.
+         */
+        "size"?: ColorSwatchSize;
+        /**
+          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
+         */
+        "supplementalColor"?: string;
+        /**
+          * 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 used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
+         */
+        "theme"?: ColorSwatchTheme;
+        /**
+          * The variant of this color swatch. Can be either `circle` or `square`, and defaults to `circle`.
+         */
+        "variant"?: ColorSwatchVariant;
     }
     interface VertexContextMenu {
         /**
@@ -1828,7 +1894,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a result has been selected to replace the trigger text.  Includes the ID of the `Result` selected.
          */
-        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result1>) => void;
+        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result>) => void;
         /**
           * Emitted when the value of the current search triggered by the specified `triggerCharacter` has changed.
          */
@@ -1849,11 +1915,11 @@ declare namespace LocalJSX {
         /**
           * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
          */
-        "replacements"?: Result1[];
+        "replacements"?: Result[];
         /**
           * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
          */
-        "resultItems"?: Result1[];
+        "resultItems"?: Result[];
         /**
           * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
          */
@@ -1938,6 +2004,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>
@@ -2095,9 +2176,9 @@ declare namespace LocalJSX {
         "vertex-chip": VertexChip;
         "vertex-click-to-edit-textfield": VertexClickToEditTextfield;
         "vertex-collapsible": VertexCollapsible;
-        "vertex-color-circle": VertexColorCircle;
         "vertex-color-circle-picker": VertexColorCirclePicker;
         "vertex-color-picker": VertexColorPicker;
+        "vertex-color-swatch": VertexColorSwatch;
         "vertex-context-menu": VertexContextMenu;
         "vertex-dialog": VertexDialog;
         "vertex-draggable-popover": VertexDraggablePopover;
@@ -2119,6 +2200,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;
@@ -2139,9 +2222,9 @@ declare module "@stencil/core" {
             "vertex-chip": LocalJSX.VertexChip & JSXBase.HTMLAttributes<HTMLVertexChipElement>;
             "vertex-click-to-edit-textfield": LocalJSX.VertexClickToEditTextfield & JSXBase.HTMLAttributes<HTMLVertexClickToEditTextfieldElement>;
             "vertex-collapsible": LocalJSX.VertexCollapsible & JSXBase.HTMLAttributes<HTMLVertexCollapsibleElement>;
-            "vertex-color-circle": LocalJSX.VertexColorCircle & JSXBase.HTMLAttributes<HTMLVertexColorCircleElement>;
             "vertex-color-circle-picker": LocalJSX.VertexColorCirclePicker & JSXBase.HTMLAttributes<HTMLVertexColorCirclePickerElement>;
             "vertex-color-picker": LocalJSX.VertexColorPicker & JSXBase.HTMLAttributes<HTMLVertexColorPickerElement>;
+            "vertex-color-swatch": LocalJSX.VertexColorSwatch & JSXBase.HTMLAttributes<HTMLVertexColorSwatchElement>;
             "vertex-context-menu": LocalJSX.VertexContextMenu & JSXBase.HTMLAttributes<HTMLVertexContextMenuElement>;
             "vertex-dialog": LocalJSX.VertexDialog & JSXBase.HTMLAttributes<HTMLVertexDialogElement>;
             "vertex-draggable-popover": LocalJSX.VertexDraggablePopover & JSXBase.HTMLAttributes<HTMLVertexDraggablePopoverElement>;
@@ -2163,6 +2246,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

@@ -6,9 +6,11 @@ export declare enum IconNames {
   'align-view-to-plane' = "align-view-to-plane",
   'annotation' = "annotation",
   'arrow-filled' = "arrow-filled",
+  'arrow-left-circled' = "arrow-left-circled",
   'arrow-line-left' = "arrow-line-left",
   'arrow-line-right' = "arrow-line-right",
   'arrow-partial' = "arrow-partial",
+  'arrow-right-circled' = "arrow-right-circled",
   'arrow-triangle-left' = "arrow-triangle-left",
   'arrow-triangle-right' = "arrow-triangle-right",
   'arrow-up-circled' = "arrow-up-circled",
@@ -20,9 +22,11 @@ export declare enum IconNames {
   'box-cursor' = "box-cursor",
   'box-select' = "box-select",
   'camera' = "camera",
+  'camera-add' = "camera-add",
   'caret-down' = "caret-down",
   'caret-left' = "caret-left",
   'caret-up' = "caret-up",
+  'caution' = "caution",
   'check' = "check",
   'check-circle' = "check-circle",
   'caret-right' = "caret-right",
@@ -36,23 +40,29 @@ export declare enum IconNames {
   'close-circle' = "close-circle",
   'collapse-all' = "collapse-all",
   'columns' = "columns",
+  'columns-add' = "columns-add",
   'comment-add' = "comment-add",
   'comment-filled' = "comment-filled",
   'comment-reopen' = "comment-reopen",
   'comment-resolve' = "comment-resolve",
   'comment-show' = "comment-show",
+  'compare' = "compare",
+  'compress' = "compress",
   'copy' = "copy",
   'cross-section' = "cross-section",
   'cube-orthographic' = "cube-orthographic",
   'cube-perspective' = "cube-perspective",
+  'cube-stack' = "cube-stack",
   'delete' = "delete",
   'download' = "download",
   'drag-indicator' = "drag-indicator",
   'ellipse' = "ellipse",
   'error-circle' = "error-circle",
+  'expand' = "expand",
   'expand-all' = "expand-all",
   'export' = "export",
   'file' = "file",
+  'file-folder' = "file-folder",
   'file-pdf' = "file-pdf",
   'fit-all' = "fit-all",
   'fit-selected' = "fit-selected",
@@ -85,9 +95,13 @@ export declare enum IconNames {
   'pin-line' = "pin-line",
   'pin-text' = "pin-text",
   'pin-text-fill' = "pin-text-fill",
+  'pin-text-square' = "pin-text-square",
   'plus' = "plus",
+  'plus-with-arrow' = "plus-with-arrow",
+  'pmi' = "pmi",
   'precise-measurement' = "precise-measurement",
   'rabbit' = "rabbit",
+  'report' = "report",
   'reset' = "reset",
   'resize' = "resize",
   'rotate' = "rotate",
@@ -96,12 +110,15 @@ export declare enum IconNames {
   'show-only-nearby' = "show-only-nearby",
   'snapshots' = "snapshots",
   'star' = "star",
+  'square-dot-outline' = "square-dot-outline",
   'tape-measure' = "tape-measure",
   'teleport-and-align' = "teleport-and-align",
   'teleport-toward' = "teleport-toward",
   'teleport' = "teleport",
   'turtle' = "turtle",
+  'update' = "update",
   'version-history' = "version-history",
+  'views' = "views",
   'visibility-hidden' = "visibility-hidden",
   'visibility-partial' = "visibility-partial",
   'visibility-visible' = "visibility-visible",

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

@@ -1,3 +1,4 @@
 export declare function readDOM(callback: VoidFunction): void;
 export declare function getBoundingClientRect(el: HTMLElement): DOMRect;
 export declare function getComputedStyle(el: HTMLElement): CSSStyleDeclaration;
+export declare function blurElement(el: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-testing.7",
+  "version": "0.1.0",
   "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": "72b8c589035ef4955b205c744e4ff46a2a8976bb"
+  "gitHead": "83569fb49b20a52ab8ff8c64f37a6df931776bdc"
 }

package/dist/cjs/color-picker-876ace00.js

@@ -1,37 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const colorPickerCss = ":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
-
-const ColorPicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueInput = index.createEvent(this, "valueInput", 7);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.handleInput = (event) => {
-      const input = event.target;
-      this.value = input.value || '';
-    };
-    this.handleChange = (event) => {
-      this.valueChanged.emit(this.value);
-    };
-    this.value = undefined;
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("label", { class: index$1.classnames('color-picker', { disabled: this.disabled }) }, index.h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: "selected", style: {
-        'background-color': this.value,
-      }, title: this.value }), index.h("div", { class: "handle" }, index.h("slot", { name: "handle-icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))))));
-  }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-};
-ColorPicker.style = colorPickerCss;
-
-exports.ColorPicker = ColorPicker;

package/dist/collection/components/color-circle/color-circle.css

@@ -1,18 +0,0 @@
-:host {
-  display: flex;
-
-  /*
-  The size of the circle.
-  Defaults to 24px;
-  */
-  --circle-size: 24px;
-}
-
-.root {
-  border-radius: 100%;
-  border-width: 2px;
-  border-style: solid;
-  width: var(--circle-size);
-  height: var(--circle-size);
-  box-sizing: border-box;
-}