@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.2

package/dist/cjs/index.cjs.js

@@ -25,13 +25,13 @@ const helpTooltip = require('./help-tooltip-f72eccc7.js');
 const icon = require('./icon-dce835e0.js');
 const iconButton = require('./icon-button-8c4a9cd6.js');
 const logoLoading = require('./logo-loading-4d49fedf.js');
-const menu = require('./menu-d1ecf43b.js');
+const menu = require('./menu-25f83cd7.js');
 const menuDivider = require('./menu-divider-5bdebe5d.js');
 const menuItem = require('./menu-item-d213fd4d.js');
 const popover = require('./popover-942209b8.js');
 const radio = require('./radio-bff991d2.js');
 const radioGroup = require('./radio-group-d628f631.js');
-const resizable = require('./resizable-e4248256.js');
+const resizable = require('./resizable-c0a69532.js');
 const resultList = require('./result-list-241ffe8d.js');
 const searchBar = require('./search-bar-2e7ee35a.js');
 const select = require('./select-2b2bdb97.js');
@@ -48,9 +48,9 @@ require('./slots-fb5ac359.js');
 require('./index-e1b40fa6.js');
 require('./icon-helper-c076290f.js');
 require('./lib-1bd1e383.js');
+require('./dom-a2c535e3.js');
 require('./templates-e7b3ffbb.js');
 require('./tslib.es6-838fd860.js');
-require('./dom-a2c535e3.js');
 
 
 

package/dist/cjs/{menu-d1ecf43b.js → menu-25f83cd7.js}

