@vertexvis/ui 0.0.12-canary.9 → 0.0.12

package/README.md

@@ -20,7 +20,7 @@ dependency to your `package.json`:
 ```json
 {
   "dependencies": {
-    "@vertexvis/ui": "^0.0.10"
+    "@vertexvis/ui": "^0.0.12"
   }
 }
 ```

package/dist/cjs/{button-b72fb87a.js → button-a652f98b.js}

@@ -3,7 +3,7 @@
 const index = require('./index-4281b6d5.js');
 const index$1 = require('./index-b9715722.js');
 
-const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800)}.btn-txt-secondary:not(.disabled):hover{background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus,.btn-txt-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
+const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
 
 const Button = class {
   constructor(hostRef) {

package/dist/cjs/color-circle-779577d6.js

@@ -0,0 +1,104 @@
+'use strict';
+
+const index = require('./index-4281b6d5.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 ColorCircle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The primary color of this `vertex-color-circle`.
+     * For `dark` theme, this will be the background-color.
+     * For `light` theme, this will be the border-color.
+     */
+    this.color = '#ffffff';
+    /**
+     * The theme to use for this `vertex-color-circle`.
+     * Can be either `light` or `dark`, and defaults to `dark`.
+     *
+     * With the `dark` theme, the provided `color` will be used
+     * as the background-color, and the `darkened` color will be
+     * used for the border-color.
+     *
+     * With the `light` theme, the provided `color` will be used
+     * as the border-color, and the `lightened` color will be used
+     * for the background-color.
+     */
+    this.theme = 'dark';
+    /**
+     * The percentage lighter color to use to compute the `lightened`
+     * color. This will be used when the `theme` is set to `light`.
+     */
+    this.lightenPercentage = 0.25;
+    /**
+     * The percentage darker color to use to compute the `darkened`
+     * color. This will be used when the `theme` is set to `dark`.
+     */
+    this.darkenPercentage = 0.25;
+    /**
+     * The computed lighter color based on the provided `color` and
+     * `lightenPercentage`. This will be used when the `theme` is
+     * set to `light`.
+     */
+    this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
+    /**
+     * The computed darker color based on the provided `color` and
+     * `darkenPercentage`. This will be used when the `theme` is
+     * set to `dark`.
+     */
+    this.darkened = this.adjustColor(this.color, this.darkenPercentage);
+  }
+  handleColorChanged(newColor) {
+    this.lightened = this.adjustColor(newColor, -this.lightenPercentage);
+    this.darkened = this.adjustColor(newColor, this.darkenPercentage);
+  }
+  handleLightenPercentageChanged(newPercentage) {
+    this.lightened = this.adjustColor(this.color, -newPercentage);
+  }
+  handleDarkenPercentageChanged(newPercentage) {
+    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,
+        }
+        : {
+          backgroundColor: supplementalColor,
+          borderColor: this.color,
+        } })));
+  }
+  adjustColor(color, percentage) {
+    if (color.startsWith('#') && color.length === 7) {
+      const r = Number(`0x${color.slice(1, 3)}`);
+      const g = Number(`0x${color.slice(3, 5)}`);
+      const b = Number(`0x${color.slice(5, 7)}`);
+      const rPadded = this.padHexComponent(this.adjustComponent(r, percentage).toString(16));
+      const gPadded = this.padHexComponent(this.adjustComponent(g, percentage).toString(16));
+      const bPadded = this.padHexComponent(this.adjustComponent(b, percentage).toString(16));
+      return `#${rPadded}${gPadded}${bPadded}`;
+    }
+    return color;
+  }
+  adjustComponent(component, percentage) {
+    const scalar = percentage < 0 ? 0xff - component : 0xff;
+    return Math.max(0x00, Math.min(0xff, Math.floor(component - Math.floor(scalar * percentage))));
+  }
+  padHexComponent(hex) {
+    return `${'0'.repeat(2 - hex.length)}${hex}`;
+  }
+  static get watchers() { return {
+    "color": ["handleColorChanged"],
+    "lightenPercentage": ["handleLightenPercentageChanged"],
+    "darkenPercentage": ["handleDarkenPercentageChanged"]
+  }; }
+};
+ColorCircle.style = colorCircleCss;
+
+exports.ColorCircle = ColorCircle;

