@vertexvis/ui 0.1.0-canary.19 → 0.1.0-canary.20

package/dist/cjs/{color-circle-picker-13396ec4.js → color-circle-picker-a8f9a80a.js}

@@ -59,7 +59,7 @@ const ColorCirclePicker = class {
   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-circle", { class: index$1.classnames('circle', {
+      }) }, this.colorArray.map((c, i) => (index.h("vertex-color-swatch", { class: index$1.classnames('circle', {
         selected: this.selected === c,
       }), color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
   }

package/dist/cjs/color-picker-2a4820fa.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const index = require('./index-6a92256c.js');
+const index$1 = require('./index-e1b40fa6.js');
+const lib = require('./lib-1bd1e383.js');
+
+const colorPickerCss = ":host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{display:inline-flex;position:relative;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected-wrapper{position:relative;display:flex;align-items:center}.wrapper.full .selected-wrapper{gap:0.75rem}.selected{position:relative}.wrapper.sm .selected{width:var(--selected-color-width, 1rem);height:var(--selected-color-height, 1rem)}.wrapper.md .selected{width:var(--selected-color-width, 1.25rem);height:var(--selected-color-height, 1.25rem)}.wrapper.lg .selected{width:var(--selected-color-width, 1.5rem);height:var(--selected-color-height, 1.5rem)}.text-wrapper{position:relative}.selected-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;color:var(--vertex-ui-neutral-700);text-align:center;font-family:var(--vertex-ui-font-family)}.hidden-text{visibility:hidden;pointer-events:none;font-family:var(--vertex-ui-font-family-monospace)}.wrapper.sm .selected-text,.wrapper.sm .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.md .selected-text,.wrapper.md .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.lg .selected-text,.wrapper.lg .hidden-text{font-size:var(--vertex-ui-text-xs)}.no-value{width:100%;height:100%;stroke:var(--vertex-ui-red-400)}.right-gutter{display:flex;align-items:center;margin-left:auto}slot[name=\"right-gutter\"]::slotted(*){padding:0}.input{display:flex;position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
+
+const ColorPicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueInput = index.createEvent(this, "valueInput", 7);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
+    this.handleInput = (event) => {
+      const input = event.target;
+      this.value = input.value || '';
+    };
+    this.handleChange = (event) => {
+      this.valueChanged.emit(this.value);
+    };
+    this.value = undefined;
+    this.size = 'md';
+    this.variant = 'full';
+    this.disabled = false;
+  }
+  valueChange() {
+    this.valueInput.emit(this.value);
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('wrapper', this.variant, this.size) }, index.h("label", { class: index$1.classnames('color-picker', { disabled: this.disabled }) }, index.h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: index$1.classnames('selected-wrapper', this.variant) }, index.h("div", { class: "selected", title: this.value }, index.h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, index.h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (index.h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (index.h("div", { class: "text-wrapper" }, index.h("div", { class: "hidden-text" }, "#FFFFFF"), index.h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default'))))), index.h("div", { class: "right-gutter" }, index.h("slot", { name: "right-gutter" })))));
+  }
+  getDisplayedValue() {
+    var _a;
+    if (this.value != null && lib.isValidHexColor(this.value)) {
+      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+    }
+    return undefined;
+  }
+  static get watchers() { return {
+    "value": ["valueChange"]
+  }; }
+};
+ColorPicker.style = colorPickerCss;
+
+exports.ColorPicker = ColorPicker;

package/dist/cjs/{color-circle-05be54bf.js → color-swatch-8aaf6c0b.js}

@@ -1,15 +1,19 @@
 'use strict';
 
 const index = require('./index-6a92256c.js');
+const index$1 = require('./index-e1b40fa6.js');
+const lib = require('./lib-1bd1e383.js');
 
-const colorCircleCss = ":host{display:flex;--circle-size:24px}.root{border-radius:100%;border-width:2px;border-style:solid;width:var(--circle-size);height:var(--circle-size);box-sizing:border-box}";
+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 ColorCircle = class {
+const ColorSwatch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.variant = 'circle';
+    this.size = 'md';
     this.color = '#ffffff';
     this.supplementalColor = undefined;
-    this.theme = 'dark';
+    this.theme = 'none';
     this.lightenPercentage = 0.25;
     this.darkenPercentage = 0.25;
     this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
@@ -26,22 +30,43 @@ const ColorCircle = class {
     this.darkened = this.adjustColor(this.color, newPercentage);
   }
   render() {
-    const themeColor = this.theme === 'dark' ? this.darkened : this.lightened;
-    const supplementalColor = this.supplementalColor != null && this.supplementalColor.length > 0
-      ? this.supplementalColor
-      : themeColor;
-    return (index.h(index.Host, null, index.h("div", { class: "root", style: this.theme === 'dark'
-        ? {
-          backgroundColor: this.color,
-          borderColor: supplementalColor,
-        }
-        : {
+    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('root', this.variant, this.size), style: this.getThemeColors() }, index.h("div", { class: "overlay" }, index.h("slot", { name: "overlay" })))));
+  }
+  getThemeColors() {
+    const supplementalColor = this.getSupplementalColor();
+    switch (this.theme) {
+      case 'light':
+        return {
           backgroundColor: supplementalColor,
           borderColor: this.color,
-        } })));
+        };
+      case 'dark':
+        return {
+          backgroundColor: this.color,
+          borderColor: supplementalColor,
+        };
+      default:
+        return {
+          backgroundColor: this.color,
+          borderColor: supplementalColor !== null && supplementalColor !== void 0 ? supplementalColor : undefined,
+        };
+    }
+  }
+  getSupplementalColor() {
+    const providedSupplementalColor = this.supplementalColor != null && this.supplementalColor.length > 0
+      ? this.supplementalColor
+      : undefined;
+    switch (this.theme) {
+      case 'light':
+        return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.lightened;
+      case 'dark':
+        return providedSupplementalColor !== null && providedSupplementalColor !== void 0 ? providedSupplementalColor : this.darkened;
+      default:
+        return providedSupplementalColor;
+    }
   }
   adjustColor(color, percentage) {
-    if (color.startsWith('#') && color.length === 7) {
+    if (lib.isValidHexColor(color)) {
       const r = Number(`0x${color.slice(1, 3)}`);
       const g = Number(`0x${color.slice(3, 5)}`);
       const b = Number(`0x${color.slice(5, 7)}`);
@@ -65,6 +90,6 @@ const ColorCircle = class {
     "darkenPercentage": ["handleDarkenPercentageChanged"]
   }; }
 };
-ColorCircle.style = colorCircleCss;
+ColorSwatch.style = colorSwatchCss;
 
-exports.ColorCircle = ColorCircle;
+exports.ColorSwatch = ColorSwatch;

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-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],"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-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-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle.cjs",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["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-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["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]}]]]], 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-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],"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],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index.cjs.js

