@vertexvis/ui 0.1.5-canary.6 → 1.0.0-testing.0

package/dist/components/vertex-chip.js

@@ -1,45 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-
-const chipCss = ".root{display:flex;align-items:center;width:fit-content;border-radius:16px;font-size:var(--vertex-ui-text-base);padding:0.5rem;padding-left:0.25rem;max-height:1rem}.filled{color:white}.chip-primary{color:white}.chip-secondary{color:var(--vertex-ui-neutral-800)}.filled.chip-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.filled.chip-primary{background-color:var(--vertex-ui-blue-700)}.outlined.chip-primary{border:1px solid var(--vertex-ui-blue-700);color:var(--vertex-ui-blue-700)}.outlined.chip-secondary{border:1px solid var(--vertex-ui-neutral-300);color:var(--vertex-ui-neutral-700)}.avatar{margin-right:0.25rem}";
-
-const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.variant = 'filled';
-    this.color = 'secondary';
-  }
-  render() {
-    return (h("div", { class: classnames('root', {
-        filled: this.variant === 'filled',
-        outlined: this.variant === 'outlined',
-        'chip-primary': this.color === 'primary',
-        'chip-secondary': this.color === 'secondary',
-      }) }, h("div", { class: "avatar" }, h("slot", { name: "avatar" })), h("slot", null), h("slot", { name: "icon" })));
-  }
-  static get style() { return chipCss; }
-}, [1, "vertex-chip", {
-    "variant": [1],
-    "color": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-chip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-chip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Chip);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexChip = Chip;
-const defineCustomElement = defineCustomElement$1;
-
-export { Chip as C, VertexChip, defineCustomElement };
+import{C as p,d as o}from"./p-TLO_pywp.js";const s=p,r=o;export{s as VertexChip,r as defineCustomElement}

package/dist/components/vertex-click-to-edit-textfield.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexClickToEditTextfield extends Components.VertexClickToEditTextfield, HTMLElement {}
 export const VertexClickToEditTextfield: {
-  prototype: VertexClickToEditTextfield;
-  new (): VertexClickToEditTextfield;
+    prototype: VertexClickToEditTextfield;
+    new (): VertexClickToEditTextfield;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-click-to-edit-textfield.js

@@ -1,156 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$5 } from './auto-resize-textarea.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './text-field.js';
-
-const ClickToEditTextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.inputFocus = createEvent(this, "inputFocus", 7);
-    this.inputBlur = createEvent(this, "inputBlur", 7);
-    this.inputInput = createEvent(this, "inputInput", 7);
-    this.inputChange = createEvent(this, "inputChange", 7);
-    this.inputSubmit = createEvent(this, "inputSubmit", 7);
-    var _a;
-    this.handleKeyDown = (ev) => {
-      var _a, _b;
-      if (ev.detail.key === 'Enter' && !this.multiline) {
-        (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.blurInput();
-      }
-      if (ev.detail.key === 'Escape') {
-        this.resetOnEscape();
-        (_b = this.textFieldRef) === null || _b === void 0 ? void 0 : _b.blurInput();
-      }
-    };
-    this.resetOnEscape = () => {
-      if (this.textFieldRef != null && this.defaultValue != null) {
-        this.textFieldRef.updateInput(this.defaultValue);
-        this.editing = false;
-      }
-    };
-    this.handleSubmit = async () => {
-      var _a;
-      const value = await ((_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.getInputValue());
-      if (value != null && value !== this.defaultValue) {
-        this.defaultValue = value;
-        this.inputSubmit.emit({ value });
-      }
-      this.editing = false;
-    };
-    this.placeholder = undefined;
-    this.fontSize = 'standard';
-    this.disabled = undefined;
-    this.multiline = false;
-    this.minRows = undefined;
-    this.maxRows = undefined;
-    this.value = '';
-    this.autoFocus = undefined;
-    this.editing = false;
-    this.hasError = undefined;
-    this.handleInputBlur = this.handleInputBlur.bind(this);
-    this.handleInputFocus = this.handleInputFocus.bind(this);
-    this.handleInputInput = this.handleInputInput.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-  }
-  render() {
-    return (h("div", { class: "click-to-edit" }, h("div", { class: "click-to-edit-text" }, h("vertex-textfield", { ref: (element) => {
-        this.textFieldRef = element;
-      }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
-  }
-  renderIcon() {
-    if (this.editing) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "edit-icon" }, h("div", { class: "click-to-edit-button" }, h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
-    }
-    else if (!this.disabled) {
-      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "pencil-icon" }, h("vertex-icon", { size: "sm", name: "pencil", class: classnames('icon-visibility', 'hover-icon') }))));
-    }
-    else {
-      return h("div", null);
-    }
-  }
-  handleInputBlur(event) {
-    event.stopPropagation();
-    this.inputBlur.emit();
-    this.handleSubmit();
-  }
-  handleInputFocus(event) {
-    var _a;
-    event.stopPropagation();
-    this.inputFocus.emit();
-    (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.selectAll();
-    this.editing = true;
-  }
-  handleInputInput(event) {
-    event.stopPropagation();
-    this.inputInput.emit({ value: event.detail.value });
-  }
-  handleInputChange(event) {
-    event.stopPropagation();
-    this.inputChange.emit({ value: event.detail.value });
-  }
-  handleValueChanged(newValue) {
-    // If the value changed outside of edit mode, then update the default value
-    if (!this.editing) {
-      this.defaultValue = newValue === null || newValue === void 0 ? void 0 : newValue.toString();
-    }
-  }
-  static get watchers() { return {
-    "value": ["handleValueChanged"]
-  }; }
-}, [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"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-click-to-edit-textfield", "vertex-auto-resize-textarea", "vertex-icon", "vertex-icon-button", "vertex-textfield"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-click-to-edit-textfield":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ClickToEditTextField);
-      }
-      break;
-    case "vertex-auto-resize-textarea":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "vertex-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-textfield":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexClickToEditTextfield = ClickToEditTextField;
-const defineCustomElement = defineCustomElement$1;
-
-export { ClickToEditTextField as C, VertexClickToEditTextfield, defineCustomElement };
+import{C as o,d as s}from"./p-BAfJR2VF.js";const p=o,r=s;export{p as VertexClickToEditTextfield,r as defineCustomElement}

package/dist/components/vertex-collapsible.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexCollapsible extends Components.VertexCollapsible, HTMLElement {}
 export const VertexCollapsible: {
-  prototype: VertexCollapsible;
-  new (): VertexCollapsible;
+    prototype: VertexCollapsible;
+    new (): VertexCollapsible;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-collapsible.js

@@ -1,63 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$4 } from './expandable.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
-
-const collapsibleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-color:var(--vertex-ui-blue-700)}.collapsible-target{width:100%;display:flex;align-items:center;cursor:pointer;padding:0.75rem 0.25rem;outline:none}.collapsible-target:focus-visible{border-radius:0.25rem;box-shadow:0 0 0 1px var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-target:focus-visible,.collapsible-target:hover{color:var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-expand{display:flex;justify-content:center;align-items:center;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;margin-left:auto}.rotated{transform:rotateZ(90deg)}.collapsible-content{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);box-sizing:border-box}";
-
-const Collapsible = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = undefined;
-    this.open = false;
-  }
-  render() {
-    return (h("vertex-expandable", { controlled: true, expanded: this.open }, h("button", { slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (h("span", null, this.label)) : (h("slot", { name: "label" })), h("div", { class: classnames('collapsible-expand', {
-        rotated: this.open,
-      }) }, h("slot", { name: "expand-icon" }, h("vertex-icon", { name: "caret-right" })))), h("div", { class: "collapsible-content-container" }, h("slot", null))));
-  }
-  setOpen(open) {
-    this.open = open;
-  }
-  static get style() { return collapsibleCss; }
-}, [1, "vertex-collapsible", {
-    "label": [1],
-    "open": [1540]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-collapsible", "vertex-expandable", "vertex-icon", "vertex-icon-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-collapsible":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Collapsible);
-      }
-      break;
-    case "vertex-expandable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexCollapsible = Collapsible;
-const defineCustomElement = defineCustomElement$1;
-
-export { Collapsible as C, VertexCollapsible, defineCustomElement };
+import{C as s,d as o}from"./p-DsAkiOMC.js";const p=s,r=o;export{p as VertexCollapsible,r as defineCustomElement}

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexColorCirclePicker extends Components.VertexColorCirclePicker, HTMLElement {}
 export const VertexColorCirclePicker: {
-  prototype: VertexColorCirclePicker;
-  new (): VertexColorCirclePicker;
+    prototype: VertexColorCirclePicker;
+    new (): VertexColorCirclePicker;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,131 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$4 } from './color-swatch.js';
-import { d as defineCustomElement$3 } from './popover.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-400);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
-
-const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.handleClick = (event) => {
-      const circle = event.target;
-      this.selectionChanged.emit({
-        color: circle.color,
-        lightened: circle.lightened,
-        darkened: circle.darkened,
-      });
-    };
-    this.parseJsonProp = (prop) => {
-      if (typeof prop === 'string') {
-        return JSON.parse(prop);
-      }
-      return prop;
-    };
-    this.colors = [
-      '#4c87be',
-      '#f3d336',
-      '#6fbb29',
-      '#e38826',
-      '#c72e16',
-      '#8c3681',
-      '#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) {
-    this.colorArray = this.parseJsonProp(newValue);
-  }
-  handleSupplementalColorsChange(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) => {
-      const label = this.labelMap[c];
-      const swatch = (h("vertex-color-swatch", { class: classnames('circle', {
-          selected: this.selected === c,
-        }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
-      return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
-    }))));
-  }
-  static get watchers() { return {
-    "colors": ["handleColorsChange"],
-    "supplementalColors": ["handleSupplementalColorsChange"],
-    "labels": ["handleLabelsChange"]
-  }; }
-  static get style() { return colorCirclePickerCss; }
-}, [1, "vertex-color-circle-picker", {
-    "colors": [1],
-    "labels": [1],
-    "labelPlacement": [1, "label-placement"],
-    "size": [1],
-    "supplementalColors": [1, "supplemental-colors"],
-    "theme": [513],
-    "lightenPercentage": [2, "lighten-percentage"],
-    "darkenPercentage": [2, "darken-percentage"],
-    "selected": [1537],
-    "direction": [1],
-    "colorArray": [32],
-    "supplementaryColorArray": [32],
-    "labelMap": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-color-circle-picker", "vertex-color-swatch", "vertex-popover", "vertex-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-color-circle-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ColorCirclePicker);
-      }
-      break;
-    case "vertex-color-swatch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexColorCirclePicker = ColorCirclePicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { ColorCirclePicker as C, VertexColorCirclePicker, defineCustomElement };
+import{C as o,d as s}from"./p-1KuzBK7Z.js";const p=o,r=s;export{p as VertexColorCirclePicker,r as defineCustomElement}