package/dist/cjs/color-circle-picker-56ea92c0.js

@@ -0,0 +1,108 @@
+'use strict';
+
+const index = require('./index-4281b6d5.js');
+const index$1 = require('./index-b9715722.js');
+
+const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-700);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
+
+const ColorCirclePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
+    /**
+     * The colors to show in this `vertex-color-circle-picker`.
+     * These values will map to the `color` property of the underlying
+     * `vertex-color-circle`.
+     */
+    this.colors = [
+      '#4c87be',
+      '#f3d336',
+      '#6fbb29',
+      '#e38826',
+      '#c72e16',
+      '#8c3681',
+      '#000000',
+      '#ffffff',
+    ];
+    /**
+     * Optional supplemental colors that will be provided to the
+     * underlying `vertex-color-circle` elements for associated
+     * indices in the `colors` array.
+     */
+    this.supplementalColors = [];
+    /**
+     * The theme to use for this `vertex-color-circle-picker`.
+     * Can be either `light` or `dark`, and defaults to `dark`.
+     *
+     * With the `dark` theme, the provided `colors` will be used
+     * as the background-colors for `vertex-color-circle` elements,
+     * and a `darkened` color will be used for the border-colors.
+     *
+     * With the `light` theme, the provided `colors` will be used
+     * as the background-colors for `vertex-color-circle` elements,
+     * and a `lightened` color will be used for the border-colors.
+     */
+    this.theme = 'dark';
+    /**
+     * The percentage lighter color to use to compute the `lightened`
+     * color for the underlying `vertex-color-circle`. This will be
+     * used when the `theme` is set to `light`.
+     */
+    this.lightenPercentage = 0.25;
+    /**
+     * The percentage darker color to use to compute the `darkened`
+     * color for the underlying `vertex-color-circle`. This will be
+     * used when the `theme` is set to `dark`.
+     */
+    this.darkenPercentage = 0.25;
+    /**
+     * The orientation of this color picker. Can be either `vertical`
+     * or `horizontal`, and defaults to `horizontal`.
+     */
+    this.direction = 'horizontal';
+    this.colorArray = [];
+    this.supplementaryColorArray = [];
+    this.handleClick = (event) => {
+      const circle = event.target;
+      this.selectionChanged.emit({
+        color: circle.color,
+        lightened: circle.lightened,
+        darkened: circle.darkened,
+      });
+    };
+  }
+  componentWillLoad() {
+    this.handleColorsChange(this.colors);
+    this.handleSupplementalColorsChange(this.supplementalColors);
+  }
+  handleColorsChange(newValue) {
+    if (typeof newValue === 'string') {
+      this.colorArray = JSON.parse(newValue);
+    }
+    else {
+      this.colorArray = newValue;
+    }
+  }
+  handleSupplementalColorsChange(newValue) {
+    if (typeof newValue === 'string') {
+      this.supplementaryColorArray = JSON.parse(newValue);
+    }
+    else {
+      this.supplementaryColorArray = newValue;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('container', {
+        vertical: this.direction === 'vertical',
+      }) }, this.colorArray.map((c, i) => (index.h("vertex-color-circle", { 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 }))))));
+  }
+  static get watchers() { return {
+    "colors": ["handleColorsChange"],
+    "supplementalColors": ["handleSupplementalColorsChange"]
+  }; }
+};
+ColorCirclePicker.style = colorCirclePickerCss;
+
+exports.ColorCirclePicker = ColorCirclePicker;

package/dist/cjs/components.cjs.js

