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

package/dist/cjs/tab-4335cd8f.js

@@ -1,26 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const tabCss = ":host{position:relative;width:100%;height:100%}.content{display:none;height:0px}.content.active{display:flex;width:100%;height:100%}";
-
-const Tab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabClick = index.createEvent(this, "tabClick", 7);
-    this.handleClick = () => {
-      this.tabClick.emit(this.label);
-    };
-    this.label = undefined;
-    this.active = false;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('content', {
-        active: this.active,
-      }) }, index.h("slot", null))));
-  }
-};
-Tab.style = tabCss;
-
-exports.Tab = Tab;

package/dist/cjs/tabs-6f3e76e1.js

@@ -1,111 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-const dom = require('./dom-a2c535e3.js');
-
-function isTabElement(element) {
-  return element.tagName === 'VERTEX-TAB';
-}
-
-const tabsCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex;position:relative;width:100%;height:100%}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;width:100%}.labels{display:flex;position:relative;border-bottom:solid 1px var(--vertex-ui-neutral-300)}.indicator{position:absolute;bottom:0;height:3px;background-color:var(--vertex-ui-blue-700);transition:left 0.2s ease-in-out}.label{position:relative;cursor:pointer;color:var(--vertex-ui-neutral-700);white-space:nowrap;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-md);padding:0.75rem 1.25rem}.label:not(.active):hover{color:var(--vertex-ui-neutral-800)}.label.active{color:var(--vertex-ui-blue-700);font-weight:var(--vertex-ui-font-weight-bold)}.hidden-label-text{font-weight:bold;visibility:hidden;height:0px}.tab-content{display:flex;height:5%;flex-grow:1}";
-
-const Tabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.selectedTabChanged = index.createEvent(this, "selectedTabChanged", 7);
-    this.indicatorInitialized = false;
-    this.handleLabelClick = (label) => {
-      if (this.active != null) {
-        this.updateActiveOnTab(this.active, false);
-      }
-      this.active = label;
-      this.updateActiveOnTab(this.active, true);
-      this.selectedTabChanged.emit(label);
-    };
-    this.updateActiveOnTab = (label, active) => {
-      const activeTab = this.findTabByLabel(label);
-      if (activeTab != null) {
-        activeTab.active = active;
-      }
-    };
-    this.findTabByLabel = (label) => {
-      var _a;
-      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
-      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
-      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
-        ? Array.from(slotAssignedElements[0].children)
-        : undefined;
-      return slotChildren != null
-        ? slotChildren.filter(isTabElement).find((el) => el.label === label)
-        : undefined;
-    };
-    this.updateTabLabels = () => {
-      var _a;
-      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
-      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
-      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
-        ? Array.from(slotAssignedElements[0].children)
-        : undefined;
-      this.labels =
-        slotChildren != null
-          ? slotChildren.filter(isTabElement).map((t) => t.label)
-          : [];
-    };
-    this.active = undefined;
-    this.labels = [];
-    this.activeBounds = undefined;
-    this.activeButtonEl = undefined;
-  }
-  componentWillLoad() {
-    this.updateTabLabels();
-  }
-  componentDidLoad() {
-    if (this.active != null) {
-      this.updateActiveOnTab(this.active, true);
-    }
-    this.indicatorInitialized = false;
-    this.handleActiveButtonChange();
-  }
-  componentDidUpdate() {
-    // Place the indicator if it hasn't been initialized yet
-    if (!this.indicatorInitialized) {
-      this.handleActiveButtonChange();
-    }
-  }
-  handleActiveButtonChange() {
-    const button = this.activeButtonEl;
-    if (button != null) {
-      dom.readDOM(() => {
-        const hostElBounds = dom.getBoundingClientRect(this.hostEl);
-        const activeBounds = dom.getBoundingClientRect(button);
-        this.activeBounds = {
-          x: activeBounds.x - hostElBounds.x,
-          width: activeBounds.width,
-        };
-        if (this.activeBounds.width !== 0) {
-          this.indicatorInitialized = true;
-        }
-      });
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "wrapper" }, index.h("div", { class: "labels" }, this.labels.map((label) => (index.h("button", { class: index$1.classnames('label', {
-        active: this.active === label,
-      }), "data-label": label, ref: (el) => {
-        if (this.active === label) {
-          this.activeButtonEl = el;
-        }
-      }, onClick: () => this.handleLabelClick(label) }, label, index.h("div", { class: "hidden-label-text" }, label)))), index.h("slot", { name: "label-header" }), this.activeBounds && (index.h("div", { class: "indicator", style: {
-        left: `${this.activeBounds.x}px`,
-        width: `${this.activeBounds.width}px`,
-      } }))), index.h("div", { class: "tab-content" }, index.h("slot", { onSlotchange: this.updateTabLabels })))));
-  }
-  get hostEl() { return index.getElement(this); }
-  static get watchers() { return {
-    "activeButtonEl": ["handleActiveButtonChange"]
-  }; }
-};
-Tabs.style = tabsCss;
-
-exports.Tabs = Tabs;