@@ -12,9 +12,9 @@ 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 colorCircle = require('./color-circle-05be54bf.js');
-const colorCirclePicker = require('./color-circle-picker-13396ec4.js');
-const colorPicker = require('./color-picker-876ace00.js');
+const colorCirclePicker = require('./color-circle-picker-a8f9a80a.js');
+const colorPicker = require('./color-picker-2a4820fa.js');
+const colorSwatch = require('./color-swatch-8aaf6c0b.js');
 const contextMenu = require('./context-menu-664922cd.js');
 const dialog = require('./dialog-34f1dd6e.js');
 const draggablePopover = require('./draggable-popover-edf23d3a.js');
@@ -45,6 +45,7 @@ const tooltip = require('./tooltip-9ac797a0.js');
 require('./index-6a92256c.js');
 require('./slots-fb5ac359.js');
 require('./index-e1b40fa6.js');
+require('./lib-1bd1e383.js');
 require('./icon-helper-e02da963.js');
 require('./templates-e7b3ffbb.js');
 require('./tslib.es6-838fd860.js');
@@ -62,9 +63,9 @@ exports.CardGroup = cardGroup.CardGroup;
 exports.Chip = chip.Chip;
 exports.ClickToEditTextField = clickToEditTextField.ClickToEditTextField;
 exports.Collapsible = collapsible.Collapsible;
