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

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 {
+        /**
+          * Whether this color picker is disabled.
+         */
+        "disabled": boolean;
         /**
-          * 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 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.
          */
-        "colors": string[] | string;
+        "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 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. 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 {
         /**
@@ -470,6 +488,9 @@ export namespace Components {
           * The behavior that this popover will have when the window is resized. Can be either 'dynamic' or 'fixed', and defaults to 'dynamic'.  'dynamic' will cause a position-based popover to adjust its position relative to the window resize to keep it in the same relative position. 'fixed' will keep the popover in the same position even if that means it would disappear off-screen.
          */
         "resizeBehavior": PopoverResizeBehavior;
+        "resizeObserverFactory": (
+    cb: (entries: ResizeObserverEntry[]) => void
+  ) => ResizeObserver;
         /**
           * Indicates if the position of the popover should be updated when the popover's content size changes.
          */
@@ -569,18 +590,46 @@ export namespace Components {
         "viewportStartIndex": number;
     }
     interface VertexSearchBar {
+        /**
+          * Characters that should trigger a "break" of the search. If a value in this list is encountered when trying to parse back to the `triggerCharacter`, this will hide the result list.
+         */
         "breakCharacters": string[];
-        "debounce": number;
-        "getEditableContent": () => Promise<NodeListOf<ChildNode> | undefined>;
         /**
-          * Placeholder for text input.
+          * Whether this search bar is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement": PopoverPlacement;
-        "replaceTriggeredValue": (data: Record<string, unknown>) => Promise<void>;
-        "resultItems"?: Result1[];
-        "triggerCharacter"?: string;
-        "triggerCharacters": string[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType": string;
+        /**
+          * 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": 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"?: 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.
+         */
+        "triggerCharacter": string;
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant": SearchBarVariant;
     }
     interface VertexSelect {
@@ -592,6 +641,10 @@ export namespace Components {
           * Whether this select is disabled.
          */
         "disabled": boolean;
+        /**
+          * Whether this select will omit the currently selected value in the dropdown list.
+         */
+        "hideSelected": boolean;
         /**
           * A placeholder to use when no option has been selected. Defaults to "Select an option...".
          */
@@ -641,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>
@@ -849,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;
@@ -922,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: {
@@ -940,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: {
@@ -1066,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: {
@@ -1101,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;
@@ -1125,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;
@@ -1324,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;
         /**
@@ -1368,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';
     }
@@ -1398,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 {
         /**
@@ -1760,6 +1861,7 @@ declare namespace LocalJSX {
         "items"?: Result[];
         "itemsJson"?: string;
         "onEnterPressed"?: (event: VertexResultListCustomEvent<Result>) => void;
+        "onResultClick"?: (event: VertexResultListCustomEvent<Result>) => void;
         "open"?: boolean;
         "overScanCount"?: number;
         "placement"?: PopoverPlacement;
@@ -1769,33 +1871,66 @@ declare namespace LocalJSX {
         "viewportStartIndex"?: number;
     }
     interface VertexSearchBar {
+        /**
+          * Characters that should trigger a "break" of the search. If a value in this list is encountered when trying to parse back to the `triggerCharacter`, this will hide the result list.
+         */
         "breakCharacters"?: string[];
-        "debounce"?: number;
         /**
-          * Emitted when input blurred
+          * Whether this search bar is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the input is blurred.
          */
         "onInputBlur"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when input focused
+          * Emitted when the value of the input has changed.
+         */
+        "onInputChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        /**
+          * Emitted when the input is focused.
          */
         "onInputFocus"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when enter is pressed an a result is highlighted.
+          * Emitted when a result has been selected to replace the trigger text.  Includes the ID of the `Result` selected.
          */
-        "onResultsEnterPressed"?: (event: VertexSearchBarCustomEvent<Result1>) => void;
-        "onTriggerCharacterPressed"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result>) => void;
         /**
-          * Emitted when the value has changed.
+          * Emitted when the value of the current search triggered by the specified `triggerCharacter` has changed.
          */
-        "onValueChanged"?: (event: VertexSearchBarCustomEvent<void>) => void;
+        "onSearchChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
         /**
-          * Placeholder for text input.
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement"?: PopoverPlacement;
-        "resultItems"?: Result1[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType"?: string;
+        /**
+          * 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"?: 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"?: 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.
+         */
         "triggerCharacter"?: string;
-        "triggerCharacters"?: string[];
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant"?: SearchBarVariant;
     }
     interface VertexSelect {
@@ -1807,6 +1942,10 @@ declare namespace LocalJSX {
           * Whether this select is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Whether this select will omit the currently selected value in the dropdown list.
+         */
+        "hideSelected"?: boolean;
         /**
           * Emitted when the selected option of this element changes, and contains the value that it has been changed to.
          */
@@ -1865,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>
@@ -2022,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;
@@ -2046,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;
@@ -2066,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>;
@@ -2090,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>;