package/dist/cjs/templates-e7b3ffbb.js

@@ -1,230 +0,0 @@
-'use strict';
-
-const tslib_es6 = require('./tslib.es6-838fd860.js');
-
-/**
- * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
- */
-/**
- * Lower case as a function.
- */
-function lowerCase(str) {
-    return str.toLowerCase();
-}
-
-// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-// Remove all non-word characters.
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-/**
- * Normalize the string into something other libraries can manipulate easier.
- */
-function noCase(input, options) {
-    if (options === void 0) { options = {}; }
-    var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-    var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
-    var start = 0;
-    var end = result.length;
-    // Trim the delimiter from around the output string.
-    while (result.charAt(start) === "\0")
-        start++;
-    while (result.charAt(end - 1) === "\0")
-        end--;
-    // Transform each token independently.
-    return result.slice(start, end).split("\0").map(transform).join(delimiter);
-}
-/**
- * Replace `re` in the input string with the replacement value.
- */
-function replace(input, re, value) {
-    if (re instanceof RegExp)
-        return input.replace(re, value);
-    return re.reduce(function (input, re) { return input.replace(re, value); }, input);
-}
-
-function pascalCaseTransform(input, index) {
-    var firstChar = input.charAt(0);
-    var lowerChars = input.substr(1).toLowerCase();
-    if (index > 0 && firstChar >= "0" && firstChar <= "9") {
-        return "_" + firstChar + lowerChars;
-    }
-    return "" + firstChar.toUpperCase() + lowerChars;
-}
-function pascalCase(input, options) {
-    if (options === void 0) { options = {}; }
-    return noCase(input, tslib_es6.__assign({ delimiter: "", transform: pascalCaseTransform }, options));
-}
-
-function camelCaseTransform(input, index) {
-    if (index === 0)
-        return input.toLowerCase();
-    return pascalCaseTransform(input, index);
-}
-function camelCase(input, options) {
-    if (options === void 0) { options = {}; }
-    return pascalCase(input, tslib_es6.__assign({ transform: camelCaseTransform }, options));
-}
-
-const bindingRegEx = /{{(.+)}}/;
-class CollectionBinding {
-  constructor(bindings) {
-    this.bindings = bindings;
-  }
-  bind(data) {
-    this.bindings.forEach((binding) => binding.bind(data));
-  }
-}
-class NodeBinding {
-  constructor(node, expr) {
-    this.node = node;
-    this.expr = expr;
-  }
-}
-class TextNodeBinding extends NodeBinding {
-  constructor(node, expr) {
-    super(node, expr);
-  }
-  bind(data) {
-    const newContent = replaceBindingString(data, this.expr);
-    if (newContent !== this.node.textContent) {
-      this.node.textContent = newContent;
-    }
-  }
-}
-class AttributeBinding extends NodeBinding {
-  constructor(node, expr, attr) {
-    super(node, expr);
-    this.attr = attr;
-  }
-  bind(data) {
-    const newValue = replaceBindingString(data, this.expr);
-    const oldValue = this.node.getAttribute(this.attr);
-    if (oldValue !== newValue) {
-      this.node.setAttribute(this.attr, newValue);
-    }
-  }
-}
-class PropertyBinding extends NodeBinding {
-  constructor(node, expr, prop) {
-    super(node, expr);
-    this.prop = prop;
-  }
-  bind(data) {
-    const newValue = replaceBinding(data, this.expr);
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    const oldValue = this.node[this.prop];
-    if (oldValue !== newValue) {
-      this.node[this.prop] = newValue;
-    }
-    /* eslint-enable @typescript-eslint/no-explicit-any */
-  }
-}
-class EventHandlerBinding extends NodeBinding {
-  constructor(node, expr, eventName) {
-    super(node, expr);
-    this.eventName = eventName;
-  }
-  bind(data) {
-    var _a;
-    const path = extractBindingPath(this.expr);
-    if (path != null) {
-      (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-      const listener = getBindableValue(data, path, true);
-      this.node.addEventListener(this.eventName, listener);
-      this.disposable = {
-        dispose: () => {
-          this.node.removeEventListener(this.eventName, listener);
-        },
-      };
-    }
-  }
-}
-function generateBindings(node) {
-  const bindings = [];
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    const el = node;
-    const bindableAttributes = getBindableAttributes(el);
-    bindableAttributes.forEach((attr) => {
-      if (attr.name.startsWith('event:')) {
-        const eventName = camelCase(attr.name.replace('event:', ''));
-        bindings.push(new EventHandlerBinding(el, attr.value, eventName));
-      }
-      else if (attr.name.startsWith('attr:')) {
-        bindings.push(new AttributeBinding(el, attr.value, attr.name.replace('attr:', '')));
-      }
-      else if (attr.name.startsWith('prop:')) {
-        const propName = camelCase(attr.name.replace('prop:', ''));
-        bindings.push(new PropertyBinding(el, attr.value, propName));
-      }
-    });
-  }
-  else if (node.nodeType === Node.TEXT_NODE &&
-    node.textContent != null &&
-    bindingRegEx.test(node.textContent)) {
-    bindings.push(new TextNodeBinding(node, node.textContent));
-  }
-  for (let i = 0; i < node.childNodes.length; i++) {
-    bindings.push(...generateBindings(node.childNodes[i]));
-  }
-  return bindings;
-}
-function getBindableAttributes(element) {
-  return Array.from(element.attributes).filter((attr) => bindingRegEx.test(attr.value));
-}
-function extractBindingPath(expr) {
-  const result = bindingRegEx.exec(expr);
-  return result != null ? result[1] : undefined;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function replaceBindingString(data, expr) {
-  const path = extractBindingPath(expr);
-  if (path != null) {
-    const value = getBindableValue(data, path, true);
-    return expr.replace(`{{${path}}}`, value === null || value === void 0 ? void 0 : value.toString());
-  }
-  else {
-    return expr;
-  }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function replaceBinding(data, expr) {
-  const path = extractBindingPath(expr);
-  if (path != null) {
-    const value = getBindableValue(data, path, true);
-    return value;
-  }
-  else {
-    return expr;
-  }
-}
-function getBindableValue(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-data, path, isHead = false
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-) {
-  const [head, ...tail] = path.split('.');
-  if (isHead && tail.length === 0) {
-    return data;
-  }
-  else if (isHead && tail.length > 0) {
-    return getBindableValue(data, tail.join('.'), false);
-  }
-  else {
-    const value = data[head];
-    if (tail.length > 0) {
-      return getBindableValue(value, tail.join('.'), false);
-    }
-    else {
-      return value;
-    }
-  }
-}
-
-function generateInstanceFromTemplate(template) {
-  const fragment = template.content.cloneNode(true);
-  const element = fragment.firstElementChild;
-  const bindings = new CollectionBinding(generateBindings(fragment));
-  return { element, bindings };
-}
-
-exports.generateInstanceFromTemplate = generateInstanceFromTemplate;

package/dist/cjs/text-field-bccbde1f.js

@@ -1,133 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const TextField = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.inputFocus = index.createEvent(this, "inputFocus", 7);
-    this.inputBlur = index.createEvent(this, "inputBlur", 7);
-    this.inputInput = index.createEvent(this, "inputInput", 7);
-    this.inputChange = index.createEvent(this, "inputChange", 7);
-    this.textFieldKeyDown = index.createEvent(this, "textFieldKeyDown", 7);
-    this.inputAutofill = index.createEvent(this, "inputAutofill", 7);
-    this.handleFocus = (ev) => {
-      this.inputFocus.emit(ev);
-    };
-    this.handleBlur = (ev) => {
-      this.inputBlur.emit(ev);
-    };
-    this.handleKeyDown = (ev) => {
-      if (ev.key === 'Enter' && this.nearbyForm != null) {
-        this.nearbyForm.dispatchEvent(new CustomEvent('submit', {
-          bubbles: true,
-          cancelable: true,
-        }));
-      }
-      else {
-        this.textFieldKeyDown.emit(ev);
-      }
-    };
-    this.handleChanged = () => {
-      this.inputChange.emit({ value: this.nativeInput.value });
-    };
-    this.handleInput = () => {
-      this.inputInput.emit({ value: this.nativeInput.value });
-    };
-    this.type = 'text';
-    this.name = undefined;
-    this.variant = 'standard';
-    this.fontSize = 'standard';
-    this.multiline = false;
-    this.minRows = 1;
-    this.maxRows = undefined;
-    this.placeholder = undefined;
-    this.autoFocus = undefined;
-    this.autoComplete = undefined;
-    this.autoCorrect = undefined;
-    this.value = '';
-    this.disabled = undefined;
-    this.hasError = undefined;
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.autoFocus) {
-      (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }
-  /**
-   * updateInput is a method to take an input to automatically set the native input to the given input string
-   * @param input
-   */
-  async updateInput(input) {
-    if (this.nativeInput != null) {
-      this.nativeInput.value = input;
-    }
-  }
-  async blurInput() {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  async getInputValue() {
-    return this.nativeInput.value;
-  }
-  /**
-   * A method to select all in the input
-   */
-  async selectAll() {
-    this.nativeInput.select();
-  }
-  render() {
-    var _a;
-    const classes = index$1.classnames('txt-wrapper', {
-      'txt-wrapper-border': !this.multiline,
-      'txt-standard': this.variant === 'standard',
-      'txt-filled': this.variant === 'filled',
-      'txt-underlined': this.variant === 'underlined',
-      'txt-blank': this.variant === 'blank',
-      'txt-size-standard': this.fontSize === 'standard',
-      'txt-size-sm': this.fontSize === 'sm',
-      'txt-size-md': this.fontSize === 'md',
-      'txt-size-lg': this.fontSize === 'lg',
-      'txt-size-xl': this.fontSize === 'xl',
-      'txt-size-xxl': this.fontSize === 'xxl',
-      disabled: this.disabled,
-      'has-error': this.hasError,
-    });
-    const commonProps = {
-      class: 'txt',
-      'data-testid': 'text-field',
-      name: this.name,
-      ref: (input) => {
-        if (input != null) {
-          this.nativeInput = input;
-        }
-      },
-      autoComplete: this.autoComplete,
-      autoFocus: this.autoFocus,
-      disabled: this.disabled,
-      placeholder: this.placeholder,
-      value: this.value || '',
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown,
-      onInput: this.handleInput,
-      onChange: this.handleChanged,
-      onAnimationStart: (ev) => {
-        if (['onAutoFillStart', 'onAutoFillCancel'].includes(ev.animationName)) {
-          this.inputAutofill.emit({ value: this.nativeInput.value });
-        }
-      },
-    };
-    return (index.h("div", { class: classes }, index.h("div", { class: "txt-slot" }, index.h("slot", { name: "left" })), this.multiline ? (index.h("vertex-auto-resize-textarea", { maxRows: this.maxRows, minRows: this.minRows, initialValue: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '' }, index.h("textarea", Object.assign({}, commonProps, { class: index$1.classnames(commonProps.class, 'txt-textarea', classes), rows: this.minRows })))) : (index.h("input", Object.assign({}, commonProps, { type: this.type }))), index.h("div", { class: "txt-slot" }, index.h("slot", { name: "right" }))));
-  }
-  connectedCallback() {
-    if (this.hostElement != null) {
-      this.nearbyForm = this.hostElement.closest('form');
-    }
-  }
-  get hostElement() { return index.getElement(this); }
-};
-
-exports.TextField = TextField;

package/dist/cjs/toast-bee7f47b.js

@@ -1,90 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const toastCss = ":host{--toast-width:auto;--toast-min-width:17rem;--toast-max-width:25rem;--toast-white-space:normal}.anchor{position:fixed}.bottom-left{left:1rem;bottom:1rem}.bottom{left:50vw;bottom:1rem}.bottom-right{right:1rem;bottom:1rem}.top-left{left:1rem;top:1rem}.top{left:50vw;top:1rem}.top-right{right:1rem;top:1rem}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;padding-left:1rem}.close:hover{color:var(--vertex-ui-neutral-300)}.toast{position:relative;display:flex;align-items:center;width:var(--toast-width);min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:1rem 1rem 1rem 1.5rem;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);background-color:var(--vertex-ui-neutral-800);color:var(--vertex-ui-white);border-radius:4px;white-space:var(--toast-white-space);user-select:none}.toast.hidden{pointer-events:none}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-700);color:white}";
-
-const DEFAULT_TOAST_DURATION = 3000;
-const Toast = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closed = index.createEvent(this, "closed", 7);
-    this.content = undefined;
-    this.placement = 'bottom-left';
-    this.duration = DEFAULT_TOAST_DURATION;
-    this.animated = true;
-    this.open = false;
-    this.type = 'info';
-    this.isOpen = undefined;
-    this.handleClose = this.handleClose.bind(this);
-    this.startCloseTimeout = this.startCloseTimeout.bind(this);
-    this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
-    this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
-  }
-  componentDidLoad() {
-    // This allows the component to render once initially to correctly
-    // place the popover anchor.
-    this.isOpen = this.open;
-    if (this.isOpen) {
-      this.restartCloseTimeout();
-    }
-  }
-  async handleOpenChanged(open) {
-    if (open) {
-      this.restartCloseTimeout();
-      this.isOpen = open;
-    }
-  }
-  render() {
-    return (index.h("vertex-popover", { class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, index.h("div", { slot: "anchor", class: index$1.classnames('anchor', this.placement) }), index.h("div", { class: index$1.classnames('toast', {
-        hidden: !this.isOpen,
-        warn: this.type === 'warn',
-        error: this.type === 'error',
-      }) }, this.content ? index.h("div", { class: "content" }, this.content) : index.h("slot", null), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }), index.h("vertex-icon-button", { class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
-  }
-  handleClose() {
-    this.clearCloseTimeout();
-    this.isOpen = false;
-    this.closed.emit();
-  }
-  startCloseTimeout() {
-    if (this.closeTimeout == null && this.duration > 0) {
-      this.closeTimeout = setTimeout(() => {
-        this.handleClose();
-      }, this.duration);
-    }
-  }
-  clearCloseTimeout() {
-    if (this.closeTimeout != null) {
-      clearTimeout(this.closeTimeout);
-      this.closeTimeout = undefined;
-    }
-  }
-  restartCloseTimeout() {
-    this.clearCloseTimeout();
-    this.startCloseTimeout();
-  }
-  getPopoverPlacement() {
-    switch (this.placement) {
-      case 'bottom-left':
-        return 'top-start';
-      case 'bottom':
-        return 'top';
-      case 'bottom-right':
-        return 'top-end';
-      case 'top-left':
-        return 'bottom-start';
-      case 'top':
-        return 'bottom';
-      case 'top-right':
-        return 'bottom-end';
-    }
-  }
-  static get watchers() { return {
-    "open": ["handleOpenChanged"]
-  }; }
-};
-Toast.style = toastCss;
-
-exports.Toast = Toast;

package/dist/cjs/toggle-a5dde469.js

@@ -1,40 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const toggleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex}.check{border:1px solid var(--vertex-ui-neutral-400);box-shadow:0 0 2px var(--vertex-ui-neutral-400);border-radius:4px;width:1rem;height:1rem;padding:0}.check:not(.disabled){cursor:pointer}.check.disabled{border:1px solid var(--vertex-ui-neutral-200);box-shadow:0 0 2px var(--vertex-ui-neutral-200)}.check:focus-visible:not(.disabled){outline:none;border:1px solid var(--vertex-ui-neutral-600);box-shadow:0 0 2px var(--vertex-ui-neutral-600)}.check:focus-visible:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-800);box-shadow:0 0 2px var(--vertex-ui-blue-800)}.check:hover:not(.disabled){border:1px solid var(--vertex-ui-neutral-500);box-shadow:0 0 2px var(--vertex-ui-neutral-500)}.check.checked:not(.disabled){border:none;box-shadow:none}.check:hover:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-500);box-shadow:0 0 2px var(--vertex-ui-blue-500)}.checked-content{width:100%;height:100%;border-radius:4px}.checked-content.disabled{background-color:var(--vertex-ui-neutral-050);color:var(--vertex-ui-neutral-500)}.checked-content.checked:not(.disabled){background-color:var(--vertex-ui-blue-700);box-shadow:0 0 2px var(--vertex-ui-blue-700);color:var(--vertex-ui-white)}.switch{position:relative;width:2.25rem;height:1.25rem;padding:0;display:inline-block}.switch:not(.disabled){cursor:pointer}.track{position:absolute;top:0;background-color:var(--vertex-ui-neutral-300);width:2rem;padding:0 0.125rem;margin:0.1875rem 0;height:0.875rem;border-radius:7rem}.track.disabled{background-color:var(--vertex-ui-neutral-200)}.track.disabled.checked{background-color:var(--vertex-ui-blue-200)}.handle{position:absolute;top:0;left:0;background-color:var(--vertex-ui-neutral-100);box-shadow:-1px 1px rgba(0, 0, 0, 0.15);width:1.25rem;height:1.25rem;border-radius:100%;display:flex;transition:left 0.25s}.handle.disabled{box-shadow:none}.track:not(.disabled).checked{background-color:var(--vertex-ui-blue-300)}.handle.checked{left:1rem}.handle.checked:not(.disabled){background-color:var(--vertex-ui-blue-600)}.handle.checked.disabled{background-color:var(--vertex-ui-blue-300)}";
-
-const Toggle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.variant = 'check';
-    this.disabled = false;
-    this.checked = false;
-  }
-  render() {
-    const flipValue = () => {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-        this.valueChanged.emit(this.checked);
-      }
-    };
-    return (index.h("button", { class: index$1.classnames(this.variant, {
-        checked: this.checked,
-        disabled: this.disabled,
-      }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (index.h("div", { class: index$1.classnames('checked-content', {
-        checked: this.checked,
-        disabled: this.disabled,
-      }) }, this.checked && index.h("vertex-icon", { name: "check", size: "md" }))), this.variant === 'switch' && (index.h("div", { class: index$1.classnames('track', {
-        disabled: this.disabled,
-        checked: this.checked,
-      }) })), this.variant === 'switch' && (index.h("div", { class: index$1.classnames('handle', {
-        disabled: this.disabled,
-        checked: this.checked,
-      }) }))));
-  }
-};
-Toggle.style = toggleCss;
-
-exports.Toggle = Toggle;