@vertexvis/ui 0.1.0-testing.8 → 0.1.0

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/cjs/vertex-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const dialog = require('./dialog-88e2308a.js');
+const dialog = require('./dialog-34f1dd6e.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.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-786427d6.js');
+const iconButton = require('./icon-button-19061994.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-cb479ba1.js');
 
 
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-460fd0f5.js');
+const icon = require('./icon-3b1349ea.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-cb479ba1.js');
 
 
 

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-91cbcd07.js');
+const searchBar = require('./search-bar-2e7ee35a.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const select = require('./select-5f8aecfe.js');
+const select = require('./select-2b2bdb97.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const slider = require('./slider-13594e49.js');
+const slider = require('./slider-7714cccb.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
+require('./dom-a2c535e3.js');
 
 
 

package/dist/cjs/{vertex-color-circle.cjs.entry.js → vertex-tab.cjs.entry.js}

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const colorCircle = require('./color-circle-05be54bf.js');
+const tab = require('./tab-4335cd8f.js');
 require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
 
 
 
-exports.vertex_color_circle = colorCircle.ColorCircle;
+exports.vertex_tab = tab.Tab;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tabs = require('./tabs-6f3e76e1.js');
+require('./index-6a92256c.js');
+require('./index-e1b40fa6.js');
+require('./dom-a2c535e3.js');
+
+
+
+exports.vertex_tabs = tabs.Tabs;

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const tooltip = require('./tooltip-e9f63631.js');
+const tooltip = require('./tooltip-9d097c55.js');
 require('./index-6a92256c.js');
 require('./tslib.es6-838fd860.js');
 require('./index-e1b40fa6.js');
+require('./dom-a2c535e3.js');
 require('./slots-fb5ac359.js');
 
 

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",
@@ -37,6 +37,8 @@
     "./components/radio-group/radio-group.js",
     "./components/result-list/result-list.js",
     "./components/select/select.js",
+    "./components/tab/tab.js",
+    "./components/tabs/tabs.js",
     "./components/tooltip/tooltip.js"
   ],
   "compiler": {

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

@@ -52,9 +52,9 @@ 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 }))))));
+      }), variant: "circle", size: "lg", color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
   }
   static get is() { return "vertex-color-circle-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -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%;

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

@@ -1,5 +1,6 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
+import { isValidHexColor } from '../color-swatch/lib';
 export class ColorPicker {
   constructor() {
     this.handleInput = (event) => {
@@ -10,15 +11,23 @@ export class ColorPicker {
       this.valueChanged.emit(this.value);
     };
     this.value = undefined;
+    this.size = 'md';
+    this.variant = 'full';
     this.disabled = false;
   }
   valueChange() {
     this.valueInput.emit(this.value);
   }
   render() {
-    return (h(Host, null, h("label", { class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: "selected", style: {
-        'background-color': this.value,
-      }, title: this.value }), h("div", { class: "handle" }, h("slot", { name: "handle-icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))))));
+    var _a;
+    return (h(Host, null, h("div", { class: classNames('wrapper', this.variant, this.size) }, h("label", { class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: classNames('selected-wrapper', this.variant) }, h("div", { class: "selected", title: this.value }, h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { class: "text-wrapper" }, h("div", { class: "hidden-text" }, "#FFFFFF"), h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default'))))), h("div", { class: "right-gutter" }, h("slot", { name: "right-gutter" })))));
+  }
+  getDisplayedValue() {
+    var _a;
+    if (this.value != null && isValidHexColor(this.value)) {
+      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+    }
+    return undefined;
   }
   static get is() { return "vertex-color-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -51,6 +60,51 @@ export class ColorPicker {
         "attribute": "value",
         "reflect": true
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchSize",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "ColorSwatchSize": {
+              "location": "import",
+              "path": "../color-swatch/color-swatch"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the swatch displayed for this color picker. Can be `sm`, `md`,\n`lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value\nwill also increase the size of the associated hexadecimal value."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'md'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorPickerVariant",
+          "resolved": "\"full\" | \"swatch\"",
+          "references": {
+            "ColorPickerVariant": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of this color picker. Can be `full` or `swatch`,\nand defaults to `full`.\n\n`full` will display both the visual color swatch and the hexadecimal\nrepresentation of the color.\n\n`swatch` will display only the visual color swatch."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'full'"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -0,0 +1,43 @@
+: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;
+}

package/dist/collection/components/{color-circle/color-circle.js → color-swatch/color-swatch.js}

@@ -1,9 +1,13 @@
 import { h, Host } from '@stencil/core';
-export class ColorCircle {
+import classNames from 'classnames';
+import { isValidHexColor } from './lib';
+export class ColorSwatch {
   constructor() {
+    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);
@@ -20,22 +24,43 @@ export class ColorCircle {
     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 (h(Host, null, h("div", { class: "root", style: this.theme === 'dark'
-        ? {
-          backgroundColor: this.color,
-          borderColor: supplementalColor,
-        }
-        : {
+    return (h(Host, null, h("div", { class: classNames('root', this.variant, this.size), style: this.getThemeColors() }, h("div", { class: "overlay" }, 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 (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)}`);
@@ -53,20 +78,64 @@ export class ColorCircle {
   padHexComponent(hex) {
     return `${'0'.repeat(2 - hex.length)}${hex}`;
   }
-  static get is() { return "vertex-color-circle"; }
+  static get is() { return "vertex-color-swatch"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["color-circle.css"]
+      "$": ["color-swatch.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["color-circle.css"]
+      "$": ["color-swatch.css"]
     };
   }
   static get properties() {
     return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchVariant",
+          "resolved": "\"circle\" | \"square\"",
+          "references": {
+            "ColorSwatchVariant": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of this color swatch. Can be either `circle` or `square`,\nand defaults to `circle`."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'circle'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorSwatchSize",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "ColorSwatchSize": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of this color swatch. Can be `sm`, `md`, or `lg`,\nand defaults to `md`."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'md'"
+      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -79,7 +148,7 @@ export class ColorCircle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The primary color of this `vertex-color-circle`.\nFor `dark` theme, this will be the background-color.\nFor `light` theme, this will be the border-color."
+          "text": "The primary color of this `vertex-color-swatch` in hexadecimal format.\nFor `dark` theme, this will be the background-color.\nFor `light` theme, this will be the border-color."
         },
         "attribute": "color",
         "reflect": true,
@@ -106,19 +175,23 @@ export class ColorCircle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'light' | 'dark'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
+          "original": "ColorSwatchTheme",
+          "resolved": "\"dark\" | \"light\" | \"none\"",
+          "references": {
+            "ColorSwatchTheme": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The theme to use for this `vertex-color-circle`.\nCan be either `light` or `dark`, and defaults to `dark`.\n\nWith the `dark` theme, the provided `color` will be used\nas the background-color, and the `darkened` color will be\nused for the border-color.\n\nWith the `light` theme, the provided `color` will be used\nas the border-color, and the `lightened` color will be used\nfor the background-color."
+          "text": "The theme to use for this `vertex-color-swatch`.\nCan be `none`, `light`, or `dark`, and defaults to `none`.\n\nWith no theme (`none`), the provided `color` will be used\nas the background-color, and the border will be a neutral color.\n\nWith the `dark` theme, the provided `color` will be used\nas the background-color, and the `darkened` color will be\nused for the border-color.\n\nWith the `light` theme, the provided `color` will be used\nas the border-color, and the `lightened` color will be used\nfor the background-color."
         },
         "attribute": "theme",
         "reflect": true,
-        "defaultValue": "'dark'"
+        "defaultValue": "'none'"
       },
       "lightenPercentage": {
         "type": "number",