@@ -65,5 +65,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["vertex-collapsible.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-click-to-edit-textfield.cjs",[[2,"vertex-click-to-edit-textfield",{"placeholder":[1],"disabled":[516],"value":[1032],"autoFocus":[4,"auto-focus"]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["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],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placeholder":[1],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select.cjs",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-toast.cjs",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-picker.cjs",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-dialog.cjs",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4]},[[4,"keydown","keyDownListener"]]]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["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-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],"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],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-slider.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"step":[8],"value":[1026],"disabled":[4]}]]],["vertex-spinner.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["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"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield.cjs",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"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-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"position":[1040]}]]],["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],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16]}]]]], options);
+  return index.bootstrapLazy([["vertex-collapsible.cjs",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-click-to-edit-textfield.cjs",[[2,"vertex-click-to-edit-textfield",{"placeholder":[1],"disabled":[516],"value":[1032],"autoFocus":[4,"auto-focus"]}]]],["vertex-context-menu.cjs",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["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],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placeholder":[1],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select.cjs",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["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-dialog.cjs",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4]},[[4,"keydown","keyDownListener"]]]]],["vertex-toggle.cjs",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-tooltip.cjs",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["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-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],"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-slider.cjs",[[1,"vertex-slider",{"min":[2],"max":[2],"step":[8],"value":[1026],"disabled":[4]}]]],["vertex-spinner.cjs",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["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"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield.cjs",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"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-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-menu.cjs",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"position":[1040]}]]],["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],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"updateOnResize":[4,"update-on-resize"],"contentResizeObserverFactory":[16],"popperRendered":[32]}]]]], options);
 });

package/dist/cjs/{context-menu-56ac1c58.js → context-menu-a86e89ca.js}

@@ -42,7 +42,13 @@ const ContextMenu = class {
     }
   }
   render() {
-    return (index.h("vertex-menu", { open: this.open, animated: this.animated, position: this.position, onMenuClosed: this.handleMenuClosed }, index.h("slot", null)));
+    return (index.h("vertex-menu", { open: this.open, animated: this.animated, position: this.position, fallbackPlacements: [
+        'bottom-end',
+        'top-start',
+        'top-end',
+        'right',
+        'left',
+      ], onMenuClosed: this.handleMenuClosed }, index.h("slot", null)));
   }
   addEventListeners(targetSelector) {
     this.target =

package/dist/cjs/{draggable-popover-9713af9a.js → draggable-popover-14f7893a.js}

@@ -58,7 +58,7 @@ const DraggablePopover = class {
     }
   }
   render() {
-    return (index.h("vertex-popover", { position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", overflowBehavior: {
+    return (index.h("vertex-popover", { position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", updateOnResize: !this.dragging, overflowBehavior: {
         options: {
           altAxis: true,
           tether: false,
@@ -69,11 +69,7 @@ const DraggablePopover = class {
         options: {
           flipVariations: false,
         },
-      } }, index.h("div", { ref: (el) => {
-        this.containerEl = el;
-      }, class: index$1.classnames('container', {
-        dragging: this.dragging,
-      }) }, index.h("div", { class: "icon-container" }, index.h("div", { class: "icon", onPointerDown: this.handlePointerDown }, index.h("slot", { name: "drag-icon" }, index.h("vertex-icon", { size: "sm", name: "drag-indicator" })))), index.h("slot", null))));
+      } }, index.h("div", { ref: (el) => (this.containerEl = el), class: index$1.classnames('container', { dragging: this.dragging }) }, index.h("div", { class: "icon-container" }, index.h("div", { class: "icon", onPointerDown: this.handlePointerDown }, index.h("slot", { name: "drag-icon" }, index.h("vertex-icon", { size: "sm", name: "drag-indicator" })))), index.h("slot", null))));
   }
   static get watchers() { return {
     "position": ["updatePosition"]

package/dist/cjs/{icon-button-3917b326.js → icon-button-62cb43cc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-4281b6d5.js');
-const iconHelper = require('./icon-helper-147de3f5.js');
+const iconHelper = require('./icon-helper-55f7f888.js');
 const index$1 = require('./index-b9715722.js');
 
 const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:pointer}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:not-allowed}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:not-allowed;color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";

package/dist/cjs/{icon-ba0a83f1.js → icon-c3f4d7ec.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-4281b6d5.js');
 const index$1 = require('./index-b9715722.js');
-const iconHelper = require('./icon-helper-147de3f5.js');
+const iconHelper = require('./icon-helper-55f7f888.js');
 
 const iconCss = ".container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}svg{position:relative;width:100%}";