-exports.ColorCircle = colorCircle.ColorCircle;
 exports.ColorCirclePicker = colorCirclePicker.ColorCirclePicker;
 exports.ColorPicker = colorPicker.ColorPicker;
+exports.ColorSwatch = colorSwatch.ColorSwatch;
 exports.ContextMenu = contextMenu.ContextMenu;
 exports.Dialog = dialog.Dialog;
 exports.DraggablePopover = draggablePopover.DraggablePopover;

package/dist/cjs/lib-1bd1e383.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const hexRegex = /^(#|0x)?([A-Fa-f0-9]{6})$/;
+function isValidHexColor(color) {
+  const match = color != null ? hexRegex.exec(color) : undefined;
+  return match != null && match.length > 0;
+}
+
+exports.isValidHexColor = isValidHexColor;

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-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],"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-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-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle.cjs",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["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-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["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]}]]]], 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-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],"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],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button.cjs",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon.cjs",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
   });
 };
 

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-13396ec4.js');
+const colorCirclePicker = require('./color-circle-picker-a8f9a80a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorPicker = require('./color-picker-876ace00.js');
+const colorPicker = require('./color-picker-2a4820fa.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
+require('./lib-1bd1e383.js');
 
 
 

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const colorSwatch = require('./color-swatch-8aaf6c0b.js');
+require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
+require('./lib-1bd1e383.js');
+
+
+
+exports.vertex_color_swatch = colorSwatch.ColorSwatch;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,8 @@
     "./components/chip/chip.js",
     "./components/text-field/text-field.js",
     "./components/color-circle-picker/color-circle-picker.js",
+    "./components/color-swatch/color-swatch.js",
+    "./components/color-picker/color-picker.js",
     "./components/popover/popover.js",
     "./components/expandable/expandable.js",
     "./components/icon-button/icon-button.js",
@@ -22,8 +24,6 @@
     "./components/card-group/card-group.js",
     "./components/click-to-edit-text-field/click-to-edit-text-field.js",
     "./components/collapsible/collapsible.js",
-    "./components/color-circle/color-circle.js",
-    "./components/color-picker/color-picker.js",
     "./components/context-menu/context-menu.js",
     "./components/dialog/dialog.js",
     "./components/draggable-popover/draggable-popover.js",

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

@@ -52,7 +52,7 @@ export class ColorCirclePicker {
   render() {
     return (h(Host, null, h("div", { class: classNames('container', {
         vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => (h("vertex-color-circle", { class: classNames('circle', {
+      }) }, this.colorArray.map((c, i) => (h("vertex-color-swatch", { class: classNames('circle', {
         selected: this.selected === c,
       }), color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
   }
@@ -82,7 +82,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-circle`."
+          "text": "The colors to show in this `vertex-color-circle-picker`.\nThese values will map to the `color` property of the underlying\n`vertex-color-swatch`."
         },
         "attribute": "colors",
         "reflect": false,
@@ -100,7 +100,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-circle` elements for associated\nindices in the `colors` array."
+          "text": "Optional supplemental colors that will be provided to the\nunderlying `vertex-color-swatch` elements for associated\nindices in the `colors` array."
         },
         "attribute": "supplemental-colors",
         "reflect": false,
@@ -118,7 +118,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-circle` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-circle` elements,\nand a `lightened` color will be used for the border-colors."
+          "text": "The theme to use for this `vertex-color-circle-picker`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `darkened` color will be used for the border-colors.\n\nWith the `light` theme, the provided `colors` will be used\nas the background-colors for `vertex-color-swatch` elements,\nand a `lightened` color will be used for the border-colors."
         },
         "attribute": "theme",
         "reflect": true,
@@ -136,7 +136,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-circle`. This will be\nused when the `theme` is set to `light`."
+          "text": "The percentage lighter color to use to compute the `lightened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `light`."
         },
         "attribute": "lighten-percentage",
         "reflect": false,
@@ -154,7 +154,7 @@ export class ColorCirclePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-circle`. This will be\nused when the `theme` is set to `dark`."
+          "text": "The percentage darker color to use to compute the `darkened`\ncolor for the underlying `vertex-color-swatch`. This will be\nused when the `theme` is set to `dark`."
         },
         "attribute": "darken-percentage",
         "reflect": false,
@@ -172,7 +172,7 @@ export class ColorCirclePicker {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-circle` elements\nare clicked."
+          "text": "An optional selected color. This will also be updated internally\nby the component when individual `vertex-color-swatch` elements\nare clicked."
         },
         "attribute": "selected",
         "reflect": true

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

@@ -1,22 +1,33 @@
 :host {
+  display: flex;
+
   /*
-  Width of element indicating the color chosen.
-  Defaults to 30px
+  Width override of element indicating the color chosen.
+  Defaults to `initial` to fall back to the `size` property.
   */
-  --selected-color-width: 30px;
+  --selected-color-width: initial;
 
   /*
-  Height of element indicating the color chosen.
-  Defaults to 30px
+  Height override of element indicating the color chosen.
+  Defaults to `initial` to fall back to the `size` property.
   */
-  --selected-color-height: 30px;
+  --selected-color-height: initial;
+}
+
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.wrapper.full {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--vertex-ui-neutral-300);
+  border-radius: 4px;
 }
 
 .color-picker {
   display: inline-flex;
   position: relative;
-  background: var(--vertex-ui-neutral-200);
-  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -25,21 +36,90 @@
   cursor: default;
 }
 
+.selected-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.wrapper.full .selected-wrapper {
+  gap: 0.75rem;
+}
+
 .selected {
-  height: var(--selected-color-height);
-  width: var(--selected-color-width);
-  box-sizing: content-box;
-  border: 1px solid var(--vertex-ui-neutral-300);
-  border-radius: 4px;
+  position: relative;
+}
+
+.wrapper.sm .selected {
+  width: var(--selected-color-width, 1rem);
+  height: var(--selected-color-height, 1rem);
+}
+
+.wrapper.md .selected {
+  width: var(--selected-color-width, 1.25rem);
+  height: var(--selected-color-height, 1.25rem);
+}
+
+.wrapper.lg .selected {
+  width: var(--selected-color-width, 1.5rem);
+  height: var(--selected-color-height, 1.5rem);
+}
+
+.text-wrapper {
+  position: relative;
+}
+
+.selected-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  color: var(--vertex-ui-neutral-700);
+  text-align: center;
+  font-family: var(--vertex-ui-font-family);
+}
+
+.hidden-text {
+  visibility: hidden;
+  pointer-events: none;
+  font-family: var(--vertex-ui-font-family-monospace);
 }
 
-.handle {
+.wrapper.sm .selected-text,
+.wrapper.sm .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.wrapper.md .selected-text,
+.wrapper.md .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.wrapper.lg .selected-text,
+.wrapper.lg .hidden-text {
+  font-size: var(--vertex-ui-text-xs);
+}
+
+.no-value {
+  width: 100%;
+  height: 100%;
+  stroke: var(--vertex-ui-red-400);
+}
+
+.right-gutter {
   display: flex;
   align-items: center;
-  padding: 0 3px;
+  margin-left: auto;
+}
+
+slot[name="right-gutter"]::slotted(*) {
+  padding: 0 ;
 }
 
 .input {
+  display: flex;
   position: absolute;
   pointer-events: none;
   height: 100%;