@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.1

package/dist/cjs/tooltip-634eb8c9.js

@@ -1,333 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const tslib_es6 = require('./tslib.es6-838fd860.js');
-const index$1 = require('./index-e1b40fa6.js');
-const dom = require('./dom-a2c535e3.js');
-const slots = require('./slots-fb5ac359.js');
-
-/**
- * A module for defining functional schemas to map between different types. This
- * module is useful for parsing to or from JSON/protobufs to domain types.
- *
- * Mappers support greedy validation, so all validation errors are aggregated
- * and reported vs failing on the first invalid input.
- *
- * @example
- *
- * ```ts
- * import { Mapper as M } from '@vertexvis/utils';
- *
- * interface Address {
- *   address: string;
- *   city: string;
- *   state: string;
- *   zip: string;
- * }
- *
- * interface Person {
- *   name: string;
- *   addresses: Address[];
- * }
- *
- * type AddressJson = Partial<Address>;
- * type PersonJson = {
- *   name?: string;
- *   addresses?: AddressJson[];
- * }
- *
- * const mapAddress: M.Func<AddressJson, Address> = M.defineMapper(
- *   M.read(
- *     M.requireProp('address'),
- *     M.requireProp('city'),
- *     M.requireProp('state'),
- *     M.requireProp('zip')
- *   ),
- *   ([address, city, state, zip]) => ({
- *     address, city, state, zip
- *   })
- * );
- *
- * const mapPerson: M.Func<PersonJson, Person> = M.defineMapper(
- *   M.read(
- *     M.requireProp('name'),
- *     M.mapProp(
- *       'addresses',
- *       M.compose(M.required('addresses'), M.mapArray(mapAddress))
- *     )
- *   ),
- *   ([name, addresses]) => ({ name, addresses })
- * );
- *
- * const person = mapPerson({
- *   name: 'John',
- *   addresses: [{ address: '123', city: 'Ames', state: 'IA', zip: '50010' }]
- * });
- *
- * const invalidPerson = mapPerson({
- *   addresses: [{ city: 'Ames', state: 'IA', zip: '50010' }]
- * });
- * ```
- * // {
- * //   errors: ["Name is required.", "Address is required."]
- * // }
- *
- * @module
- */
-/**
- * An error that is thrown when validation of a schema fails.
- *
- * @see {@link ifInvalidThrow} - for throwing errors on invalid input.
- */
-/** @class */ ((function (_super) {
-    tslib_es6.__extends(MapperValidationError, _super);
-    function MapperValidationError(errors) {
-        var _this = _super.call(this, 'Validation error mapping object.') || this;
-        _this.errors = errors;
-        Object.setPrototypeOf(_this, MapperValidationError.prototype);
-        return _this;
-    }
-    return MapperValidationError;
-})(Error));
-
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-    // find the complete implementation of crypto (msCrypto) on IE11.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-function validate(uuid) {
-  return typeof uuid === 'string' && REGEX.test(uuid);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-var byteToHex = [];
-
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).substr(1));
-}
-
-function stringify(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
-  // of the following:
-  // - One or more input array values don't map to a hex octet (leading to
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
-
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
-  }
-
-  return uuid;
-}
-
-function v4(options, buf, offset) {
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (var i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return stringify(rnds);
-}
-
-function create() {
-    return v4();
-}
-function fromMsbLsb(msb, lsb) {
-    function digits(val, ds) {
-        var hi = BigInt(1) << (ds * BigInt(4));
-        return (hi | (val & (hi - BigInt(1)))).toString(16).substring(1);
-    }
-    var msbB = typeof msb === 'string' ? BigInt(msb) : msb;
-    var lsbB = typeof lsb === 'string' ? BigInt(lsb) : lsb;
-    var sec1 = digits(msbB >> BigInt(32), BigInt(8));
-    var sec2 = digits(msbB >> BigInt(16), BigInt(4));
-    var sec3 = digits(msbB, BigInt(4));
-    var sec4 = digits(lsbB >> BigInt(48), BigInt(4));
-    var sec5 = digits(lsbB, BigInt(12));
-    return "".concat(sec1, "-").concat(sec2, "-").concat(sec3, "-").concat(sec4, "-").concat(sec5);
-}
-function toMsbLsb(id) {
-    var _a = tslib_es6.__read(id.split('-'), 5), c1 = _a[0], c2 = _a[1], c3 = _a[2], c4 = _a[3], c5 = _a[4];
-    if (c1 == null || c2 == null || c3 == null || c4 == null || c5 == null) {
-        throw new Error("Invalid UUID string ".concat(id));
-    }
-    var msb = BigInt.asIntN(64, BigInt("0x".concat(c1 + c2 + c3)));
-    var lsb = BigInt.asIntN(64, BigInt("0x".concat(c4 + c5)));
-    return { msb: msb.toString(), lsb: lsb.toString() };
-}
-
-var uuid = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  create: create,
-  fromMsbLsb: fromMsbLsb,
-  toMsbLsb: toMsbLsb
-});
-
-const tooltipCss = ":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";
-
-const TOOLTIP_OPEN_DELAY = 500;
-const Tooltip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pointerEntered = false;
-    this.content = undefined;
-    this.disabled = undefined;
-    this.placement = 'bottom';
-    this.delay = TOOLTIP_OPEN_DELAY;
-    this.animated = true;
-    this.open = false;
-    this.handlePointerEnter = this.handlePointerEnter.bind(this);
-    this.handlePointerLeave = this.handlePointerLeave.bind(this);
-    this.handleContentChange = this.handleContentChange.bind(this);
-    this.handleDisabledChange = this.handleDisabledChange.bind(this);
-    this.tooltipId = `vertex-tooltip-${uuid.create()}`;
-  }
-  disconnectedCallback() {
-    this.removeElement();
-    this.clearOpenTimeout();
-    this.pointerEntered = false;
-  }
-  handleContentChange() {
-    if (this.internalContentElement != null) {
-      this.updateContentElementChildren(this.internalContentElement);
-    }
-  }
-  handleDisabledChange() {
-    if (this.internalContentElement != null) {
-      this.updateContentElementClass(this.internalContentElement);
-    }
-    if (!this.disabled && this.pointerEntered) {
-      this.handlePointerEnter();
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "target", ref: (el) => {
-        this.targetElement = el;
-      }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, index.h("slot", null)), index.h("div", { class: "content-hidden", ref: (el) => {
-        this.contentElement = el;
-      } }, index.h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
-  }
-  addElement() {
-    if (this.targetElement != null) {
-      const popover = this.createPopoverElement(this.targetElement);
-      const content = this.createContentElement();
-      this.updateContentElementChildren(content);
-      popover.appendChild(content);
-      this.hostElement.ownerDocument.body.appendChild(popover);
-    }
-  }
-  removeElement() {
-    const popover = this.hostElement.ownerDocument.getElementById(this.tooltipId);
-    if (popover != null) {
-      popover.remove();
-    }
-    this.internalContentElement = undefined;
-  }
-  createPopoverElement(anchorElement) {
-    const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
-    popover.id = this.tooltipId;
-    popover.setAttribute('class', 'vertex-tooltip-popover');
-    popover.open = this.open;
-    popover.resizeBehavior = 'fixed';
-    popover.backdrop = false;
-    popover.placement = this.placement;
-    popover.animated = this.animated;
-    popover.anchorBounds = dom.getBoundingClientRect(anchorElement);
-    return popover;
-  }
-  createContentElement() {
-    this.internalContentElement =
-      this.hostElement.ownerDocument.createElement('div');
-    this.internalContentElement.setAttribute('class', index$1.classnames('vertex-tooltip-content', {
-      hidden: !this.open || this.disabled,
-    }));
-    return this.internalContentElement;
-  }
-  updateContentElementClass(element) {
-    element.setAttribute('class', index$1.classnames('vertex-tooltip-content', {
-      hidden: !this.open || this.disabled,
-    }));
-  }
-  updateContentElementChildren(element) {
-    var _a;
-    this.displayedSlottedContent =
-      (_a = slots.getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-    if (this.content != null) {
-      element.innerText = this.content;
-    }
-    else if (this.displayedSlottedContent != null) {
-      element.appendChild(this.displayedSlottedContent);
-    }
-  }
-  handlePointerEnter() {
-    if (this.openTimeout == null && !this.disabled) {
-      this.createOpenTimeout();
-    }
-    else if (this.openTimeout == null) {
-      this.pointerEntered = true;
-    }
-  }
-  handlePointerLeave() {
-    this.clearOpenTimeout();
-    this.removeElement();
-    this.open = false;
-    this.pointerEntered = false;
-  }
-  createOpenTimeout() {
-    this.openTimeout = setTimeout(() => {
-      this.open = true;
-      this.openTimeout = undefined;
-      this.addElement();
-    }, this.delay);
-    this.pointerEntered = false;
-  }
-  clearOpenTimeout() {
-    if (this.openTimeout != null) {
-      clearTimeout(this.openTimeout);
-      this.openTimeout = undefined;
-    }
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "content": ["handleContentChange"],
-    "disabled": ["handleDisabledChange"]
-  }; }
-};
-Tooltip.style = tooltipCss;
-
-exports.Tooltip = Tooltip;

package/dist/cjs/tslib.es6-838fd860.js

@@ -1,68 +0,0 @@
-'use strict';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-exports.__assign = function() {
-    exports.__assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return exports.__assign.apply(this, arguments);
-};
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-exports.__extends = __extends;
-exports.__read = __read;

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

@@ -1,157 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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.circle.sm{border-width:1px}.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 };