package/dist/components/vertex-color-picker.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexColorPicker extends Components.VertexColorPicker, HTMLElement {}
 export const VertexColorPicker: {
-  prototype: VertexColorPicker;
-  new (): VertexColorPicker;
+    prototype: VertexColorPicker;
+    new (): VertexColorPicker;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -1,75 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { i as isValidHexColor, d as defineCustomElement$2 } from './color-swatch.js';
-
-const colorPickerCss = ":host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.expand-full{width:100%}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{width:100%;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;min-width:3.6rem}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueInput = createEvent(this, "valueInput", 7);
-    this.valueChanged = 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.expand = 'block';
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("div", { class: classnames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, 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 watchers() { return {
-    "value": ["valueChange"]
-  }; }
-  static get style() { return colorPickerCss; }
-}, [1, "vertex-color-picker", {
-    "value": [1537],
-    "size": [513],
-    "variant": [513],
-    "expand": [513],
-    "disabled": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-color-picker", "vertex-color-swatch"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-color-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ColorPicker);
-      }
-      break;
-    case "vertex-color-swatch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexColorPicker = ColorPicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { ColorPicker as C, VertexColorPicker, defineCustomElement };
+import{C as o,d as s}from"./p-al_CUADF.js";const a=o,p=s;export{a as VertexColorPicker,p as defineCustomElement}

package/dist/components/vertex-color-swatch.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexColorSwatch extends Components.VertexColorSwatch, HTMLElement {}
 export const VertexColorSwatch: {
-  prototype: VertexColorSwatch;
-  new (): VertexColorSwatch;
+    prototype: VertexColorSwatch;
+    new (): VertexColorSwatch;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-color-swatch.js

@@ -1,6 +1 @@
-import { C as ColorSwatch, d as defineCustomElement$1 } from './color-swatch.js';
-
-const VertexColorSwatch = ColorSwatch;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexColorSwatch, defineCustomElement };
+import{C as o,d as s}from"./p-B23i1cwy.js";const p=o,r=s;export{p as VertexColorSwatch,r as defineCustomElement}

package/dist/components/vertex-context-menu.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexContextMenu extends Components.VertexContextMenu, HTMLElement {}
 export const VertexContextMenu: {
-  prototype: VertexContextMenu;
-  new (): VertexContextMenu;
+    prototype: VertexContextMenu;
+    new (): VertexContextMenu;
 };
 /**
  * Used to define this component and all nested components recursively.