@vertexvis/ui 0.1.4-canary.2 → 0.1.4-canary.4

package/dist/components/vertex-color-circle-picker.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './color-swatch.js';
+import { d as defineCustomElement$4 } from './color-swatch.js';
+import { d as defineCustomElement$3 } from './popover.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
-const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-700);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
+const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-400);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
 
 const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10,8 +12,6 @@ const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
     this.handleClick = (event) => {
       const circle = event.target;
       this.selectionChanged.emit({
@@ -20,6 +20,12 @@ const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         darkened: circle.darkened,
       });
     };
+    this.parseJsonProp = (prop) => {
+      if (typeof prop === 'string') {
+        return JSON.parse(prop);
+      }
+      return prop;
+    };
     this.colors = [
       '#4c87be',
       '#f3d336',
@@ -30,59 +36,70 @@ const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       '#000000',
       '#ffffff',
     ];
+    this.labels = {};
+    this.labelPlacement = 'bottom';
+    this.size = 'lg';
     this.supplementalColors = [];
     this.theme = 'dark';
     this.lightenPercentage = 0.25;
     this.darkenPercentage = 0.25;
     this.selected = undefined;
     this.direction = 'horizontal';
+    this.colorArray = [];
+    this.supplementaryColorArray = [];
+    this.labelMap = {};
   }
   componentWillLoad() {
     this.handleColorsChange(this.colors);
     this.handleSupplementalColorsChange(this.supplementalColors);
+    this.handleLabelsChange(this.labels);
   }
   handleColorsChange(newValue) {
-    if (typeof newValue === 'string') {
-      this.colorArray = JSON.parse(newValue);
-    }
-    else {
-      this.colorArray = newValue;
-    }
+    this.colorArray = this.parseJsonProp(newValue);
   }
   handleSupplementalColorsChange(newValue) {
-    if (typeof newValue === 'string') {
-      this.supplementaryColorArray = JSON.parse(newValue);
-    }
-    else {
-      this.supplementaryColorArray = newValue;
-    }
+    this.supplementaryColorArray = this.parseJsonProp(newValue);
+  }
+  handleLabelsChange(newValue) {
+    this.labelMap = this.parseJsonProp(newValue);
   }
   render() {
     return (h(Host, null, h("div", { class: classnames('container', {
         vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => (h("vertex-color-swatch", { class: classnames('circle', {
-        selected: this.selected === c,
-      }), variant: "circle", size: "lg", color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
+      }) }, this.colorArray.map((c, i) => {
+      const label = this.labelMap[c];
+      const swatch = (h("vertex-color-swatch", { class: classnames('circle', {
+          selected: this.selected === c,
+        }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
+      return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
+    }))));
   }
   static get watchers() { return {
     "colors": ["handleColorsChange"],
-    "supplementalColors": ["handleSupplementalColorsChange"]
+    "supplementalColors": ["handleSupplementalColorsChange"],
+    "labels": ["handleLabelsChange"]
   }; }
   static get style() { return colorCirclePickerCss; }
 }, [1, "vertex-color-circle-picker", {
     "colors": [1],
+    "labels": [1],
+    "labelPlacement": [1, "label-placement"],
+    "size": [1],
     "supplementalColors": [1, "supplemental-colors"],
     "theme": [513],
     "lightenPercentage": [2, "lighten-percentage"],
     "darkenPercentage": [2, "darken-percentage"],
     "selected": [1537],
-    "direction": [1]
+    "direction": [1],
+    "colorArray": [32],
+    "supplementaryColorArray": [32],
+    "labelMap": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["vertex-color-circle-picker", "vertex-color-swatch"];
+  const components = ["vertex-color-circle-picker", "vertex-color-swatch", "vertex-popover", "vertex-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "vertex-color-circle-picker":
       if (!customElements.get(tagName)) {
@@ -90,6 +107,16 @@ function defineCustomElement$1() {
       }
       break;
     case "vertex-color-swatch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/esm/{banner-45dfaee9.js → banner-38690fc8.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-5521e072.js';
+import { g as getSvg } from './icon-helper-514f627f.js';
 
 const bannerCss = ":host{--banner-width:auto;--banner-min-width:25rem;--banner-max-width:35rem;--banner-white-space:normal}.anchor{position:fixed}.top-left{left:24px;top:24px}.top{left:50vw;top:24px}.top-right{right:24px;top:24px}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;margin-left:16px}.close:hover{color:var(--vertex-ui-blue-500)}.banner{position:relative;display:flex;align-items:center;width:var(--banner-width);min-width:var(--banner-min-width);max-width:var(--banner-max-width);padding:16px;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);border-radius:4px;white-space:var(--banner-white-space);user-select:none;filter:drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));border:1px solid var(--vertex-ui-neutral-300)}.banner.hidden{pointer-events:none}.icon{display:flex;margin-right:16px;justify-content:center;align-items:center;fill:currentColor;height:1.25rem;width:1.25rem}.icon-info{color:var(--vertex-ui-blue-600)}.icon-success{color:var(--vertex-ui-green-600)}.icon-warn{color:var(--vertex-ui-orange-600)}.icon-error{color:var(--vertex-ui-red-600)}.message{align-items:center}.info{background-color:var(--vertex-ui-blue-100);color:var(--vertex-ui-neutral-800)}.success{background-color:var(--vertex-ui-green-100);color:var(--vertex-ui-neutral-800)}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-100);color:var(--vertex-ui-neutral-800)}";
 

package/dist/esm/{color-circle-picker-35ad3b3e.js → color-circle-picker-c4e92fea.js}

@@ -1,14 +1,12 @@
 import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
 
-const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-700);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
+const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-400);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
 
 const ColorCirclePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
     this.handleClick = (event) => {
       const circle = event.target;
       this.selectionChanged.emit({
@@ -17,6 +15,12 @@ const ColorCirclePicker = class {
         darkened: circle.darkened,
       });
     };
+    this.parseJsonProp = (prop) => {
+      if (typeof prop === 'string') {
+        return JSON.parse(prop);
+      }
+      return prop;
+    };
     this.colors = [
       '#4c87be',
       '#f3d336',
@@ -27,43 +31,48 @@ const ColorCirclePicker = class {
       '#000000',
       '#ffffff',
     ];
+    this.labels = {};
+    this.labelPlacement = 'bottom';
+    this.size = 'lg';
     this.supplementalColors = [];
     this.theme = 'dark';
     this.lightenPercentage = 0.25;
     this.darkenPercentage = 0.25;
     this.selected = undefined;
     this.direction = 'horizontal';
+    this.colorArray = [];
+    this.supplementaryColorArray = [];
+    this.labelMap = {};
   }
   componentWillLoad() {
     this.handleColorsChange(this.colors);
     this.handleSupplementalColorsChange(this.supplementalColors);
+    this.handleLabelsChange(this.labels);
   }
   handleColorsChange(newValue) {
-    if (typeof newValue === 'string') {
-      this.colorArray = JSON.parse(newValue);
-    }
-    else {
-      this.colorArray = newValue;
-    }
+    this.colorArray = this.parseJsonProp(newValue);
   }
   handleSupplementalColorsChange(newValue) {
-    if (typeof newValue === 'string') {
-      this.supplementaryColorArray = JSON.parse(newValue);
-    }
-    else {
-      this.supplementaryColorArray = newValue;
-    }
+    this.supplementaryColorArray = this.parseJsonProp(newValue);
+  }
+  handleLabelsChange(newValue) {
+    this.labelMap = this.parseJsonProp(newValue);
   }
   render() {
     return (h(Host, null, h("div", { class: classnames('container', {
         vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => (h("vertex-color-swatch", { class: classnames('circle', {
-        selected: this.selected === c,
-      }), variant: "circle", size: "lg", color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
+      }) }, this.colorArray.map((c, i) => {
+      const label = this.labelMap[c];
+      const swatch = (h("vertex-color-swatch", { class: classnames('circle', {
+          selected: this.selected === c,
+        }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
+      return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
+    }))));
   }
   static get watchers() { return {
     "colors": ["handleColorsChange"],
-    "supplementalColors": ["handleSupplementalColorsChange"]
+    "supplementalColors": ["handleSupplementalColorsChange"],
+    "labels": ["handleLabelsChange"]
   }; }
 };
 ColorCirclePicker.style = colorCirclePickerCss;

package/dist/esm/{color-swatch-0e62d13d.js → color-swatch-ab647632.js}

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
 import { i as isValidHexColor } from './lib-73fbca8b.js';
 
-const colorSwatchCss = ":host{display:flex}.root{position:relative;border-style:solid;border-color:var(--vertex-ui-neutral-300);box-sizing:border-box}.root.circle{border-width:2px;border-radius:100%}.root.square{border-width:1px;border-radius:3px}.root.sm{width:16px;height:16px}.root.md{width:20px;height:20px}.root.lg{width:24px;height:24px}.overlay{position:absolute;width:100%;height:100%;border-radius:2px;overflow:hidden}";
+const colorSwatchCss = ":host{display:flex}.root{position:relative;border-style:solid;border-color:var(--vertex-ui-neutral-300);box-sizing:border-box}.root.circle{border-width:2px;border-radius:100%}.root.circle.sm{border-width:1px}.root.square{border-width:1px;border-radius:3px}.root.sm{width:16px;height:16px}.root.md{width:20px;height:20px}.root.lg{width:24px;height:24px}.overlay{position:absolute;width:100%;height:100%;border-radius:2px;overflow:hidden}";
 
 const ColorSwatch = class {
   constructor(hostRef) {

package/dist/esm/components.js

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

package/dist/esm/{icon-af0b8a00.js → icon-3aa6a6c3.js}

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

package/dist/esm/{icon-button-0ad79cd2.js → icon-button-d3d5e6b7.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
 import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-5521e072.js';
+import { g as getSvg } from './icon-helper-514f627f.js';
 
 const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
 

package/dist/esm/{icon-helper-5521e072.js → icon-helper-514f627f.js}

@@ -262,6 +262,14 @@ const Invert = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "
   h("g", { transform: "translate(-2.5, -0.2)" },
     h("path", { d: "M7,14a.5.5,0,0,0,1,0V7.5h3l-3.5-5L4,7.5H7Zm6.5-1" }))));
 
+const Label = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "label" },
+  h("g", { transform: "translate(1.5, 3)" },
+    h("path", { d: "M1.23688158,10 C0.896714912,10 0.605526316,9.882 0.363315789,9.646 C0.121105263,9.41 0,9.12627778 0,8.79483333 L0,1.20516667 C0,0.873722222 0.121105263,0.59 0.363315789,0.354 C0.605526316,0.118 0.896714912,0 1.23688158,0 L8.49344737,0 C8.68924561,0 8.8747807,0.0421111111 9.05005263,0.126333333 C9.22521053,0.210555556 9.36946491,0.327 9.48281579,0.475666667 L13,5 L9.48281579,9.52433333 C9.36946491,9.673 9.22521053,9.78944444 9.05005263,9.87366667 C8.8747807,9.95788889 8.68924561,10 8.49344737,10 L1.23688158,10 Z M1.23688158,9 L8.49344737,9 C8.52857018,9 8.56038596,8.99361111 8.58889474,8.98083333 C8.61740351,8.96794444 8.64260526,8.94866667 8.6645,8.923 L11.7171053,5 L8.6645,1.077 C8.64260526,1.05133333 8.61740351,1.03205556 8.58889474,1.01916667 C8.56038596,1.00638889 8.52857018,1 8.49344737,1 L1.23688158,1 C1.17541667,1 1.12495614,1.01922222 1.0855,1.05766667 C1.04604386,1.09611111 1.02631579,1.14527778 1.02631579,1.20516667 L1.02631579,8.79483333 C1.02631579,8.85472222 1.04604386,8.90388889 1.0855,8.94233333 C1.12495614,8.98077778 1.17541667,9 1.23688158,9 Z" }))));
+
+const LabelOff = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "label-off" },
+  h("g", { transform: "translate(0.5, 1.621)" },
+    h("path", { d: "M11.8349218,9.20762453 L11.1170893,8.489792 L12.705149,6.41383444 L9.70995624,2.46332194 C9.6884733,2.43747527 9.66374553,2.4180623 9.63577294,2.40508302 C9.60780036,2.39221563 9.57658295,2.38578193 9.54212072,2.38578193 L5.05184919,2.38578193 L4.04483606,1.37876881 L9.54212072,1.37876881 C9.73311754,1.37876881 9.91516314,1.42095147 10.0882575,1.50531679 C10.26124,1.58968211 10.4027813,1.70716698 10.5128814,1.85777138 L13.9639154,6.41383444 L11.8349218,9.20762453 Z M2.42203441,10.441887 L9.73446023,10.441887 L2.21542888,2.9228556 L2.21542888,10.2352814 C2.21542888,10.2955903 2.23478591,10.3451018 2.27349997,10.3838159 C2.31221403,10.4225299 2.36172551,10.441887 2.42203441,10.441887 Z M13.2925733,14 L10.4044596,11.1118864 C10.3226678,11.2186297 10.2239246,11.3014845 10.1082299,11.3604508 C9.99242343,11.419417 9.86526005,11.4489001 9.7267398,11.4489001 L2.42203441,11.4489001 C2.08725849,11.4489001 1.80126676,11.3303523 1.56405922,11.0932566 C1.32696358,10.8560491 1.20841575,10.5700573 1.20841575,10.2352814 L1.20841575,2.59238746 C1.20841575,2.49079102 1.22027613,2.39439749 1.24399688,2.30320686 C1.26760575,2.21190433 1.30094907,2.12798657 1.34402685,2.05145358 L0,0.707426722 L0.707426722,0 L14,13.2925733 L13.2925733,14 Z" }))));
+
 const Line = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "line" },
   h("g", { transform: "matrix(-1.0017 0 0 1 16.523 .3149)" },
     h("path", { d: "m1.9916 7.6851h13.033z", fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-width": "1.5" }))));
@@ -435,6 +443,10 @@ const SquareDotOutline = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg",
 const Star = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "star" },
   h("path", { d: "M14.78,6.43a.49.49,0,0,0-.4-.34l-4.1-.6L8.45,1.78a.5.5,0,0,0-.9,0L5.72,5.49l-4.1.6a.49.49,0,0,0-.4.34.5.5,0,0,0,.12.51l3,2.89-.7,4.09a.48.48,0,0,0,.2.48.47.47,0,0,0,.52,0L8,12.52l3.67,1.92a.47.47,0,0,0,.52,0,.48.48,0,0,0,.2-.48l-.7-4.09,3-2.89A.5.5,0,0,0,14.78,6.43Zm-4,2.87a.49.49,0,0,0-.15.44l.57,3.35-3-1.58a.47.47,0,0,0-.46,0l-3,1.58.57-3.35a.49.49,0,0,0-.15-.44L2.77,6.93l3.35-.48a.52.52,0,0,0,.38-.28l1.5-3,1.5,3a.52.52,0,0,0,.38.28l3.35.48Z" })));
 
+const Tag = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "tag" },
+  h("g", { transform: "translate(1, 1)" },
+    h("path", { d: "M6.3200002 13.68C6.1500001 13.68 5.9899998 13.65 5.8200002 13.58C5.6500001 13.51 5.5 13.42 5.3699999 13.29L0.38999999 8.4200001C0.25 8.29 0.16 8.1400003 0.090000004 7.98C0.029999999 7.8200002 0 7.6599998 0 7.5C0 7.3400002 0.029999999 7.1700001 0.090000004 7.0100002C0.15000001 6.8499999 0.25 6.6999998 0.38999999 6.5700002L6.6999998 0.38999999C6.8200002 0.27000001 6.9699998 0.18000001 7.1300001 0.11C7.3000002 0.039999999 7.4699998 0 7.6500001 0L12.65 0C13.02 0 13.34 0.13 13.6 0.38C13.86 0.63999999 13.99 0.94 13.99 1.3L13.99 6.1799998C13.99 6.3600001 13.96 6.52 13.89 6.6799998C13.82 6.8400002 13.73 6.98 13.6 7.0999999L7.27 13.28C7.1399999 13.41 6.9899998 13.51 6.8200002 13.57C6.6500001 13.64 6.4899998 13.67 6.3200002 13.67L6.3200002 13.68ZM6.1500001 12.53C6.1500001 12.53 6.25 12.6 6.3200002 12.6C6.3899999 12.6 6.4400001 12.58 6.4899998 12.53L12.82 6.3400002C12.82 6.3400002 12.86 6.29 12.87 6.2600002C12.87 6.23 12.88 6.1999998 12.88 6.1799998L12.88 1.3099999C12.88 1.25 12.86 1.1900001 12.81 1.15C12.77 1.11 12.71 1.09 12.64 1.09L7.5599999 1.09L1.16 7.3400002C1.16 7.3400002 1.09 7.4400001 1.09 7.5C1.09 7.5599999 1.11 7.6199999 1.16 7.6599998C1.16 7.6599998 6.1399999 12.52 6.1399999 12.52L6.1500001 12.53ZM11.02 3.8C11.28 3.8 11.5 3.71 11.68 3.54C11.86 3.3699999 11.95 3.1500001 11.95 2.9000001C11.95 2.6500001 11.86 2.4300001 11.68 2.26C11.5 2.0799999 11.28 2 11.02 2C10.76 2 10.54 2.0899999 10.37 2.26C10.19 2.4400001 10.1 2.6500001 10.1 2.9000001C10.1 3.1500001 10.19 3.3599999 10.37 3.54C10.55 3.72 10.77 3.8 11.02 3.8L11.02 3.8Z" }))));
+
 const TapeMeasure = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "tape-measure" },
   h("path", { d: "M6 6a2 2 0 1 1-2 2 2 2 0 0 1 2-2m0-1a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z" }),
   h("path", { d: "M7 8.51a.5.5 0 0 1-.5-.5.46.46 0 0 0-.5-.45.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5A1.46 1.46 0 0 1 7.47 8a.5.5 0 0 1-.47.51Z" }),
@@ -637,6 +649,10 @@ function getSvg(name) {
       return h(Info, null);
     case 'invert':
       return h(Invert, null);
+    case 'label':
+      return h(Label, null);
+    case 'label-off':
+      return h(LabelOff, null);
     case 'line':
       return h(Line, null);
     case 'line-dot-left':
@@ -727,6 +743,8 @@ function getSvg(name) {
       return h(Star, null);
     case 'square-dot-outline':
       return h(SquareDotOutline, null);
+    case 'tag':
+      return h(Tag, null);
     case 'tape-measure':
       return h(TapeMeasure, null);
     case 'teleport-and-align':

package/dist/esm/index.js

@@ -2,24 +2,24 @@ export { A as AutoResizeTextArea } from './auto-resize-textarea-087fecdb.js';
 export { A as Avatar } from './avatar-775455a5.js';
 export { A as AvatarGroup } from './avatar-group-e5ca86bf.js';
 export { B as Badge } from './badge-6d27ca92.js';
-export { B as Banner } from './banner-45dfaee9.js';
+export { B as Banner } from './banner-38690fc8.js';
 export { B as Button } from './button-81207236.js';
 export { C as Card } from './card-1e8790aa.js';
 export { C as CardGroup } from './card-group-4e8e0421.js';
 export { C as Chip } from './chip-4e568eee.js';
 export { C as ClickToEditTextField } from './click-to-edit-text-field-d9b27cd0.js';
 export { C as Collapsible } from './collapsible-b52960e6.js';
-export { C as ColorCirclePicker } from './color-circle-picker-35ad3b3e.js';
+export { C as ColorCirclePicker } from './color-circle-picker-c4e92fea.js';
 export { C as ColorPicker } from './color-picker-b292ad8d.js';
-export { C as ColorSwatch } from './color-swatch-0e62d13d.js';
+export { C as ColorSwatch } from './color-swatch-ab647632.js';
 export { C as ContextMenu } from './context-menu-12f1afe1.js';
 export { D as Dialog } from './dialog-1cef715c.js';
 export { D as DraggablePopover } from './draggable-popover-ce839beb.js';
 export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
 export { E as Expandable } from './expandable-b487cb00.js';
 export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
-export { I as Icon } from './icon-af0b8a00.js';
-export { I as IconButton } from './icon-button-0ad79cd2.js';
+export { I as Icon } from './icon-3aa6a6c3.js';
+export { I as IconButton } from './icon-button-d3d5e6b7.js';
 export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
 export { M as Menu } from './menu-49420f98.js';
 export { M as MenuDivider } from './menu-divider-87c888cb.js';
@@ -42,7 +42,7 @@ export { T as Tooltip } from './tooltip-bed548f4.js';
 import './index-72f28b71.js';
 import './slots-fbb5afb3.js';
 import './index-9c609209.js';
-import './icon-helper-5521e072.js';
+import './icon-helper-514f627f.js';
 import './lib-73fbca8b.js';
 import './dom-9d0f7bf4.js';
 import './templates-797420bf.js';

package/dist/esm/loader.js

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

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

@@ -1,4 +1,4 @@
-export { B as vertex_banner } from './banner-45dfaee9.js';
+export { B as vertex_banner } from './banner-38690fc8.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-5521e072.js';
+import './icon-helper-514f627f.js';

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

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

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

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

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon_button } from './icon-button-0ad79cd2.js';
+export { I as vertex_icon_button } from './icon-button-d3d5e6b7.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-5521e072.js';
+import './icon-helper-514f627f.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-af0b8a00.js';
+export { I as vertex_icon } from './icon-3aa6a6c3.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-5521e072.js';
+import './icon-helper-514f627f.js';

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

@@ -1,4 +1,6 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
+import { PopoverPlacement } from '../popover/popover';
+export type ColorPickerSizeSize = 'sm' | 'md' | 'lg';
 export interface SelectionChangedDetails {
   color: string;
   lightened: string;
@@ -11,6 +13,33 @@ export declare class ColorCirclePicker {
    * `vertex-color-swatch`.
    */
   colors: string[] | string;
+  /**
+   * Optional labels that will be displayed as a tooltip on
+   * the underlying `vertex-color-swatch` elements for associated
+   * colors in the `colors` array.
+   */
+  labels: Record<string, string> | string;
+  /**
+   * The placement of the tooltip around the swatch elements.
+   * This can be any of the following values:
+   *
+   * 'top', 'top-start', 'top-end',
+   * 'bottom', 'bottom-start', 'bottom-end',
+   * 'right', 'right-start', 'right-end',
+   * 'left', 'left-start', 'left-end',
+   * 'auto', 'auto-start', or 'auto-end', and
+   * defaults to 'bottom'.
+   *
+   * Note: placement will adjust based on the amount
+   * of available space, so tooltips close to screen
+   * edges may appear in a different location.
+   */
+  labelPlacement: PopoverPlacement;
+  /**
+   * The size of this color picker. Can be `sm`, `md`, or `lg`,
+   * and defaults to `lg`.
+   */
+  size: ColorPickerSizeSize;
   /**
    * Optional supplemental colors that will be provided to the
    * underlying `vertex-color-swatch` elements for associated
@@ -56,9 +85,12 @@ export declare class ColorCirclePicker {
   selectionChanged: EventEmitter<SelectionChangedDetails>;
   private colorArray;
   private supplementaryColorArray;
+  private labelMap;
   componentWillLoad(): void;
   private handleColorsChange;
   private handleSupplementalColorsChange;
+  private handleLabelsChange;
   render(): h.JSX.IntrinsicElements;
-  handleClick: (event: MouseEvent) => void;
+  private handleClick;
+  private parseJsonProp;
 }

package/dist/types/components/icon/icons/label-off.d.ts

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

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

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

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

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

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

@@ -12,7 +12,7 @@ export declare class Tooltip {
    */
   disabled?: boolean;
   /**
-   * The placement of the tooltip at the clicked point.
+   * The placement of the tooltip around the slotted element.
    * This can be any of the following values:
    *
    * 'top', 'top-start', 'top-end',