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

package/dist/cjs/{banner-b18f0d54.js → banner-5628c955.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-f9127d1c.js');
+const iconHelper = require('./icon-helper-475a8443.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/cjs/{color-circle-picker-d0403f1c.js → color-circle-picker-b0927289.js}

@@ -3,14 +3,12 @@
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.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) {
     index.registerInstance(this, hostRef);
     this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
     this.handleClick = (event) => {
       const circle = event.target;
       this.selectionChanged.emit({
@@ -19,6 +17,12 @@ const ColorCirclePicker = class {
         darkened: circle.darkened,
       });
     };
+    this.parseJsonProp = (prop) => {
+      if (typeof prop === 'string') {
+        return JSON.parse(prop);
+      }
+      return prop;
+    };
     this.colors = [
       '#4c87be',
       '#f3d336',
@@ -29,43 +33,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 (index.h(index.Host, null, index.h("div", { class: index$1.classnames('container', {
         vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => (index.h("vertex-color-swatch", { class: index$1.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 = (index.h("vertex-color-swatch", { class: index$1.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 ? (index.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/cjs/{color-swatch-8aaf6c0b.js → color-swatch-6d98da5f.js}

@@ -4,7 +4,7 @@ const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
 const lib = require('./lib-1bd1e383.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/cjs/components.cjs.js

@@ -88,7 +88,7 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["vertex-click-to-edit-textfield.cjs",[[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.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-banner.cjs",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog.cjs",[[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.cjs",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip.cjs",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker.cjs",[[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.cjs",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-badge.cjs",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip.cjs",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[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.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab.cjs",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs.cjs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable.cjs",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch.cjs",[[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.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"persistent":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
+  return index.bootstrapLazy([["vertex-click-to-edit-textfield.cjs",[[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.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-color-circle-picker.cjs",[[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.cjs",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog.cjs",[[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.cjs",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip.cjs",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-picker.cjs",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-badge.cjs",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip.cjs",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[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.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab.cjs",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs.cjs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable.cjs",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch.cjs",[[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.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"persistent":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{icon-ef8fd0d2.js → icon-116cb9ca.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-f9127d1c.js');
+const iconHelper = require('./icon-helper-475a8443.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/cjs/{icon-button-eac5b1d5.js → icon-button-4dd2dfa4.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-f9127d1c.js');
+const iconHelper = require('./icon-helper-475a8443.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/cjs/{icon-helper-f9127d1c.js → icon-helper-475a8443.js}

@@ -264,6 +264,14 @@ const Invert = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", view
   index.h("g", { transform: "translate(-2.5, -0.2)" },
     index.h("path", { d: "M7,14a.5.5,0,0,0,1,0V7.5h3l-3.5-5L4,7.5H7Zm6.5-1" }))));
 
+const Label = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "label" },
+  index.h("g", { transform: "translate(1.5, 3)" },
+    index.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 = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "label-off" },
+  index.h("g", { transform: "translate(0.5, 1.621)" },
+    index.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 = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "line" },
   index.h("g", { transform: "matrix(-1.0017 0 0 1 16.523 .3149)" },
     index.h("path", { d: "m1.9916 7.6851h13.033z", fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-width": "1.5" }))));
@@ -437,6 +445,10 @@ const SquareDotOutline = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/
 const Star = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "star" },
   index.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 = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "tag" },
+  index.h("g", { transform: "translate(1, 1)" },
+    index.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 = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "tape-measure" },
   index.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" }),
   index.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" }),
@@ -639,6 +651,10 @@ function getSvg(name) {
       return index.h(Info, null);
     case 'invert':
       return index.h(Invert, null);
+    case 'label':
+      return index.h(Label, null);
+    case 'label-off':
+      return index.h(LabelOff, null);
     case 'line':
       return index.h(Line, null);
     case 'line-dot-left':
@@ -729,6 +745,8 @@ function getSvg(name) {
       return index.h(Star, null);
     case 'square-dot-outline':
       return index.h(SquareDotOutline, null);
+    case 'tag':
+      return index.h(Tag, null);
     case 'tape-measure':
       return index.h(TapeMeasure, null);
     case 'teleport-and-align':

package/dist/cjs/index.cjs.js

@@ -6,24 +6,24 @@ const autoResizeTextarea = require('./auto-resize-textarea-deb05359.js');
 const avatar = require('./avatar-e69bb687.js');
 const avatarGroup = require('./avatar-group-d2af53e4.js');
 const badge = require('./badge-d39ac1fc.js');
-const banner = require('./banner-b18f0d54.js');
+const banner = require('./banner-5628c955.js');
 const button = require('./button-e63d25b1.js');
 const card = require('./card-ae9e8a8f.js');
 const cardGroup = require('./card-group-da93e610.js');
 const chip = require('./chip-a3b2e8e0.js');
 const clickToEditTextField = require('./click-to-edit-text-field-2c87ee66.js');
 const collapsible = require('./collapsible-50ea984c.js');
-const colorCirclePicker = require('./color-circle-picker-d0403f1c.js');
+const colorCirclePicker = require('./color-circle-picker-b0927289.js');
 const colorPicker = require('./color-picker-6aa97d3b.js');
-const colorSwatch = require('./color-swatch-8aaf6c0b.js');
+const colorSwatch = require('./color-swatch-6d98da5f.js');
 const contextMenu = require('./context-menu-664922cd.js');
 const dialog = require('./dialog-34f1dd6e.js');
 const draggablePopover = require('./draggable-popover-7516656d.js');
 const dropdownMenu = require('./dropdown-menu-5ae03a72.js');
 const expandable = require('./expandable-b1cd4f0b.js');
 const helpTooltip = require('./help-tooltip-f72eccc7.js');
-const icon = require('./icon-ef8fd0d2.js');
-const iconButton = require('./icon-button-eac5b1d5.js');
+const icon = require('./icon-116cb9ca.js');
+const iconButton = require('./icon-button-4dd2dfa4.js');
 const logoLoading = require('./logo-loading-4d49fedf.js');
 const menu = require('./menu-bfc03108.js');
 const menuDivider = require('./menu-divider-5bdebe5d.js');
@@ -46,7 +46,7 @@ const tooltip = require('./tooltip-634eb8c9.js');
 require('./index-6a92256c.js');
 require('./slots-fb5ac359.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-f9127d1c.js');
+require('./icon-helper-475a8443.js');
 require('./lib-1bd1e383.js');
 require('./dom-a2c535e3.js');
 require('./templates-e7b3ffbb.js');

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["vertex-click-to-edit-textfield.cjs",[[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.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-banner.cjs",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog.cjs",[[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.cjs",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip.cjs",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker.cjs",[[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.cjs",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-badge.cjs",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip.cjs",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[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.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab.cjs",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs.cjs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable.cjs",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch.cjs",[[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.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"persistent":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
+  return index.bootstrapLazy([["vertex-click-to-edit-textfield.cjs",[[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.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-color-circle-picker.cjs",[[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.cjs",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog.cjs",[[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.cjs",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu.cjs",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip.cjs",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-picker.cjs",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar.cjs",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group.cjs",[[1,"vertex-avatar-group"]]],["vertex-badge.cjs",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button.cjs",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card.cjs",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group.cjs",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip.cjs",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading.cjs",[[1,"vertex-logo-loading"]]],["vertex-menu-divider.cjs",[[1,"vertex-menu-divider"]]],["vertex-menu-item.cjs",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio.cjs",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group.cjs",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable.cjs",[[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.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab.cjs",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs.cjs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable.cjs",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch.cjs",[[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.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"persistent":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
   });
 };
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const banner = require('./banner-b18f0d54.js');
+const banner = require('./banner-5628c955.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-f9127d1c.js');
+require('./icon-helper-475a8443.js');
 
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorCirclePicker = require('./color-circle-picker-d0403f1c.js');
+const colorCirclePicker = require('./color-circle-picker-b0927289.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorSwatch = require('./color-swatch-8aaf6c0b.js');
+const colorSwatch = require('./color-swatch-6d98da5f.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./lib-1bd1e383.js');

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-eac5b1d5.js');
+const iconButton = require('./icon-button-4dd2dfa4.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-f9127d1c.js');
+require('./icon-helper-475a8443.js');
 
 
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-ef8fd0d2.js');
+const icon = require('./icon-116cb9ca.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-f9127d1c.js');
+require('./icon-helper-475a8443.js');
 
 
 

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

@@ -10,9 +10,9 @@
   /*
   The outline to display around a circle when it
   is hovered over.
-  Defaults to `2px solid var(--vertex-ui-neutral-700)`.
+  Defaults to `2px solid var(--vertex-ui-neutral-400)`.
   */
-  --color-circle-hovered-outline:  2px solid var(--vertex-ui-neutral-700);
+  --color-circle-hovered-outline:  2px solid var(--vertex-ui-neutral-400);
 
   /*
   The outline to display around a circle when it

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

@@ -2,8 +2,6 @@ import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
 export class ColorCirclePicker {
   constructor() {
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
     this.handleClick = (event) => {
       const circle = event.target;
       this.selectionChanged.emit({
@@ -12,6 +10,12 @@ export class ColorCirclePicker {
         darkened: circle.darkened,
       });
     };
+    this.parseJsonProp = (prop) => {
+      if (typeof prop === 'string') {
+        return JSON.parse(prop);
+      }
+      return prop;
+    };
     this.colors = [
       '#4c87be',
       '#f3d336',
@@ -22,39 +26,43 @@ export class ColorCirclePicker {
       '#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 is() { return "vertex-color-circle-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -88,6 +96,73 @@ export class ColorCirclePicker {
         "reflect": false,
         "defaultValue": "[\n    '#4c87be',\n    '#f3d336',\n    '#6fbb29',\n    '#e38826',\n    '#c72e16',\n    '#8c3681',\n    '#000000',\n    '#ffffff',\n  ]"
       },
+      "labels": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Record<string, string> | string",
+          "resolved": "string | { [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional labels that will be displayed as a tooltip on\nthe underlying `vertex-color-swatch` elements for associated\ncolors in the `colors` array."
+        },
+        "attribute": "labels",
+        "reflect": false,
+        "defaultValue": "{}"
+      },
+      "labelPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverPlacement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "PopoverPlacement": {
+              "location": "import",
+              "path": "../popover/popover"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the tooltip around the swatch elements.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end',\n'auto', 'auto-start', or 'auto-end', and\ndefaults to 'bottom'.\n\nNote: placement will adjust based on the amount\nof available space, so tooltips close to screen\nedges may appear in a different location."
+        },
+        "attribute": "label-placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorPickerSizeSize",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "ColorPickerSizeSize": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of this color picker. Can be `sm`, `md`, or `lg`,\nand defaults to `lg`."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
       "supplementalColors": {
         "type": "string",
         "mutable": false,
@@ -197,6 +272,13 @@ export class ColorCirclePicker {
       }
     };
   }
+  static get states() {
+    return {
+      "colorArray": {},
+      "supplementaryColorArray": {},
+      "labelMap": {}
+    };
+  }
   static get events() {
     return [{
         "method": "selectionChanged",
@@ -226,6 +308,9 @@ export class ColorCirclePicker {
       }, {
         "propName": "supplementalColors",
         "methodName": "handleSupplementalColorsChange"
+      }, {
+        "propName": "labels",
+        "methodName": "handleLabelsChange"
       }];
   }
 }

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

@@ -14,6 +14,10 @@
   border-radius: 100%;
 }
 
+.root.circle.sm {
+ border-width: 1px; 
+}
+
 .root.square {
   border-width: 1px;
   border-radius: 3px;