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

package/dist/components/vertex-select.js

@@ -1,202 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, readTask } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './popover.js';
-
-const selectCss = ":host{--select-width:100%;--select-option-white-space:normal;--max-dropdown-height:80vh}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);max-height:var(--max-dropdown-height);overflow-y:auto}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected=\"true\"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
-
-const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
-const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.optionChanged = createEvent(this, "optionChanged", 7);
-    this.removeListeners = [];
-    this.controlled = false;
-    this.value = undefined;
-    this.placeholder = 'Select an option...';
-    this.disabled = false;
-    this.animated = true;
-    this.hideSelected = true;
-    this.open = false;
-    this.position = undefined;
-    this.displayValue = undefined;
-    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
-    this.handleOpen = this.handleOpen.bind(this);
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.getBounds = this.getBounds.bind(this);
-  }
-  componentDidLoad() {
-    var _a;
-    this.resizeObserver = this.resizeObserverFactory(() => this.getBounds());
-    if (this.rootRef != null) {
-      this.resizeObserver.observe(this.rootRef);
-    }
-    this.slotElement =
-      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) || undefined;
-    if (this.value != null) {
-      this.handleUpdateValue(this.value);
-    }
-    else {
-      this.handleUpdateDisplayValue();
-    }
-  }
-  connectedCallback() {
-    window.addEventListener('resize', this.getBounds);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    window.removeEventListener('resize', this.getBounds);
-    this.removeOptionListeners();
-  }
-  handleUpdateValue(value) {
-    if (value != null &&
-      (value !== this.internalValue || this.displayValue == null)) {
-      this.internalValue = value;
-      this.updateDisplayValue(value);
-    }
-    this.controlled = value != null;
-  }
-  handleUpdateDisplayValue() {
-    var _a;
-    this.clearSelectedOptionFlag();
-    if (this.hideSelected) {
-      (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
-    }
-  }
-  render() {
-    var _a;
-    return (h("div", { class: classnames('root', {
-        disabled: this.disabled,
-      }), ref: (element) => {
-        this.rootRef = element;
-      }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classnames('target', {
-        hidden: this.open,
-        disabled: this.disabled,
-      }) }, h("div", { class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classnames('options', {
-        hidden: !this.open,
-        visible: this.open,
-        animated: this.animated,
-      }), style: {
-        minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
-      } }, h("div", { class: classnames('selected-option', {
-        disabled: this.disabled,
-      }), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
-  }
-  handleOpen() {
-    var _a, _b;
-    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => {
-      const listener = () => {
-        var _a;
-        const updatedValue = e.getAttribute('data-value') || e.innerHTML;
-        const valueChanged = updatedValue !== this.internalValue;
-        this.handleDismiss();
-        if (!this.controlled) {
-          this.displayValue = e.innerHTML;
-          this.internalValue = updatedValue;
-        }
-        if (valueChanged) {
-          (_a = this.optionChanged) === null || _a === void 0 ? void 0 : _a.emit(updatedValue);
-        }
-      };
-      e.addEventListener('click', listener);
-      this.removeListeners = [
-        ...this.removeListeners,
-        () => e.removeEventListener('click', listener),
-      ];
-    });
-    this.open = true;
-  }
-  handleDismiss() {
-    this.removeOptionListeners();
-    this.open = false;
-  }
-  updateDisplayValue(value) {
-    var _a, _b;
-    const option = (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
-    this.displayValue = option === null || option === void 0 ? void 0 : option.innerHTML;
-  }
-  removeOptionListeners() {
-    this.removeListeners.forEach((l) => l());
-    this.removeListeners = [];
-  }
-  clearSelectedOptionFlag() {
-    var _a, _b;
-    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
-  }
-  getSelectedOption() {
-    var _a, _b, _c;
-    const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
-    return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
-  }
-  getBounds() {
-    if (this.getBoundsTimeout != null) {
-      clearTimeout(this.getBoundsTimeout);
-      this.getBoundsTimeout = undefined;
-    }
-    this.getBoundsTimeout = setTimeout(() => {
-      this.getBoundsTimeout = undefined;
-      readTask(() => {
-        var _a;
-        const bounds = (_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (bounds != null) {
-          const position = {
-            x: bounds.x,
-            y: bounds.y,
-          };
-          this.position = position;
-          this.width = bounds.width;
-        }
-      });
-    }, GET_BOUNDS_DEBOUNCE_THRESHOLD);
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "value": ["handleUpdateValue"],
-    "displayValue": ["handleUpdateDisplayValue"],
-    "hideSelected": ["handleUpdateDisplayValue"],
-    "placeholder": ["handleUpdateDisplayValue"]
-  }; }
-  static get style() { return selectCss; }
-}, [1, "vertex-select", {
-    "value": [513],
-    "placeholder": [513],
-    "disabled": [516],
-    "animated": [4],
-    "hideSelected": [4, "hide-selected"],
-    "resizeObserverFactory": [16],
-    "open": [32],
-    "position": [32],
-    "displayValue": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-select", "vertex-icon", "vertex-popover"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Select);
-      }
-      break;
-    case "vertex-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexSelect = Select;
-const defineCustomElement = defineCustomElement$1;
-
-export { Select as S, VertexSelect, defineCustomElement };
+import{S as o,d as r}from"./p-DjrAIJhB.js";const s=o,p=r;export{s as VertexSelect,p as defineCustomElement}

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

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

package/dist/components/vertex-slider.js

@@ -1,81 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { b as blurElement } from './dom.js';
-import { d as defineCustomElement$3 } from './popover.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const sliderCss = ":host{display:flex;--vertex-slider-track-color:var(--vertex-ui-neutral-400);--vertex-slider-thumb-color:var(--vertex-ui-blue-700)}:host([size=\"sm\"]){height:12px}:host([size=\"md\"]){height:14px}:host([size=\"lg\"]){height:16px}.input{-webkit-appearance:none;width:100%;height:100%;background:transparent;margin:0}.input:not(.disabled){cursor:pointer}.input.sm{height:12px}.input.md{height:14px}.input.lg{height:16px}.input.disabled{opacity:0.5}.tooltip{width:100%}.input::-webkit-slider-runnable-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-moz-range-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-ms-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input:not(.disabled)::-webkit-slider-runnable-track{cursor:pointer}.input:not(.disabled)::-moz-range-track{cursor:pointer}.input:not(.disabled)::-ms-track{cursor:pointer}.input.sm::-webkit-slider-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-moz-range-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-ms-thumb{height:12px;width:12px;margin-top:-5px}.input.md::-webkit-slider-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-moz-range-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-ms-thumb{height:14px;width:14px;margin-top:-6px}.input.lg::-webkit-slider-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-moz-range-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-ms-thumb{height:16px;width:16px;margin-top:-7px}.input::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-moz-range-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-ms-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input:not(.disabled)::-webkit-slider-thumb{cursor:grab}.input:not(.disabled)::-moz-range-thumb{cursor:grab}.input:not(.disabled)::-ms-thumb{cursor:grab}.input::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-moz-range-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-ms-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}";
-
-const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChange = createEvent(this, "valueChange", 7);
-    this.valueInput = createEvent(this, "valueInput", 7);
-    this.handleChange = (event) => {
-      this.updateValueFromEvent(event);
-      this.valueChange.emit({ value: this.value, nativeEvent: event });
-    };
-    this.handleInput = (event) => {
-      this.updateValueFromEvent(event);
-      this.valueInput.emit({ value: this.value, nativeEvent: event });
-    };
-    this.min = 0;
-    this.max = 100;
-    this.valueLabelDisplay = 'off';
-    this.step = undefined;
-    this.size = 'sm';
-    this.value = 0;
-    this.disabled = false;
-  }
-  render() {
-    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classnames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput, onPointerUp: () => {
-        // Blur the slider on pointerup to prevent an issue where pressing
-        // any key on the keyboard would result in a focus state.
-        blurElement(this.hostEl);
-      } })));
-  }
-  updateValueFromEvent(event) {
-    this.value = event.target.valueAsNumber;
-  }
-  get hostEl() { return this; }
-  static get style() { return sliderCss; }
-}, [1, "vertex-slider", {
-    "min": [2],
-    "max": [2],
-    "valueLabelDisplay": [1, "value-label-display"],
-    "step": [8],
-    "size": [1],
-    "value": [1026],
-    "disabled": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-slider", "vertex-popover", "vertex-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-slider":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Slider);
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexSlider = Slider;
-const defineCustomElement = defineCustomElement$1;
-
-export { Slider as S, VertexSlider, defineCustomElement };
+import{S as o,d as s}from"./p-BZ5oF5Ci.js";const p=o,r=s;export{p as VertexSlider,r as defineCustomElement}

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

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

package/dist/components/vertex-spinner.js

@@ -1,49 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-
-const spinnerCss = ".spinner{position:relative;display:flex}.spinner div{position:absolute;display:block;animation:spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-radius:50%;border-style:solid;box-sizing:border-box}.spinner div:nth-child(1){animation-delay:-0.45s}.spinner div:nth-child(2){animation-delay:-0.3s}.spinner div:nth-child(3){animation-delay:-0.15s}.spinner.xs{height:16px;width:16px}.spinner.xs div{border-width:var(--border-width, 1px);height:16px;width:16px;margin:0}.spinner.sm{height:23px;width:23px}.spinner.sm div{border-width:var(--border-width, 3px);height:18px;width:18px;margin:2px}.spinner.md{height:32px;width:32px}.spinner.md div{border-width:var(--border-width, 3px);height:32px;width:32px;margin:2px}.spinner.lg{height:64px;width:64px}.spinner.lg div{border-width:var(--border-width, 6px);height:51px;width:51px;margin:6px}.spinner.blue div{border-color:var(--vertex-ui-blue-700) transparent transparent transparent}.spinner.white div{border-color:var(--vertex-ui-white) transparent transparent transparent}.spinner.grey div{border-color:var(--vertex-ui-neutral-700) transparent transparent transparent}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
-
-const Spinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.color = 'blue';
-    this.size = 'lg';
-  }
-  render() {
-    const classes = classnames('spinner', {
-      blue: this.color === 'blue',
-      white: this.color === 'white',
-      grey: this.color === 'grey',
-      xs: this.size === 'xs',
-      sm: this.size === 'sm',
-      md: this.size === 'md',
-      lg: this.size === 'lg',
-    });
-    return (h("div", { class: classes }, h("div", null), h("div", null), h("div", null), h("div", null)));
-  }
-  static get style() { return spinnerCss; }
-}, [1, "vertex-spinner", {
-    "color": [1],
-    "size": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Spinner);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexSpinner = Spinner;
-const defineCustomElement = defineCustomElement$1;
-
-export { Spinner as S, VertexSpinner, defineCustomElement };
+import{S as o,d as p}from"./p-D_mp9WMh.js";const s=o,m=p;export{s as VertexSpinner,m as defineCustomElement}

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

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

package/dist/components/vertex-tab.js

@@ -1,46 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tabClick = createEvent(this, "tabClick", 7);
-    this.handleClick = () => {
-      this.tabClick.emit(this.label);
-    };
-    this.label = undefined;
-    this.active = false;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classnames('content', {
-        active: this.active,
-      }) }, h("slot", null))));
-  }
-  static get style() { return tabCss; }
-}, [1, "vertex-tab", {
-    "label": [1],
-    "active": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tab);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexTab = Tab;
-const defineCustomElement = defineCustomElement$1;
-
-export { Tab as T, VertexTab, defineCustomElement };
+import{T as o,d as s}from"./p-ILu24ZUX.js";const p=o,r=s;export{p as VertexTab,r as defineCustomElement}

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

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

package/dist/components/vertex-tabs.js

@@ -1,133 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { r as readDOM, g as getBoundingClientRect } from './dom.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selectedTabChanged = 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) {
-      readDOM(() => {
-        const hostElBounds = getBoundingClientRect(this.hostEl);
-        const activeBounds = getBoundingClientRect(button);
-        this.activeBounds = {
-          x: activeBounds.x - hostElBounds.x,
-          width: activeBounds.width,
-        };
-        if (this.activeBounds.width !== 0) {
-          this.indicatorInitialized = true;
-        }
-      });
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "wrapper" }, h("div", { class: "labels" }, this.labels.map((label) => (h("button", { class: classnames('label', {
-        active: this.active === label,
-      }), "data-label": label, ref: (el) => {
-        if (this.active === label) {
-          this.activeButtonEl = el;
-        }
-      }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
-        left: `${this.activeBounds.x}px`,
-        width: `${this.activeBounds.width}px`,
-      } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
-  }
-  get hostEl() { return this; }
-  static get watchers() { return {
-    "activeButtonEl": ["handleActiveButtonChange"]
-  }; }
-  static get style() { return tabsCss; }
-}, [1, "vertex-tabs", {
-    "active": [1025],
-    "labels": [32],
-    "activeBounds": [32],
-    "activeButtonEl": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-tabs"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tabs);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexTabs = Tabs;
-const defineCustomElement = defineCustomElement$1;
-
-export { Tabs as T, VertexTabs, defineCustomElement };
+import{T as o,d as s}from"./p-DMLgHhJc.js";const p=o,r=s;export{p as VertexTabs,r as defineCustomElement}

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

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

package/dist/components/vertex-textfield.js

@@ -1,6 +1 @@
-import { T as TextField, d as defineCustomElement$1 } from './text-field.js';
-
-const VertexTextfield = TextField;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexTextfield, defineCustomElement };
+import{T as o,d as s}from"./p-6qoO8Yf3.js";const p=o,r=s;export{p as VertexTextfield,r as defineCustomElement}

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

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