@@ -28,6 +28,9 @@ const Menu = class {
   disconnectedCallback() {
     this.removeEventListeners();
   }
+  connectedCallback() {
+    this.addEventListeners();
+  }
   render() {
     return (index.h("vertex-popover", Object.assign({ ref: (element) => {
         this.popoverRef = element;
@@ -43,12 +46,19 @@ const Menu = class {
       }) }, index.h("slot", { name: "header" }), index.h("slot", null))));
   }
   addEventListeners() {
-    var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('dismissed', this.handlePopoverDismiss);
+    var _a, _b;
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
+    this.listenerDisposable = {
+      dispose: () => {
+        var _a;
+        (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+      },
+    };
   }
   removeEventListeners() {
     var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
   handlePopoverDismiss() {
     this.open = false;

package/dist/cjs/{resizable-e4248256.js → resizable-c0a69532.js}

@@ -2,6 +2,7 @@
 
 const index = require('./index-6a92256c.js');
 const index$1 = require('./index-e1b40fa6.js');
+const dom = require('./dom-a2c535e3.js');
 
 const resizableCss = ":host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=\"\"])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}";
 
@@ -40,7 +41,9 @@ const Resizable = class {
     this.handleDragLeft = this.handleDragLeft.bind(this);
     this.handleDragRight = this.handleDragRight.bind(this);
     this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
+    this.updateDimensions = this.updateDimensions.bind(this);
     this.recomputeDimensions = this.recomputeDimensions.bind(this);
+    this.computeDimensions = this.computeDimensions.bind(this);
     this.mutationObserver = new MutationObserver(this.recomputeDimensions);
     this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
   }
@@ -65,6 +68,21 @@ const Resizable = class {
     this.mutationObserver.disconnect();
     this.resizeObserver.disconnect();
   }
+  connectedCallback() {
+    this.computeDimensions();
+    window.addEventListener('resize', this.recomputeDimensions);
+    this.mutationObserver.observe(this.hostElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    if (this.parentSelector != null) {
+      const parent = document.querySelector(this.parentSelector);
+      if (parent != null) {
+        this.resizeObserver.observe(parent);
+      }
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
   render() {
     const width = this.width < 0 || this.horizontalDirection === 'none'
       ? '100%'
@@ -143,7 +161,7 @@ const Resizable = class {
         : 0;
   }
   computeDimensions() {
-    index.readTask(() => {
+    dom.readDOM(() => {
       var _a;
       const slotted = this.getSlottedElement();
       if (typeof window !== 'undefined' && slotted != null) {
@@ -171,7 +189,7 @@ const Resizable = class {
     }
     this.resizeTimeout = setTimeout(() => {
       this.resizeTimeout = undefined;
-      index.readTask(() => {
+      dom.readDOM(() => {
         var _a;
         const slotted = this.getSlottedElement();
         if (typeof window !== 'undefined' && slotted != null) {
@@ -374,12 +392,12 @@ const Resizable = class {
     return 0;
   }
   emitResizeStart(location) {
-    index.readTask(() => {
+    dom.readDOM(() => {
       this.resizeStart.emit(this.computeResizeEventDetails(location));
     });
   }
   emitResizeEnd(location) {
-    index.readTask(() => {
+    dom.readDOM(() => {
       this.resizeEnd.emit(this.computeResizeEventDetails(location));
     });
   }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const menu = require('./menu-d1ecf43b.js');
+const menu = require('./menu-25f83cd7.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

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

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

package/dist/collection/components/menu/menu.js

@@ -21,6 +21,9 @@ export class Menu {
   disconnectedCallback() {
     this.removeEventListeners();
   }
+  connectedCallback() {
+    this.addEventListeners();
+  }
   render() {
     return (h("vertex-popover", Object.assign({ ref: (element) => {
         this.popoverRef = element;
@@ -36,12 +39,19 @@ export class Menu {
       }) }, h("slot", { name: "header" }), h("slot", null))));
   }
   addEventListeners() {
-    var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('dismissed', this.handlePopoverDismiss);
+    var _a, _b;
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
+    this.listenerDisposable = {
+      dispose: () => {
+        var _a;
+        (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+      },
+    };
   }
   removeEventListeners() {
     var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
   handlePopoverDismiss() {
     this.open = false;

package/dist/collection/components/resizable/resizable.js

@@ -1,5 +1,6 @@
-import { h, Host, readTask, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
+import { readDOM } from '../../util/components/dom';
 const WINDOW_RESIZE_DEBOUNCE_THRESHOLD = 200;
 export class Resizable {
   constructor() {
@@ -32,7 +33,9 @@ export class Resizable {
     this.handleDragLeft = this.handleDragLeft.bind(this);
     this.handleDragRight = this.handleDragRight.bind(this);
     this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
+    this.updateDimensions = this.updateDimensions.bind(this);
     this.recomputeDimensions = this.recomputeDimensions.bind(this);
+    this.computeDimensions = this.computeDimensions.bind(this);
     this.mutationObserver = new MutationObserver(this.recomputeDimensions);
     this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
   }
@@ -57,6 +60,21 @@ export class Resizable {
     this.mutationObserver.disconnect();
     this.resizeObserver.disconnect();
   }
+  connectedCallback() {
+    this.computeDimensions();
+    window.addEventListener('resize', this.recomputeDimensions);
+    this.mutationObserver.observe(this.hostElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    if (this.parentSelector != null) {
+      const parent = document.querySelector(this.parentSelector);
+      if (parent != null) {
+        this.resizeObserver.observe(parent);
+      }
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
   render() {
     const width = this.width < 0 || this.horizontalDirection === 'none'
       ? '100%'
@@ -135,7 +153,7 @@ export class Resizable {
         : 0;
   }
   computeDimensions() {
-    readTask(() => {
+    readDOM(() => {
       var _a;
       const slotted = this.getSlottedElement();
       if (typeof window !== 'undefined' && slotted != null) {
@@ -163,7 +181,7 @@ export class Resizable {
     }
     this.resizeTimeout = setTimeout(() => {
       this.resizeTimeout = undefined;
-      readTask(() => {
+      readDOM(() => {
         var _a;
         const slotted = this.getSlottedElement();
         if (typeof window !== 'undefined' && slotted != null) {
@@ -366,12 +384,12 @@ export class Resizable {
     return 0;
   }
   emitResizeStart(location) {
-    readTask(() => {
+    readDOM(() => {
       this.resizeStart.emit(this.computeResizeEventDetails(location));
     });
   }
   emitResizeEnd(location) {
-    readTask(() => {
+    readDOM(() => {
       this.resizeEnd.emit(this.computeResizeEventDetails(location));
     });
   }

package/dist/components/auto-resize-textarea.js

@@ -0,0 +1,157 @@
+import { proxyCustomElement, HTMLElement, h, Host, readTask } from '@stencil/core/internal/client';
+import { g as getFirstSlottedElement } from './slots.js';
+
+function isTextareaElement(el) {
+  return (el === null || el === void 0 ? void 0 : el.tagName) === 'TEXTAREA';
+}
+
+const autoResizeTextareaCss = ":host{position:relative;width:100%;height:100%;font-size:0}.hidden-text{position:absolute;box-sizing:border-box;top:0;left:0;height:0;width:100%;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;overflow:hidden}";
+
+const AutoResizeTextArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.previousScrollTop = 0;
+    this.rowCount = 0;
+    this.textareaSelector = undefined;
+    this.initialValue = undefined;
+    this.minRows = 1;
+    this.maxRows = undefined;
+    this.textValue = undefined;
+    this.prepareHiddenTextElement = this.prepareHiddenTextElement.bind(this);
+    this.updateScrollTop = this.updateScrollTop.bind(this);
+    this.computeRowHeights = this.computeRowHeights.bind(this);
+    this.updateValue = this.updateValue.bind(this);
+    this.updatePreviousScrollTop = this.updatePreviousScrollTop.bind(this);
+    this.updateOverflow = this.updateOverflow.bind(this);
+    this.resizeObserver = new ResizeObserver(this.computeRowHeights);
+  }
+  componentWillLoad() {
+    this.computeRowHeights();
+  }
+  componentDidLoad() {
+    this.slottedElement = this.getSlottedTextareaElement();
+    this.textValue = this.initialValue;
+    this.prepareHiddenTextElement();
+    this.computeRowHeights();
+    if (this.slottedElement != null) {
+      this.resizeObserver.observe(this.slottedElement);
+      this.addEventListener();
+    }
+  }
+  componentDidRender() {
+    // This re-computes the number of rows after a rerender has
+    // rendered the current value to the hidden textarea.
+    this.computeRowHeights();
+  }
+  disconnectedCallback() {
+    this.removeEventListener();
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("textarea", { class: "hidden-text", ref: (el) => {
+        this.hiddenTextRef = el;
+      } }, this.textValue), h("slot", null)));
+  }
+  addEventListener() {
+    var _a, _b;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', this.updateValue);
+    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.updatePreviousScrollTop);
+  }
+  removeEventListener() {
+    var _a, _b;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.updateValue);
+    (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.updatePreviousScrollTop);
+  }
+  updateValue() {
+    if (this.slottedElement != null) {
+      this.textValue = this.slottedElement.value;
+      this.updateOverflow();
+    }
+  }
+  updatePreviousScrollTop() {
+    if (this.slottedElement != null) {
+      this.previousScrollTop = this.slottedElement.scrollTop;
+    }
+  }
+  updateScrollTop() {
+    if (this.slottedElement != null) {
+      // This prevents an issue where the slotted textarea auto-scrolls
+      // to a newline. This is desired behavior if we're capped at the
+      // max rows, but undesired if the component will continue to expand.
+      this.slottedElement.scrollTop =
+        this.maxRows == null || this.rowCount >= this.maxRows
+          ? this.slottedElement.scrollTop
+          : this.previousScrollTop;
+    }
+  }
+  computeRowHeights() {
+    this.updateScrollTop();
+    readTask(() => {
+      var _a;
+      if (typeof window !== 'undefined' &&
+        this.slottedElement != null &&
+        this.hiddenTextRef != null) {
+        const computedStyles = window.getComputedStyle(this.slottedElement);
+        const lineHeight = Math.floor(parseFloat(computedStyles.lineHeight));
+        const totalRows = Math.floor(this.hiddenTextRef.scrollHeight / lineHeight);
+        this.rowCount = Math.max(this.minRows, Math.min((_a = this.maxRows) !== null && _a !== void 0 ? _a : totalRows, totalRows));
+        this.slottedElement.rows = this.rowCount;
+        this.updateOverflow();
+      }
+    });
+  }
+  prepareHiddenTextElement() {
+    readTask(() => {
+      if (typeof window !== 'undefined' &&
+        this.slottedElement != null &&
+        this.hiddenTextRef != null) {
+        const computedStyles = window.getComputedStyle(this.slottedElement);
+        this.hiddenTextRef.setAttribute('style', `line-height: ${computedStyles.lineHeight}; font-size: ${computedStyles.fontSize}; font-family: ${computedStyles.fontFamily}; padding-left: ${computedStyles.paddingLeft}; padding-right: ${computedStyles.paddingRight};`);
+      }
+    });
+  }
+  getSlottedTextareaElement() {
+    const el = getFirstSlottedElement({
+      hostElement: this.hostElement,
+      selector: this.textareaSelector,
+    });
+    if (isTextareaElement(el)) {
+      return el;
+    }
+    else {
+      throw new Error('The vertex-auto-resize-textarea component is only compatible with `HTMLTextAreaElement`s');
+    }
+  }
+  updateOverflow() {
+    var _a;
+    (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.setAttribute('style', this.maxRows && this.rowCount >= this.maxRows
+      ? 'overflow-y: auto;'
+      : 'overflow: hidden;');
+  }
+  get hostElement() { return this; }
+  static get style() { return autoResizeTextareaCss; }
+}, [1, "vertex-auto-resize-textarea", {
+    "textareaSelector": [1, "textarea-selector"],
+    "initialValue": [1, "initial-value"],
+    "minRows": [514, "min-rows"],
+    "maxRows": [514, "max-rows"],
+    "textValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-auto-resize-textarea"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-auto-resize-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AutoResizeTextArea);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { AutoResizeTextArea as A, defineCustomElement as d };

package/dist/components/color-swatch.js

@@ -0,0 +1,124 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+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;
+}
+
+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 ColorSwatch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'circle';
+    this.size = 'md';
+    this.color = '#ffffff';
+    this.supplementalColor = undefined;
+    this.theme = 'none';
+    this.lightenPercentage = 0.25;
+    this.darkenPercentage = 0.25;
+    this.lightened = this.adjustColor(this.color, -this.lightenPercentage);
+    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() {
+    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 (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)}`);
+      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"]
+  }; }
+  static get style() { return colorSwatchCss; }
+}, [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]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-color-swatch"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-color-swatch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ColorSwatch);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { ColorSwatch as C, defineCustomElement as d, isValidHexColor as i };

package/dist/components/components.esm.js

@@ -1 +1 @@
-import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[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"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-b22ed1dd",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-e35057b5",[[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"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-6a49c365",[[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]}]]],["p-1d08dd79",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-d2d75bcf",[[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]}]]],["p-70c6c194",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-f6f2bc86",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-ea4a2f74",[[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]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-2ae8175d",[[1,"vertex-tab",{label:[1],active:[4]}]]],["p-8d83dfff",[[1,"vertex-tabs",{active:[1025],labels:[32],activeBounds:[32],activeButtonEl:[32]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[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]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-406e73da",[[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]}]]],["p-606596de",[[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]}]]],["p-3b794014",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-8bbc344d",[[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]}]]],["p-0517ca62",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-91644b85",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-ef75393c",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]]],e)));
+import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[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"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-b22ed1dd",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-e35057b5",[[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"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-6a49c365",[[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]}]]],["p-1d08dd79",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-d2d75bcf",[[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]}]]],["p-70c6c194",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-f6f2bc86",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-95358d00",[[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]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-2ae8175d",[[1,"vertex-tab",{label:[1],active:[4]}]]],["p-8d83dfff",[[1,"vertex-tabs",{active:[1025],labels:[32],activeBounds:[32],activeButtonEl:[32]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[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]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-406e73da",[[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]}]]],["p-606596de",[[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]}]]],["p-3b794014",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-8bbc344d",[[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]}]]],["p-1b85c1d1",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-91644b85",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-ef75393c",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]]],e)));

package/dist/components/dom.js

@@ -0,0 +1,13 @@
+import { readTask } from '@stencil/core/internal/client';
+
+function readDOM(callback) {
+  readTask(callback);
+}
+function getBoundingClientRect(el) {
+  return el.getBoundingClientRect();
+}
+function blurElement(el) {
+  el.blur();
+}
+
+export { blurElement as b, getBoundingClientRect as g, readDOM as r };